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

Merge branch 'administativePages' into 'dev'

Browse Source 
fixs

See merge request kluppsoftware/smart-energia-web!101
This commit is contained in:
José Corte 2022-07-06 20:32:54 +00:00
commit 53f66277e3
23 changed files with 843 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,6 @@ 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>{description}</p>
</GradientButtonView>
)
}

2
src/components/buttons/gradientButton/GradientButtonView.ts
View File

@ -20,7 +20,7 @@ export const GradientButtonView = styled.button`
color: #FFFFFF;
background: ${ props => props.color==='orange'?
'linear-gradient(200.86deg, #ff7f59 8.03%, #df4b1f 91.97%),#FFFFFF'
'linear-gradient(200.86deg, #e7992f 8.03%, #e7992f 91.97%),#FFFFFF'
:
props.color === 'purple'?
'linear-gradient(200.69deg, #254f7f 9%, #254f7f 98%), #FFFFFF'

1
src/components/graph/Chart.tsx
View File

@ -48,6 +48,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false
}

37
src/components/graph/Chart2.tsx
View File

@ -50,6 +50,11 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
@ -61,8 +66,8 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
dataArr.map(data => {
sum += data;
});
const percentage = data1[ctx.dataIndex].econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
const result = ` ${parseInt(value)!=0? percentage : ''}\n ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
const result = `${parseInt(value)!=0? percentage : ''}\n ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
return value==null? null : result
},
@ -89,34 +94,16 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
datasets: [
{
type: 'bar',
label: dataset1? dataset1 : '2021',
data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0),
label: 'Acumulado',
data: data1.map(value => value?.economia_acumulada),
backgroundColor: '#255488'
// backgroundColor: (value, ctx) => {
// return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
// },
},
{
type: 'bar',
label: dataset2? dataset2 : '2022',
data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0),
// backgroundColor: '#255488'
// backgroundColor: (value, ctx) => {
// return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
// },
label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: draw('diagonal-right-left', '#C2d5fb')
},
{
type: 'line',
label: ['Acumulado'],
backgroundColor: '#255488',
data: [],
},
{
type: 'line',
label: ['Estimado'],
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
data: [],
}
],
}

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

@ -25,9 +25,10 @@ interface SingleBarInterface{
dataset: string,
barLabel?: boolean | undefined,
miniature?: boolean | undefined,
bruta?: boolean | undefined
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature }: SingleBarInterface) {
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
const options: object = {
responsive: true,
scales: {
@ -82,7 +83,12 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
},
};
const labels = label;
let labels: string[];
if (bruta) {
labels = label.map(value => value.replace('2021', 'até 2021'))
} else {
labels = label
}
const data: any = {
labels,

27
src/components/graph/cativoXLivreChart/CativoXLivreChartView.ts Normal file
View File

@ -0,0 +1,27 @@
import styled from "styled-components"
export const CativoXLivreChartView = styled.div`
width: 90%;
div{
/* margin-top: 10px; */
}
@media (max-width: 900px) {
min-width: 20rem
}
`
export const ChartTitleView = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
flex-direction: column;
* {
margin: 0;
}
`

189
src/components/graph/cativoXLivreChart/index.tsx Normal file
View File

@ -0,0 +1,189 @@
import React, { useRef, useEffect } from 'react';
import {
Chart as ChartJS,
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip,
} from 'chart.js';
import { Chart } from 'react-chartjs-2';
import { CativoXLivreChartView } from './CativoXLivreChartView';
import ChartTitle from '../ChartTitle';
import pattern from 'patternomaly'
ChartJS.register(
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip
);
// function triggerTooltip(chart: ChartJS | null) {
// const tooltip = chart?.tooltip;
// if (!tooltip) {
// return;
// }
// if (tooltip.getActiveElements().length > 0) {
// tooltip.setActiveElements([], { x: 0, y: 0 });
// } else {
// const { chartArea } = chart;
// tooltip.setActiveElements(
// [
// {
// datasetIndex: 0,
// index: 2,
// },
// {
// datasetIndex: 1,
// index: 2,
// },
// ],
// {
// x: (chartArea.left + chartArea.right) / 2,
// y: (chartArea.top + chartArea.bottom) / 2,
// }
// );
// }
// chart.update();
// }
interface LineBarChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
data3: any,
red?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
barLabel?: boolean | undefined,
hashurado?: boolean | undefined,
miniature?: boolean | undefined,
}
export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const labels = label
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
// backgroundColor: '#255488',
anchor: "end",
offset: -20,
align: "start",
font: {
size: !miniature? 15 : 10
},
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}`
return value==null? null : result
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data: any = {
labels,
datasets: [
{
type: 'line' as const,
label: dataset1? dataset1 : 'Dataset 1',
borderColor: '#0c9200',
datalabels: {
backgroundColor: 'white',
borderRadius: 8,
opacity: .8
},
borderWidth: 2,
fill: false,
data: data1.map(value => value.economia_mensal),
},
{
type: 'bar' as const,
label: 'Cativo',
backgroundColor: (value, ctx) => {
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
},
data: data3.map(value => value.custo_cativo),
},
{
type: 'bar' as const,
label: 'Livre',
// backgroundColor: '#255488',
backgroundColor: (value, ctx) => {
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
},
data: data2.map(value => value.custo_livre),
},
{
type: 'line',
label: 'Est. Livre',
backgroundColor: pattern.draw('diagonal', '#255488'),
data: [],
},
{
type: 'line',
label: 'Est. Cativo',
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
data: [],
}
],
}
useEffect(() => {
const chart = chartRef.current;
// triggerTooltip(chart);
}, []);
return (
<CativoXLivreChartView>
<ChartTitle title={title} subtitle={subtitle}/>
<div>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
</CativoXLivreChartView>
)
}

27
src/components/graph/costIndicatorChart/CostIndicatorChartView.ts Normal file
View File

@ -0,0 +1,27 @@
import styled from "styled-components"
export const CostIndicatorChartView = styled.div`
width: 90%;
div{
/* margin-top: 10px; */
}
@media (max-width: 900px) {
min-width: 20rem
}
`
export const ChartTitleView = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
flex-direction: column;
* {
margin: 0;
}
`

125
src/components/graph/costIndicatorChart/index.tsx Normal file
View File

@ -0,0 +1,125 @@
import React, { useState, useEffect } from 'react'
import { draw } from 'patternomaly'
import { Bar } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { CostIndicatorChartView } from './CostIndicatorChartView';
import ChartTitle from '../ChartTitle';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2: any,
single?: any
label: any,
miniature?: boolean | undefined
}
export default function CostIndicatorChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
const labels = label;
const options: any = {
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
color: 'black',
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const result = `${parseInt(value).toLocaleString('pt-br')}`
return value==null? null : result
},
anchor: "end",
align: "end",
font: {
size: !miniature? 15 : 10,
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = {
labels,
datasets: [
{
label: '2021',
data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
backgroundColor: '#C2d5fb'
// backgroundColor: (value, ctx) => {
// return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
// },
},
{
label: '2022',
data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#255488'
backgroundColor: (value, ctx) => {
return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
},
}
],
}
return (
<CostIndicatorChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<Bar
options={options}
data={data}
/>
</CostIndicatorChartView>
)
}

143
src/components/graph/grossAnualChart/GrossAnualChart.tsx Normal file
View File

@ -0,0 +1,143 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw, generate } from 'patternomaly'
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { GrossAnualChartView } from './GrossAnualChartView';
import ChartTitle from '../ChartTitle';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
ChartDataLabels
);
interface SingleBarInterface{
title: string,
subtitle: string,
dataProps: any,
label: Array<string>,
dataset: string,
barLabel?: boolean | undefined,
miniature?: boolean | undefined,
bruta?: boolean | undefined
}
export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
function spacement(string) {
let spaces = '⠀'
let i=Math.abs(string)
while (i <= 1) {
i--
spaces = spaces + `⠀`
}
return spaces
}
const options: object = {
responsive: true,
scales: {
x: {
font: {
size: 20
},
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
series: {
downsample: {
threshold: 1000
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}`
return value==null? null : result
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
anchor: "end",
offset: -60,
align: "start",
font: {
size: !miniature? 22 : 10
}
},
legend: {
position: 'bottom' as const,
labels: {
font: {
size: 16
}
}
},
title: {
display: false,
text: '',
},
},
};
let labels: string[];
if (bruta) {
labels = label.map(value => value.replace('2021', 'até 2021'))
} else {
labels = label
}
const data: any = {
labels,
datasets: [
{
label: 'Estimado',
data: [],
backgroundColor: '#C2d5fb',
},
{
label: dataset,
data: dataProps.map((value, index) => {
return parseFloat(value.economia_acumulada).toFixed(2)
}),
backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
},
},
{
label: '',
data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1],
backgroundColor: 'transparent',
datalabels: {
display: false
}
},
],
}
return (
<GrossAnualChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
</GrossAnualChartView>
)
}

27
src/components/graph/grossAnualChart/GrossAnualChartView.ts Normal file
View File

@ -0,0 +1,27 @@
import styled from "styled-components"
export const GrossAnualChartView = styled.div`
width: 90%;
div{
/* margin-top: 10px; */
}
@media (max-width: 900px) {
min-width: 20rem
}
`
export const ChartTitleView = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
flex-direction: column;
* {
margin: 0;
}
`

136
src/components/graph/grossMensalChart/GrossMensalChart.tsx Normal file
View File

@ -0,0 +1,136 @@
import React from 'react'
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { draw, generate } from 'patternomaly'
import { GrossMensalChartView } from './GrossMensalChartView';
import ChartTitle from '../ChartTitle';
// import { data } from './LineBarChart';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2: any,
single?: any
label: any,
miniature?: boolean | undefined
}
export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
function spacement(string) {
let spaces = '⠀'
let i=Math.abs(string)
while (i <= 1) {
i--
spaces = spaces + `⠀`
}
return spaces
}
const labels = label;
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
color: 'black',
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
const result = `⠀${spacement(parseInt(value+3).toLocaleString('pt-br'))}${parseInt(value)!=0? percentage : ''}\n${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
return value==null? null : result
},
anchor: "end",
offset: 0,
align: "end",
font: {
size: !miniature? 18 : 10,
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data: any = {
labels: data1.map(value => value.mes),
datasets: [
{
type: 'bar',
label: 'Acumulado',
data: data1.map(value => value?.economia_acumulada),
backgroundColor: '#255488'
},
{
type: 'bar',
label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: draw('diagonal-right-left', '#C2d5fb')
},
],
}
return (
<GrossMensalChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<ChartJs
options={options}
data={data} type={'bar'} />
</GrossMensalChartView>
)
}

14
src/components/graph/grossMensalChart/GrossMensalChartView.ts Normal file
View File

@ -0,0 +1,14 @@
import styled from "styled-components"
export const GrossMensalChartView = styled.div`
width: 100%;
div{
/* margin-top: 10px; */
}
@media (max-width: 900px) {
min-width: 20rem
}
`

10
src/pages/accumulatedSavings/index.tsx
View File

@ -4,6 +4,7 @@ import { parseCookies } from 'nookies'
import React from 'react'
import Chart2 from '../../components/graph/Chart2'
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
@ -35,10 +36,11 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' />
</Header>
<section>
<Chart2 title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
data2={graphData.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
label={months}/>
<GrossMensalChart title='' subtitle=''
data1={graphData}
data2={graphData}
label={months}
/>
{/* <SingleBar title='' subtitle='' dataset='Consolidada'
dataProps={graphData}
label={years} barLabel/> */}

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

@ -99,10 +99,6 @@ export default function clients({ clients, userName }) {
setOpenSnackSuccessDelete(false)
}
function onChange(e) {
setLogo(e.target.files[0])
}
function handleCreateClient({
name,
email,
@ -149,12 +145,15 @@ export default function clients({ clients, userName }) {
newImageUrls.push(URL.createObjectURL(image))
)
setImageURLs(newImageUrls)
console.log('ola')
}, [images])
function onImageChange(e: any) {
console.log('olá');
setImages([...e.target.files])
setLogo(e.target.files[0])
// console.log(e);
console.log(e.target.files[0]);
}
return (
@ -315,15 +314,16 @@ export default function clients({ clients, userName }) {
<InputUploadView>
<div className="imgContainer">
<article>
{imageURLS.map((imageSrc, index) => (
<Image
{imageURLS.map((imageSrc, index) => {
console.log('olá')
return <Image
src={imageSrc}
key={index}
width={30}
height={30}
className="image"
/>
))}
})}
</article>
</div>
<div className="update">

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

@ -42,18 +42,6 @@ const style = {
};
export default function chartTelemetry({userName}) {
const [openFatorPotencia, setOpenFatorPotencia] = useState(false);
const handleCloseFatorPotencia = () => setOpenFatorPotencia(false);
const [openConsumoDiscretizado1, setOpenConsumoDiscretizado1] = useState(false);
const handleCloseConsumoDiscretizado1 = () => setOpenConsumoDiscretizado1(false);
const [openConsumoDiscretizado2, setOpenConsumoDiscretizado2] = useState(false);
const handleCloseConsumoDiscretizado2 = () => setOpenConsumoDiscretizado2(false);
const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
const [demRegXDemCon, setDemRegXDemCon] = useState(null);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
@ -65,44 +53,94 @@ export default function chartTelemetry({userName}) {
const {startDate, endDate, unity, discretization} = router.query
// async function getChartsData() {
// await api.post('/telemetry/powerFactor', {
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]}
// ]
// }).then(res => {
// console.log(res.data.data)
// setFatorPotenciaData(res.data.data)
// }).catch(res => {
// // console.log(res)
// router.push('/telemetria')
// })
// await api.post('/telemetry/discretization', {
// "type": discretization? discretization : "5_min",
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
// ]
// }).then(res => {
// setDiscretizedConsumptionDataReativa(res.data.data)
// }).catch(res => {
// // console.log(res)
// router.push('/telemetria')
// })
// await api.post('/telemetry/discretization', {
// "type": discretization? discretization : "5_min",
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
// ]
// }).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')
// })
// }
async function getChartsData() {
await api.post('/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]}
{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
{"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)
// router.push('/telemetria')
})
await api.post('/telemetry/discretization', {
"type": discretization? discretization : "5_min",
"type": "1_mes",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
]
}).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => {
// console.log(res)
router.push('/telemetria')
console.log(res)
// router.push('/telemetria')
})
await api.post('/telemetry/discretization', {
"type": discretization? discretization : "5_min",
"type": "1__mes",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
]
}).then(res => {
setDiscretizedConsumptionData(res.data.data)
}).catch(res => {
// console.log(res)
router.push('/telemetria')
console.log(res)
// router.push('/telemetria')
})
await api.post('/telemetry/demand', {
@ -113,8 +151,8 @@ export default function chartTelemetry({userName}) {
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
// console.log(res)
router.push('/telemetria')
console.log(res)
// router.push('/telemetria')
})
}
@ -143,79 +181,32 @@ export default function chartTelemetry({userName}) {
<>
<RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
<div>
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
<p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate.toString().split('-')[2]}/${startDate.toString().split('-')[1]}/${startDate.toString().split('-')[0]}`}</p>
</div>
<Modal
open={openConsumoDiscretizado2}
onClose={handleCloseConsumoDiscretizado2}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
<div>
<DiscretizedConsumptionChartLine title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
</div>
<Modal
open={openConsumoDiscretizado1}
onClose={handleCloseConsumoDiscretizado1}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<DiscretizedConsumptionChartLine title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
</Box>
</Modal>
</RenderIf>
<div onClick={() => setOpenDemandaContratada(true)}>
<div>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</div>
<Modal
open={openDemandaContratada}
onClose={handleCloseDemandaContratada}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</Box>
</Modal>
<div onClick={() => setOpenFatorPotencia(true)}>
<div>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</div>
<Modal
open={openFatorPotencia}
onClose={handleCloseFatorPotencia}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</Box>
</Modal>
</>
</>
}
</section>
</ChatTelemetryView>

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

@ -4,6 +4,7 @@ import { parseCookies } from 'nookies'
import React from 'react'
import Chart from '../../components/graph/Chart'
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
import getAPIClient from '../../services/ssrApi'
@ -34,11 +35,12 @@ export default function CostIndicator({graphData, userName}: any) {
<PageTitle title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'/>
</Header>
<section>
<Chart title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}
data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}/>
<CostIndicatorChart title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData}
data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
label={months}
/>
</section>
</CostIndicatorView>
)

3
src/pages/estimatedCost/index.tsx
View File

@ -2,6 +2,7 @@ import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies } from 'nookies'
import React from 'react'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
import { LineBarChart2 } from '../../components/graph/LineBarChart2'
import Header from '../../components/header/Header'
@ -20,7 +21,7 @@ export default function EstimatedCost({graphData, userName}: any) {
<PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' />
</Header>
<section>
<LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
<CativoXLivreChart data1={graphData} data2={graphData} data3={graphData}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado />
</section>

5
src/pages/grossSavings/index.tsx
View File

@ -4,6 +4,7 @@ import { parseCookies } from 'nookies'
import React from 'react'
import Chart from '../../components/graph/Chart'
import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
import { SingleBar } from '../../components/graph/SingleBar'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
@ -22,11 +23,11 @@ export default function GrossSavings({graphData, years, userName}: any) {
<PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil' />
</Header>
<section>
<SingleBar title='' subtitle=''
<GrossAnulChart title='' subtitle=''
dataset='Consolidada'
dataProps={graphData}
label={years} barLabel/>
label={years} barLabel bruta/>
</section>
</GrossSavingsView>

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

@ -183,7 +183,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={page==='table'? true : false}>
<Header name={userName}>
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
<PageTitle title='Tabela de consumo PLD' subtitle='Tabela de consumo PLD'/>
<PageTitle title='PLD Histórico' subtitle='Tabela de consumo PLD'/>
</Header>
<PldTableView>
<table className="tg">
@ -198,27 +198,14 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
</thead>
<tbody>
{
tableData.data.sort((a, b) => {
if (parseFloat(a.year_month_formatted.slice(0,2)) > parseFloat(b.year_month_formatted.slice(1,2))) return 1
if (parseFloat(a.year_month_formatted.slice(0,2)) < parseFloat(b.year_month_formatted.slice(1,2))) return -1
return 0
}).sort((a, b) => {
if (parseFloat(a.year_month_formatted.slice(3,7)) > parseFloat(b.year_month_formatted.slice(3,7))) return 1
if (parseFloat(a.year_month_formatted.slice(3,7)) < parseFloat(b.year_month_formatted.slice(3,7))) return -1
console.log(a.year_month_formatted.slice(3,7))
console.log(b.year_month_formatted.slice(3,7))
return 0
}).map(data => {
tableData.data.map(data => {
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})}</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>
<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>
</tr>
</>
})
@ -286,8 +273,8 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={page==='perMouth'? true : false}>
<Header name={userName}>
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
<PageTitle title='Resumo PLD - Diários' subtitle='Evolução PLD (R$/MWh)'/>
<GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
<PageTitle title='Resumo PLD - Valores Diários' subtitle='Evolução PLD (R$/MWh)'/>
</Header>
<PldGraphView>
<section className='toolsbar'>
@ -348,12 +335,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={page==='perDate'? true : false}>
<Header name={userName}>
{/* <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link> */}
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
<PageTitle title='Resumo PLD - Horas' subtitle='Gráfico de resumo PLD - Horas (Média, Diário)'/>
<GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
<PageTitle title='Resumo PLD - Valores Horários' subtitle='Evolução PLD (R$/MWh)'/>
</Header>
<PldGraphView>
<section className='toolsbar'>
<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>
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}

14
src/pages/resumoOperacao/index.tsx
View File

@ -93,7 +93,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<title>Smart Energia - Resumo de Operação</title>
</Head>
<Header name={userName}>
<PageTitle title='Resumo de Operações' subtitle='Operações detalhadas' />
<PageTitle title='Resumo de Operações' subtitle='Operações de compra e venda - Mensal' />
</Header>
<h3>Filtrar por Unidade e/ou Mês</h3>
<div className='select'>
@ -115,7 +115,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
</Select>
</FormControl>
<FormControl fullWidth sx={{mt: 2}}>
<FormControl fullWidth sx={{ml: 2}}>
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
<Select
labelId="demo-simple-select-label"
@ -141,18 +141,14 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<th className='tg-8oo6'>Operação</th>
<th className='tg-8oo6'>Montante (MWh)</th>
<th className='tg-8oo6'>Contraparte</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
</tr>
</thead>
<tbody>
{
tableDataState.sort((a, b) => {
if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
return 0
}).map((value, index) => {
tableDataState.map((value, index) => {
if (value.mes.slice(4,7) != '2020')
return <>
<tr>
<td key={index} className='tg-gceh'>{value.mes}</td>

9
src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
View File

@ -2,10 +2,13 @@ import styled from 'styled-components'
export const TableView = styled.div`
display: flex;
padding: 2.5rem;
justify-content: center;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
@ -19,11 +22,11 @@ export const TableView = styled.div`
.select{
display: flex;
flex-direction: column;
flex-direction: row;
margin-bottom: 25px;
width: 20rem;
width: 30rem;
}
.tg{
@ -40,7 +43,7 @@ export const TableView = styled.div`
font-family:Poppins;
font-size: 10px;
overflow:hidden;
padding:17px 30px;
padding: 17px 20px;
word-break:normal;
}

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

@ -180,6 +180,18 @@ export const PldGraphView = styled.main`
width: 20rem;
}
.toolsbar {
display: flex;
justify-content: center;
align-items: flex-start!important;
flex-direction: column;
p {
margin: 0;
}
}
input {
width: 20rem;
height: 3.5rem;