add preliminares updates

public/assets/sidebar/aboutUs.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="white" stroke='gray'>
+<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
+</svg>

src/components/banner/BannerView.ts

@@ -9,6 +9,8 @@ export const BannerView = styled.div`
   width: 100%;
   height: 20%;
 
+  margin-bottom: 30px;
+
   .gradient {
     position: absolute;
     width: 100%;

src/components/buttons/gradientButton/GradientButton.tsx

@@ -11,12 +11,18 @@ interface GradientButtonInterface {
   purple?: undefined | null | boolean,
   green?: undefined | null | boolean,
   link?: any,
+  onClick?: () => void
 }
 
-export default function GradientButton({ title, description, orange, purple, green, link }: GradientButtonInterface) {
+export default function GradientButton({ title, description, orange, purple, green, link, onClick }: GradientButtonInterface) {
   const router = useRouter()
+
+  function handleClick() {
+    onClick()
+  }
+
   return (
-    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : null} >
+    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : handleClick()} >
       <p>{title}</p>
       <p>{description}</p>
     </GradientButtonView>

src/components/graph/Chart.tsx

@@ -43,6 +43,30 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
   const labels = label;
   const empty = []
 
+  const options: any = {
+    responsive: true,
+    plugins: {
+      datalabels: {
+        display: true,
+        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        formatter: Math.round,
+        anchor: "end",
+        offset: -20,
+        align: "start",
+        font: {
+          size: 16
+        }
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: true,
+        text: '',
+      },
+    },
+  };
+
   const data = {
     labels,
     datasets: [
@@ -60,28 +84,6 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
     ],
   }
 
-  const options: any = {
-    responsive: true,
-    plugins: {
-      datalabels: {
-        display: true,
-        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
-        formatter: Math.round,
-        anchor: "end",
-        offset: -20,
-        align: "start"
-      },
-      legend: {
-        position: 'bottom' as const,
-      },
-      title: {
-        display: true,
-        text: '',
-      },
-    },
-  };
-
-
   return (
     <ChartView>
       {/* <RenderIf isTrue={single? true : false} >

src/components/graph/LineBarChart.tsx

@@ -13,7 +13,7 @@ import { Chart } from 'react-chartjs-2';
 import faker from 'faker';
 import { ChartView } from './ChartView';
 import ChartTitle from './ChartTitle';
-import { draw } from 'patternomaly'
+import pattern from 'patternomaly'
 
 ChartJS.register(
   LinearScale,
@@ -87,10 +87,14 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
       datalabels: {
         display: true,
         color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
+        // backgroundColor: '#255488',
         formatter: Math.round,
         anchor: "end",
         offset: -20,
-        align: "start"
+        align: "start",
+        font: {
+          size: 16
+        }
       },
       legend: {
         position: 'bottom' as const,
@@ -110,6 +114,9 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         label: dataset1? dataset1 : 'Dataset 1',
         borderColor: red?
         '#f00' : '#0c9200',
+        datalabels: {
+          backgroundColor: 'white'
+        },
         borderWidth: 2,
         fill: false,
         data: data1.map(value => value),
@@ -118,7 +125,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         type: 'bar' as const,
         label: dataset2? dataset2 : 'Dataset 2',
         backgroundColor: (value, ctx) => {
-          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : '#C2D5FB' : '#C2D5FB'
+          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
         },
         data: data3.map(value => value),
       },
@@ -127,7 +134,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         label: dataset3? dataset3 : 'Dataset 2',
         // backgroundColor: '#255488',
         backgroundColor: (value, ctx) => {
-          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : '#255488' : '#255488'
+          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
         },
         data: data2.map(value => value),
       },

src/components/graph/LineChart.tsx

@@ -53,7 +53,10 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
         formatter: Math.round,
         anchor: "end",
         offset: -20,
-        align: "start"
+        align: "start",
+        font: {
+          size: 16
+        }
       },
       legend: {
         position: 'bottom' as const,

src/components/graph/SingleBar.tsx

@@ -12,7 +12,7 @@ import { Bar } from 'react-chartjs-2';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { ChartView } from './ChartView';
 import ChartTitle from './ChartTitle';
-import { draw } from 'patternomaly'
+import { draw, generate } from 'patternomaly'
 
 ChartJS.register(
   CategoryScale,
@@ -32,16 +32,20 @@ interface SingleBarInterface{
   dataset: string,
   barLabel?: boolean | undefined,
   year?: boolean | undefined,
-  day?: boolean | undefined,
+  month?: boolean | undefined,
   dataset1?: string,
 }
 
-export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, day }: SingleBarInterface) {
+export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
-
   const currentTime = new Date();
 
   const options: object = {
     responsive: true,
+    series: {
+      downsample: {
+        threshold: 1000
+      }
+    },
     plugins: {
       datalabels: {
         formatter: (value, ctx) => {
@@ -50,15 +54,21 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
           dataArr.map(data => {
               sum += data;
           });
-          const percentage = (value*100 / sum).toFixed(2)+"%";
+          const percentage = (value*100 / sum).toFixed(0)+"%";
           const result = `${value}\n ${percentage}`
-          return result;
+
+          console.log(value)
+
+          return value==null? null : result
         },
         display: true,
         color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
         anchor: "end",
-        offset: -35,
+        offset: -40,
-        align: "start"
+        align: "start",
+        font: {
+          size: 16
+        }
       },
       legend: {
         position: 'bottom' as const,
@@ -77,22 +87,27 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
     datasets: [
       {
         label: dataset,
-        data: dataProps.map(value => value),
+        data: dataProps.map((value, index) => {
+          return year? label[index]<=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])>currentTime.getMonth()? null : value : null
+        }),
         backgroundColor: (value, ctx) => {
-          return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : '#C2D5FB' : day? parseInt(label[value.dataIndex])<=currentTime.getDay()? '#255488' : '#C2D5FB' : null
+          return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : 'transparent' : month? label.indexOf(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : 'transparent' : null// parseInt(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : draw('diagonal', '#C2D5FB') : null
         },
       },
       {
         label: dataset1,
-        backgroundColor: '#C2D5FB'
+        data: dataProps.map((value, index) => {
+          return year? label[index]>=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])<=currentTime.getMonth()? null : value : null
+        }),
+        backgroundColor: typeof window !== 'undefined'? draw('diagonal', '#C2D5FB') : null
       }
     ],
-  };
+  }
+
   return (
     <ChartView>
       <ChartTitle title={title} subtitle={subtitle} />
       <Bar options={options} data={data} />
-      {/* <Bar options={options} data={data} /> */}
     </ChartView>
   )
 }

src/components/mapCard/MapCard.tsx

@@ -7,9 +7,10 @@ interface MapCardInterface {
   subtitle: string,
   statistic?: string,
   imgSource: string,
+  date?: string
 }
 
-export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
+export default function MapCard({ title, subtitle, statistic, imgSource, date }: MapCardInterface) {
   const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}`
 
   return (
@@ -17,7 +18,12 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
         <Image src={imgSource} width={90} height={90}/>
         <div>
           <h4>{title}</h4>
-          <span>{subtitle}</span>
+          <span className='footer' >{subtitle}</span>
+          {
+            date?
+              <span>{date}</span> :
+              null
+          }
           <article>
             {
               statistic?

src/components/mapCard/MapCardView.ts

@@ -16,7 +16,7 @@ export const MapCardView = styled.figure<MapCardViewInterface>`
   h4 {
     margin-left: ${props => props.statistic? '0' : '10px'};
   }
-  span {
+  .footer {
     margin-left: ${props => props.statistic? '0' : '10px'};
     margin-bottom: ${props => props.statistic? '25px' : '0px'};
     margin-top: ${props => props.statistic? '0px' : '30px'};
@@ -28,6 +28,7 @@ export const MapCardView = styled.figure<MapCardViewInterface>`
   }
 
   span {
+    margin-left: ${props => props.statistic? '0' : '10px'};
   }
 
   div {

src/components/sidebar/Sidebar.tsx

@@ -38,8 +38,8 @@ export default function Sidebar() {
         <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
         <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 >'}</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'><p>25</p></div></li></Link>
-        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
+        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
         <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
         <Link href='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>
       </ul>

src/components/sidebar/SidebarView.ts

@@ -33,6 +33,20 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     color: #254F7F;
   }
 
+  .notification {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 38px;
+    height: 32px;
+
+    border-radius: 8px;
+
+    background-color: #254F7F;
+    color: white;
+  }
+
   ul {
     display: flex;
     justify-content: center;

src/pages/accumulatedSavings.tsx

@@ -6,6 +6,7 @@ import { SingleBar } from '../components/graph/SingleBar'
 import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { EconomiaAcumulada } from '../services/economiaAcumulada'
+import { dataEconomiaBruta } from '../services/economiaBruta'
 
 import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
 
@@ -18,7 +19,7 @@ export default function AccumulatedSavings() {
       <Header name='' />
       <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
-        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label1}  dataProps={EconomiaAcumulada.data2} barLabel day/>
+        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
       </section>
     </AccumulatedSavingsView>
   )

src/pages/chartTelemetry.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { SingleBar } from '../components/graph/SingleBar'
 import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
 import { useRouter } from 'next/router'
@@ -12,7 +12,36 @@ import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import Head from 'next/head'
 
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+
+const style = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '80%',
+  bgcolor: 'white',
+  p: 5,
+};
+
 export default function chartTelemetry() {
+  const [openFatorPotencia, setOpenFatorPotencia] = useState(false);
+  const handleCloseFatorPotencia = () => setOpenFatorPotencia(false);
+
+  const [openConsumoDiscretizado1, setOpenConsumoDiscretizado1] = useState(false);
+  const handleCloseConsumoDiscretizado1 = () => setOpenConsumoDiscretizado1(false);
+
+  const [openConsumoDiscretizado2, setOpenConsumoDiscretizado2] = useState(false);
+  const handleCloseConsumoDiscretizado2 = () => setOpenConsumoDiscretizado2(false);
+
+  const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
+  const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
 
   return (
     <ChatTelemetryView>
@@ -22,10 +51,61 @@ export default function chartTelemetry() {
       <Header name='' />
       <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
       <section className='chartContainer'>
+        <div onClick={() => setOpenFatorPotencia(true)}>
+          <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
+        </div>
+        <Modal
+          open={openFatorPotencia}
+          onClose={handleCloseFatorPotencia}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <Box sx={style}>
             <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
-        <LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
+          </Box>
-        <SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' day/>
+        </Modal>
+
+        <div onClick={() => setOpenConsumoDiscretizado1(true)}>
+          <LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
+        </div>
+        <Modal
+          open={openConsumoDiscretizado1}
+          onClose={handleCloseConsumoDiscretizado1}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <Box sx={style}>
+            <LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
+          </Box>
+        </Modal>
+
+        <div onClick={() => setOpenConsumoDiscretizado2(true)}>
+          <SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
+        </div>
+        <Modal
+          open={openConsumoDiscretizado2}
+          onClose={handleCloseConsumoDiscretizado2}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <Box sx={style}>
+            <SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
+          </Box>
+        </Modal>
+
+        <div onClick={() => setOpenDemandaContratada(true)}>
+          <LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
+        </div>
+        <Modal
+          open={openDemandaContratada}
+          onClose={handleCloseDemandaContratada}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <Box sx={style}>
             <LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
+          </Box>
+        </Modal>
       </section>
     </ChatTelemetryView>
   )

src/pages/dashboard.tsx

@@ -30,7 +30,7 @@ export default function Dashboard() {
       <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
       <Link href={'pld'}>
         <section className="cardsSection" >
-          <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
+          <MapCard title='R$/MWh' subtitle='abril / 22' date='até 10/10' statistic='' imgSource='/moneyIcon.svg' />
           <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
           <MapCard title='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
           <MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.svg' />
@@ -42,8 +42,8 @@ export default function Dashboard() {
         <GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
           <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
         </GraphCard>
-        <GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar>
+        <GraphCard title='Economia Acumulado' subtitle='Economia Acumulada' singleBar>
-          <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label1}  dataProps={EconomiaAcumulada.data2} barLabel day/>
+          <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
         </GraphCard>
         <GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
           <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
@@ -51,7 +51,6 @@ export default function Dashboard() {
         <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
           <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel/>
         </GraphCard>
-
       </section>
 
     </DashboardView>

src/pages/pld/index.tsx

@@ -186,10 +186,10 @@ export default function region() {
           </table>
           <section>
             <article onClick={() => setPage('perMouth')}>
-              <p>Valores Diarios: R$100,00</p>
+              <p>Valores Diarios</p>
             </article>
             <article onClick={() => setPage('perDate')}>
-              <p>Valores Horários: R$100,00</p>
+              <p>Valores Horários</p>
             </article>
           </section>
         </PldTableView>

src/pages/telemetria.tsx

@@ -6,21 +6,29 @@ import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaV
 import GradientButton from '../components/buttons/gradientButton/GradientButton'
 import Header from '../components/header/Header';
 import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Link from 'next/link';
 import Head from 'next/head';
+import { start } from 'nprogress';
+import LineChart from '../components/graph/LineChart';
+import { FatorPotencia } from '../services/fatorPotencia';
+import RenderIf from '../utils/renderIf';
 
 
 
 
 export default function Telemetria() {
-  const router = useRouter()
+  const [unity, setUnity] = React.useState('');
+  const [startDate, setStartDate] = React.useState('');
+  const [endDate, setEndDate] = React.useState('');
+  const [discretization, setDiscretization] = React.useState('');
 
-  const [age, setAge] = React.useState('');
+  const [showChart, setShowChart] = React.useState(false);
 
   const handleChange = (event: SelectChangeEvent) => {
-    setAge(event.target.value);
+    // setAge(event.target.value);
   };
 
   return(
@@ -34,80 +42,108 @@ export default function Telemetria() {
       sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
       - Distribuidora.' imgSource='/assets/graphical.png' />
 
-
+      <section>
-      <FormControl  size="small" sx={{  width: 300,  mt:10 , pl:7 }} style={{}}>
+        <div className='select'>
           <p className='title' >Unidade</p>
+          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+            <InputLabel id="demo-select-small">Unidade</InputLabel>
             <Select
-          value={age}
+              labelId="demo-select-small"
-          onChange={handleChange}
+              id="demo-select-small"
-          displayEmpty
+              value={unity}
-
+              label="Unidade"
+              onChange={value => setUnity(value.target.value)}
+              fullWidth
             >
               <MenuItem value="">
-          <span className='titleMenuItem'>Filial 3</span>
+                <em>None</em>
-          </MenuItem>
-          <MenuItem value={10}>Filial 3</MenuItem>
-          <MenuItem value={20}>Twenty</MenuItem>
-          <MenuItem value={30}>Thirty</MenuItem>
-        </Select>
-
-      </FormControl>
-
-      <FormControl size="small" sx={{ width: 300, mt:10 , pl:7}} >
-      <p className='title'>Data Inicial</p>
-        <Select
-          value={age}
-          onChange={handleChange}
-          displayEmpty
-
-        >
-          <MenuItem value="">
-          <span className='titleMenuItem'>07/09/2021</span>
               </MenuItem>
+              <MenuItem value="">07/09/2021</MenuItem>
               <MenuItem value={10}>Filial 3</MenuItem>
               <MenuItem value={20}>Twenty</MenuItem>
               <MenuItem value={30}>Thirty</MenuItem>
             </Select>
           </FormControl>
+        </div>
 
-      <FormControl size="small" sx={{ width: 300, mt:10 , pl:7, }} >
+        <div className='select'>
+          <p className='title' >Data inicial</p>
+          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+            <InputLabel id="demo-select-small">Data Inicial</InputLabel>
+            <Select
+              labelId="demo-select-small"
+              id="demo-select-small"
+              value={startDate}
+              label="Unidade"
+              onChange={value => setStartDate(value.target.value)}
+              fullWidth
+            >
+              <MenuItem value="">
+                <em>None</em>
+              </MenuItem>
+              <MenuItem value="">07/09/2021</MenuItem>
+              <MenuItem value={10}>Filial 3</MenuItem>
+              <MenuItem value={20}>Twenty</MenuItem>
+              <MenuItem value={30}>Thirty</MenuItem>
+            </Select>
+          </FormControl>
+        </div>
+
+        <div className='select'>
           <p className='title' >Data Final</p>
+          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+            <InputLabel id="demo-select-small">Data Final</InputLabel>
             <Select
-          value={age}
+              labelId="demo-select-small"
-          onChange={handleChange}
+              id="demo-select-small"
-          displayEmpty
+              value={endDate}
-          inputProps={{ 'aria-label': 'Without label' }}
+              label="Unidade"
+              onChange={value => setEndDate(value.target.value)}
+              fullWidth
             >
               <MenuItem value="">
-          <span className='titleMenuItem'>30/06/2000</span>
+                <em>None</em>
               </MenuItem>
+              <MenuItem value="">07/09/2021</MenuItem>
               <MenuItem value={10}>Filial 3</MenuItem>
               <MenuItem value={20}>Twenty</MenuItem>
               <MenuItem value={30}>Thirty</MenuItem>
             </Select>
           </FormControl>
+        </div>
 
-      <FormControl  size="small" sx={{ width: 280, mt:10 , pl:5, ml: 2}} >
+        <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
-          value={age}
+              labelId="demo-select-small"
-          onChange={handleChange}
+              id="demo-select-small"
-          displayEmpty
+              value={discretization}
-          inputProps={{ 'aria-label': 'Without label' }}
+              label="Unidade"
+              onChange={value => setDiscretization(value.target.value)}
+              fullWidth
             >
               <MenuItem value="">
-            <span className='titleMenuItem'>60 min</span>
+                <em>None</em>
               </MenuItem>
+              <MenuItem value="">07/09/2021</MenuItem>
               <MenuItem value={10}>Filial 3</MenuItem>
               <MenuItem value={20}>Twenty</MenuItem>
               <MenuItem value={30}>Thirty</MenuItem>
             </Select>
           </FormControl>
+        </div>
+      </section>
+
+      <RenderIf isTrue={showChart}>
+        <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
+      </RenderIf>
 
       <Buttons>
         <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
         <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
-          <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' green />
+        <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
       </Buttons>
       <p className='paragraph'>
         <i>
@@ -118,7 +154,6 @@ export default function Telemetria() {
           medição - Distribuidora.
         </i>
       </p>
-
     </TelemetriaView>
   )
 }

src/services/DadosTabelaResumoOperacao.js

@@ -1,16 +1,10 @@
-{}
+// {
-  unidades: {
+//   "unidades": [
-    unidade1: { name: 'Unidade-2555', operacao: 'Compra', montante: '130,00', contraparte: 'cOPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
+//     { "value": "unidade1", "name": "Unidade-1",  "operacao": "Compra", "montante": "130,00", "contraparte": "cOPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
-    unidade2: { name: 'Unidade-2', operacao: 'Compra', montante: '20,00', contraparte:  'EMEWE I5', preco: '234,67', valorNF: '38.257,15' },
+//     { "value": "unidade2", "name": "Unidade-2",  "operacao": "Compra", "montante": "20,00", "contraparte":  "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15"},
-    unidade3: { name: 'Unidade-3', operacao: 'Compra', montante: '30,00', contraparte:  'EMEWE I5', preco: '234,67', valorNF: '38.257,15' },
+//     { "value": "unidade3", "name": "Unidade-3",  "operacao": "Compra", "montante": "30,00", "contraparte":  "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15" },
-    unidade4: { name: 'Unidade-4', operacao: 'Compra', montante: '40,00', contraparte:  'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
+//     { "value": "unidade4", "name": "Unidade-4",  "operacao": "Compra", "montante": "40,00", "contraparte":  "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
-    unidade5: { name: 'Unidade-5', operacao: 'Compra', montante: '500,00',contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
+//     { "value": "unidade5", "name": "Unidade-5",  "operacao": "Compra", "montante": "500,00","contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
-    unidade6: { name: 'Unidade-6', operacao: 'Compra', montante: '300,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '.965,95' }
+//     { "value": "unidade6", "name": "Unidade-6", "operacao": "Compra", "montante": "300,00", "contraparte": "COPEL COM I5", "preco":"234,67", "valorNF": "965,95" }
-  },
+//   ]
-]
+// }
-
-
-
-
-
-

src/services/economiaAcumulada.js

@@ -1,7 +1,7 @@
 export const EconomiaAcumulada = {
   data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294],
   data1 : [1445, 1615],
-  data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055],
+  data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872],
 
   data3: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
   data4: [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, 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],

src/services/economiaBruta.json

@@ -0,0 +1,6 @@
+{
+  "consolidada": [],
+  "2020": [],
+  "2021": [],
+  "labels": [2020, 2021, 2022, 2023, 2024, 2025, 2026]
+}

src/services/fatorPotencia.js

@@ -1,7 +1,8 @@
 export const FatorPotencia = {
   data :  [1.00, 1.00, 1.00, -0.96, -0.96, 0.97, 0.98, 0.95, 0.94, 0.98, 0.95, 0.95, 0.98, 1.01, 1.05, 1.00, 1.00, 0.95, 0.97, 0.97, 0.97, 0.97, 0.97, 0.97, 0.98, 1.00, 0.97, 0.97, 0.97, 0.97, 0.97, 0.96, 0.95, 0.94, 0.95, 0.95,],
 
-  data4 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90],
+  data1 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90],
+  data2 : [.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98],
 
   label1: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
 }

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -10,6 +10,8 @@ export const TelemetriaView = styled.main`
     color: black;
     font-weight: 600;
     font-size: 14px;
+
+    margin: 0 0 0 10px;
   }
 
   span{
@@ -33,6 +35,22 @@ export const TelemetriaView = styled.main`
     text-align: center;
     margin-top: 60px;
   }
+
+  section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .select {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+
+      flex-direction: column;
+
+      /* margin-top: 10px; */
+    }
+  }
 `;
 
 export const Buttons = styled.div`