Merge branch 'telemetry' into 'dev'

more issus pointed

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

src/components/graph/Chart.tsx

@@ -101,7 +101,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
         data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
         // backgroundColor: '#C2d5fb'
         backgroundColor: (value, ctx) => {
-          return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : draw('diagonal-right-left', '#C2d5fb');
+          return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
         },
       }
     ],

src/components/graph/Chart2.tsx

@@ -102,7 +102,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
         type: 'bar',
         label: 'Estimado',
         data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
-        backgroundColor: draw('diagonal-right-left', '#C2d5fb')
+        backgroundColor: document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null
       },
     ],
   }

src/components/graph/ChartView.ts

@@ -1,7 +1,11 @@
 import styled from "styled-components"
 
 export const ChartView = styled.div`
-  width: 100%!important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
 
   div{
     /* margin-top: 10px; */

src/components/graph/DemRegXDemConChart.tsx

@@ -155,7 +155,7 @@ export function DemRegXDemConChart({
   return (
     <ChartView>
       {/* <ChartTitle title={title} subtitle={subtitle}/> */}
-      <div>
+      <div style={{width: '90%'}}>
         <Chart ref={chartRef} type='bar' options={options} data={data} />
       </div>
     </ChartView>

src/components/graph/DiscretizedConsumptionChart.tsx

@@ -98,7 +98,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
   return (
     <ChartView>
       {/* <ChartTitle title={title} subtitle={subtitle}/> */}
-      <div>
+      <div style={{width: '90%'}}>
         <Chart type='bar' options={options} data={data} />
       </div>
     </ChartView>

src/components/graph/LineBarChart.tsx

@@ -179,9 +179,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
   return (
     <ChartView>
       <ChartTitle title={title} subtitle={subtitle}/>
-      <div>
       <Chart ref={chartRef} type='bar' options={options} data={data} />
-      </div>
     </ChartView>
   )
 }

src/components/graph/SingleBar.tsx

@@ -104,7 +104,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
           return parseFloat(value.economia_acumulada).toFixed(2)
         }),
         backgroundColor: (value, ctx) => {
-          return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
+          return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
         },
       },
       {

src/components/graph/cativoXLivreChart/index.tsx

@@ -136,7 +136,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         },
         borderWidth: 2,
         fill: false,
-        data: chartData.map(value => parseInt(value.economia_mensal)),
+        data: chartData?.map(value => parseInt(value.economia_mensal)),
       },
       {
         type: 'bar' as const,
@@ -144,7 +144,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         backgroundColor: (value, ctx) => {
           return '#C2D5FB'
         },
-        data: chartData.map(value => {
+        data: chartData?.map(value => {
           if (!value.dad_estimado)
           return parseInt(value.custo_cativo)
         }),
@@ -156,7 +156,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         backgroundColor: (value, ctx) => {
           return '#255488'
         },
-        data: chartData.map(value => {
+        data: chartData?.map(value => {
           if (!value.dad_estimado)
           return parseInt(value.custo_livre)
         }),
@@ -165,7 +165,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         type: 'bar',
         label: 'Est. Cativo',
         backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
-        data: chartData.map(value => {
+        data: chartData?.map(value => {
           if (value.dad_estimado)
           return parseInt(value.custo_cativo)
         }),
@@ -174,7 +174,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         type: 'bar',
         label: 'Est. Livre',
         backgroundColor: pattern.draw('diagonal', '#255488'),
-        data: chartData.map(value => {
+        data: chartData?.map(value => {
           if (value.dad_estimado)
           return parseInt(value.custo_livre)
         }),

src/components/graph/costIndicatorChart/index.tsx

@@ -89,7 +89,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
     datasets: [
       {
         label: '2021',
-        data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
+        data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
         // backgroundColor: '#C2d5fb'
         backgroundColor: (value, ctx) => {
           if (value.dad_estimado)
@@ -100,7 +100,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
       },
       {
         label: '2022',
-        data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
+        data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
         // backgroundColor: '#255488'
         backgroundColor: (value, ctx) => {
           if (value.dad_estimado)

src/components/graph/fatorPotenciaChart.tsx

@@ -82,6 +82,8 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
 
   const labels = label;
 
+  console.log(data1)
+
   const data = {
     labels,
     datasets: [
@@ -106,7 +108,9 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
   return (
     <ChartView>
       {/* <ChartTitle title={title} subtitle={subtitle} /> */}
+      <div style={{width: '90%'}}>
         <Line options={options} data={data} />
+      </div>
     </ChartView>
   )
 }

src/components/graph/graphCard/ChartCard.tsx

@@ -33,7 +33,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
 
   const labels = ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',];
 
-
   const data = {
     labels,
     datasets: [
@@ -43,24 +42,6 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
         borderColor: 'rgb(53, 162, 235)',
         backgroundColor: 'rgba(53, 162, 235, 0.5)',
       },
-      // {
-      //   label: 'Dataset 2',
-      //   data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-      //   borderColor: 'rgb(255, 114, 32)',
-      //   backgroundColor: 'rgba(255, 145, 0, 0.5)',
-      // },
-      // {
-      //   label: 'Dataset 3',
-      //   data: [1, 2, 3, 5, 7, 8, 9, 8, 9, 7, 8, 6, 4, 3, 2, 3, 3, 4, 4, 5, 5, 5, 6, 6, 7, 7, 9, 10, 11, 12, 12, 14, 15, 17, 20, 21, 18, 15, 14, 12, 11, 10, 8, 6, 7, 8, 7, 9],
-      //   borderColor: 'rgb(109, 109, 109)',
-      //   backgroundColor: 'rgba(90, 90, 90, 0.5)',
-      // },
-      // {
-      //   label: 'Dataset4',
-      //   data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-      //   borderColor: 'rgb(255, 166, 0)',
-      //   backgroundColor: 'rgba(255, 187, 0, 0.5)',
-      // },
     ],
   };
 

src/components/graph/grossAnualChart/GrossAnualChart.tsx

@@ -30,7 +30,7 @@ interface SingleBarInterface{
 
 export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
   function spacement(string) {
-    const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
+    const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? '  ' : string.length===5? '   ' : ''
 
     console.log(string.length)
 

src/components/graph/grossMensalChart/GrossMensalChart.tsx

@@ -43,7 +43,8 @@ interface ChartInterface {
 
 export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
   function spacement(string) {
-    const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
+    const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? '  ' : string.length===5? '   ' : ''
+    // const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
 
     console.log(string.length)
 

src/pages/dashboard/index.tsx

@@ -64,6 +64,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         </section>
       </Link>
 
+      {
+        typeof window === 'undefined' || typeof window === undefined? null :
+        <>
           <section className='dashboard'>
             <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
               <GrossAnualChart title='' subtitle=''
@@ -97,6 +100,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
               />
             </GraphCard>
           </section>
+        </>
+      }
+
     </DashboardView>
   )
 }

src/pages/economy/index.tsx

@@ -37,6 +37,8 @@ import { ConsumoEstimado } from '../../services/consumoEstimado';
 import CostIndicatorChart from '../../components/graph/costIndicatorChart';
 import { EconomyView } from '../../styles/layouts/economy/economy';
 
+import dynamic from 'next/dynamic';
+
 export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
   const {economyMenu, setEconomyMenu} = useContext(MenuContext)
 
@@ -74,20 +76,20 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
   }, [unity])
 
   useEffect(() => {
-    api.post('/economy/estimates', unity!==''?{
+    api.post('/economy/MWh', unity!==''?{
       "filters": [
         {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
       ]
     }:{}).then(res => {
       setIndicatorDataState(res.data.data)
-      console.log()
+      console.log('res', res.data.data)
     }).catch(res => {
       // console.log(res)
     })
   }, [unity])
 
   return (
-    <EconomyView style={{width: '100%'}}>
+    <EconomyView>
       <Head>
         <title>Smart Energia - PLD</title>
       </Head>
@@ -105,6 +107,9 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
         </Tabs>
       </TableHeader>
 
+      {
+        typeof window === 'undefined' || typeof window === undefined? null :
+        <>
           <RenderIf isTrue={economyMenu===0}>
             <section>
               <GrossAnualChart title='' subtitle=''
@@ -117,22 +122,25 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
           </RenderIf>
 
           <RenderIf isTrue={economyMenu===1}>
+            <section>
               <GrossMensalChart title='' subtitle=''
                 data1={brutaMensal}
                 data2={brutaMensal}
                 label={yearsBrutaMensal}
               />
+            </section>
           </RenderIf>
 
           <RenderIf isTrue={economyMenu===2}>
             <div style={{paddingLeft: '7%'}}>
-          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+              <FormControl sx={{ m: 1, minWidth: 120, width: 200, height: '64px' }} size="small">
                 <InputLabel id="demo-select-small">Unidade</InputLabel>
                 <Select
                   labelId="demo-select-small"
                   id="demo-select-small"
                   value={unity}
                   label="Unidade"
+                  sx={{height: '64px'}}
                   onChange={value => setUnity(value.target.value)}
                   fullWidth
                 >
@@ -161,6 +169,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
                   labelId="demo-select-small"
                   id="demo-select-small"
                   value={unity}
+                  sx={{height: '64px'}}
                   label="Unidade"
                   onChange={value => setUnity(value.target.value)}
                   fullWidth
@@ -177,16 +186,15 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
             </div>
             <section>
               <CostIndicatorChart title='' subtitle=''
-            data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
+                data1={indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
-              :
+                data2={indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
-            indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
-            data2={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))
-              :
-            indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
                 label={months}
               />
             </section>
           </RenderIf>
+        </>
+      }
+
     </EconomyView>
   )
 }

src/pages/news/index.tsx

@@ -49,7 +49,8 @@ export default function aboutUs({userName, news}: any) {
 
         <a href='https://www.energiasmart.com.br/noticias/'
         target={"_blank"}
-        rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
+        rel={"noreferrer"}>Ver Mais</a>
+
       </NewsView>
     </main>
   )

src/pages/telemetria/index.tsx

@@ -197,7 +197,7 @@ export default function Telemetria({userName, clients}: any) {
   }, [discretization])
 
   return(
-    <TelemetriaView>
+    <main style={{width: '100%'}}>
       <Head>
         <title>Smart Energia - Telemetria</title>
       </Head>
@@ -245,6 +245,7 @@ export default function Telemetria({userName, clients}: any) {
       <Header name={userName}>
         <PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
       </Header>
+      <TelemetriaView>
         {/* <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
@@ -275,7 +276,7 @@ export default function Telemetria({userName, clients}: any) {
                     value={unity}
                     label="Unidade"
                     onChange={value => setUnity(value.target.value)}
-                  sx={{height: 63, mb: 0.5}}
+                    sx={{height: 63, mb: 2}}
                     fullWidth
                   >
                     <MenuItem value="">
@@ -299,7 +300,7 @@ export default function Telemetria({userName, clients}: any) {
                     value={discretization}
                     label="Discretização"
                     onChange={value => setDiscretization(value.target.value)}
-                  sx={{height: 63, mb: 0.5}}
+                    sx={{height: 63, mb: 2}}
                     fullWidth
                   >
                     <MenuItem value="">
@@ -308,8 +309,8 @@ export default function Telemetria({userName, clients}: any) {
                     <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_dia">1 dia</MenuItem>
-                  <MenuItem value="1_mes">1 mês</MenuItem>
+                    <MenuItem value="1_mes">1 mês</MenuItem> */}
                   </Select>
                 </FormControl>
               </div>
@@ -320,7 +321,7 @@ export default function Telemetria({userName, clients}: any) {
                     inputFormat="dd/MM/yyyy"
                     value={startDate}
                     onChange={handleChangeStartDate}
-                  renderInput={(params) => <TextField {...params}/>}
+                    renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
                   />
                 </div>
                 <div className='datePicker' style={{marginRight: 10}}>
@@ -339,7 +340,7 @@ export default function Telemetria({userName, clients}: any) {
                             new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
                         }
                     onChange={(newValue: any) => handleChangeEndDate(newValue)}
-                  renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+                    renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
                   />
                 </div>
               </LocalizationProvider>
@@ -363,7 +364,7 @@ export default function Telemetria({userName, clients}: any) {
           <RenderIf isTrue={menu===1}>
             <ChartFilters>
               <div className='input'>
-              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
+                <FormControl style={{ minWidth: 100, width: 200}} size="small">
                   <InputLabel>Unidade</InputLabel>
                   <Select
                     labelId="demo-select-small"
@@ -371,7 +372,7 @@ export default function Telemetria({userName, clients}: any) {
                     value={unity}
                     label="Unidade"
                     onChange={value => setUnity(value.target.value)}
-                  sx={{height: 63, mb: 0.5}}
+                    sx={{height: 63, mb: 2}}
                     fullWidth
                   >
                     <MenuItem value="">
@@ -395,7 +396,7 @@ export default function Telemetria({userName, clients}: any) {
                     value={discretization}
                     label="Discretização"
                     onChange={value => setDiscretization(value.target.value)}
-                  sx={{height: 63, mb: 0.5}}
+                    sx={{height: 63, mb: 2}}
                     fullWidth
                   >
                     <MenuItem value="">
@@ -416,7 +417,7 @@ export default function Telemetria({userName, clients}: any) {
                     inputFormat="dd/MM/yyyy"
                     value={startDate}
                     onChange={handleChangeStartDate}
-                  renderInput={(params) => <TextField {...params}/>}
+                    renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
                   />
                 </div>
                 <div className='datePicker' style={{marginRight: 10}}>
@@ -435,14 +436,14 @@ export default function Telemetria({userName, clients}: any) {
                             new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
                         }
                     onChange={(newValue: any) => handleChangeEndDate(newValue)}
-                  renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+                    renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
                   />
                 </div>
               </LocalizationProvider>
               <div className='select'>
                 <BasicButton title='Selecionar!' onClick={() => {
-                getDiscretization(unity, startDate, endDate, discretization)
+                  getDemand(unity, startDate, endDate, discretization)
-                  .then(result => setDiscretizedConsumptionData(result))
+                    .then(result => setDemRegXDemCon(result))
                     .catch(exception => console.log(exception))
                 }}/>
               </div>
@@ -455,7 +456,7 @@ export default function Telemetria({userName, clients}: any) {
           <RenderIf isTrue={menu===2}>
             <ChartFilters>
               <div className='input'>
-              <FormControl sx={{ minWidth: 100, width: 200 }} size="small">
+                <FormControl style={{ minWidth: 100, width: 200}} size="small">
                   <InputLabel>Unidade</InputLabel>
                   <Select
                     labelId="demo-select-small"
@@ -463,7 +464,7 @@ export default function Telemetria({userName, clients}: any) {
                     value={unity}
                     label="Unidade"
                     onChange={value => setUnity(value.target.value)}
-                  sx={{height: 63, mb: 0.5}}
+                    sx={{height: 63, mb: 2}}
                     fullWidth
                   >
                     <MenuItem value="">
@@ -487,7 +488,7 @@ export default function Telemetria({userName, clients}: any) {
                     value={discretization}
                     label="Discretização"
                     onChange={value => setDiscretization(value.target.value)}
-                  sx={{height: 63, mb: 0.5}}
+                    sx={{height: 63, mb: 2}}
                     fullWidth
                   >
                     <MenuItem value="">
@@ -508,7 +509,7 @@ export default function Telemetria({userName, clients}: any) {
                     inputFormat="dd/MM/yyyy"
                     value={startDate}
                     onChange={handleChangeStartDate}
-                  renderInput={(params) => <TextField {...params}/>}
+                    renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
                   />
                 </div>
                 <div className='datePicker' style={{marginRight: 10}}>
@@ -527,14 +528,14 @@ export default function Telemetria({userName, clients}: any) {
                             new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
                         }
                     onChange={(newValue: any) => handleChangeEndDate(newValue)}
-                  renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+                    renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
                   />
                 </div>
               </LocalizationProvider>
               <div className='select'>
                 <BasicButton title='Selecionar!' onClick={() => {
-                getDiscretization(unity, startDate, endDate, discretization)
+                  getPowerFactorData(unity, startDate, endDate, discretization)
-                  .then(result => setDiscretizedConsumptionData(result))
+                    .then(result => setFatorPotenciaData(result))
                     .catch(exception => console.log(exception))
                 }}/>
               </div>
@@ -594,7 +595,7 @@ export default function Telemetria({userName, clients}: any) {
               </div>
               <div className='select'>
                 <BasicButton title='Selecionar!' onClick={() => {
-                getDiscretization(unity, startDate, endDate, discretization)
+                  getDemand(unity, startDate, endDate, discretization)
                     .then(result => setDiscretizedConsumptionData(result))
                     .catch(exception => console.log(exception))
                 }}/>
@@ -682,6 +683,7 @@ export default function Telemetria({userName, clients}: any) {
         </p>
 
       </TelemetriaView>
+    </main>
   )
 }
 

src/services/charts/telemetry/getDemand.ts

@@ -10,6 +10,7 @@ export async function getDemand(
   ) {
   const { '@smartAuth-token': token } = parseCookies()
   const { data } = await api.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
+    "type": discretization,
 		"filters": [
 			{"type" : "=", "field": `med_5min.ponto`, "value": unity},
 			{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}

src/services/charts/telemetry/getPowerFactor.ts

@@ -9,6 +9,7 @@ export async function getPowerFactorData(
     discretization: string
   ) {
   const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
+    "type": discretization,
 		"filters": [
 			{"type" : "=", "field": "med_5min.ponto", "value": unity},
 			{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}

src/styles/globals.ts

@@ -44,7 +44,7 @@ export const GlobalStyle = createGlobalStyle`
     .MuiOutlinedInput-input, .MuiInputBase-input, .MuiInputBase-inputAdornedEnd, .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
       padding: 0 0 0 15px;
       width: 100%;
-      height: 63px!important;
+      height: 63px;
     }
       .css-1u3bzj6-MuiFormControl-root-MuiTextField-root,
       .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -7,7 +7,7 @@ export const TelemetriaView = styled.main`
 
   flex-direction: column;
 
-  padding: 20px;
+  padding: 0;
   width: 100%;
 
   .modal {
@@ -95,14 +95,12 @@ export const TelemetriaView = styled.main`
   table {
     display: none;
   }
-
   .tg{
     border-collapse:collapse;
     border-spacing:0;
     font-family:Poppins;
     width: 100%;
   }
-
   .tg td{
     border-color:#DDDFE1;
     border-style:solid;
@@ -113,7 +111,6 @@ export const TelemetriaView = styled.main`
     padding:17px 30px;
     word-break:normal;
   }
-
   .tg th{
     border-color:#DDDFE1;
     border-style:solid;
@@ -158,7 +155,6 @@ export const TelemetriaView = styled.main`
     text-align:center;
     vertical-align:top
   }
-
   .tg .tg-baqh{
     text-align:center;
     vertical-align:top
@@ -173,6 +169,10 @@ export const TelemetriaView = styled.main`
     vertical-align:top
   }
 
+  canvas {
+    align-self: center;
+  }
+
   input {
     width: 15rem;
 
@@ -383,13 +383,15 @@ export const TableHeader = styled.div`
 
   flex-direction: row;
 
-  padding: 0 40px 0 40px
+  /* padding: 0 40px 0 40px */
 `
 
 export const ChartFilters = styled.section`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  justify-content: center!important;
+  justify-content: flex-start!important;
+
+  margin-left: 72px;
 
   align-self: flex-start;
 

src/styles/layouts/economy/economy.ts

@@ -1,9 +1,28 @@
 import styled from 'styled-components'
 
 export const EconomyView = styled.main`
+  width: 100%;
+
+  .MuiInputLabel-root, .MuiInputLabel-formControl {
+    margin-top: 11px;
+  }
+
   section {
     display: flex;
     justify-content: center;
     align-items: center;
   }
+
+  input {
+    width: 16.6rem;
+    height: 63px!important;
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: 400;
+
+    border-radius: 6px;
+    border: solid gray 1px;
+
+    background-color: #F9F9F9;
+  }
 `

src/styles/layouts/news/NewsView.ts

@@ -1,6 +1,12 @@
 import styled from "styled-components";
 
 export const NewsView = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
   width: 100%;
 
   margin-bottom: 100px;
@@ -71,6 +77,35 @@ export const NewsView = styled.main`
       }
     }
   }
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1px;
+
+    width: 140px;
+    height: 45px;
+
+    cursor: pointer;
+
+    background: #dadada;
+    border-radius: 8px;
+    border-style: none;
+
+    font-family: 'Poppins';
+    font-size: 90%;
+
+    transition: all 350ms ease-in;
+
+    :hover {
+      transform: scale(1.02);
+      opacity: 0.9;
+      box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
+    }
+
+    color: #000;
+  }
 `;
 
 export const Button = styled.div`