Merge branch 'telemetry' into 'dev'

fixing telemtry charts and pointeds issues See merge request kluppsoftware/smart-energia-web!112
2022-07-19 19:43:56 +00:00 · 2022-07-19 19:43:56 +00:00 · d8c7d1784d
commit d8c7d1784d
parent 672017b999 a9c2f588da
20 changed files with 606 additions and 352 deletions
--- a/src/components/graph/ChartView.ts
+++ b/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; */
--- a/src/components/graph/DemRegXDemConChart.tsx
+++ b/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>
--- a/src/components/graph/DiscretizedConsumptionChart.tsx
+++ b/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: {
-      downsample: {
-        threshold: 1000
-      }
+    scales: {
+      x: {
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        }
+      },
    },
    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 = `${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
-        }
+        display: false,
      },
      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} />
-      <Bar options={options} data={data} />
+      {/* <ChartTitle title={title} subtitle={subtitle}/> */}
+      <div>
+        <Chart type='bar' options={options} data={data} />
+      </div>
    </ChartView>
  )
 }
--- a/src/components/graph/fatorPotenciaChart.tsx
+++ b/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>
  )
--- a/src/components/graph/grossMensalChart/GrossMensalChart.tsx
+++ b/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'
      },
--- a/src/components/sidebar/Sidebar.tsx
+++ b/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>
-              <div className='pldDrawer drawer'>
+            <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'>
                <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>
--- a/src/pages/aboutUs/index.tsx
+++ b/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}/>
-      <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
+      <Header name={userName}>
+        <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>
--- a/src/pages/chartTelemetry/index.tsx
+++ b/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")
-      .then(result => setFatorPotenciaData(result))
-      .catch(exception => console.log('exeption', exception))
+    // 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))
--- a/src/pages/economy/index.tsx
+++ b/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="Bruta Mensal"/>
+          <Tab label="Acumulada Anual"/>
+          <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">
-          <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)}
-            fullWidth
-          >
-            <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>
-              })
-            }
-          </Select>
-        </FormControl>
+        <div style={{paddingLeft: '7%'}}>
+          <FormControl sx={{ m: 1, minWidth: 120, 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)}
+              fullWidth
+            >
+              <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>
+                })
+              }
+            </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">
-        <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)}
-          fullWidth
-        >
-          <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>
-            })
-          }
-        </Select>
-      </FormControl>
+        <div style={{paddingLeft: '7%'}}>
+          <FormControl sx={{ m: 1, minWidth: 120, 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)}
+              fullWidth
+            >
+              <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>
+                })
+              }
+            </Select>
+          </FormControl>
+        </div>
      <section>
        <CostIndicatorChart title='' subtitle=''
          data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
--- a/src/pages/faq/index.tsx
+++ b/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?
--- a/src/pages/industryInfo/index.tsx
+++ b/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>

--- a/src/pages/news/index.tsx
+++ b/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} />
-      <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/newsBanner.webp'/>
+      <Header name={userName}>
+        <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>
--- a/src/pages/notifications/index.tsx
+++ b/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?
--- a/src/pages/pld/index.tsx
+++ b/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={{
-              width: '22%',
-              ml: 1
-            }}>
-              <InputLabel id="demo-simple-select-label">Mês</InputLabel>
-              <Select
-                  value={month}
-                  onChange={handleChangeDay}
-                  displayEmpty
-                  placeholder='dia'
-                  label="Age"
-                >
-                  <MenuItem value={'0'}>Nenhum</MenuItem>
-                  {
-                    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(3, 7)) > parseFloat(b.mes_ref.slice(3, 7))) 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(3, 7)) < parseFloat(b.mes_ref.slice(3, 7))) return 1
-                      else return -1
+              <FormControl sx={{
+                width: '320px',
+                ml: 1
+              }}>
+                <InputLabel id="demo-simple-select-label">Mês</InputLabel>
+                <Select
+                    value={month}
+                    onChange={handleChangeDay}
+                    displayEmpty
+                    placeholder='dia'
+                    label="Age"
+                  >
+                    <MenuItem value={'0'}>Nenhum</MenuItem>
+                    {
+                      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(3, 7)) > parseFloat(b.mes_ref.slice(3, 7))) 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(3, 7)) < parseFloat(b.mes_ref.slice(3, 7))) return 1
+                        else return -1

-                      return 0
-                    }).map((data, index) => {
-                      return <MenuItem key={index} value={data.mes_ref}>{data.mes_ref}</MenuItem>
-                    })
-                  }
+                        return 0
+                      }).map((data, index) => {
+                        return <MenuItem key={index} value={data.mes_ref}>{data.mes_ref}</MenuItem>
+                      })
+                    }
                </Select>
              </FormControl>
          </section>
--- a/src/pages/telemetria/index.tsx
+++ b/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" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+            {"type" : "=", "field": "med_5min.ponto", "value": unity},
+            {"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} />
-      <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
+      <Header name={userName}>
+        <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>
-        <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}>
+      <RenderIf isTrue={true}>
        <TableHeader>
          <Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
-            <Tab label="Discretização em 1 hora"/>
-            <Tab label="Discretização em 1 minuto"/>
+            <Tab label={
+              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={true}> */}
-          <RenderIf isTrue={menu===0}>
-            <div>
-              <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 isTrue={menu===0}>
+          <ChartFilters>
+            <div className='input'>
+              <FormControl style={{ minWidth: 100, width: 200}} size="small">
+                <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>
-          </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}>
-            <div>
-              <DiscretizedConsumptionChartLine 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='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
-                label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
+        <RenderIf isTrue={menu===1}>
+          <ChartFilters>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
+                <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>
-          </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>
-            <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>
+          <ChartFilters>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
+                <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>
+            <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>
-          <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))} />
-          </div>
+          <ChartFilters>
+            <div className='input'>
+              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
+                <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='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange />
+        {/* <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='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
-          const html = document.querySelector("table").outerHTML;
-          htmlToCSV(html, "telemetria.csv");
+          if (send) {
+            const html = document.querySelector("table").outerHTML;
+            htmlToCSV(html, "telemetria.csv");
+          }
+          else {
+            setSend(true)
+            getTableData()
+          }
        }}/>
      </Buttons>
      <p className='paragraph'>
--- a/src/services/charts/telemetry/getDemand.ts
+++ b/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,
-    endDate: string,
+    startDate: Date,
+    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" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
+			{"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`
-    }
  })

  return data.data
--- a/src/services/charts/telemetry/getDiscretization.ts
+++ b/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,
-    endDate: string,
+    startDate: Date,
+    endDate: Date,
    discretization: string
  ) {
-  const { '@smartAuth-token': token } = parseCookies()
-  const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/discretization', {
-    "type": discretization,
-    "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": unity}
-      ]
-    }, {
-      headers: {
-        'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
+    console.log(new Date(startDate).toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString())
+    const { data } = await api.post('/telemetry/discretization', {
+      "type": discretization,
+      // "type": "1_hora",
+      "filters": [
+          {"type" : "=", "field": "med_5min.ponto", "value": unity},
+          {"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
+        ]
+      // "filters": [
+      //     {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
+      //   ]
      }
-    }
-  )
+    )

  return data.data
 }
--- a/src/services/charts/telemetry/getPowerFactor.ts
+++ b/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,
-    endDate: string,
+    startDate: Date,
+    endDate: Date,
    discretization: string
  ) {
-  const { '@smartAuth-token': token } = parseCookies()
-  console.log(token.replace(/"/g, ''))
-  const { data } = await axios.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
+  const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
 		"filters": [
-			{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
-			{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
+			{"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 1292|E4jbc5ZWmgCCBMOVn4PvPx56MUbf4nUg5MNgxjmP`
-    }
  })
  return data.data
 }
--- a/src/styles/layouts/Telemetria/TelemetriaView.ts
+++ b/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; */
+`
--- a/src/styles/layouts/pld/PldView.ts
+++ b/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;
-
-    p {
-      margin: 0;
-    }
+    flex-wrap: nowrap;
  }
  .toolsbar2 {
    display: flex;
@ -459,7 +457,7 @@ export const PldGraphView = styled.main`

    flex-direction: column;

-    margin-bottom: 9px;
+    /* margin-bottom: 9px; */

    /* transform: translateY(-8px); */