adding pld maps and percentage in charts

src/components/graph/LineBarChart2.tsx

@@ -119,24 +119,24 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
         },
         borderWidth: 2,
         fill: false,
-        data: data1.map(value => value),
+        data: data1.map(value => value.economia_mensal),
       },
       {
         type: 'bar' as const,
         label: dataset2? dataset2 : 'Dataset 2',
         backgroundColor: (value, ctx) => {
-          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
+          return hashurado? data1[value.dataIndex].dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
         },
-        data: data3.map(value => value),
+        data: data3.map(value => value.custo_cativo),
       },
       {
         type: 'bar' as const,
         label: dataset3? dataset3 : 'Dataset 2',
         // backgroundColor: '#255488',
         backgroundColor: (value, ctx) => {
-          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
+          return hashurado? data1[value.dataIndex].dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
         },
-        data: data2.map(value => value),
+        data: data2.map(value => value.custo_livre),
       },
     ],
   } : {

src/components/graph/SingleBar.tsx

@@ -50,7 +50,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
           dataArr.map(data => {
               sum += data;
           });
-          const percentage = (value*100 / sum).toFixed(0)+"%";
+          const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
           const result = `${value}\n ${percentage}`
 
           return value==null? null : result
@@ -82,10 +82,9 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
       {
         label: dataset,
         data: dataProps.map((value, index) => {
-          return value.economia_acumulada
+          return parseFloat(value.economia_acumulada).toFixed(2)
         }),
         backgroundColor: (value, ctx) => {
-          console.log(dataProps[value.dataIndex])
           return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
         },
       },

src/components/mapCard/MapCard.tsx

@@ -15,9 +15,11 @@ export default function MapCard({ title, subtitle, statistic, imgSource, date }:
 
   return (
       <MapCardView statistic={statistic} >
-        <Image src={imgSource} width={90} height={90}/>
+        <Image src={subtitle==='SUL'? '/SUL.svg' : subtitle==='NORTE'? '/norte.svg' : subtitle==='NORDESTE'? '/nordeste.svg' : subtitle==='SUDESTE'? '/mapSample.svg' : imgSource} width={90} height={90}/>
         <div>
-          <h4>{title}</h4>
+          <h4>{
+            subtitle==='SUL'? 'S' : subtitle==='NORTE'? 'N' : subtitle==='NORDESTE'? 'NE' : subtitle==='SUDESTE'? 'SE/CO' : title
+          }</h4>
           <span className='footer' >{subtitle}</span>
           {
             date?

src/contexts/AuthContext.tsx

@@ -36,15 +36,18 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
       password
     })
 
-    if (token) {
+    if (token)
       setCookie(undefined, '@smartAuth-token', token, {
         maxAge: 60 * 60 * 1, // 1 hour
       })
-    }
 
-    if (user.role) {
+    if (user.role)
       setCookie(undefined, 'user-role', user.role)
-    }
+
+    if (user.id)
+      setCookie(undefined, 'user-id', user.id)
+
+    console.log(user)
 
     if (!exception) {
       if (user.role == 2) {

src/pages/accumulatedSavings.tsx

@@ -37,7 +37,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/economy/grossMonthly').then(res => {
     graphData = res.data.data
-    console.log(graphData[0].mes)
+    // console.log(graphData[0].mes)
   }).catch(res => {
     console.log(res)
   })
@@ -53,7 +53,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     }
   }
 
-
   return {
     props: {
       graphData,

src/pages/administrative/clients/index.tsx

@@ -213,9 +213,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   let clients = [];
 
   await apiClient.get('/user').then(res => {
-    console.log(res)
+    // console.log(res)
     clients = res.data.data
-    console.log(clients)
+    // console.log(clients)
   }).catch(res => {
     // console.log(res)
   })

src/pages/costIndicator.tsx

@@ -13,7 +13,7 @@ import getAPIClient from '../services/ssrApi'
 import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
 
 function addMissingMonths(data) {
-  console.log(data[0].mes.slice(1, 1))
+  // console.log(data[0].mes.slice(1, 1))
 }
 
 function verifyDataByYear(data) {
@@ -24,7 +24,7 @@ function verifyDataByYear(data) {
 }
 
 export default function CostIndicator({graphData}: any) {
-  console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
+  // console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
 
   return (
     <CostIndicatorView>

src/pages/dashboard.tsx

@@ -23,8 +23,7 @@ import { parseCookies } from 'nookies'
 import { GetServerSideProps } from 'next'
 import getAPIClient from '../services/ssrApi'
 
-export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears} : any) {
+export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo} : any) {
-
   return (
     <DashboardView>
       <Head>
@@ -36,10 +35,15 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
       <Link href='pld'>
         <section className="cardsSection" >
           <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' />
+          {
+            mapsInfo.map(value => {
+              return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.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' />
-          <MapCard title='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' />
+          <MapCard title='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' /> */}
         </section>
       </Link>
 
@@ -60,17 +64,19 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         </GraphCard>
 
         <GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
-          <LineBarChart2 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/>
+          <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
-        </GraphCard>
+          label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
-        <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
+          title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
-          <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel/>
         </GraphCard>
 
+        <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>
 
       <button onClick={() => {
         const id = 1
-        console.log(recoverUserInformation(id))
       }}></button>
     </DashboardView>
   )
@@ -82,23 +88,32 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   let grossAnualGraph = [];
   let grossMensalGraph = [];
-
+  let acumulatedGraph = [];
-
+  let mapsInfo = [];
 
   await apiClient.post('/economy/grossAnnual').then(res => {
     grossAnualGraph = res.data.data
-    console.log(grossAnualGraph[0])
   }).catch(res => {
     console.log(res)
   })
 
   await apiClient.post('/economy/grossMonthly').then(res => {
     grossMensalGraph = res.data.data
-
   }).catch(res => {
     console.log(res)
   })
 
+  await apiClient.post('/economy/estimates').then(res => {
+    acumulatedGraph = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
+
+  await apiClient.post('/pld/overview').then(res => {
+    mapsInfo = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
 
   const grossMensalYears = grossMensalGraph.map((value) => value.mes)
   const grossAnualYears = grossAnualGraph.map((value) => value.ano)
@@ -112,13 +127,14 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     }
   }
 
-
   return {
     props: {
       grossAnualGraph,
       grossAnualYears,
       grossMensalYears,
       grossMensalGraph,
+      acumulatedGraph,
+      mapsInfo
     }
   }
 }

src/pages/estimatedCost.tsx

@@ -1,4 +1,6 @@
+import { GetServerSideProps } from 'next'
 import Head from 'next/head'
+import { parseCookies } from 'nookies'
 import React from 'react'
 
 import Chart from '../components/graph/Chart'
@@ -7,9 +9,10 @@ import { LineBarChart2 } from '../components/graph/LineBarChart2'
 import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { ConsumoEstimado } from '../services/consumoEstimado'
+import getAPIClient from '../services/ssrApi'
 import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
 
-export default function EstimatedCost() {
+export default function EstimatedCost({graphData}: any) {
   return (
     <EstimatedCostView>
       <Head>
@@ -18,8 +21,39 @@ export default function EstimatedCost() {
       <Header name='' />
       <PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
       <section>
-        <LineBarChart2 data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
+        <LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
+        dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre'
+        label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
       </section>
     </EstimatedCostView>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+
+  let graphData = [];
+
+  await apiClient.post('/economy/estimates').then(res => {
+    graphData = res.data.data
+    console.log(graphData)
+  }).catch(res => {
+    console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      graphData,
+    }
+  }
+}

src/pages/grossSavings.tsx

@@ -13,7 +13,7 @@ import getAPIClient from '../services/ssrApi'
 import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
 
 function addMissingMonths(data) {
-  console.log(data[0].mes.slice(1, 1))
+  // console.log(data[0].mes.slice(1, 1))
 }
 
 function verifyDataByYear(data) {
@@ -51,7 +51,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/economy/grossAnnual').then(res => {
     graphData = res.data.data
-    console.log(graphData[0])
+    // console.log(graphData[0])
   }).catch(res => {
     console.log(res)
   })

src/pages/resumoOperacao.tsx

@@ -3,8 +3,10 @@ import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
-import React, { useEffect } from 'react';
+import { parseCookies } from 'nookies';
+import React, { useEffect, useState } from 'react';
 // import Teste from '../files/teste.csv';
 import { CSVDownload, CSVLink } from "react-csv";
 
@@ -12,30 +14,25 @@ import BasicButton from '../components/buttons/basicButton/BasicButton';
 import Header from '../components/header/Header';
 import PageTitle from '../components/pageTitle/PageTitle';
 import Sidebar from '../components/sidebar/Sidebar';
+import { api } from '../services/api';
 // import { dados } from '../services/DadosTabelaResumoOperacao';
 import data from '../services/dados.json'
+import getAPIClient from '../services/ssrApi';
 import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
 export default function ResumoOperacao() {
   const csvData = [
-    // ["firstname", "lastname", "email"],
-    // ["Ahmed", "Tomi", "ah@smthing.co.com"],
-    // ["Raed", "Labes", "rl@smthing.co.com"],
-    // ["Yezzi", "Min l3b", "ymin@cocococo.com"],
-
-
-
       [ "value", "unidade1", "name", "Unidade-1",  "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM 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"],
       [ "value", "unidade3", "name", "Unidade-3",  "operacao", "Compra", "montante", "30,00", "contraparte",  "EMEWE 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" ],
       [ "value", "unidade5", "name", "Unidade-5",  "operacao", "Compra", "montante", "500,00","contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
       [ "value", "unidade6", "name", "Unidade-6", "operacao", "Compra", "montante", "300,00", "contraparte", "COPEL COM I5", "preco","234,67", "valorNF", "965,95" ]
-
   ];
 
-  const [month, setMonth] = React.useState('');
+  const [month, setMonth] = useState('');
-  const [unidade, setUnidade] = React.useState('');
+  const [unidade, setUnidade] = useState('');
+  const [tableData, setTableData] = useState<any>([]);
 
   const handleChangeMonth = (event: SelectChangeEvent) => {
     setMonth(event.target.value);
@@ -45,12 +42,18 @@ export default function ResumoOperacao() {
   };
 
   useEffect(() => {
-    // console.log(data.unidades)
+    api.post('/operation', {
-    // data.unidades.map((value) => {
+      "filters": [
-    //   console.log(`olha o valor ${value.name}`)
+          {"type" : "=", "field": "mes", "value": `${month}/2022`},
-    // })
+          {"type" : "=", "field": "dados_te.cod_smart_unidade", "value": 180103211002}
-    // console.log(unidade)
+        ]
-    console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
+    }).then(res => {
+      setTableData(res.data.data)
+      console.log(tableData)
+    }).catch(res => {
+      console.log(res)
+    })
+    console.log(tableData)
   }, [month, unidade])
 
   return(
@@ -90,19 +93,18 @@ export default function ResumoOperacao() {
             label="Month"
             onChange={handleChangeMonth}
           >
-            <MenuItem value={15}>Janeiro</MenuItem>
+            <MenuItem value={'01'}>Janeiro</MenuItem>
-            <MenuItem value={20}>Fevereiro</MenuItem>
+            <MenuItem value={'02'}>Fevereiro</MenuItem>
-            <MenuItem value={30}>Março</MenuItem>
+            <MenuItem value={'03'}>Março</MenuItem>
-            <MenuItem value={30}>Abril</MenuItem>
+            <MenuItem value={'04'}>Abril</MenuItem>
-            <MenuItem value={30}>Março</MenuItem>
+            <MenuItem value={'05'}>Maio</MenuItem>
-            <MenuItem value={30}>Maio</MenuItem>
+            <MenuItem value={'06'}>Junho</MenuItem>
-            <MenuItem value={30}>Junho</MenuItem>
+            <MenuItem value={'07'}>Julho</MenuItem>
-            <MenuItem value={30}>Julho</MenuItem>
+            <MenuItem value={'08'}>Agosto</MenuItem>
-            <MenuItem value={30}>Agosto</MenuItem>
+            <MenuItem value={'09'}>Setembro</MenuItem>
-            <MenuItem value={30}>Setembro</MenuItem>
+            <MenuItem value={'10'}>Outubro</MenuItem>
-            <MenuItem value={30}>Outubro</MenuItem>
+            <MenuItem value={'11'}>Novembro</MenuItem>
-            <MenuItem value={30}>Novembro</MenuItem>
+            <MenuItem value={'12'}>Dezembro</MenuItem>
-            <MenuItem value={30}>Dezembro</MenuItem>
           </Select>
         </FormControl>
       </div>
@@ -119,26 +121,17 @@ export default function ResumoOperacao() {
         </thead>
         <tbody>
           {
-            data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
+            tableData.map((value, index) => {
-              if (index%2===0) {
+              return <>
-                return <tr key={index}>
+                <tr>
-                    <td key={index} className='tg-gceh'>{value.name}</td>
+                  <td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
                   <td key={index} className='tg-uulg'>{value.operacao}</td>
-                    <td key={index} className='tg-gceh'>{value.montante}</td>
+                  <td key={index} className='tg-gceh'>{value.montante_nf}</td>
                   <td key={index} className='tg-gceh'>{value.contraparte}</td>
-                    <td key={index} className='tg-uulg'>{value.preco}</td>
+                  <td key={index} className='tg-uulg'>{value.nf_c_icms}</td>
-                    <td key={index} className='tg-gceh'>{value.valorNF}</td>
+                  <td key={index} className='tg-gceh'>{value.preco_nf}</td>
                 </tr>
-              } else {
+              </>
-                return <tr key={index}>
-                <td key={index} className='tg-hq65'>{value.name}</td>
-                <td key={index} className='tg-0tzy'>{value.operacao}</td>
-                <td key={index} className='tg-hq65'>{value.montante}</td>
-                <td key={index} className='tg-hq65'>{value.contraparte}</td>
-                <td key={index} className='tg-0tzy'>{value.preco}</td>
-                <td key={index} className='tg-hq65'>{value.valorNF}</td>
-              </tr>
-              }
             })
           }
         </tbody>
@@ -152,3 +145,33 @@ export default function ResumoOperacao() {
     </TableView>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-id']: id } = parseCookies(ctx)
+
+  let tableData = [];
+
+  await apiClient.post(`/user/${id}`).then(res => {
+    tableData = res.data.data
+    console.log(tableData)
+  }).catch(res => {
+    console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      tableData,
+    }
+  }
+}