Merge branch 'administativePages' into 'dev'
fixing See merge request kluppsoftware/smart-energia-web!102
This commit is contained in:
José Corte
commit
4a09de098a
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
|
||||
}
|
||||
const options: object = {
|
||||
responsive: true,
|
||||
is3D: true,
|
||||
scales: {
|
||||
x: {
|
||||
font: {
|
||||
|
||||
@ -124,7 +124,8 @@ export default function chartTelemetry({userName}) {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
|
||||
]
|
||||
}).then(res => {
|
||||
}
|
||||
).then(res => {
|
||||
setDiscretizedConsumptionDataReativa(res.data.data)
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
@ -132,11 +133,12 @@ export default function chartTelemetry({userName}) {
|
||||
})
|
||||
|
||||
await api.post('/telemetry/discretization', {
|
||||
"type": "1__mes",
|
||||
"type": "1_mes",
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
|
||||
]
|
||||
}).then(res => {
|
||||
}
|
||||
).then(res => {
|
||||
setDiscretizedConsumptionData(res.data.data)
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
@ -145,8 +147,8 @@ export default function chartTelemetry({userName}) {
|
||||
|
||||
await api.post('/telemetry/demand', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": unity},
|
||||
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
|
||||
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
|
||||
{"type" : "between", "field": ["dia_num"], "value": ["2022-01-03", "2022-01-03"]}
|
||||
]
|
||||
}).then(res => {
|
||||
setDemRegXDemCon(res.data.data)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user