add telemtry charts

src/components/buttons/gradientButton/GradientButton.tsx

@@ -1,17 +1,22 @@
+import { Router } from 'next/router'
 import React from 'react'
 import { GradientButtonView } from './GradientButtonView'
+import { useRouter } from 'next/router'
+
 
 interface GradientButtonInterface {
   title: string,
   description: string
   orange?: undefined | null | boolean,
   purple?: undefined | null | boolean,
-  green?: undefined | null | boolean
+  green?: undefined | null | boolean,
+  link?: any,
 }
 
-export default function GradientButton({ title, description, orange, purple, green }: GradientButtonInterface) {
+export default function GradientButton({ title, description, orange, purple, green, link }: GradientButtonInterface) {
+  const router = useRouter()
   return (
-    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
+    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : null} >
       <p>{title}</p>
       <p>{description}</p>
     </GradientButtonView>

src/components/graph/LineBarChart.tsx

@@ -63,10 +63,11 @@ interface LineBarChartInterface {
   data1: any,
   data2: any,
   data3: any,
+  red: any
   label: any
 }
 
-export function LineBarChart({ title, subtitle, data1, data2, data3, label }: LineBarChartInterface) {
+export function LineBarChart({ title, subtitle, data1, data2, data3, label, red }: LineBarChartInterface) {
   const chartRef = useRef<ChartJS>(null);
 
   const labels = label
@@ -77,11 +78,19 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label }: Li
       {
         type: 'line' as const,
         label: 'Dataset 1',
-        borderColor: '#0c9200',
+        borderColor: red? '#f00' : '#0c9200',
         borderWidth: 2,
         fill: false,
         data: data1.map(value => value),
       },
+      // {
+      //   type: 'line' as const,
+      //   label: 'Dataset 1',
+      //   borderColor: '#f00',
+      //   borderWidth: 2,
+      //   fill: false,
+      //   data: data4.map(value => value),
+      // },
       {
         type: 'bar' as const,
         label: 'Dataset 2',

src/pages/chartTelemetry.tsx

@@ -1,7 +1,28 @@
 import React from 'react'
+import { SingleBar } from '../components/graph/SingleBar'
+import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
+import { useRouter } from 'next/router'
+
+import { FatorPotencia } from '../services/fatorPotencia'
+import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar'
+import { ConsumoDecretizadoLine } from '../services/consumoDiscretizadoLine'
+import LineChart from '../components/graph/LineChart'
+import { LineBarChart } from '../components/graph/LineBarChart'
+import Header from '../components/header/Header'
+import PageTitle from '../components/pageTitle/PageTitle'
 
 export default function chartTelemetry() {
+
   return (
-    <div>chartTelemetry</div>
+    <ChatTelemetryView>
+      <Header name='' />
+      <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
+      <section>
+        <LineChart title='fator potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} label={FatorPotencia.label1} />
+        <LineChart title='fator potencia' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} label={ConsumoDecretizadoLine.label1} />
+        <SingleBar title='Consumo decretizado' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} />
+        <LineBarChart data1={ConsumoDecretizadoLine.data1} data2={ConsumoDecretizadoLine.data} data3={[]} label={ConsumoDecretizadoLine.label1} title='evolução pld' subtitle='' red/>
+      </section>
+    </ChatTelemetryView>
   )
 }

src/pages/telemetria.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useRouter } from 'next/router'
+
 import Banner from '../components/banner/Banner';
 import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
 import GradientButton from '../components/buttons/gradientButton/GradientButton'
@@ -6,11 +8,13 @@ import Header from '../components/header/Header';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Link from 'next/link';
 
 
 
 
 export default function Telemetria() {
+  const router = useRouter()
 
   const [age, setAge] = React.useState('');
 
@@ -18,8 +22,6 @@ export default function Telemetria() {
     setAge(event.target.value);
   };
 
-
-
   return(
 
     <TelemetriaView>
@@ -100,9 +102,9 @@ export default function Telemetria() {
       </FormControl>
 
         <Buttons>
-        <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange />
+          <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
-        <GradientButton title='DOWNLOADS' description='Gerar gráficos com os dados selecionados' purple />
+          <GradientButton title='DOWNLOADS' description='Gerar gráficos com os dados selecionados' purple />
-        <GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
+          <GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
         </Buttons>
     </TelemetriaView>
   )

src/services/consumoDiscretizadoBar.js

@@ -0,0 +1,12 @@
+export const ConsumoDecretizadoBar = {
+  data :
+  [1, 3, 4, 7, 10, 14, 17, 20, 23, 25, 28, 31, 34, 37, 40, 43, 46, 49, 53, 56, 58, 60, 63, 66,
+  69, 72, 76, 79, 82, 86, 90, 93, 97, 103, 106, 109, 112, 116, 120, 124, 127, 130, 134, 138, 142, 145, 148, 152,
+  155, 158, 161, 164, 168, 172, 176, 200, 203, 206, 209, 213, 217, 221, 223, 226, 229, 231, 234, 238, 240, 244, 248
+  ],
+
+  label:
+  ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22',
+  '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22',
+  '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22']
+}

src/services/consumoDiscretizadoLine.js

@@ -0,0 +1,12 @@
+export const ConsumoDecretizadoLine = {
+  data: [100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
+    100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
+    100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
+    100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,],
+  data1: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
+    600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
+    600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,],
+  label1:['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0',
+  '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0',
+  '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', ]
+}

src/services/fatorPotencia.js

@@ -0,0 +1,7 @@
+export const FatorPotencia = {
+  data :  [1.00, 1.00, 1.00, -0.96, -0.96, 0.97, 0.98, 0.95, 0.94, 0.98, 0.95, 0.95, 0.98, 1.01, 1.05, 1.00, 1.00, 0.95, 0.97, 0.97, 0.97, 0.97, 0.97, 0.97, 0.98, 1.00, 0.97, 0.97, 0.97, 0.97, 0.97, 0.96, 0.95, 0.94, 0.95, 0.95,],
+
+  data4 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90],
+
+  label1: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
+}

src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts

@@ -1,3 +1,19 @@
 import styled from "styled-components";
 
-export const ChatTelemetryView = styled.main``
+export const ChatTelemetryView = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  width: 100%;
+
+  section {
+    display: grid;
+
+    grid-template-columns: 50% 50%;
+
+    width: 100%;
+  }
+`