fixing list errors

src/components/graph/cativoXLivreChart/index.tsx

@@ -79,8 +79,6 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
 
   const options: any = config(miniature)
 
-  console.log(chartData?.map(value => value.dad_estimado)?.includes(true))
-
   const data: any = {
     labels,
     datasets: chartData?.map(value => value.dad_estimado)?.includes(true) ? [
@@ -129,7 +127,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
           return parseInt(value.custo_cativo)
         }),
         borderRadius: 8,
-        backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
+        backgroundColor: pattern.draw('diagonal-right-left', '#C2D5FB'),
         skipNull: chartData?.map(value => value.dad_estimado)?.includes(true)
       },
       {
@@ -140,7 +138,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
           return parseInt(value.custo_livre)
         }),
         borderRadius: 8,
-        backgroundColor: pattern.draw('diagonal', '#255488'),
+        backgroundColor: pattern.draw('diagonal-right-left', '#255488'),
         skipNull: chartData?.map(value => value.dad_estimado)?.includes(true)
       }
     ] : [

src/components/graph/costIndicatorChart/index.tsx

@@ -42,9 +42,6 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
 
   const options: any = config(miniature)
 
-  console.log(data1)
-  console.log(data2)
-
   const data = {
     labels,
     datasets: [

src/components/graph/fatorPotenciaChart.tsx

@@ -58,6 +58,8 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
         },
       },
       y: {
+        max: 1,
+        min: 0,
         grid: {
           display: false
         },

src/components/graph/grossAnualChart/GrossAnualChart.tsx

@@ -52,6 +52,8 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
       },
       y: {
         stacked: false,
+        max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada)) + 350,
+        min: 0,
         grid: {
           display: false
         },
@@ -61,6 +63,9 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
           }
         },
       },
+    },
+    axisY: {
+
     },
     series: {
       downsample: {
@@ -82,8 +87,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
         },
         display: true,
         anchor: "end",
-        offset: !miniature? 0 : -5,
+        align: "end",
-        align: "start",
         font: {
           weight: 'bold',
           size: !miniature? window.innerWidth/80 : window.innerWidth/125,
@@ -105,11 +109,6 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
   const labels: string[] = label.filter(function(item, pos) {
       return label.indexOf(item) == pos;
   });
-  //if (bruta) {
-  //  labels = [`Até ${new Date().getFullYear()-1}`, `${new Date().getFullYear()}`]
-  //} else {
-  //  labels = label;
-  //}
 
   const data: any = {
     labels,
@@ -121,6 +120,11 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
         data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => {
           return parseFloat(value.economia_acumulada)
         }),
+        datalabels: {
+          backgroundColor: '#255488',
+          borderRadius: 8,
+          opacity: .8,
+        },
         borderRadius: 10,
         backgroundColor: '#255488',
       },
@@ -129,10 +133,18 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
         stacked: true,
         label: 'Estimado',
         spanGaps: true,
+        datalabels: {
+          offset: dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
+            if (index === 1) {
+              return 30
+            }
+            return 0
+          })
+        },
         data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
           if (value.dad_estimado)
             return parseFloat(value.economia_acumulada)
-          else 
+          else
             return 0
         })),
         borderRadius: 10,

src/contexts/AuthContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useState } from "react";
 import Router from 'next/router'
 
-import { destroyCookie, setCookie } from "nookies";
+import { destroyCookie, parseCookies, setCookie } from "nookies";
 
 import { logout, signInRequest } from "../services/auth";
 import { api } from "../services/api";
@@ -37,6 +37,7 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
     destroyCookie(null, 'user-role')
     destroyCookie(null, 'user-id')
     destroyCookie(null, '@smartAuth-token')
+    destroyCookie(null, 'user-profile_picture')
 
     logout()
   }
@@ -69,6 +70,11 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
     if (user.profile_picture)
       setCookie(undefined, 'user-profile_picture', user.profile_picture)
 
+    const { ['terms']: terms } = parseCookies()
+
+    if (!terms)
+      setCookie(undefined, 'terms', 'false')
+
     api.defaults.headers['Authorization'] = `Bearer ${token}`
 
     if (!exception) {

src/pages/dashboard/index.tsx

@@ -8,7 +8,7 @@ import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle'
 import Link from 'next/link'
 
-import { parseCookies } from 'nookies'
+import { parseCookies, setCookie } from 'nookies'
 import { GetServerSideProps } from 'next'
 import getAPIClient from '../../services/ssrApi'
 import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
@@ -17,6 +17,25 @@ import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
 import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
 import Head from 'next/head'
 import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
+import { format } from 'date-fns'
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import RenderIf from '../../utils/renderIf'
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '50%',
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
 
 export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
   const months = [
@@ -34,25 +53,33 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
     'Dez'
   ]
 
+  const { ['terms']: terms } = parseCookies()
+
   const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
   const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
+
+  const [open, setOpen] = useState(true);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   useEffect(() => {
     let lastDataMensal = '0'
     let lastDataAnual = '0'
     let index=0
-      while (index < grossMensalGraph.length) {
+
-        if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada!==null)
+    while (index < grossMensalGraph.length) {
-          lastDataMensal=grossMensalGraph[index].economia_acumulada
+      if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada!==null)
-        index++
+        lastDataMensal=grossMensalGraph[index].economia_acumulada
-      }
+      index++
-      setLastDataBrutaMensal(`${parseFloat(lastDataMensal).toFixed(3)}`)
+    }
-      index=0
+    setLastDataBrutaMensal(`${parseFloat(lastDataMensal).toFixed(3)}`)
-      while (index < grossAnualGraph.length) {
+    index=0
-        if (!grossAnualGraph[index].dad_estimado)
+    while (index < grossAnualGraph.length) {
-          lastDataAnual=grossAnualGraph[index].economia_acumulada
+      if (!grossAnualGraph[index].dad_estimado)
-        index++
+        lastDataAnual=grossAnualGraph[index].economia_acumulada
-      }
+      index++
-      setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`)
+    }
+    setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`)
   }, [])
 
   return (
@@ -66,7 +93,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 
       <Link href='pld'>
         <section className="cardsSection" >
-          <MapCard title='R$/MWh' subtitle='' date={`${new Date().getUTCMonth()+1}/${new Date().getUTCFullYear()}`} statistic='' imgSource='/moneyIcon.svg' />
+          <MapCard title='R$/MWh' subtitle='' date={`${format(new Date(), 'MM/yyyy')}`} statistic='' imgSource='/moneyIcon2.png' />
           {
             mapsInfo.map(value => {
               return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
@@ -92,7 +119,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
               <GrossMensalChart title='' subtitle=''
                 data1={grossMensalGraph}
                 data2={grossMensalGraph}
-                //label={grossMensalGraph.map((value) => value.mes)}
                 label={months}
                 miniature
               />
@@ -107,13 +133,44 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
             <GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
               <CostIndicatorChart title='' subtitle=''
                 data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
-                // data1={graphData}
                 data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
                 label={months}
                 miniature
               />
             </GraphCard>
           </section>
+          <Modal
+            open={terms=='false'}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+          >
+            <Box sx={style}>
+              <Typography id="modal-modal-title" variant="h6" component="h2">
+                Termos de uso
+              </Typography>
+              <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                <p>
+                  Bem-vindo a Plataforma Web – SMART ENERGIA!
+                </p>
+                <p>
+                  Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
+                </p>
+                <p>
+                  Conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros.
+                </p>
+                <p>
+                  A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
+                </p>
+                <p>
+                  Ressaltamos que os resultados informados são meramente indicativos.
+                </p>
+                <button onClick={() => {
+                  setCookie(undefined, 'terms', 'true')
+                  setOpen(false)
+                }}>Aceito os termos</button>
+              </Typography>
+            </Box>
+          </Modal>
         </>
       }
     </DashboardView>

src/pages/economy/index.tsx

@@ -77,7 +77,6 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
         {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity === "default" ? unity : unity}
       ]
     }:{}).then(res => {
-      console.log(res.data.data)
       setCatLivDataState(res.data.data)
     })
 

src/pages/pld/index.tsx

@@ -38,7 +38,7 @@ interface pldInterface {
 }
 
 export default function pld({tableData, userName, clientMonth}: pldInterface) {
-  const {pldMenu, setPldMenu} = useContext(MenuContext)
+  const { pldMenu, setPldMenu } = useContext(MenuContext)
 
   const dateFormated = new Date()
 

src/pages/resumoOperacao/index.tsx

@@ -158,7 +158,7 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
           </div>
         </article>
         <article>
-          <BasicButton title='Baixar CSV' onClick={() => {
+          <BasicButton title='Download' onClick={() => {
             const html = document.querySelector("table").outerHTML;
             htmlToCSV(html, "resumo_operacao.csv");
           }}/>

src/pages/telemetria/index.tsx

@@ -46,13 +46,14 @@ export default function Telemetria({userName, clients}: any) {
   const [unity, setUnity] = useState(clients[0].codigo_scde);
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
-  const [discretization, setDiscretization] = useState('5_min');
+  const [month, setMonth] = useState(new Date().getMonth()+1);
+  const [discretization, setDiscretization] = useState('1_hora');
 
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
   const [openSnackError, setOpenSnackError] = useState<boolean>(false)
   const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
 
-  const currentDate = new Date().toLocaleDateString().split('/').reverse().join('-')
+  const months=['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
 
   const handleCloseSnack = (
     event?: React.SyntheticEvent | Event,
@@ -68,7 +69,13 @@ export default function Telemetria({userName, clients}: any) {
   }
 
   function downloadCSVFile(csv, filename) {
-    const csv_file = new Blob([csv], {type: "text/csv"});
+    /*exemplo caso mudar o type do blob não resolva
+
+    var csvContent = 'éà; ça; 12\nà@€; çï; 13',
+    textEncoder = new TextEncoder('windows-1252');
+    */
+
+    const csv_file = new Blob([csv], {type: "text/csv;charset=utf-8"});
 
     const download_link = document.createElement("a");
 
@@ -108,7 +115,6 @@ export default function Telemetria({userName, clients}: any) {
 
   const [showChart, setShowChart] = useState(false);
 
-  const [exception, setException] = useState(false);
   const [send, setSend] = useState(false);
 
   const [open, setOpen] = useState(false);
@@ -120,35 +126,6 @@ export default function Telemetria({userName, clients}: any) {
     setEndDate(newValue)
   };
 
-  const [demRegXDemCon2, setDemRegXDemCon2] = useState([]);
-
-  async function getTableData() {
-    const html = document.querySelector("table")?.outerHTML;
-    if (startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && send)
-      setOpen(true)
-      await api.post('/telemetry/powerFactor', {
-        "type": discretization,
-        "filters": [
-            {"type" : "=", "field": "med_5min.ponto", "value": unity},
-            {"type" : "between", "field": "dia_num", "value": [currentDate.slice(0, 8) + '01', currentDate]}
-          ]
-      }).then(res => {
-        setTableData(res.data.data)
-        setOpenSnackError(false)
-        setOpenSnackSuccess(true)
-        setOpen(false)
-        setLoader(false)
-        htmlToCSV(html, "telemetria.csv")
-        console.log('then')
-      }).catch(res => {
-        setSend(false)
-        setLoader(false)
-        setException(true)
-        setOpenSnackError(true)
-        setOpenSnackSuccess(false)
-        console.log('catch')
-      })
-  }
 
   const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
   const [demRegXDemCon, setDemRegXDemCon] = useState([]);
@@ -159,9 +136,11 @@ export default function Telemetria({userName, clients}: any) {
   }, [startDate, endDate])
 
   useEffect(() => {
-    const firstOfTheMonth = format(new Date(startDate).setDate(1), 'yyyy-MM-dd')
+    const firstOfTheMonth = format(new Date(startDate).setDate(2), 'yyyy-MM-dd')
     const lastOfTheMonth = format(new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0), 'yyyy-MM-dd')
 
+    setStartDate(new Date(firstOfTheMonth))
+
     setLoader(true)
     getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization)
     .then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
@@ -169,12 +148,8 @@ export default function Telemetria({userName, clients}: any) {
 
     getDemand(unity, startDate, endDate, discretization)
       .then(result => {
-        // const html = document.querySelector("table")?.outerHTML;
-        // htmlToCSV(html, "telemetria.csv")
-
         setDemRegXDemCon(result);
         setSend(false);
-        console.log(result)
         setTableData(result)
       })
       .catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
@@ -304,41 +279,72 @@ export default function Telemetria({userName, clients}: any) {
                   </Select>
                 </FormControl>
               </div>
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                {
-                <div className='datePicker'>
+                  discretization === '1_mes' ?
-                  <DesktopDatePicker
+                  <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
-                    label="Data inicial"
+                    <InputLabel>Discretização</InputLabel>
-                    inputFormat="dd/MM/yyyy"
+                    <Select
-                    value={startDate}
+                      labelId="demo-select-small"
-                    onChange={handleChangeStartDate}
+                      id="demo-select-small"
-                    renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
+                      value={month}
-                  />
+                      label="Mês"
-                </div>
+                      onChange={value => {
-                <div className='datePicker' style={{marginRight: 10}}>
+                        setMonth(value.target.value as number)
-                  <DesktopDatePicker
+                        const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number)-1, 1)
-                    label="Data final"
+                        const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
-                    inputFormat="dd/MM/yyyy"
+                        setStartDate(firstOfTheMonth)
-                    value={endDate}
+                        setEndDate(lastOfTheMonth)
-                    maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                      }}
-                      :
+                      sx={{height: 63, mb: 2}}
-                      discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                      fullWidth
-                        :
+                    >
-                        discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
+                      <MenuItem value="">
+                        <em>Nenhum</em>
+                      </MenuItem>
+                      {
+                        months.slice(0, new Date().getUTCMonth()+1).map(value => {
+                          return <MenuItem key={value} value={months.indexOf(value)+1 as number}>{value}</MenuItem>
+                        })
+                      }
+                    </Select>
+                  </FormControl>
+                  :
+                  <LocalizationProvider dateAdapter={AdapterDateFns}>
+                    <div className='datePicker'>
+                      <DesktopDatePicker
+                        label="Data inicial"
+                        inputFormat="dd/MM/yyyy"
+                        value={startDate}
+                        onChange={handleChangeStartDate}
+                        renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
+                      />
+                    </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 === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
+                          discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
                             :
-                            new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
+                            discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
-                        }
+                              :
-                    onChange={(newValue: any) => handleChangeEndDate(newValue)}
+                              discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
-                    renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
+                                :
-                  />
+                                new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
-                </div>
+                            }
-              </LocalizationProvider>
+                        onChange={(newValue: any) => handleChangeEndDate(newValue)}
+                        renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
+                      />
+                    </div>
+                  </LocalizationProvider>
+                }
               <div className='select'>
                 <BasicButton title='Selecionar!' onClick={() => {
                   setLoader(true)
                   getDiscretization(unity, startDate, endDate, discretization)
-                    .then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
+                    .then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result)})
                     .catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
                 }}/>
               </div>
@@ -527,7 +533,7 @@ export default function Telemetria({userName, clients}: any) {
                 <BasicButton title='Selecionar!' onClick={() => {
                   setLoader(true)
                   getPowerFactorData(unity, startDate, endDate, discretization)
-                    .then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false)})
+                    .then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result)})
                     .catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
                 }}/>
               </div>
@@ -548,7 +554,86 @@ export default function Telemetria({userName, clients}: any) {
             </div>
           </div>
         </RenderIf>
-        <RenderIf isTrue={true}>
+
+        <RenderIf isTrue={menu===2}>
+          <table className="tg">
+            <thead>
+              <tr>
+                <th className='tg-8oo6'>Ponto</th>
+                <th className='tg-8oo6'>Numero do dia</th>
+                <th className='tg-8oo6'>Dia formatado</th>
+                <th className='tg-8oo6'>Hora</th>
+                <th className='tg-8oo6'>f_ref</th>
+                <th className='tg-8oo6'>Consumo</th>
+                <th className='tg-8oo6'>Reativa</th>
+                <th className='tg-8oo6'>fp</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                fatorPotenciaData!==null?
+                fatorPotenciaData?.map((value, index) => {
+                  return <>
+                    <tr>
+                      <td key={index} className='tg-gceh'>{value.ponto}</td>
+                      <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
+                      <td key={index} className='tg-uulg'>{value.day_formatted}</td>
+                      <td key={index} className='tg-gceh'>{value.hora}</td>
+                      <td key={index} className='tg-gceh'>{value.f_ref}</td>
+                      <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td key={index} className='tg-gceh'>{parseFloat(value.fp)}</td>
+                    </tr>
+                  </>
+                })
+                :
+                null
+              }
+            </tbody>
+          </table>
+        </RenderIf>
+        <RenderIf isTrue={menu===1}>
+          <table className="tg">
+            <thead>
+              <tr>
+                <th className='tg-8oo6'>Ponto</th>
+                <th className='tg-8oo6'>Numero do dia</th>
+                <th className='tg-8oo6'>Dia formatado</th>
+                <th className='tg-8oo6'>Hora</th>
+                {/* <th className='tg-8oo6'>Minuto</th> não temos */}
+                <th className='tg-8oo6'>Consumo</th>
+                <th className='tg-8oo6'>Reativa</th>
+                <th className='tg-8oo6'>dem contratada</th>
+                <th className='tg-8oo6'>dem registrada</th>
+                <th className='tg-8oo6'>dem tolerancia</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                demRegXDemCon!==null?
+                demRegXDemCon?.map((value, index) => {
+                  return <>
+                    <tr>
+                      <td key={index} className='tg-gceh'>{value.ponto}</td>
+                      <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
+                      <td key={index} className='tg-uulg'>{value.day_formatted}</td>
+                      <td key={index} className='tg-gceh'>{value.hora}</td>
+                      {/* <td key={index} className='tg-gceh'>{value.minut}</td> */}
+                      <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td key={index} className='tg-gceh'>{value.dem_cont}</td>
+                      <td key={index} className='tg-gceh'>{value.dem_reg}</td>
+                      <td key={index} className='tg-gceh'>{value.dem_tolerancia}</td>
+                    </tr>
+                  </>
+                })
+                :
+                null
+              }
+            </tbody>
+          </table>
+        </RenderIf>
+        <RenderIf isTrue={menu===0}>
           <table className="tg">
             <thead>
               <tr>
@@ -563,8 +648,8 @@ export default function Telemetria({userName, clients}: any) {
             </thead>
             <tbody>
               {
-                tableData!==null?
+                discretizedConsumptionData!==null?
-                tableData?.map((value, index) => {
+                discretizedConsumptionData?.map((value, index) => {
                   return <>
                     <tr>
                       <td key={index} className='tg-gceh'>{value.ponto}</td>
@@ -592,9 +677,8 @@ export default function Telemetria({userName, clients}: any) {
           {/* <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={() => {
-            console.log(send)
             const html = document.querySelector("table")?.outerHTML;
-            htmlToCSV(html, "telemetria.csv");
+            htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`);
           }}/>
         </Buttons>
         <p className='paragraph'>