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 2023-02-16 15:30:37 -03:00
parent 309c2b456a
commit a8dd640f39
3 changed files with 459 additions and 537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,11 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'; import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels'; import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw } from 'patternomaly'
import React, { useEffect } from 'react';
import { Chart } from 'react-chartjs-2';
import 'chartjs-plugin-style'; import 'chartjs-plugin-style';
import { draw } from 'patternomaly';
import { Chart } from 'react-chartjs-2';
import { GrossAnualChartView } from './GrossAnualChartView';
import ChartTitle from '../ChartTitle'; import ChartTitle from '../ChartTitle';
import { GrossAnualChartView } from './GrossAnualChartView';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -18,7 +17,7 @@ ChartJS.register(
ChartDataLabels, ChartDataLabels,
); );
interface SingleBarInterface{ interface SingleBarInterface {
title: string, title: string,
subtitle: string, subtitle: string,
dataProps: any, dataProps: any,
@ -29,9 +28,9 @@ interface SingleBarInterface{
bruta?: boolean | undefined bruta?: boolean | undefined
} }
export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset, barLabel, miniature, bruta }: SingleBarInterface) { export function GrossAnualChart({ title, subtitle, dataProps = [], label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
function spacement(string) { function spacement(string) {
const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? ' ' : string.length===5? ' ' : '' const spaces = string.length === 1 ? '' : string.length === 2 ? '' : string.length === 3 ? ' ' : string.length === 4 ? ' ' : string.length === 5 ? ' ' : ''
return spaces return spaces
} }
@ -46,20 +45,20 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
}, },
ticks: { ticks: {
font: { font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/125 size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
} }
}, },
}, },
y: { y: {
stacked: false, stacked: false,
max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada,0)) + 350, max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada, 0)) + 350,
min: 0, min: 0,
grid: { grid: {
display: false display: false
}, },
ticks: { ticks: {
font: { font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/125 size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
} }
}, },
}, },
@ -80,20 +79,23 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
dataArr.map(data => { dataArr.map(data => {
sum += data; sum += data;
}); });
const percentage = (dataProps[ctx.dataIndex]?.econ_percentual*100).toFixed(0)+"%"; 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')}${spacement(parseInt(value).toLocaleString('pt-br'))}` const result = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}${spacement(parseInt(value).toLocaleString('pt-br'))}`
return value==null? null : result console.log(value == null ? null : result)
console.log(dataProps)
return value == null ? null : result
}, },
display: true, display: true,
anchor: "end", anchor: "end",
align: "end", align: "end",
font: { font: {
weight: 'bold', weight: 'bold',
size: !miniature? window.innerWidth/80 : window.innerWidth/125, size: !miniature ? window.innerWidth / 80 : window.innerWidth / 125,
}, },
color: (value) => { color: (value) => {
return value.dataset.label==='Consolidada'? '#fff' : '#255488' return value.dataset.label === 'Consolidada' ? '#fff' : '#255488'
}, },
}, },
legend: { legend: {
@ -106,7 +108,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
}, },
}; };
const labels: string[] = label.filter(function(item, pos) { const labels: string[] = label.filter((item, pos) => {
return label.indexOf(item) == pos; return label.indexOf(item) == pos;
}); });
@ -141,11 +143,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
return 0 return 0
}) })
}, },
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => { data: [].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
if (value.dad_estimado) return parseFloat(value?.economia_acumulada)
return parseFloat(value.economia_acumulada)
else
return 0
})), })),
borderRadius: 10, borderRadius: 10,
backgroundColor: draw('diagonal-right-left', '#C2d5fb'), backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
@ -156,7 +155,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
return ( return (
<GrossAnualChartView> <GrossAnualChartView>
<ChartTitle title={title} subtitle={subtitle} /> <ChartTitle title={title} subtitle={subtitle} />
<Chart options={options} data={data} type='bar' height={150}/> <Chart options={options} data={data} type='bar' height={150} />
</GrossAnualChartView> </GrossAnualChartView>
) )
} }

23
src/components/graph/grossMensalChart/GrossMensalChart.tsx
View File

@ -1,23 +1,16 @@
import React, { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2'
import { import {
Chart as ChartJS, BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title,
CategoryScale, Tooltip
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js' } from 'chart.js'
import { Chart as ChartJs } from 'react-chartjs-2'
import document from 'next/document'
import { draw, generate } from 'patternomaly' import { draw } from 'patternomaly'
import { GrossMensalChartView } from './GrossMensalChartView'
import ChartTitle from '../ChartTitle' import ChartTitle from '../ChartTitle'
import { config } from '../config' import { GrossMensalChartView } from './GrossMensalChartView'
// import { data } from './LineBarChart'; // import { data } from './LineBarChart';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend) ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
@ -80,7 +73,7 @@ export default function GrossMensalChart({
responsive: true, responsive: true,
scales: { scales: {
x: { x: {
stacked: false, stacked: true,
grid: { grid: {
display: false display: false
}, },
@ -91,7 +84,7 @@ export default function GrossMensalChart({
} }
}, },
y: { y: {
stacked: false, stacked: true,
grid: { grid: {
display: false display: false
}, },

288
src/pages/telemetria/index.tsx
View File

@ -1,39 +1,37 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Banner from '../../components/banner/Banner';
import { TelemetriaView, Buttons, TableHeader, ChartFilters} from '../../styles/layouts/Telemetria/TelemetriaView';
import GradientButton from '../../components/buttons/gradientButton/GradientButton'
import Header from '../../components/header/Header';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl'; import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select'; import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Head from 'next/head'; import Head from 'next/head';
import GradientButton from '../../components/buttons/gradientButton/GradientButton';
import Header from '../../components/header/Header';
import { Buttons, ChartFilters, TableHeader, TelemetriaView } from '../../styles/layouts/Telemetria/TelemetriaView';
import RenderIf from '../../utils/renderIf'; import MuiAlert, { AlertProps } from '@mui/material/Alert';
import Snackbar from '@mui/material/Snackbar';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies'; import { parseCookies } from 'nookies';
import { api } from '../../services/api';
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import getAPIClient from '../../services/ssrApi';
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'; import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
import getAPIClient from '../../services/ssrApi';
import RenderIf from '../../utils/renderIf';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab'; import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import TextField from '@mui/material/TextField'; import TextField from '@mui/material/TextField';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { format } from 'date-fns';
import BasicButton from '../../components/buttons/basicButton/BasicButton'; import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'; import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'; import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
import PageTitle from '../../components/pageTitle/PageTitle';
import { getDemand } from '../../services/charts/telemetry/getDemand';
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'; import { getDiscretization } from '../../services/charts/telemetry/getDiscretization';
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor'; import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor';
import { getDemand } from '../../services/charts/telemetry/getDemand';
import PageTitle from '../../components/pageTitle/PageTitle';
import { format } from 'date-fns';
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert( const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props, props,
@ -42,18 +40,18 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} /> return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
}) })
export default function Telemetria({userName, clients}: any) { export default function Telemetria({ userName, clients }: any) {
const [unity, setUnity] = useState(clients[0].codigo_scde); const [unity, setUnity] = useState(clients[0].codigo_scde);
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date());
const [month, setMonth] = useState(new Date().getMonth()+1); const [month, setMonth] = useState(new Date().getMonth() + 1);
const [discretization, setDiscretization] = useState('1_hora'); const [discretization, setDiscretization] = useState('1_hora');
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false) const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false) const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false) const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
const months=['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'] const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
const handleCloseSnack = ( const handleCloseSnack = (
event?: React.SyntheticEvent | Event, event?: React.SyntheticEvent | Event,
@ -75,7 +73,7 @@ export default function Telemetria({userName, clients}: any) {
textEncoder = new TextEncoder('windows-1252'); textEncoder = new TextEncoder('windows-1252');
*/ */
const csv_file = new Blob([csv], {type: "text/csv;charset=utf-8"}); const csv_file = new Blob([csv], { type: "text/csv;charset=utf-8" });
const download_link = document.createElement("a"); const download_link = document.createElement("a");
@ -143,8 +141,8 @@ export default function Telemetria({userName, clients}: any) {
setLoader(true) setLoader(true)
getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization) getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization)
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)}) .then(result => { setDiscretizedConsumptionData(result); setSend(false); setLoader(false) })
.catch(() => {setSend(false); setOpenSnackFields(true)}) .catch(() => { setSend(false); setOpenSnackFields(true) })
getDemand(unity, startDate, endDate, discretization) getDemand(unity, startDate, endDate, discretization)
.then(result => { .then(result => {
@ -152,15 +150,15 @@ export default function Telemetria({userName, clients}: any) {
setSend(false); setSend(false);
setTableData(result) setTableData(result)
}) })
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)}) .catch(() => { setSend(false); setOpenSnackFields(true); setLoader(false) })
getPowerFactorData(unity, startDate, endDate, discretization) getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false)}) .then(result => { setFatorPotenciaData(result); setSend(false); setLoader(false) })
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)}) .catch(() => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}, []) }, [])
return( return (
<main style={{width: '100%'}}> <main style={{ width: '100%' }}>
<Head> <Head>
<title>Smart Energia - Telemetria</title> <title>Smart Energia - Telemetria</title>
</Head> </Head>
@ -206,10 +204,10 @@ export default function Telemetria({userName, clients}: any) {
</Snackbar> </Snackbar>
<Header name={userName}> <Header name={userName}>
<PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/> <PageTitle title='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia' />
</Header> </Header>
{ {
typeof window === 'undefined' || typeof window === undefined? null : typeof window === 'undefined' || typeof window === undefined ? null :
<TelemetriaView> <TelemetriaView>
{/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia - {/* <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE, SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
@ -220,20 +218,20 @@ export default function Telemetria({userName, clients}: any) {
<TableHeader> <TableHeader>
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label=""> <Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
<Tab label={ <Tab label={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' : discretization === '5_min' ? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization === '15_min' ? 'Consumo discretizado em 15 minutos' :
discretization==='1_hora'? 'Consumo discretizado em 1 hora' : discretization === '1_hora' ? 'Consumo discretizado em 1 hora' :
'Consumo discretizado em 1 dia'}/> 'Consumo discretizado em 1 dia'} />
<Tab label="Demanda"/> <Tab label="Demanda" />
<Tab label="Fator Potência"/> <Tab label="Fator Potência" />
</Tabs> </Tabs>
</TableHeader> </TableHeader>
{/* discretization chart */} {/* discretization chart */}
<RenderIf isTrue={menu===0}> <RenderIf isTrue={menu === 0}>
<ChartFilters> <ChartFilters>
<div className='input'> <div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small"> <FormControl style={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel> <InputLabel>Unidade</InputLabel>
<Select <Select
labelId="demo-select-small" labelId="demo-select-small"
@ -241,7 +239,7 @@ export default function Telemetria({userName, clients}: any) {
value={unity} value={unity}
label="Unidade" label="Unidade"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
@ -265,7 +263,7 @@ export default function Telemetria({userName, clients}: any) {
value={discretization} value={discretization}
label="Discretização" label="Discretização"
onChange={value => setDiscretization(value.target.value)} onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
@ -290,20 +288,20 @@ export default function Telemetria({userName, clients}: any) {
label="Mês" label="Mês"
onChange={value => { onChange={value => {
setMonth(value.target.value as number) setMonth(value.target.value as number)
const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number)-1, 1) const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number) - 1, 1)
const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0) const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
setStartDate(firstOfTheMonth) setStartDate(firstOfTheMonth)
setEndDate(lastOfTheMonth) setEndDate(lastOfTheMonth)
}} }}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
<em>Nenhum</em> <em>Nenhum</em>
</MenuItem> </MenuItem>
{ {
months.slice(0, new Date().getUTCMonth()+1).map(value => { months.slice(0, new Date().getUTCMonth() + 1).map(value => {
return <MenuItem key={value} value={months.indexOf(value)+1 as number}>{value}</MenuItem> return <MenuItem key={value} value={months.indexOf(value) + 1 as number}>{value}</MenuItem>
}) })
} }
</Select> </Select>
@ -316,26 +314,26 @@ export default function Telemetria({userName, clients}: any) {
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={startDate} value={startDate}
onChange={handleChangeStartDate} onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>} renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
/> />
</div> </div>
<div className='datePicker' style={{marginRight: 10}}> <div className='datePicker' style={{ marginRight: 10 }}>
<DesktopDatePicker <DesktopDatePicker
label="Data final" label="Data final"
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={endDate} value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) maxDate={discretization === '1_mes' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
: :
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) discretization === '1_dia' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
: :
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1) discretization === '1_hora' ? new Date(startDate).setUTCMonth(startDate.getUTCMonth() + 1)
: :
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7) discretization === '15_min' ? new Date(startDate).setUTCDate(startDate.getUTCDate() + 7)
: :
new Date(startDate).setUTCDate(startDate.getUTCDate()+1) new Date(startDate).setUTCDate(startDate.getUTCDate() + 1)
} }
onChange={(newValue: any) => handleChangeEndDate(newValue)} onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>} renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
/> />
</div> </div>
</LocalizationProvider> </LocalizationProvider>
@ -344,22 +342,22 @@ export default function Telemetria({userName, clients}: any) {
<BasicButton title='Selecionar!' onClick={() => { <BasicButton title='Selecionar!' onClick={() => {
setLoader(true) setLoader(true)
getDiscretization(unity, startDate, endDate, discretization) getDiscretization(unity, startDate, endDate, discretization)
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result)}) .then(result => { setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result) })
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)}) .catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}}/> }} />
</div> </div>
</ChartFilters> </ChartFilters>
<DiscretizedConsumptionChart title={ <DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' : 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' 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/> } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month />
</RenderIf> </RenderIf>
{/* demand chart */} {/* demand chart */}
<RenderIf isTrue={menu===1}> <RenderIf isTrue={menu === 1}>
<ChartFilters> <ChartFilters>
<div className='input'> <div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small"> <FormControl style={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel> <InputLabel>Unidade</InputLabel>
<Select <Select
labelId="demo-select-small" labelId="demo-select-small"
@ -367,7 +365,7 @@ export default function Telemetria({userName, clients}: any) {
value={unity} value={unity}
label="Unidade" label="Unidade"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
@ -391,7 +389,7 @@ export default function Telemetria({userName, clients}: any) {
value={discretization} value={discretization}
label="Discretização" label="Discretização"
onChange={value => setDiscretization(value.target.value)} onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
@ -412,26 +410,26 @@ export default function Telemetria({userName, clients}: any) {
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={startDate} value={startDate}
onChange={handleChangeStartDate} onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>} renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
/> />
</div> </div>
<div className='datePicker' style={{marginRight: 10}}> <div className='datePicker' style={{ marginRight: 10 }}>
<DesktopDatePicker <DesktopDatePicker
label="Data final" label="Data final"
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={endDate} value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) maxDate={discretization === '1_mes' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
: :
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) discretization === '1_dia' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
: :
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1) discretization === '1_hora' ? new Date(startDate).setUTCMonth(startDate.getUTCMonth() + 1)
: :
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7) discretization === '15_min' ? new Date(startDate).setUTCDate(startDate.getUTCDate() + 7)
: :
new Date(startDate).setUTCDate(startDate.getUTCDate()+1) new Date(startDate).setUTCDate(startDate.getUTCDate() + 1)
} }
onChange={(newValue: any) => handleChangeEndDate(newValue)} onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>} renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
/> />
</div> </div>
</LocalizationProvider> </LocalizationProvider>
@ -439,21 +437,21 @@ export default function Telemetria({userName, clients}: any) {
<BasicButton title='Selecionar!' onClick={() => { <BasicButton title='Selecionar!' onClick={() => {
setLoader(true) setLoader(true)
getDemand(unity, startDate, endDate, discretization) getDemand(unity, startDate, endDate, discretization)
.then(result => {setDemRegXDemCon(result); setSend(false); setLoader(false); setTableData(result)}) .then(result => { setDemRegXDemCon(result); setSend(false); setLoader(false); setTableData(result) })
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)}) .catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}}/> }} />
</div> </div>
</ChartFilters> </ChartFilters>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red />
</RenderIf> </RenderIf>
{/* power factor chart */} {/* power factor chart */}
<RenderIf isTrue={menu===2}> <RenderIf isTrue={menu === 2}>
<ChartFilters> <ChartFilters>
<div className='input'> <div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small"> <FormControl style={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel> <InputLabel>Unidade</InputLabel>
<Select <Select
labelId="demo-select-small" labelId="demo-select-small"
@ -461,7 +459,7 @@ export default function Telemetria({userName, clients}: any) {
value={unity} value={unity}
label="Unidade" label="Unidade"
onChange={value => setUnity(value.target.value)} onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
@ -485,7 +483,7 @@ export default function Telemetria({userName, clients}: any) {
value={discretization} value={discretization}
label="Discretização" label="Discretização"
onChange={value => setDiscretization(value.target.value)} onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 2}} sx={{ height: 63, mb: 2 }}
fullWidth fullWidth
> >
<MenuItem value=""> <MenuItem value="">
@ -506,26 +504,26 @@ export default function Telemetria({userName, clients}: any) {
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={startDate} value={startDate}
onChange={handleChangeStartDate} onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>} renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
/> />
</div> </div>
<div className='datePicker' style={{marginRight: 10}}> <div className='datePicker' style={{ marginRight: 10 }}>
<DesktopDatePicker <DesktopDatePicker
label="Data final" label="Data final"
inputFormat="dd/MM/yyyy" inputFormat="dd/MM/yyyy"
value={endDate} value={endDate}
maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) maxDate={discretization === '1_mes' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
: :
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2) discretization === '1_dia' ? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear() + 2)
: :
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1) discretization === '1_hora' ? new Date(startDate).setUTCMonth(startDate.getUTCMonth() + 1)
: :
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7) discretization === '15_min' ? new Date(startDate).setUTCDate(startDate.getUTCDate() + 7)
: :
new Date(startDate).setUTCDate(startDate.getUTCDate()+1) new Date(startDate).setUTCDate(startDate.getUTCDate() + 1)
} }
onChange={(newValue: any) => handleChangeEndDate(newValue)} onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>} renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
/> />
</div> </div>
</LocalizationProvider> </LocalizationProvider>
@ -533,9 +531,9 @@ export default function Telemetria({userName, clients}: any) {
<BasicButton title='Selecionar!' onClick={() => { <BasicButton title='Selecionar!' onClick={() => {
setLoader(true) setLoader(true)
getPowerFactorData(unity, startDate, endDate, discretization) getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result)}) .then(result => { setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result) })
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)}) .catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
}}/> }} />
</div> </div>
</ChartFilters> </ChartFilters>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
@ -555,54 +553,19 @@ export default function Telemetria({userName, clients}: any) {
</div> </div>
</RenderIf> </RenderIf>
<RenderIf isTrue={menu===2}>
<table className="tg"> <table className="tg">
<thead> <thead>
<tr> <tr>
<th className='tg-8oo6'>Unidade</th>
<th className='tg-8oo6'>Ponto</th> <th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th> <th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th> <th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th> <th className='tg-8oo6'>Hora</th>
<th className='tg-8oo6'>Minuto</th>
<th className='tg-8oo6'>f_ref</th> <th className='tg-8oo6'>f_ref</th>
<th className='tg-8oo6'>Consumo</th> <th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th> <th className='tg-8oo6'>Reativa</th>
<th className='tg-8oo6'>fp</th> <th className='tg-8oo6'>fp</th>
</tr>
</thead>
<tbody>
{
fatorPotenciaData!==null?
fatorPotenciaData?.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-gceh'>{value.hora}</td>
<td key={index} className='tg-gceh'>{value.f_ref}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.fp)}</td>
</tr>
</>
})
:
null
}
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={menu===1}>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th>
{/* <th className='tg-8oo6'>Minuto</th> não temos */}
<th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th>
<th className='tg-8oo6'>dem contratada</th> <th className='tg-8oo6'>dem contratada</th>
<th className='tg-8oo6'>dem registrada</th> <th className='tg-8oo6'>dem registrada</th>
<th className='tg-8oo6'>dem tolerancia</th> <th className='tg-8oo6'>dem tolerancia</th>
@ -610,55 +573,23 @@ export default function Telemetria({userName, clients}: any) {
</thead> </thead>
<tbody> <tbody>
{ {
demRegXDemCon!==null? fatorPotenciaData !== null ?
demRegXDemCon?.map((value, index) => { fatorPotenciaData?.map((value, index) => {
return <> return <>
<tr> <tr>
<td key={index} className='tg-gceh'>{value.ponto}</td> <td key={index} className='tg-gceh'>{unity}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td> <td key={index} className='tg-gceh'>{value?.ponto}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td> <td key={index} className='tg-gceh'>{parseFloat(value?.dia_num)}</td>
<td key={index} className='tg-gceh'>{value.hora}</td> <td key={index} className='tg-uulg'>{value?.day_formatted}</td>
{/* <td key={index} className='tg-gceh'>{value.minut}</td> */} <td key={index} className='tg-gceh'>{value?.hora}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{value.dem_cont}</td>
<td key={index} className='tg-gceh'>{value.dem_reg}</td>
<td key={index} className='tg-gceh'>{value.dem_tolerancia}</td>
</tr>
</>
})
:
null
}
</tbody>
</table>
</RenderIf>
<RenderIf isTrue={menu===0}>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Ponto</th>
<th className='tg-8oo6'>Numero do dia</th>
<th className='tg-8oo6'>Dia formatado</th>
<th className='tg-8oo6'>Hora</th>
<th className='tg-8oo6'>Minuto</th>
<th className='tg-8oo6'>Consumo</th>
<th className='tg-8oo6'>Reativa</th>
</tr>
</thead>
<tbody>
{
discretizedConsumptionData!==null?
discretizedConsumptionData?.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.ponto}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
<td key={index} className='tg-uulg'>{value.day_formatted}</td>
<td key={index} className='tg-gceh'>{value.hora}</td>
<td key={index} className='tg-gceh'>{value.minut}</td> <td key={index} className='tg-gceh'>{value.minut}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td> <td key={index} className='tg-gceh'>{value?.f_ref}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td> <td key={index} className='tg-uulg'>{parseFloat(value?.consumo).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
<td key={index} className='tg-gceh'>{parseFloat(value?.reativa).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
<td key={index} className='tg-gceh'>{parseFloat(value?.fp)}</td>
<td key={index} className='tg-gceh'>{value?.dem_cont}</td>
<td key={index} className='tg-gceh'>{value?.dem_reg}</td>
<td key={index} className='tg-gceh'>{value?.dem_tolerancia}</td>
</tr> </tr>
</> </>
}) })
@ -667,10 +598,9 @@ export default function Telemetria({userName, clients}: any) {
} }
</tbody> </tbody>
</table> </table>
</RenderIf>
<RenderIf isTrue={showChart}> <RenderIf isTrue={showChart}>
<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/> <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 />
</RenderIf> </RenderIf>
<Buttons> <Buttons>
@ -679,14 +609,14 @@ export default function Telemetria({userName, clients}: any) {
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => { <GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
const html = document.querySelector("table")?.outerHTML; const html = document.querySelector("table")?.outerHTML;
htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`); htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`);
}}/> }} />
</Buttons> </Buttons>
<p className='paragraph'> <p className='paragraph'>
<i> <i>
Fonte: Dados coletados do Sistema de Coleta de Dados Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/> de Energia - SCDE da Câmara de Comercialização <br />
Energia Elétrica – CCEE, sendo que as quantidades aqui Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de informadas são de responsabilidade <br />do agente de
medição - Distribuidora. medição - Distribuidora.
</i> </i>
</p> </p>
@ -707,8 +637,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/units', { await apiClient.post('/units', {
"filters": [ "filters": [
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id}, { "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id },
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]} { "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] }
], ],
"fields": [ "fields": [
"unidade", "unidade",