Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

adding pld maps and percentage in charts

Browse Source
This commit is contained in:
joseCorte-exe 2022-06-20 11:51:04 -03:00
parent 131fa9fbe2
commit 51ccc268a1
11 changed files with 164 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/graph/LineBarChart2.tsx
View File

@ -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),
},
],
} : {

5
src/components/graph/SingleBar.tsx
View File

@ -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'
},
},

6
src/components/mapCard/MapCard.tsx
View File

@ -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?

11
src/contexts/AuthContext.tsx
View File

@ -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) {

3
src/pages/accumulatedSavings.tsx
View File

@ -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,

4
src/pages/administrative/clients/index.tsx
View File

@ -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)
})

4
src/pages/costIndicator.tsx
View File

@ -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>

44
src/pages/dashboard.tsx
View File

@ -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/>
</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/>
<LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
</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
}
}
}

38
src/pages/estimatedCost.tsx
View File

@ -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,
}
}
}

4
src/pages/grossSavings.tsx
View File

@ -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)
})

123
src/pages/resumoOperacao.tsx
View File

@ -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 [unidade, setUnidade] = React.useState('');
const [month, setMonth] = 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)
// data.unidades.map((value) => {
// console.log(`olha o valor ${value.name}`)
// })
// console.log(unidade)
console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
api.post('/operation', {
"filters": [
{"type" : "=", "field": "mes", "value": `${month}/2022`},
{"type" : "=", "field": "dados_te.cod_smart_unidade", "value": 180103211002}
]
}).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={20}>Fevereiro</MenuItem>
<MenuItem value={30}>Março</MenuItem>
<MenuItem value={30}>Abril</MenuItem>
<MenuItem value={30}>Março</MenuItem>
<MenuItem value={30}>Maio</MenuItem>
<MenuItem value={30}>Junho</MenuItem>
<MenuItem value={30}>Julho</MenuItem>
<MenuItem value={30}>Agosto</MenuItem>
<MenuItem value={30}>Setembro</MenuItem>
<MenuItem value={30}>Outubro</MenuItem>
<MenuItem value={30}>Novembro</MenuItem>
<MenuItem value={30}>Dezembro</MenuItem>
<MenuItem value={'01'}>Janeiro</MenuItem>
<MenuItem value={'02'}>Fevereiro</MenuItem>
<MenuItem value={'03'}>Março</MenuItem>
<MenuItem value={'04'}>Abril</MenuItem>
<MenuItem value={'05'}>Maio</MenuItem>
<MenuItem value={'06'}>Junho</MenuItem>
<MenuItem value={'07'}>Julho</MenuItem>
<MenuItem value={'08'}>Agosto</MenuItem>
<MenuItem value={'09'}>Setembro</MenuItem>
<MenuItem value={'10'}>Outubro</MenuItem>
<MenuItem value={'11'}>Novembro</MenuItem>
<MenuItem value={'12'}>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) => {
if (index%2===0) {
return <tr key={index}>
<td key={index} className='tg-gceh'>{value.name}</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.contraparte}</td>
<td key={index} className='tg-uulg'>{value.preco}</td>
<td key={index} className='tg-gceh'>{value.valorNF}</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>
}
tableData.map((value, index) => {
return <>
<tr>
<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_nf}</td>
<td key={index} className='tg-gceh'>{value.contraparte}</td>
<td key={index} className='tg-uulg'>{value.nf_c_icms}</td>
<td key={index} className='tg-gceh'>{value.preco_nf}</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,
}
}
}