Integração Componente gráfico do Indicador

src/componets/IndicadorCardGraph.tsx

@@ -1,17 +1,53 @@
+import Api from "../Api";
 import LineGraph from "./LineGraph";
+import { useEffect, useState } from 'react';
 
 type IndicadorCardGraphProps = {
  indicador: {
+ id: string,
  nome: string,
- meses: string[],
- meta: number[],
- supermeta: number[],
- desafio: number[]
+ //eh recebido todas informacoes de indicador
+ //mas so essas sao usada
  }
 }
 
+//o tipo recebido é esse:
+/*
+export interface indicatorType {
+ id: string
+ nome: string
+ unidade_medida: string
+ descricao: string
+ data_deadline: Date
+ idGestor: string
+ }
+*/
+
 export default function IndicadorCardGraph({ indicador }: IndicadorCardGraphProps) {
+
+ const [cat, setCat] = useState<[][]>([]);
+
+ useEffect(() => {
+
+ try{
+ Api.get('metas-mes-indicador/'+indicador.id).then(res =>{
+ const aux = res.data;
+ setCat(aux); 
+
+ })
+ } catch (error) {
+ console.log(error)
+ }
+
+ }, [])
+
+
+
+
+
+
  return (
+
  <button
  onClick={() => { console.log('clicou') }}
  className='border rounded-10 bg-white border-cinza-100 h-[23.125rem] w-[29.75rem] hover:border-[#7D55EF] hover:border-2'>
@@ -21,7 +57,7 @@ export default function IndicadorCardGraph({ indicador }: IndicadorCardGraphProp
  {indicador.nome}
  </h4>
  <div className='mb-4'>
- <LineGraph indicador={indicador} />
+ <LineGraph mmsdInd={cat} />
  </div>
  </div>
  </button>

src/componets/LineGraph.tsx

@@ -1,39 +1,47 @@
 import Plot from 'react-plotly.js';
-//import { metasMesIndicadorType } from '../types';
+
 
 
 type LineGraphProps = {
- indicador: {
- meses: string[],
- meta: number[],
- supermeta: number[],
- desafio: number[]
+ mmsdInd: [][]
+ // mmsdInd significa Meses, Mestas, Super-metas, Desafios por Indicadores
+ /*
+ mmsdInd: {
+ esses valores sao referentes a um indicador
+ mmsdInd[0] = mese_ano: string[], todos o meses_anos
+ mmsdInd[1] = meta: number[], valor de metas batidas de cada mes
+ mmsdInd[2] = supermeta: number[], valor de super-metas batidas de cada mes
+ mmsdInd[3] = desafio: number[] valor de metas batidas de cada mes
  }
+ */
 }
 
-export default function LineGraph({ indicador }: LineGraphProps) {
+export default function LineGraph({ mmsdInd }: LineGraphProps) {
+
+ //console.log(mmsdInd.desafio)
+
  return (
  <Plot
  data={[
  {
- x: indicador.meses,
- y: indicador.meta,
+ x: mmsdInd[0], //mese_ano
+ y: mmsdInd[1], //metas
  type: 'scatter',
  mode: 'lines+markers',
  marker: { color: '#E51110' },
  name: "Meta",
  },
  {
- x: indicador.meses,
- y: indicador.supermeta,
+ x: mmsdInd[0], //mese_ano
+ y: mmsdInd[2], //super-metas
  type: 'scatter',
  mode: 'lines+markers',
  marker: { color: '#7D55EF' },
  name: "Supermeta",
  },
  {
- x: indicador.meses,
- y: indicador.desafio,
+ x: mmsdInd[0], //mese_ano
+ y: mmsdInd[3], //desafios
  type: 'scatter',
  mode: 'lines+markers',
  marker: { color: '#5EE0F1' },

src/types.tsx

@@ -38,4 +38,16 @@ export interface collaboratorType {
  totalColabBateramDesafio: number;
  totalColab: number;
  idIndicador: string;
- }
+ }
+
+ export interface colaboradorIndicadorType {
+ mes_ano: string;
+ meta: number;
+ superMeta: number;
+ desafio: number;
+ peso: number;
+ resultado: number;
+ notaIndicador: number;
+ idColaborador: string;
+ idIndicador: string;
+}