Merge branch 'telemetry' into 'dev'

fixing telemtry charts and pointeds issues

See merge request kluppsoftware/smart-energia-web!112

src/components/graph/ChartView.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components"
 
 export const ChartView = styled.div`
-  width: 90%;
+  min-width: 90%;
 
   div{
     /* margin-top: 10px; */

src/components/graph/DemRegXDemConChart.tsx

@@ -84,12 +84,22 @@ export function DemRegXDemConChart({
   }: LineBarChartInterface) {
   const chartRef = useRef<ChartJS>(null);
 
-  const currentTime = new Date();
-
   const labels = label
 
   const options: any = {
     responsive: true,
+    scales: {
+      x: {
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        }
+      },
+    },
     plugins: {
       datalabels: {
         display: true,
@@ -144,7 +154,7 @@ export function DemRegXDemConChart({
 
   return (
     <ChartView>
-      <ChartTitle title={title} subtitle={subtitle}/>
+      {/* <ChartTitle title={title} subtitle={subtitle}/> */}
       <div>
         <Chart ref={chartRef} type='bar' options={options} data={data} />
       </div>

src/components/graph/DiscretizedConsumptionChart.tsx

@@ -2,7 +2,8 @@ import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { draw, generate } from 'patternomaly'
 import React from 'react';
-import { Bar } from 'react-chartjs-2';
+import { Bar, Chart } from 'react-chartjs-2';
+// import Chart from './Chart';
 
 import ChartTitle from './ChartTitle';
 import { ChartView } from './ChartView';
@@ -30,82 +31,76 @@ interface SingleBarInterface{
 }
 
 export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) {
-  const currentTime = new Date();
 
-  const options: object = {
+  const labels = label
+
+  const options: any = {
     responsive: true,
-    series: {
+    scales: {
-      downsample: {
+      x: {
-        threshold: 1000
+        grid: {
-      }
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        }
+      },
     },
     plugins: {
       datalabels: {
-        formatter: (value, ctx) => {
+        display: false,
-          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 = `${parseInt(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,
+        display: true,
         text: '',
       },
     },
   };
 
-  const labels = label;
-
   const data: any = {
-    labels,
+    labels: dataProps.map(value => value.day_formatted),
     datasets: [
       {
-        label: dataset,
+        type: 'line' as const,
+        label: 'reativa',
+        borderColor: '#F00' ,
+        fill: false,
+        borderDash: [5, 5],
+        backgroundColor: 'rgba(255, 145, 0, 0)' ,
+        pointBorderColor: 'rgba(255, 145, 0, 0)',
+        data: dataProps.map(value => value.reativa),
+      },
+      {
+        type: 'bar' as const,
+        label: 'consumo',
+        backgroundColor: '#74acec',
         data: dataProps.map(value => value.consumo),
-        backgroundColor: '#255488'
-      },
-      {
-        type: 'line' as const,
-        label: 'base',
-        data: dataProps.map(value => 500),
-        borderColor: 'rgb(0, 0, 0)',
-        fill: false,
-        backgroundColor: 'rgb(0, 0, 0)' ,
-        pointBorderColor: 'rgba(255, 145, 0, 0)',
-      },
-      {
-        type: 'line' as const,
-        label: 'tolerância',
-        data: dataProps.map(value => 525),
-        borderColor: 'rgb(255, 0, 0)',
-        fill: false,
-        backgroundColor: 'rgb(255, 0, 0)' ,
-        pointBorderColor: 'rgba(255, 145, 0, 0)',
       },
+      // {
+      //   type: 'line' as const,
+      //   label: 'Livre',
+      //   // backgroundColor: '#255488',
+      //   backgroundColor: (value, ctx) => {
+      //     return '#255488'
+      //   },
+      //   data: dataProps.map(value => {
+      //     return parseInt(value.custo_livre)
+      //   }),
+      // },
     ],
   }
 
   return (
     <ChartView>
-      <ChartTitle title={title} subtitle={subtitle} />
+      {/* <ChartTitle title={title} subtitle={subtitle}/> */}
-      <Bar options={options} data={data} />
+      <div>
+        <Chart type='bar' options={options} data={data} />
+      </div>
     </ChartView>
   )
 }

src/components/graph/fatorPotenciaChart.tsx

@@ -46,6 +46,18 @@ interface ChartInterface {
 export default function FatorPotenciaChart({ title, subtitle, data1, data2, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
   const options: any = {
     responsive: true,
+    scales: {
+      x: {
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        }
+      },
+    },
     plugins: {
       datalabels: {
         display: true,
@@ -93,7 +105,7 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
 
   return (
     <ChartView>
-      <ChartTitle title={title} subtitle={subtitle} />
+      {/* <ChartTitle title={title} subtitle={subtitle} /> */}
       <Line options={options} data={data} />
     </ChartView>
   )

src/components/graph/grossMensalChart/GrossMensalChart.tsx

@@ -50,8 +50,6 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
     return spaces
   }
 
-  const labels = label;
-
   const options: any = {
     responsive: true,
     scales: {
@@ -104,7 +102,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
     datasets: [
       {
         type: 'bar',
-        label: 'Acumulado',
+        label: 'Consolidado',
         data: data1.map(value => value?.economia_acumulada),
         backgroundColor: '#255488'
       },

src/components/sidebar/Sidebar.tsx

@@ -129,12 +129,12 @@ export default function Sidebar() {
             <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria'}</li></Link>
             <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
             <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias'}</li></Link>
-            <li onClick={() => setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li>
+            <Link href='/pld'><li onClick={() => setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
-              <div className='pldDrawer drawer'>
+              {/* <div className='pldDrawer drawer'>
                 <Link href='/pld'><li onClick={() => setPldMenu(0)} className={pldMenu==0? 'actualPathDrawer' : null}>PLD Histórico</li></Link>
                 <Link href='/pld'><li onClick={() => setPldMenu(1)} className={pldMenu===1? 'actualPathDrawer' : null}>Valores Diários</li></Link>
                 <Link href='/pld'><li onClick={() => setPldMenu(2)} className={pldMenu===2? 'actualPathDrawer' : null}>Valores Horários</li></Link>
-              </div>
+              </div> */}
             <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
             {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
             <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>

src/pages/aboutUs/index.tsx

@@ -5,6 +5,7 @@ import { parseCookies } from 'nookies'
 import React from 'react'
 import Banner from '../../components/banner/Banner'
 import Header from '../../components/header/Header'
+import PageTitle from '../../components/pageTitle/PageTitle'
 import getAPIClient from '../../services/ssrApi'
 import { AboutUsView } from '../../styles/layouts/aboutUs/AboutUsView'
 
@@ -15,8 +16,10 @@ export default function aboutUs({userName, text}) {
         <title>Smart Energia - Sobre nós</title>
       </Head>
 
-      <Header name={userName}/>
+      <Header name={userName}>
-      <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
+        <PageTitle title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia'/>
+      </Header>
+      {/* <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' /> */}
 
       <section dangerouslySetInnerHTML={{__html: text[0]?.about}}/>
       <article>

src/pages/chartTelemetry/index.tsx

@@ -35,9 +35,9 @@ export default function chartTelemetry({userName}) {
 
   function getChartsData() {
     console.log(token)
-    getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
+    // getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-      .then(result => setFatorPotenciaData(result))
+    //   .then(result => setFatorPotenciaData(result))
-      .catch(exception => console.log('exeption', exception))
+    //   .catch(exception => console.log('exeption', exception))
 
     // getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
     //   .then(result => setDiscretizedConsumptionDataReativa(result))

src/pages/economy/index.tsx

@@ -93,13 +93,13 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
       </Head>
       <div id='title'/>
       <Header name={userName}>
-        <PageTitle title='Economia' subtitle='Graficos de economia'/>
+        <PageTitle title='Economia' subtitle='Gráficos de economia'/>
       </Header>
 
       <TableHeader>
         <Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
-          <Tab label="Bruta Anual"/>
+          <Tab label="Acumulada Anual"/>
-          <Tab label="Bruta Mensal"/>
+          <Tab label="Acumulada Mensal"/>
           <Tab label="Cativo x Livre Mensal"/>
           <Tab label="Custo R$/MWh"/>
         </Tabs>
@@ -125,25 +125,27 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
       </RenderIf>
 
       <RenderIf isTrue={economyMenu===2}>
-        <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+        <div style={{paddingLeft: '7%'}}>
-          <InputLabel id="demo-select-small">Unidade</InputLabel>
+          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-          <Select
+            <InputLabel id="demo-select-small">Unidade</InputLabel>
-            labelId="demo-select-small"
+            <Select
-            id="demo-select-small"
+              labelId="demo-select-small"
-            value={unity}
+              id="demo-select-small"
-            label="Unidade"
+              value={unity}
-            onChange={value => setUnity(value.target.value)}
+              label="Unidade"
-            fullWidth
+              onChange={value => setUnity(value.target.value)}
-          >
+              fullWidth
-            <MenuItem value="">Todas</MenuItem>
+            >
-            {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
+              <MenuItem value="">Todas</MenuItem>
-            {
+              {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
-              clients.map((value) => {
+              {
-                return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
+                clients.map((value) => {
-              })
+                  return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
-            }
+                })
-          </Select>
+              }
-        </FormControl>
+            </Select>
+          </FormControl>
+        </div>
         <section>
           <CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
           dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
@@ -152,25 +154,27 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
       </RenderIf>
 
       <RenderIf isTrue={economyMenu===3}>
-      <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+        <div style={{paddingLeft: '7%'}}>
-        <InputLabel id="demo-select-small">Unidade</InputLabel>
+          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-        <Select
+            <InputLabel id="demo-select-small">Unidade</InputLabel>
-          labelId="demo-select-small"
+            <Select
-          id="demo-select-small"
+              labelId="demo-select-small"
-          value={unity}
+              id="demo-select-small"
-          label="Unidade"
+              value={unity}
-          onChange={value => setUnity(value.target.value)}
+              label="Unidade"
-          fullWidth
+              onChange={value => setUnity(value.target.value)}
-        >
+              fullWidth
-          <MenuItem value="">Todas</MenuItem>
+            >
-          {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
+              <MenuItem value="">Todas</MenuItem>
-          {
+              {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
-            clients.map((value) => {
+              {
-              return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
+                clients.map((value) => {
-            })
+                  return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
-          }
+                })
-        </Select>
+              }
-      </FormControl>
+            </Select>
+          </FormControl>
+        </div>
       <section>
         <CostIndicatorChart title='' subtitle=''
           data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))

src/pages/faq/index.tsx

@@ -10,7 +10,6 @@ import { api } from '../../services/api'
 import getAPIClient from '../../services/ssrApi'
 import { FaqView } from '../../styles/layouts/commonQuestions/FaqView'
 
-
 export default function commonQuestions({faqData, userName}) {
   return (
     <FaqView>
@@ -18,8 +17,9 @@ export default function commonQuestions({faqData, userName}) {
         <title>Smart Energia - FAQ</title>
       </Head>
       <Header name={userName}>
+        <PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!'/>
       </Header>
-      <Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/>
+      {/* <Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/> */}
       <section className='CommonQuestionsSection' >
       {
         faqData.length<1?

src/pages/industryInfo/index.tsx

@@ -59,8 +59,9 @@ export default function industryInfo({userName}: any) {
         <title>Smart Energia - Info de Setor</title>
       </Head>
       <Header name={userName}>
+        <PageTitle title='Info setorial' subtitle='Baixe o pdf para ver o info setorial'/>
       </Header>
-      <Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/>
+      {/* <Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/> */}
       <p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
       <button onClick={() => handleDownloadPdf()}>Clique aqui para baixar o arquivo em PDF</button>
 

src/pages/news/index.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import Banner from '../../components/banner/Banner'
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import Header from '../../components/header/Header'
+import PageTitle from '../../components/pageTitle/PageTitle';
 import getAPIClient from '../../services/ssrApi';
 import { Button, NewsView } from '../../styles/layouts/news/NewsView'
 
@@ -17,11 +18,13 @@ export default function aboutUs({userName, news}: any) {
       <Head>
         <title>Smart Energia - Noticias</title>
       </Head>
-      <Header name={userName} />
+      <Header name={userName}>
-      <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/newsBanner.webp'/>
+        <PageTitle title='Notícias' subtitle='Tudo de importante no setor de energia'/>
+      </Header>
+      {/* <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/newsBanner.webp'/> */}
 
       {
-        news.map(data => {
+        news.slice(0, 3).map(data => {
 
           return <>
             <section>

src/pages/notifications/index.tsx

@@ -17,8 +17,9 @@ export default function Notifications({notificationData, userName}: any) {
         <title>Smart Energia - Notificações</title>
       </Head>
       <Header name={userName}>
+        <PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!'/>
       </Header>
-      <Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/>
+      {/* <Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/> */}
       <section className='CommonQuestionsSection' >
       {
         notificationData.length!=0?

src/pages/pld/index.tsx

@@ -153,7 +153,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
     })
   }
 
-  function handleColorNorte(value, region) {
+  function handleColor(value, region) {
     if (value <= tableData.result[1].norte_min)
       return ''
     else if (value >= tableData.result[0][`${region}_max`])
@@ -373,9 +373,8 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       <RenderIf isTrue={pldMenu===1}>
         <PldGraphView>
           <section className='toolsbar'>
-            <div className='select'>
             <FormControl sx={{
-              width: '100%'
+              width: '320px'
             }}>
               <InputLabel id="demo-simple-select-label">Região</InputLabel>
                 <Select
@@ -383,9 +382,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
                   onChange={handleChange}
                   displayEmpty
                   label='Região'
-                  sx={{
-                    width: '100%'
-                  }}
                 >
                   <MenuItem value={'NORTE'}>Norte</MenuItem>
                   <MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
@@ -393,34 +389,33 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
                   <MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
                 </Select>
               </FormControl>
-            </div>
+              <FormControl sx={{
-            <FormControl sx={{
+                width: '320px',
-              width: '22%',
+                ml: 1
-              ml: 1
+              }}>
-            }}>
+                <InputLabel id="demo-simple-select-label">Mês</InputLabel>
-              <InputLabel id="demo-simple-select-label">Mês</InputLabel>
+                <Select
-              <Select
+                    value={month}
-                  value={month}
+                    onChange={handleChangeDay}
-                  onChange={handleChangeDay}
+                    displayEmpty
-                  displayEmpty
+                    placeholder='dia'
-                  placeholder='dia'
+                    label="Age"
-                  label="Age"
+                  >
-                >
+                    <MenuItem value={'0'}>Nenhum</MenuItem>
-                  <MenuItem value={'0'}>Nenhum</MenuItem>
+                    {
-                  {
+                      clientMonth.sort((a, b) => {
-                    clientMonth.sort((a, b) => {
+                        if (parseFloat(a.mes_ref.slice(0, 2)) < parseFloat(b.mes_ref.slice(0, 2)))
-                      if (parseFloat(a.mes_ref.slice(0, 2)) < parseFloat(b.mes_ref.slice(0, 2)))
+                        if (parseFloat(a.mes_ref.slice(3, 7)) > parseFloat(b.mes_ref.slice(3, 7))) return -1
-                      if (parseFloat(a.mes_ref.slice(3, 7)) > parseFloat(b.mes_ref.slice(3, 7))) return -1
+                        else return 1
-                      else return 1
+                        if (parseFloat(a.mes_ref.slice(0, 2)) > parseFloat(b.mes_ref.slice(0, 2)))
-                      if (parseFloat(a.mes_ref.slice(0, 2)) > parseFloat(b.mes_ref.slice(0, 2)))
+                        if (parseFloat(a.mes_ref.slice(3, 7)) < parseFloat(b.mes_ref.slice(3, 7))) return 1
-                      if (parseFloat(a.mes_ref.slice(3, 7)) < parseFloat(b.mes_ref.slice(3, 7))) return 1
+                        else return -1
-                      else return -1
 
-                      return 0
+                        return 0
-                    }).map((data, index) => {
+                      }).map((data, index) => {
-                      return <MenuItem key={index} value={data.mes_ref}>{data.mes_ref}</MenuItem>
+                        return <MenuItem key={index} value={data.mes_ref}>{data.mes_ref}</MenuItem>
-                    })
+                      })
-                  }
+                    }
                 </Select>
               </FormControl>
           </section>

src/pages/telemetria/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import Banner from '../../components/banner/Banner';
-import { TelemetriaView, Buttons, TableHeader} from '../../styles/layouts/Telemetria/TelemetriaView';
+import { TelemetriaView, Buttons, TableHeader, ChartFilters} from '../../styles/layouts/Telemetria/TelemetriaView';
 import GradientButton from '../../components/buttons/gradientButton/GradientButton'
 import Header from '../../components/header/Header';
 import MenuItem from '@mui/material/MenuItem';
@@ -31,6 +31,10 @@ import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
 import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine';
 import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
+import { getDiscretization } from '../../services/charts/telemetry/getDiscretization';
+import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor';
+import { getDemand } from '../../services/charts/telemetry/getDemand';
+import PageTitle from '../../components/pageTitle/PageTitle';
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
@@ -49,6 +53,8 @@ export default function Telemetria({userName, clients}: any) {
   const [openSnackError, setOpenSnackError] = useState<boolean>(false)
   const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
 
+  const currentDate = new Date().toLocaleDateString().split('/').reverse().join('-')
+
   const handleCloseSnack = (
     event?: React.SyntheticEvent | Event,
     reason?: string
@@ -106,8 +112,6 @@ export default function Telemetria({userName, clients}: any) {
 
   const [open, setOpen] = useState(false);
 
-  // const [demRegXDemCon, setDemRegXDemCon] = useState(null);
-
   const handleChangeStartDate = (newValue: Date | null) => {
     console.log(newValue)
     setStartDate(newValue)
@@ -123,8 +127,8 @@ export default function Telemetria({userName, clients}: any) {
       await api.post('/telemetry/powerFactor', {
         "type": discretization,
         "filters": [
-            {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+            {"type" : "=", "field": "med_5min.ponto", "value": unity},
-            {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+            {"type" : "between", "field": "dia_num", "value": [currentDate, currentDate]}
           ]
       }).then(res => {
         setTableData(res.data.data)
@@ -132,8 +136,8 @@ export default function Telemetria({userName, clients}: any) {
         setOpenSnackSuccess(true)
         setOpen(false)
       }).catch(res => {
-        setException(true)
         setSend(false)
+        setException(true)
         setOpenSnackError(true)
         setOpenSnackSuccess(false)
       })
@@ -171,33 +175,11 @@ export default function Telemetria({userName, clients}: any) {
       })
   }
 
+  const [filters, setFilters] = useState()
+
   const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
   const [demRegXDemCon, setDemRegXDemCon] = useState([]);
   const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
-  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
-  function getChartsData() {
-    // console.log(token)
-    // getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-    //   .then(result => setFatorPotenciaData(result))
-    //   .catch(exception => console.log('exeption', exception))
-
-    // getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-    //   .then(result => setDiscretizedConsumptionDataReativa(result))
-    //   .catch(exception => console.log(exception))
-
-    // getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-    //   .then(result => setDiscretizedConsumptionData(result))
-    //   .catch(exception => console.log(exception))
-
-    // getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-    //   .then(result => setDemRegXDemCon(result))
-    //   .catch(exception => console.log(exception))
-
-    // setFatorPotenciaData(res.data.data)
-    // setDiscretizedConsumptionDataReativa(res.data.data)
-    // setDiscretizedConsumptionData(res.data.data)
-    // setDemRegXDemCon(res.data.data)
-  }
 
   useEffect(() => {
     setSend(false)
@@ -208,6 +190,12 @@ export default function Telemetria({userName, clients}: any) {
       getChartData()
   }, [send])
 
+  useEffect(() => {
+    // getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
+    //   .then(result => setDiscretizedConsumptionData(result))
+    //   .catch(exception => console.log(exception))
+  }, [discretization])
+
   return(
     <TelemetriaView>
       <Head>
@@ -254,153 +242,370 @@ export default function Telemetria({userName, clients}: any) {
         </Alert>
       </Snackbar>
 
-      <Header name={userName} />
+      <Header name={userName}>
-      <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
+        <PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
+      </Header>
+      {/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
       SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
       sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
-      - Distribuidora.' imgSource='/assets/graphical.png' />
+      - Distribuidora.' imgSource='/assets/graphical.png' /> */}
 
-      <section>
+      <RenderIf isTrue={true}>
-        <div className='select'>
-          <p className='title' >Unidade</p>
-          <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
-            <InputLabel id="demo-select-small">Unidade</InputLabel>
-            <Select
-              labelId="demo-select-small"
-              id="demo-select-small"
-              value={unity}
-              label="Unidade"
-              onChange={value => setUnity(value.target.value)}
-              sx={{height: 63, mb: 0.5}}
-              fullWidth
-            >
-              <MenuItem value="">
-                <em>Nenhum</em>
-              </MenuItem>
-              {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
-              {
-                clients.map((value) => {
-                  return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
-                })
-              }
-            </Select>
-          </FormControl>
-        </div>
-
-        <div className='select'>
-          <p className='title' >Discretização</p>
-          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-            <InputLabel id="demo-select-small">Discretização</InputLabel>
-            <Select
-              labelId="demo-select-small"
-              id="demo-select-small"
-              value={discretization}
-              label="Unidade"
-              onChange={value => setDiscretization(value.target.value)}
-              sx={{height: 63, mb: 0.5}}
-              fullWidth
-            >
-              <MenuItem value="">
-                <em>Nenhum</em>
-              </MenuItem>
-              <MenuItem value="5_min">5 minutos</MenuItem>
-              <MenuItem value="15_min">15 minutos</MenuItem>
-              <MenuItem value="1_hora">1 hora</MenuItem>
-              <MenuItem value="1_dia">1 dia</MenuItem>
-              <MenuItem value="1_mes">1 mês</MenuItem>
-            </Select>
-          </FormControl>
-        </div>
-
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <div className='select datePicker'>
-            <p className='title' >Data inicial</p>
-            <DesktopDatePicker
-              label="Data inicial"
-              inputFormat="dd/MM/yyyy"
-              value={startDate}
-              onChange={handleChangeStartDate}
-              renderInput={(params) => <TextField {...params}/>}
-            />
-          </div>
-          <div className='select datePicker' style={{marginRight: 10}}>
-            <p className='title' >Data final</p>
-            <DesktopDatePicker
-              label="Data final"
-              inputFormat="dd/MM/yyyy"
-              value={endDate}
-              maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
-                :
-                discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
-                  :
-                  discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
-                    :
-                    discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
-                      :
-                      new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
-                  }
-              onChange={(newValue: any) => handleChangeEndDate(newValue)}
-              renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
-            />
-          </div>
-        </LocalizationProvider>
-
-        <BasicButton title='Selecionar!' onClick={() => {
-          setSend(true)
-          getTableData()
-        }}/>
-      </section>
-
-      <RenderIf isTrue={!!unity && !!discretization}>
         <TableHeader>
           <Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
-            <Tab label="Discretização em 1 hora"/>
+            <Tab label={
-            <Tab label="Discretização em 1 minuto"/>
+              discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
+                discretization==='15_min'? 'Consumo discretizado em 15 minutos' :
+                  discretization==='1_hora'? 'Consumo discretizado em 1 hora' :
+                  'Consumo discretizado em 1 dia'}/>
             <Tab label="Demanda"/>
             <Tab label="Fator Potencia"/>
+            <Tab label="Mês Atual"/>
           </Tabs>
         </TableHeader>
 
-        <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
+        <RenderIf isTrue={menu===0}>
-        {/* <RenderIf isTrue={true}> */}
+          <ChartFilters>
-          <RenderIf isTrue={menu===0}>
+            <div className='input'>
-            <div>
+              <FormControl style={{ minWidth: 100, width: 200}} size="small">
-              <DiscretizedConsumptionChart title={
+                <InputLabel>Unidade</InputLabel>
-                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
+                <Select
-                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
+                  labelId="demo-select-small"
-                } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
+                  id="demo-select-small"
-                <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p>
+                  value={unity}
+                  label="Unidade"
+                  onChange={value => setUnity(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
+                  {
+                    clients.map((value) => {
+                      return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
+                    })
+                  }
+                </Select>
+              </FormControl>
             </div>
-          </RenderIf>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
+                <InputLabel>Discretização</InputLabel>
+                <Select
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={discretization}
+                  label="Discretização"
+                  onChange={value => setDiscretization(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  <MenuItem value="5_min">5 minutos</MenuItem>
+                  <MenuItem value="15_min">15 minutos</MenuItem>
+                  <MenuItem value="1_hora">1 hora</MenuItem>
+                  <MenuItem value="1_dia">1 dia</MenuItem>
+                  <MenuItem value="1_mes">1 mês</MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <div className='datePicker'>
+                <DesktopDatePicker
+                  label="Data inicial"
+                  inputFormat="dd/MM/yyyy"
+                  value={startDate}
+                  onChange={handleChangeStartDate}
+                  renderInput={(params) => <TextField {...params}/>}
+                />
+              </div>
+              <div className='datePicker' style={{marginRight: 10}}>
+                <DesktopDatePicker
+                  label="Data final"
+                  inputFormat="dd/MM/yyyy"
+                  value={endDate}
+                  maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                    :
+                    discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                      :
+                      discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
+                        :
+                        discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
+                          :
+                          new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
+                      }
+                  onChange={(newValue: any) => handleChangeEndDate(newValue)}
+                  renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+                />
+              </div>
+            </LocalizationProvider>
+            <div className='select'>
+              <BasicButton title='Selecionar!' onClick={() => {
+                getDiscretization(unity, startDate, endDate, discretization)
+                  .then(result => setDiscretizedConsumptionData(result))
+                  .catch(exception => console.log(exception))
+              }}/>
+            </div>
+          </ChartFilters>
+          {/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
+          <DiscretizedConsumptionChart title={
+              discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
+              discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
+            } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
+              {/* <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p> */}
+          {/* </RenderIf> */}
+        </RenderIf>
 
-          <RenderIf isTrue={menu===1}>
+        <RenderIf isTrue={menu===1}>
-            <div>
+          <ChartFilters>
-              <DiscretizedConsumptionChartLine title={
+            <div className='input'>
-                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
+              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
-                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
+                <InputLabel>Unidade</InputLabel>
-                } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
+                <Select
-                label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={unity}
+                  label="Unidade"
+                  onChange={value => setUnity(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
+                  {
+                    clients.map((value) => {
+                      return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
+                    })
+                  }
+                </Select>
+              </FormControl>
             </div>
-          </RenderIf>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
+                <InputLabel>Discretização</InputLabel>
+                <Select
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={discretization}
+                  label="Discretização"
+                  onChange={value => setDiscretization(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  <MenuItem value="5_min">5 minutos</MenuItem>
+                  <MenuItem value="15_min">15 minutos</MenuItem>
+                  <MenuItem value="1_hora">1 hora</MenuItem>
+                  <MenuItem value="1_dia">1 dia</MenuItem>
+                  <MenuItem value="1_mes">1 mês</MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <div className='datePicker'>
+                <DesktopDatePicker
+                  label="Data inicial"
+                  inputFormat="dd/MM/yyyy"
+                  value={startDate}
+                  onChange={handleChangeStartDate}
+                  renderInput={(params) => <TextField {...params}/>}
+                />
+              </div>
+              <div className='datePicker' style={{marginRight: 10}}>
+                <DesktopDatePicker
+                  label="Data final"
+                  inputFormat="dd/MM/yyyy"
+                  value={endDate}
+                  maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                    :
+                    discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                      :
+                      discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
+                        :
+                        discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
+                          :
+                          new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
+                      }
+                  onChange={(newValue: any) => handleChangeEndDate(newValue)}
+                  renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+                />
+              </div>
+            </LocalizationProvider>
+            <div className='select'>
+              <BasicButton title='Selecionar!' onClick={() => {
+                getDiscretization(unity, startDate, endDate, discretization)
+                  .then(result => setDiscretizedConsumptionData(result))
+                  .catch(exception => console.log(exception))
+              }}/>
+            </div>
+          </ChartFilters>
+          <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/>
         </RenderIf>
 
         <RenderIf isTrue={menu===2}>
-          <div>
+          <ChartFilters>
-            <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
+            <div className='input'>
-            dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
+              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
-            label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
+                <InputLabel>Unidade</InputLabel>
-          </div>
+                <Select
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={unity}
+                  label="Unidade"
+                  onChange={value => setUnity(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
+                  {
+                    clients.map((value) => {
+                      return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
+                    })
+                  }
+                </Select>
+              </FormControl>
+            </div>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
+                <InputLabel>Discretização</InputLabel>
+                <Select
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={discretization}
+                  label="Discretização"
+                  onChange={value => setDiscretization(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  <MenuItem value="5_min">5 minutos</MenuItem>
+                  <MenuItem value="15_min">15 minutos</MenuItem>
+                  <MenuItem value="1_hora">1 hora</MenuItem>
+                  <MenuItem value="1_dia">1 dia</MenuItem>
+                  <MenuItem value="1_mes">1 mês</MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <div className='datePicker'>
+                <DesktopDatePicker
+                  label="Data inicial"
+                  inputFormat="dd/MM/yyyy"
+                  value={startDate}
+                  onChange={handleChangeStartDate}
+                  renderInput={(params) => <TextField {...params}/>}
+                />
+              </div>
+              <div className='datePicker' style={{marginRight: 10}}>
+                <DesktopDatePicker
+                  label="Data final"
+                  inputFormat="dd/MM/yyyy"
+                  value={endDate}
+                  maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                    :
+                    discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                      :
+                      discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
+                        :
+                        discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
+                          :
+                          new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
+                      }
+                  onChange={(newValue: any) => handleChangeEndDate(newValue)}
+                  renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+                />
+              </div>
+            </LocalizationProvider>
+            <div className='select'>
+              <BasicButton title='Selecionar!' onClick={() => {
+                getDiscretization(unity, startDate, endDate, discretization)
+                  .then(result => setDiscretizedConsumptionData(result))
+                  .catch(exception => console.log(exception))
+              }}/>
+            </div>
+          </ChartFilters>
+          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
+            data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
         </RenderIf>
 
         <RenderIf isTrue={menu===3}>
-          <div>
+          <ChartFilters>
-          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
+            <div className='input'>
-            data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
+              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
-          </div>
+                <InputLabel>Unidade</InputLabel>
+                <Select
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={unity}
+                  label="Unidade"
+                  onChange={value => setUnity(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
+                  {
+                    clients.map((value) => {
+                      return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
+                    })
+                  }
+                </Select>
+              </FormControl>
+            </div>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
+                <InputLabel>Discretização</InputLabel>
+                <Select
+                  labelId="demo-select-small"
+                  id="demo-select-small"
+                  value={discretization}
+                  label="Discretização"
+                  onChange={value => setDiscretization(value.target.value)}
+                  sx={{height: 63, mb: 0.5}}
+                  fullWidth
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  <MenuItem value="5_min">5 minutos</MenuItem>
+                  <MenuItem value="15_min">15 minutos</MenuItem>
+                  <MenuItem value="1_hora">1 hora</MenuItem>
+                  <MenuItem value="1_dia">1 dia</MenuItem>
+                  <MenuItem value="1_mes">1 mês</MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+            <div className='select'>
+              <BasicButton title='Selecionar!' onClick={() => {
+                getDiscretization(unity, startDate, endDate, discretization)
+                  .then(result => setDiscretizedConsumptionData(result))
+                  .catch(exception => console.log(exception))
+              }}/>
+            </div>
+          </ChartFilters>
+          <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/>
         </RenderIf>
       </RenderIf>
 
-
       <RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
         <div className='modal'>
           <div id="preloader_1">
@@ -451,12 +656,19 @@ export default function Telemetria({userName, clients}: any) {
       <RenderIf isTrue={showChart}>
         <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/>
       </RenderIf>
+
       <Buttons>
-        <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple />
+        {/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
-        <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange />
+        {/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
         <GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
-          const html = document.querySelector("table").outerHTML;
+          if (send) {
-          htmlToCSV(html, "telemetria.csv");
+            const html = document.querySelector("table").outerHTML;
+            htmlToCSV(html, "telemetria.csv");
+          }
+          else {
+            setSend(true)
+            getTableData()
+          }
         }}/>
       </Buttons>
       <p className='paragraph'>

src/services/charts/telemetry/getDemand.ts

@@ -1,22 +1,19 @@
 import axios from "axios"
 import { parseCookies } from "nookies"
+import { api } from "../../api"
 
 export async function getDemand(
     unity: string,
-    startDate: string,
+    startDate: Date,
-    endDate: string,
+    endDate: Date,
     discretization: string
   ) {
   const { '@smartAuth-token': token } = parseCookies()
-  const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
+  const { data } = await api.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
 		"filters": [
-			{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
+			{"type" : "=", "field": `med_5min.ponto`, "value": unity},
-			{"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
+			{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
 		]
-  }, {
-    headers: {
-      'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
-    }
   })
 
   return data.data

src/services/charts/telemetry/getDiscretization.ts

@@ -1,24 +1,28 @@
 import axios from "axios"
 import { parseCookies } from "nookies"
+import { api } from "../../api"
+
+const { '@smartAuth-token': token } = parseCookies()
 
 export async function getDiscretization(
     unity: string,
-    startDate: string,
+    startDate: Date,
-    endDate: string,
+    endDate: Date,
     discretization: string
   ) {
-  const { '@smartAuth-token': token } = parseCookies()
+    console.log(new Date(startDate).toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString())
-  const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/discretization', {
+    const { data } = await api.post('/telemetry/discretization', {
-    "type": discretization,
+      "type": discretization,
-    "filters": [
+      // "type": "1_hora",
-        {"type" : "=", "field": "med_5min.ponto", "value": unity}
+      "filters": [
-      ]
+          {"type" : "=", "field": "med_5min.ponto", "value": unity},
-    }, {
+          {"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
-      headers: {
+        ]
-        'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
+      // "filters": [
+      //     {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
+      //   ]
       }
-    }
+    )
-  )
 
   return data.data
 }

src/services/charts/telemetry/getPowerFactor.ts

@@ -1,23 +1,18 @@
 import axios from "axios"
 import { parseCookies } from "nookies"
+import { api } from "../../api"
 
 export async function getPowerFactorData(
     unity: string,
-    startDate: string,
+    startDate: Date,
-    endDate: string,
+    endDate: Date,
     discretization: string
   ) {
-  const { '@smartAuth-token': token } = parseCookies()
+  const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
-  console.log(token.replace(/"/g, ''))
-  const { data } = await axios.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
 		"filters": [
-			{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
+			{"type" : "=", "field": "med_5min.ponto", "value": unity},
-			{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
+			{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
 		]
-  }, {
-    headers: {
-      'Authorization': `Bearer 1292|E4jbc5ZWmgCCBMOVn4PvPx56MUbf4nUg5MNgxjmP`
-    }
   })
   return data.data
 }

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -1,6 +1,12 @@
 import styled from 'styled-components';
 
 export const TelemetriaView = styled.main`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+
   padding: 20px;
   width: 100%;
 
@@ -18,7 +24,7 @@ export const TelemetriaView = styled.main`
     left: 0;
 
     width: 100%;
-    height: 100%;
+    height: 100vh;
 
     z-index: 999;
   }
@@ -37,11 +43,9 @@ export const TelemetriaView = styled.main`
     position:absolute;
     animation: preloader_1 1.5s  infinite ease-in-out;
   }
-
   #preloader_1 span:nth-child(2){
     left:11px;
     animation-delay: .2s;
-
   }
   #preloader_1 span:nth-child(3){
     left:22px;
@@ -172,6 +176,8 @@ export const TelemetriaView = styled.main`
   input {
     width: 15rem;
 
+    height: 10px!important;
+
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-weight: 400;
 
@@ -181,6 +187,12 @@ export const TelemetriaView = styled.main`
     background-color: #F9F9F9;
   }
 
+  .input {
+    .MuiInputLabel-root, .MuiInputLabel-formControl {
+      margin-top: 11px;
+    }
+  }
+
   span {
     font-family: 'Inter';
     font-style: normal;
@@ -216,7 +228,7 @@ export const TelemetriaView = styled.main`
       justify-content: center;
 
       flex-direction: column;
-      height: 10em;
+      /* height: 10em; */
 
       :nth-child(1) {
         label {
@@ -362,7 +374,7 @@ export const Uploads = styled.div`
   padding-right: 100px;
 `;
 
-export const TableHeader = styled.label`
+export const TableHeader = styled.div`
   width: 100%;
 
   display: flex;
@@ -373,3 +385,17 @@ export const TableHeader = styled.label`
 
   padding: 0 40px 0 40px
 `
+
+export const ChartFilters = styled.section`
+  display: flex;
+  align-items: center;
+  justify-content: center!important;
+
+  align-self: flex-start;
+
+  width: 100%;
+
+  margin-top: 20px;
+
+  /* margin-left: 108px; */
+`

src/styles/layouts/pld/PldView.ts

@@ -444,13 +444,11 @@ export const PldGraphView = styled.main`
     justify-content: center;
     align-items: flex-start!important;
 
+    align-self: flex-start;
+
     flex-direction: row;
 
-    padding-bottom: 13px;
+    flex-wrap: nowrap;
-
-    p {
-      margin: 0;
-    }
   }
   .toolsbar2 {
     display: flex;
@@ -459,7 +457,7 @@ export const PldGraphView = styled.main`
 
     flex-direction: column;
 
-    margin-bottom: 9px;
+    /* margin-bottom: 9px; */
 
     /* transform: translateY(-8px); */