From b78d1f3a878f4da956c7f8fdd45d0d1df0100168 Mon Sep 17 00:00:00 2001
From: joseCorte-exe <josecorte-corte@hotmail.com>
Date: Wed, 6 Jul 2022 18:37:44 -0300
Subject: [PATCH] fixing

---
 .../buttons/gradientButton/GradientButton.tsx |  3 +-
 .../graph/grossAnualChart/GrossAnualChart.tsx |  1 +
 src/pages/chartTelemetry/index.tsx            | 74 ++++++++++---------
 src/pages/dashboard/index.tsx                 | 29 ++++++--
 src/pages/pld/index.tsx                       | 36 ++++-----
 src/styles/layouts/pld/PldView.ts             | 17 +++++
 6 files changed, 98 insertions(+), 62 deletions(-)

diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx
index e635c4e..6f61eda 100644
--- a/src/components/buttons/gradientButton/GradientButton.tsx
+++ b/src/components/buttons/gradientButton/GradientButton.tsx
@@ -21,7 +21,8 @@ export default function GradientButton({ title, description, orange, purple, gre
 
   return (
     <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
-      <p>{title}</p>
+      <p></p>
+      <p>{description}</p>
     </GradientButtonView>
   )
 }
diff --git a/src/components/graph/grossAnualChart/GrossAnualChart.tsx b/src/components/graph/grossAnualChart/GrossAnualChart.tsx
index 0fab1c4..1e90bdb 100644
--- a/src/components/graph/grossAnualChart/GrossAnualChart.tsx
+++ b/src/components/graph/grossAnualChart/GrossAnualChart.tsx
@@ -42,6 +42,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
   }
   const options: object = {
     responsive: true,
+    is3D: true,
     scales: {
       x: {
         font: {
diff --git a/src/pages/chartTelemetry/index.tsx b/src/pages/chartTelemetry/index.tsx
index 100a52a..dc2c547 100644
--- a/src/pages/chartTelemetry/index.tsx
+++ b/src/pages/chartTelemetry/index.tsx
@@ -112,48 +112,50 @@ export default function chartTelemetry({userName}) {
         {"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
       ]
   }).then(res => {
-      console.log(res.data.data)
-      setFatorPotenciaData(res.data.data)
-    }).catch(res => {
-      console.log(res)
-      // router.push('/telemetria')
-    })
+        console.log(res.data.data)
+        setFatorPotenciaData(res.data.data)
+      }).catch(res => {
+        console.log(res)
+        // router.push('/telemetria')
+      })
 
     await api.post('/telemetry/discretization', {
       "type": "1_mes",
       "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
+          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
+        ]
+    }
+    ).then(res => {
+        setDiscretizedConsumptionDataReativa(res.data.data)
+      }).catch(res => {
+        console.log(res)
+        // router.push('/telemetria')
+      })
+
+    await api.post('/telemetry/discretization', {
+      "type": "1_mes",
+      "filters": [
+          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
+        ]
+    }
+    ).then(res => {
+        setDiscretizedConsumptionData(res.data.data)
+      }).catch(res => {
+        console.log(res)
+        // router.push('/telemetria')
+      })
+
+    await api.post('/telemetry/demand', {
+      "filters": [
+        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "between", "field": ["dia_num"], "value": ["2022-01-03", "2022-01-03"]}
       ]
     }).then(res => {
-      setDiscretizedConsumptionDataReativa(res.data.data)
-    }).catch(res => {
-      console.log(res)
-      // router.push('/telemetria')
-    })
-
-  await api.post('/telemetry/discretization', {
-    "type": "1__mes",
-    "filters": [
-      {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
-    ]
-    }).then(res => {
-      setDiscretizedConsumptionData(res.data.data)
-    }).catch(res => {
-      console.log(res)
-      // router.push('/telemetria')
-    })
-
-  await api.post('/telemetry/demand', {
-    "filters": [
-      {"type" : "=", "field": "med_5min.ponto", "value": unity},
-      {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
-    ]
-    }).then(res => {
-      setDemRegXDemCon(res.data.data)
-    }).catch(res => {
-      console.log(res)
-      // router.push('/telemetria')
-    })
+        setDemRegXDemCon(res.data.data)
+      }).catch(res => {
+        console.log(res)
+        // router.push('/telemetria')
+      })
   }
 
   useEffect(() => {
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index adb48e8..fc72dbc 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -23,6 +23,9 @@ import { parseCookies } from 'nookies'
 import { GetServerSideProps } from 'next'
 import getAPIClient from '../../services/ssrApi'
 import Chart2 from '../../components/graph/Chart2'
+import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
+import CostIndicatorChart from '../../components/graph/costIndicatorChart'
+import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
 
 export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
   const months = [
@@ -62,10 +65,15 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 
       <section className='dashboard'>
         <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
-          <SingleBar title='' subtitle=''
+          {/* <SingleBar title='' subtitle=''
           dataset='Consolidada'
           dataProps={grossAnualGraph}
-          label={grossAnualYears} barLabel miniature/>
+          label={grossAnualYears} barLabel miniature/> */}
+          <GrossAnulChart title='' subtitle=''
+            dataset='Consolidada'
+
+            dataProps={grossAnualGraph}
+            label={grossAnualYears} barLabel bruta miniature/>
         </GraphCard>
 
         <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
@@ -76,17 +84,24 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         </GraphCard>
 
         <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
-          <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
-          label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
-          title='' subtitle='' barLabel hashurado miniature/>
+          <CativoXLivreChart data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
+            dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
+            label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
         </GraphCard>
 
         <GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
-          <Chart title='' subtitle=''
+          {/* <Chart title='' subtitle=''
           data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
           // data1={graphData}
           data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
-          label={costIndicator.map(value => value.mes.slice(0, 3))} miniature/>
+          label={costIndicator.map(value => value.mes.slice(0, 3))} miniature/> */}
+          <CostIndicatorChart title='' subtitle=''
+            data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
+            // data1={graphData}
+            data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
+            label={months}
+            miniature
+          />
         </GraphCard>
       </section>
     </DashboardView>
diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx
index 09a3ced..81bdf7b 100644
--- a/src/pages/pld/index.tsx
+++ b/src/pages/pld/index.tsx
@@ -32,7 +32,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
 
   const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}`
 
-  const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getUTCMonth()+1}-${dateFormated.getUTCDate()}`);
+  const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getMonth()}-${dateFormated.getUTCDate()}`);
   const [select, setSelect] = useState('SUDESTE');
   const [page, setPage] = useState<string>('table')
   const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString())
@@ -189,11 +189,11 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
           <table className="tg">
             <thead>
               <tr>
-                <th className='tg-8oo6'>Mês</th>
-                <th className='tg-8oo6'>Nordeste</th>
-                <th className='tg-8oo6'>Norte</th>
-                <th className='tg-8oo6'>Sudeste</th>
-                <th className='tg-8oo6'>Sul</th>
+                <th className='tg-8oo6'>Mês<p>(R$/MWh)</p></th>
+                <th className='tg-8oo6'>Nordeste<p>(R$/MWh)</p></th>
+                <th className='tg-8oo6'>Norte<p>(R$/MWh)</p></th>
+                <th className='tg-8oo6'>Sudeste<p>(R$/MWh)</p></th>
+                <th className='tg-8oo6'>Sul<p>(R$/MWh)</p></th>
               </tr>
             </thead>
             <tbody>
@@ -202,20 +202,20 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
                   return <>
                     <tr className={data.year_month_formatted==year_Month? 'actual' : ''}>
                       <td className='tg-gceh'>{data.year_month_formatted}</td>
-                      <td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
-                      <td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
-                      <td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
-                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}).replace('R$', 'R$/MWh')}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                     </tr>
                   </>
                 })
               }
               <tr>
-                <td className='tg-gceh'></td>
-                <td className={`tg-uulg`}></td>
-                <td className={`tg-gceh`}></td>
-                <td className={`tg-gceh`}></td>
-                <td className={`tg-uulg`}></td>
+                <td></td>
+                <td ></td>
+                <td ></td>
+                <td ></td>
+                <td ></td>
               </tr>
               {
                 tableData.result.map((data, index) => {
@@ -274,7 +274,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       <RenderIf isTrue={page==='perMouth'? true : false}>
         <Header name={userName}>
           <GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
-          <PageTitle title='Resumo PLD - Valores Diários' subtitle='Evolução PLD (R$/MWh)'/>
+          <PageTitle title='Resumo PLD - Valores Diários' subtitle='Evolução PLD - Valores em R$/MWh'/>
         </Header>
         <PldGraphView>
           <section className='toolsbar'>
@@ -336,10 +336,10 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       <RenderIf isTrue={page==='perDate'? true : false}>
         <Header name={userName}>
           <GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
-          <PageTitle title='Resumo PLD - Valores Horários' subtitle='Evolução PLD (R$/MWh)'/>
+          <PageTitle title='Resumo PLD - Valores Horários' subtitle='Evolução PLD - Valores em R$/MWh'/>
         </Header>
         <PldGraphView>
-          <section className='toolsbar'>
+          <section className='toolsbar2'>
             <p>Selecione o mês: </p>
             <input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
           </section>
diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts
index 9f2acbf..ba7ab45 100644
--- a/src/styles/layouts/pld/PldView.ts
+++ b/src/styles/layouts/pld/PldView.ts
@@ -3,6 +3,12 @@ import styled from "styled-components"
 export const PldTableView = styled.main`
   width: 100%;
 
+  table {
+    p {
+      font-size: 12px;
+    }
+  }
+
   .actual {
     font-weight: bold!important;
     background-color: red!important;
@@ -185,6 +191,17 @@ export const PldGraphView = styled.main`
     justify-content: center;
     align-items: flex-start!important;
 
+    flex-direction: row;
+
+    p {
+      margin: 0;
+    }
+  }
+  .toolsbar2 {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start!important;
+
     flex-direction: column;
 
     p {