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

fixing

Browse Source
This commit is contained in:
joseCorte-exe 2022-07-06 18:37:44 -03:00
parent 0c8d6d63a7
commit b78d1f3a87
6 changed files with 98 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/buttons/gradientButton/GradientButton.tsx
View File

@ -21,7 +21,8 @@ export default function GradientButton({ title, description, orange, purple, gre
return ( return (
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}> <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
<p>{title}</p> <p></p>
<p>{description}</p>
</GradientButtonView> </GradientButtonView>
) )
} }

1
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -42,6 +42,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
} }
const options: object = { const options: object = {
responsive: true, responsive: true,
is3D: true,
scales: { scales: {
x: { x: {
font: { font: {

12
src/pages/chartTelemetry/index.tsx
View File

@ -124,7 +124,8 @@ export default function chartTelemetry({userName}) {
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"} {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
] ]
}).then(res => { }
).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data) setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => { }).catch(res => {
console.log(res) console.log(res)
@ -132,11 +133,12 @@ export default function chartTelemetry({userName}) {
}) })
await api.post('/telemetry/discretization', { await api.post('/telemetry/discretization', {
"type": "1__mes", "type": "1_mes",
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"} {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
] ]
}).then(res => { }
).then(res => {
setDiscretizedConsumptionData(res.data.data) setDiscretizedConsumptionData(res.data.data)
}).catch(res => { }).catch(res => {
console.log(res) console.log(res)
@ -145,8 +147,8 @@ export default function chartTelemetry({userName}) {
await api.post('/telemetry/demand', { await api.post('/telemetry/demand', {
"filters": [ "filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity}, {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]} {"type" : "between", "field": ["dia_num"], "value": ["2022-01-03", "2022-01-03"]}
] ]
}).then(res => { }).then(res => {
setDemRegXDemCon(res.data.data) setDemRegXDemCon(res.data.data)

29
src/pages/dashboard/index.tsx
View File

@ -23,6 +23,9 @@ import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next' import { GetServerSideProps } from 'next'
import getAPIClient from '../../services/ssrApi' import getAPIClient from '../../services/ssrApi'
import Chart2 from '../../components/graph/Chart2' 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) { export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
const months = [ const months = [
@ -62,10 +65,15 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<section className='dashboard'> <section className='dashboard'>
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'> <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' dataset='Consolidada'
dataProps={grossAnualGraph} dataProps={grossAnualGraph}
label={grossAnualYears} barLabel miniature/> label={grossAnualYears} barLabel miniature/> */}
<GrossAnulChart title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel bruta miniature/>
</GraphCard> </GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar> <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>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar> <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
<LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph} <CativoXLivreChart data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
title='' subtitle='' barLabel hashurado miniature/> label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
</GraphCard> </GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'> <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={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData} // data1={graphData}
data2={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2022'))} 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> </GraphCard>
</section> </section>
</DashboardView> </DashboardView>

36
src/pages/pld/index.tsx
View File

@ -32,7 +32,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}` 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 [select, setSelect] = useState('SUDESTE');
const [page, setPage] = useState<string>('table') const [page, setPage] = useState<string>('table')
const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString()) const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString())
@ -189,11 +189,11 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<table className="tg"> <table className="tg">
<thead> <thead>
<tr> <tr>
<th className='tg-8oo6'>Mês</th> <th className='tg-8oo6'>Mês<p>(R$/MWh)</p></th>
<th className='tg-8oo6'>Nordeste</th> <th className='tg-8oo6'>Nordeste<p>(R$/MWh)</p></th>
<th className='tg-8oo6'>Norte</th> <th className='tg-8oo6'>Norte<p>(R$/MWh)</p></th>
<th className='tg-8oo6'>Sudeste</th> <th className='tg-8oo6'>Sudeste<p>(R$/MWh)</p></th>
<th className='tg-8oo6'>Sul</th> <th className='tg-8oo6'>Sul<p>(R$/MWh)</p></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -202,20 +202,20 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
return <> return <>
<tr className={data.year_month_formatted==year_Month? 'actual' : ''}> <tr className={data.year_month_formatted==year_Month? 'actual' : ''}>
<td className='tg-gceh'>{data.year_month_formatted}</td> <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-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}).replace('R$', 'R$/MWh')}</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}).replace('R$', 'R$/MWh')}</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}).replace('R$', 'R$/MWh')}</td> <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
</tr> </tr>
</> </>
}) })
} }
<tr> <tr>
<td className='tg-gceh'></td> <td></td>
<td className={`tg-uulg`}></td> <td ></td>
<td className={`tg-gceh`}></td> <td ></td>
<td className={`tg-gceh`}></td> <td ></td>
<td className={`tg-uulg`}></td> <td ></td>
</tr> </tr>
{ {
tableData.result.map((data, index) => { tableData.result.map((data, index) => {
@ -274,7 +274,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={page==='perMouth'? true : false}> <RenderIf isTrue={page==='perMouth'? true : false}>
<Header name={userName}> <Header name={userName}>
<GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack> <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> </Header>
<PldGraphView> <PldGraphView>
<section className='toolsbar'> <section className='toolsbar'>
@ -336,10 +336,10 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={page==='perDate'? true : false}> <RenderIf isTrue={page==='perDate'? true : false}>
<Header name={userName}> <Header name={userName}>
<GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack> <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> </Header>
<PldGraphView> <PldGraphView>
<section className='toolsbar'> <section className='toolsbar2'>
<p>Selecione o mês: </p> <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)}/> <input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
</section> </section>

17
src/styles/layouts/pld/PldView.ts
View File

@ -3,6 +3,12 @@ import styled from "styled-components"
export const PldTableView = styled.main` export const PldTableView = styled.main`
width: 100%; width: 100%;
table {
p {
font-size: 12px;
}
}
.actual { .actual {
font-weight: bold!important; font-weight: bold!important;
background-color: red!important; background-color: red!important;
@ -185,6 +191,17 @@ export const PldGraphView = styled.main`
justify-content: center; justify-content: center;
align-items: flex-start!important; 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; flex-direction: column;
p { p {