resolv conflicts

src/components/graph/DemRegXDemConChart.tsx

@@ -0,0 +1,154 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  Chart as ChartJS,
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip,
+} from 'chart.js';
+import { Chart } from 'react-chartjs-2';
+import faker from 'faker';
+import { ChartView } from './ChartView';
+import ChartTitle from './ChartTitle';
+import pattern from 'patternomaly'
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip
+);
+
+// function triggerTooltip(chart: ChartJS | null) {
+//   const tooltip = chart?.tooltip;
+
+//   if (!tooltip) {
+//     return;
+//   }
+
+//   if (tooltip.getActiveElements().length > 0) {
+//     tooltip.setActiveElements([], { x: 0, y: 0 });
+//   } else {
+//     const { chartArea } = chart;
+
+//     tooltip.setActiveElements(
+//       [
+//         {
+//           datasetIndex: 0,
+//           index: 2,
+//         },
+//         {
+//           datasetIndex: 1,
+//           index: 2,
+//         },
+//       ],
+//       {
+//         x: (chartArea.left + chartArea.right) / 2,
+//         y: (chartArea.top + chartArea.bottom) / 2,
+//       }
+//     );
+//   }
+
+//   chart.update();
+// }
+
+interface LineBarChartInterface {
+  title: string,
+  subtitle: string,
+  data1: any,
+  data2?: any,
+  red?: any,
+  label: any,
+  dataset1?: string,
+  dataset2?: string,
+  dataset3?: string,
+  barLabel?: boolean | undefined,
+  hashurado?: boolean | undefined,
+  reais?: boolean | undefined
+}
+
+export function DemRegXDemConChart({
+    title,
+    subtitle,
+    data1,
+    data2,
+    label,
+    red,
+    dataset1,
+    dataset2,
+    dataset3,
+    barLabel
+  }: LineBarChartInterface) {
+  const chartRef = useRef<ChartJS>(null);
+
+  const currentTime = new Date();
+
+  const labels = label
+
+  const options: any = {
+    responsive: true,
+    plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        // backgroundColor: '#255488',
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start",
+        font: {
+          size: 12
+        }
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: true,
+        text: '',
+      },
+    },
+  };
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        type: 'line' as const,
+        label: 'Demanda Contratada',
+        borderColor: red?
+        '#f00' : '#0c9200',
+        borderWidth: 2,
+        fill: false,
+        data: data1.map(value => value.dem_cont),
+      },
+      {
+        type: 'bar' as const,
+        label: 'Demanda Registrada',
+        backgroundColor: '#255488',
+        data: data2.map(value => value.dem_reg),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    const chart = chartRef.current;
+
+    // triggerTooltip(chart);
+  }, []);
+
+  return (
+    <ChartView>
+      <ChartTitle title={title} subtitle={subtitle}/>
+      <div>
+        <Chart ref={chartRef} type='bar' options={options} data={data} />
+      </div>
+    </ChartView>
+  )
+}

src/components/graph/DiscretizedConsumptionChart.tsx

@@ -0,0 +1,93 @@
+import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { draw, generate } from 'patternomaly'
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+
+import ChartTitle from './ChartTitle';
+import { ChartView } from './ChartView';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+interface SingleBarInterface{
+  title: string,
+  subtitle: string,
+  dataProps: any,
+  label: Array<string>,
+  dataset: string,
+  barLabel?: boolean | undefined,
+  year?: boolean | undefined,
+  month?: boolean | undefined,
+  dataset1?: string,
+}
+
+export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) {
+  const currentTime = new Date();
+
+  const options: object = {
+    responsive: true,
+    series: {
+      downsample: {
+        threshold: 1000
+      }
+    },
+    plugins: {
+      datalabels: {
+        formatter: (value, ctx) => {
+          let sum = 0;
+          const dataArr = ctx.chart.data.datasets[0].data;
+          dataArr.map(data => {
+              sum += data;
+          });
+          const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
+          const result = `${parseFloat(value).toFixed(0)}\n    ${percentage}`
+
+          return value==null? null : result
+        },
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        anchor: "end",
+        offset: -40,
+        align: "start",
+        font: {
+          size: 10
+        }
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: false,
+        text: '',
+      },
+    },
+  };
+
+  const labels = label;
+
+  const data: any = {
+    labels,
+    datasets: [
+      {
+        label: dataset,
+        data: dataProps.map(value => value.consumo),
+        backgroundColor: '#255488'
+      },
+    ],
+  }
+
+  return (
+    <ChartView>
+      <ChartTitle title={title} subtitle={subtitle} />
+      <Bar options={options} data={data} />
+    </ChartView>
+  )
+}

src/components/graph/DiscretizedConsumptionChartLine.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react'
+
+import { Bar, Line } from 'react-chartjs-2';
+
+import { ChartView } from './ChartView';
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ScatterDataPoint,
+} from 'chart.js';
+import ChartTitle from './ChartTitle';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+
+interface ChartInterface {
+  title: string,
+  subtitle: string,
+  data1: any,
+  data2?: any,
+  data3?: any,
+  data4?: any,
+  label: any,
+  dataset1?: string,
+  dataset2?: string,
+  dataset3?: string,
+  dataset4?: string,
+  barLabel?: boolean | undefined
+}
+
+export default function DiscretizedConsumptionChartLine({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
+  const options: any = {
+    responsive: true,
+    plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start",
+        font: {
+          size: 12
+        }
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: true,
+        text: '',
+      },
+    },
+  };
+
+  const labels = label;
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        label: dataset1,
+        data: data1.map(value => value.reativa),
+        borderColor: 'rgb(53, 162, 235)',
+        backgroundColor: 'rgba(53, 162, 235, 0)',
+      },
+    ],
+  }
+
+  return (
+    <ChartView>
+      <ChartTitle title={title} subtitle={subtitle} />
+      <Line options={options} data={data} />
+    </ChartView>
+  )
+}

src/components/graph/SingleBar.tsx

@@ -27,9 +27,6 @@ interface SingleBarInterface{
   year?: boolean | undefined,
   month?: boolean | undefined,
   dataset1?: string,
-
-
-
 }
 
 export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
@@ -85,7 +82,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
           return parseFloat(value.economia_acumulada).toFixed(2)
         }),
         backgroundColor: (value, ctx) => {
-          return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
+          return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : '#C2d5fb'
         },
       },
 

src/components/graph/fatorPotenciaChart.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+
+import { Bar, Line } from 'react-chartjs-2';
+
+import { ChartView } from './ChartView';
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ScatterDataPoint,
+} from 'chart.js';
+import ChartTitle from './ChartTitle';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+
+interface ChartInterface {
+  title: string,
+  subtitle: string,
+  data1: any,
+  data2?: any,
+  data3?: any,
+  data4?: any,
+  label: any,
+  dataset1?: string,
+  dataset2?: string,
+  dataset3?: string,
+  dataset4?: string,
+  barLabel?: boolean | undefined
+}
+
+export default function FatorPotenciaChart({ title, subtitle, data1, data2, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
+  const options: any = {
+    responsive: true,
+    plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start",
+        font: {
+          size: 12
+        }
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: true,
+        text: '',
+      },
+    },
+  };
+
+  const labels = label;
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        label: dataset1? dataset1 : 'Dataset 1',
+        data: data1.map(value => value.fp),
+        borderColor: 'rgb(53, 162, 235)',
+        backgroundColor: 'rgba(53, 162, 235, 0)',
+      },
+      {
+        label: dataset2? dataset2 : '',
+        data: data2.map(value => value.f_ref),
+        borderColor: 'rgb(0, 0, 0)' ,
+        backgroundColor: 'rgba(255, 145, 0, 0)' ,
+      },
+    ],
+  }
+
+  return (
+    <ChartView>
+      <ChartTitle title={title} subtitle={subtitle} />
+      <Line options={options} data={data} />
+    </ChartView>
+  )
+}

src/components/sidebar/Sidebar.tsx

@@ -67,7 +67,7 @@ export default function Sidebar() {
             <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
             <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
             <Link href='/administrative/notification'><li className={router.pathname=='/administrative/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
-            <Link href='/administrative/industryInfo'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
+            <Link href='/administrative/industryInfo'><li className={router.pathname=='/administrative/industryInfo'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
             <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
             <Modal
             open={open}
@@ -79,7 +79,7 @@ export default function Sidebar() {
               <Typography id="modal-modal-title" variant="h6" component="h2">
                 Deseja realmente sair ?
               </Typography>
-              <Link href='/'><Button variant="contained"  sx={{mt:5}}>Sim</Button></Link>
+              <Link href='/'><Button variant="contained" sx={{mt:5}} onClick={() => signOut()}>Sim</Button></Link>
               <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
             </Box>
           </Modal>
@@ -90,6 +90,7 @@ export default function Sidebar() {
           </aside>
         </SidebarView>
       </RenderIf>
+
       <RenderIf isTrue={role === '2'}>
         <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
           <div className='hamburger' onClick={() => setViewModal(!viewModal)} >

src/contexts/AuthContext.tsx

@@ -31,7 +31,17 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
 
   const isAuthenticated = !!user
 
+  function signOut() {
+    destroyCookie(null, 'user-client_id')
+    destroyCookie(null, 'user-name')
+    destroyCookie(null, 'user-role')
+    destroyCookie(null, 'user-id')
+    destroyCookie(null, '@smartAuth-token')
+  }
+
   async function signIn({email, password}: SignInData) {
+    await signOut()
+
     const { token, user, exception }: any = await signInRequest({
       email,
       password
@@ -51,6 +61,9 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
     if (user.name)
       setCookie(undefined, 'user-name', user.name)
 
+    if (user.client_id)
+      setCookie(undefined, 'user-client_id', user.client_id)
+
     api.defaults.headers['Authorization'] = `Bearer ${token}`
 
     if (!exception) {
@@ -65,13 +78,6 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
     }
   }
 
-  function signOut() {
-    destroyCookie(null, 'user-name')
-    destroyCookie(null, 'user-role')
-    destroyCookie(null, 'user-id')
-    destroyCookie(null, '@smartAuth-token')
-  }
-
   return (
     <AuthContext.Provider value={{ user, isAuthenticated, signIn, signOut }}>
       {children}

src/pages/accumulatedSavings.tsx

@@ -22,7 +22,12 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
       <PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal (Valores em R$ mil)' />
       <section>
         <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
-          dataset1='Estimada' dataProps={graphData}
+          dataset1='Estimada' dataProps={graphData.sort((a, b) => {
+            if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+            if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+            return 0
+          })}
           label={years} barLabel  month/>
       </section>
     </AccumulatedSavingsView>

src/pages/administrative/faq/index.tsx

@@ -66,7 +66,6 @@ export default function Sidebar({faqData, userName} : any ) {
     if (reason === 'clickaway') {
       return;
     }
-
     setOpenSnackError(false);
     setOpenSnackSuccess(false);
   };
@@ -76,14 +75,13 @@ export default function Sidebar({faqData, userName} : any ) {
     if (reason === 'clickaway') {
       return;
     }
-
     setOpenSnackErrorDelete(false);
     setOpenSnackSuccessDelete(false);
   };
 
   async function handleDeleteNotification(id: any) {
     await id.map((value) => {
-      api.delete(`/faq/${value.id}`).then(res => {
+      api.delete(`/faq/${value}`).then(res => {
         setOpenSnackSuccessDelete(true)
         setOpenModalInativar(false)
         window.location.reload()

src/pages/administrative/general.tsx

@@ -1,13 +1,8 @@
-import FormControl from '@mui/material/FormControl';
+import { SelectChangeEvent } from '@mui/material/Select';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import TextField from '@mui/material/TextField';
 import { Editor } from '@tinymce/tinymce-react'
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
 import React, { useRef, useState } from 'react'
-
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import Header from '../../components/header/Header';
 import PageTitle from '../../components/pageTitle/PageTitle';
@@ -24,9 +19,11 @@ export default function index({userName}: any) {
       console.log(editorRef.current.getContent());
     }
   };
+
   const handleChange = (event: SelectChangeEvent) => {
     setText(event.target.value);
   };
+
   async function handleRegisterAboutUs() {
     await api.post('/aboutUs', {
       about: editorRef.current.value
@@ -39,8 +36,10 @@ export default function index({userName}: any) {
     <GeneralView>
       <Header name={userName} admin/>
       <PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
+      <div style={{width: '100%', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', marginTop: '30px', marginBottom: '10px'}}>
+        <BasicButton title='Salvar Texto' onClick={() => handleRegisterAboutUs()}/>
+      </div>
 
-      <BasicButton onClick={() => handleRegisterAboutUs(editorRef)} title='Enviar'/>
       <br />
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}

src/pages/chartTelemetry.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { SingleBar } from '../components/graph/SingleBar'
 import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
-import { useRouter } from 'next/router'
+// import router, { useRouter } from 'next/router'
 
 import { FatorPotencia } from '../services/fatorPotencia'
 import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar'
@@ -18,6 +18,12 @@ import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
 import { GetServerSideProps } from 'next'
 import { parseCookies } from 'nookies'
+import getAPIClient from '../services/ssrApi'
+import { api } from '../services/api'
+import FatorPotenciaChart from '../components/graph/fatorPotenciaChart'
+import { DemRegXDemConChart } from '../components/graph/demRegXDemConChart'
+import { DiscretizedConsumptionChart } from '../components/graph/DiscretizedConsumptionChart'
+import DiscretizedConsumptionChartLine from '../components/graph/DiscretizedConsumptionChartLine'
 
 const style = {
   display: 'flex',
@@ -45,6 +51,65 @@ export default function chartTelemetry({userName}) {
   const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
   const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
 
+  const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
+  const [demRegXDemCon, setDemRegXDemCon] = useState([]);
+  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
+  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
+
+  const { ['user-cod_client']: cod_client } = parseCookies()
+
+  async function getChartsData() {
+    await api.post('/telemetry/powerFactor', {
+      "filters": [
+        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+      ]
+    }).then(res => {
+      setFatorPotenciaData(res.data.data)
+    }).catch(res => {
+      console.log(res)
+    })
+
+    await api.post('/telemetry/demand', {
+      "filters": [
+        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+      ]
+    }).then(res => {
+      setDemRegXDemCon(res.data.data)
+    }).catch(res => {
+      console.log(res)
+    })
+
+    await api.post('/telemetry/discretization', {
+      "type": "5_min",
+      "filters": [
+          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+          {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+        ]
+    }).then(res => {
+      setDiscretizedConsumptionData(res.data.data)
+    }).catch(res => {
+      console.log(res)
+    })
+
+    await api.post('/telemetry/discretization', {
+      "type": "5_min",
+      "filters": [
+          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+          {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+        ]
+    }).then(res => {
+      setDiscretizedConsumptionDataReativa(res.data.data)
+    }).catch(res => {
+      console.log(res)
+    })
+  }
+
+  useEffect(() => {
+    getChartsData()
+  }, [])
+
   return (
     <ChatTelemetryView>
       <Head>
@@ -54,7 +119,7 @@ export default function chartTelemetry({userName}) {
       <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
       <section className='chartContainer'>
         <div onClick={() => setOpenFatorPotencia(true)}>
-          <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
+          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => value.hora)} />
         </div>
         <Modal
           open={openFatorPotencia}
@@ -63,12 +128,12 @@ export default function chartTelemetry({userName}) {
           aria-describedby="modal-modal-description"
         >
           <Box sx={style}>
-            <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
+          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
           </Box>
         </Modal>
 
         <div onClick={() => setOpenConsumoDiscretizado1(true)}>
-          <LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
+          <DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
         </div>
         <Modal
           open={openConsumoDiscretizado1}
@@ -77,12 +142,12 @@ export default function chartTelemetry({userName}) {
           aria-describedby="modal-modal-description"
         >
           <Box sx={style}>
-            <LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
+            <DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
           </Box>
         </Modal>
 
         <div onClick={() => setOpenConsumoDiscretizado2(true)}>
-          <SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
+          <DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
         </div>
         <Modal
           open={openConsumoDiscretizado2}
@@ -96,7 +161,7 @@ export default function chartTelemetry({userName}) {
         </Modal>
 
         <div onClick={() => setOpenDemandaContratada(true)}>
-          <LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
+          <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
         </div>
         <Modal
           open={openDemandaContratada}
@@ -105,7 +170,7 @@ export default function chartTelemetry({userName}) {
           aria-describedby="modal-modal-description"
         >
           <Box sx={style}>
-            <LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
+            <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
           </Box>
         </Modal>
       </section>
@@ -114,8 +179,26 @@ export default function chartTelemetry({userName}) {
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
+  const { ['user-cod_client']: cod_client } = parseCookies(ctx)
+
+  const fatorPotenciaChart = []
+
+  console.log('olha os query ai', ctx.query)
+
+  // await apiClient.post('/telemetry/powerFactor', {
+	// 	"filters": [
+	// 		{"type" : "=", "field": "med_5min.ponto", "value": cod_client},
+	// 		{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+	// 	]
+  // }).then(res => {
+  //   fatorPotenciaChart = res.data
+  // }).catch(res => {
+  //   console.log(res)
+  // })
 
   if (!token) {
     return {
@@ -128,8 +211,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   return {
     props: {
-      userName
+      userName,
+      fatorPotenciaChart
     }
   }
 }
-

src/pages/pld/index.tsx

@@ -128,6 +128,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
       return 'dullRed'
   }
 
+  const dateFormated = new Date()
+
   useEffect(() => {
     getDataByHour()
     getDataByDay()
@@ -175,7 +177,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
                   if (index === 0) {
                     return <>
                       <tr>
-                        <td className='tg-gceh'>Max</td>
+                        <td className='tg-gceh'>Máximo</td>
                         <td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                         <td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                         <td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
@@ -185,7 +187,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
                   } else if (index===1) {
                     return <>
                       <tr>
-                        <td className='tg-gceh'>Min</td>
+                        <td className='tg-gceh'>Mínimo</td>
                         <td className='tg-uulg'>{parseFloat(data.nordeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                         <td className='tg-gceh'>{parseFloat(data.norte_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                         <td className='tg-gceh'>{parseFloat(data.sudeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
@@ -293,7 +295,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
           </section>
           <LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
           dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
-          title={`Período - ${date}`}
+          title={new Date(date).toLocaleString('pt-br').split(" ")[0]!='Invalid' && new Date(date).toLocaleString('pt-br').split(" ")[0]!='NaN'
+          ? 'Período - ' +  new Date(date).toLocaleString('pt-br').split(" ")[0] : 'Período - '}
           subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
         </PldGraphView>
       </RenderIf>

src/pages/telemetria.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { useRouter } from 'next/router'
+import router, { useRouter } from 'next/router'
 
 import Banner from '../components/banner/Banner';
 import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@@ -18,16 +18,15 @@ import RenderIf from '../utils/renderIf';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
 
-
-
-
 export default function Telemetria({userName}: any) {
-  const [unity, setUnity] = React.useState('');
+  const [unity, setUnity] = useState('');
-  const [startDate, setStartDate] = React.useState('');
+  const [startDate, setStartDate] = useState('');
-  const [endDate, setEndDate] = React.useState('');
+  const [endDate, setEndDate] = useState('');
-  const [discretization, setDiscretization] = React.useState('');
+  const [discretization, setDiscretization] = useState('');
 
-  const [showChart, setShowChart] = React.useState(false);
+  const [date, setDate] = useState('');
+
+  const [showChart, setShowChart] = useState(false);
 
   const handleChange = (event: SelectChangeEvent) => {
     // setAge(event.target.value);
@@ -72,50 +71,13 @@ export default function Telemetria({userName}: any) {
 
         <div className='select'>
           <p className='title' >Data inicial</p>
-          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/>
-            <InputLabel id="demo-select-small">Data Inicial</InputLabel>
-            <Select
-              labelId="demo-select-small"
-              id="demo-select-small"
-              value={startDate}
-              label="Unidade"
-              onChange={value => setStartDate(value.target.value)}
-              fullWidth
-            >
-              <MenuItem value="">
-                <em>Nenhum</em>
-              </MenuItem>
-              <MenuItem value={10}>20/05/2022</MenuItem>
-              <MenuItem value={20}>10/06/2022</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-            </Select>
-          </FormControl>
         </div>
 
         <div className='select'>
-          <p className='title' >Data Final</p>
+        <p className='title' >Data final</p>
-          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+
-            <InputLabel id="demo-select-small">Data Final</InputLabel>
+          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
-            <Select
-              labelId="demo-select-small"
-              id="demo-select-small"
-              value={endDate}
-              label="Unidade"
-              onChange={value => setEndDate(value.target.value)}
-              fullWidth
-            >
-              <MenuItem value="">
-                <em>Nenhum</em>
-              </MenuItem>
-              <MenuItem value={10}>20/05/2022</MenuItem>
-              <MenuItem value={20}>10/06/2022</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-            </Select>
-          </FormControl>
         </div>
 
         <div className='select'>
@@ -133,10 +95,6 @@ export default function Telemetria({userName}: any) {
               <MenuItem value="">
                 <em>Nenhum</em>
               </MenuItem>
-              <MenuItem value="">07/09/2021</MenuItem>
-              <MenuItem value={10}>Filial 3</MenuItem>
-              <MenuItem value={20}>Twenty</MenuItem>
-              <MenuItem value={30}>Thirty</MenuItem>
             </Select>
           </FormControl>
         </div>
@@ -147,7 +105,12 @@ export default function Telemetria({userName}: any) {
       </RenderIf>
 
       <Buttons>
-        <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
+        <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry', { query: {
+          startDate,
+          endDate,
+          discretization
+        }})}/>
+        <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/>
         <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
         <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
       </Buttons>

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -12,6 +12,21 @@ export const TelemetriaView = styled.main`
     margin: 0 0 0 10px;
   }
 
+  input {
+    width: 15rem;
+    height: 2.5rem;
+
+    padding: 14px;
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: 400;
+
+    border-radius: 6px;
+    border: solid gray 1px;
+
+    background-color: #F9F9F9;
+  }
+
   span {
     font-family: 'Inter';
     font-style: normal;

src/styles/layouts/administerView/faq/faqView.ts

@@ -42,6 +42,23 @@ export const FaqView = styled.nav`
       margin-left: 19px;
     }
 
+    .MuiBox-root .css-4y2i0o {
+    :-webkit-scrollbar {
+      width: 15px!important;
+    }
+    :-webkit-scrollbar-track {
+      background-color: #EFEFEF!important;
+    }
+    :-webkit-scrollbar-thumb {
+      background-color: rgb(37,79,127)!important;
+      border: 3px solid #EFEFEF!important;
+      border-radius: 10px!important
+    }
+    :-webkit-scrollbar-thumb:hover {
+      background-color: #1d3e63!important;
+    }
+  }
+
 /*
   .teste{
     display: flex;

src/styles/layouts/administerView/notification/notificationView.ts

@@ -77,7 +77,21 @@ export const NotificationView = styled.nav`
     margin-left: 16px;
   }
 
-
+  .MuiBox-root .css-4y2i0o {
-
+    :-webkit-scrollbar {
+      width: 15px!important;
+    }
+    :-webkit-scrollbar-track {
+      background-color: #EFEFEF!important;
+    }
+    :-webkit-scrollbar-thumb {
+      background-color: rgb(37,79,127)!important;
+      border: 3px solid #EFEFEF!important;
+      border-radius: 10px!important
+    }
+    :-webkit-scrollbar-thumb:hover {
+      background-color: #1d3e63!important;
+    }
+  }
 
 `