fixing
This commit is contained in:
joseCorte-exe
parent
309c2b456a
commit
a8dd640f39
@ -1,12 +1,11 @@
|
||||
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
|
||||
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 { draw } from 'patternomaly';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
|
||||
import { GrossAnualChartView } from './GrossAnualChartView';
|
||||
import ChartTitle from '../ChartTitle';
|
||||
import { GrossAnualChartView } from './GrossAnualChartView';
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
@ -18,7 +17,7 @@ ChartJS.register(
|
||||
ChartDataLabels,
|
||||
);
|
||||
|
||||
interface SingleBarInterface{
|
||||
interface SingleBarInterface {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
dataProps: any,
|
||||
@ -29,9 +28,9 @@ interface SingleBarInterface{
|
||||
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) {
|
||||
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
|
||||
}
|
||||
@ -46,20 +45,20 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? window.innerWidth/90 : window.innerWidth/125
|
||||
size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
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,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
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 => {
|
||||
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'))}`
|
||||
|
||||
return value==null? null : result
|
||||
console.log(value == null ? null : result)
|
||||
console.log(dataProps)
|
||||
|
||||
return value == null ? null : result
|
||||
},
|
||||
display: true,
|
||||
anchor: "end",
|
||||
align: "end",
|
||||
font: {
|
||||
weight: 'bold',
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/125,
|
||||
size: !miniature ? window.innerWidth / 80 : window.innerWidth / 125,
|
||||
},
|
||||
color: (value) => {
|
||||
return value.dataset.label==='Consolidada'? '#fff' : '#255488'
|
||||
return value.dataset.label === 'Consolidada' ? '#fff' : '#255488'
|
||||
},
|
||||
},
|
||||
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;
|
||||
});
|
||||
|
||||
@ -141,11 +143,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
return 0
|
||||
})
|
||||
},
|
||||
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
||||
if (value.dad_estimado)
|
||||
return parseFloat(value.economia_acumulada)
|
||||
else
|
||||
return 0
|
||||
data: [].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
|
||||
return parseFloat(value?.economia_acumulada)
|
||||
})),
|
||||
borderRadius: 10,
|
||||
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
|
||||
@ -156,7 +155,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
|
||||
return (
|
||||
<GrossAnualChartView>
|
||||
<ChartTitle title={title} subtitle={subtitle} />
|
||||
<Chart options={options} data={data} type='bar' height={150}/>
|
||||
<Chart options={options} data={data} type='bar' height={150} />
|
||||
</GrossAnualChartView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title,
|
||||
Tooltip
|
||||
} 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 { config } from '../config'
|
||||
import { GrossMensalChartView } from './GrossMensalChartView'
|
||||
// import { data } from './LineBarChart';
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
|
||||
@ -80,7 +73,7 @@ export default function GrossMensalChart({
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: false,
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
@ -91,7 +84,7 @@ export default function GrossMensalChart({
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: false,
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
|
||||
@ -1,39 +1,37 @@
|
||||
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 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 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 { 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 getAPIClient from '../../services/ssrApi';
|
||||
import RenderIf from '../../utils/renderIf';
|
||||
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||||
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 { format } from 'date-fns';
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
|
||||
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 { 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(
|
||||
props,
|
||||
@ -42,18 +40,18 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
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 [startDate, setStartDate] = 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 [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||||
const [openSnackError, setOpenSnackError] = 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 = (
|
||||
event?: React.SyntheticEvent | Event,
|
||||
@ -75,7 +73,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
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");
|
||||
|
||||
@ -143,8 +141,8 @@ export default function Telemetria({userName, clients}: any) {
|
||||
|
||||
setLoader(true)
|
||||
getDiscretization(unity, new Date(firstOfTheMonth), new Date(lastOfTheMonth), discretization)
|
||||
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false)})
|
||||
.catch(() => {setSend(false); setOpenSnackFields(true)})
|
||||
.then(result => { setDiscretizedConsumptionData(result); setSend(false); setLoader(false) })
|
||||
.catch(() => { setSend(false); setOpenSnackFields(true) })
|
||||
|
||||
getDemand(unity, startDate, endDate, discretization)
|
||||
.then(result => {
|
||||
@ -152,15 +150,15 @@ export default function Telemetria({userName, clients}: any) {
|
||||
setSend(false);
|
||||
setTableData(result)
|
||||
})
|
||||
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||
.catch(() => { setSend(false); setOpenSnackFields(true); setLoader(false) })
|
||||
|
||||
getPowerFactorData(unity, startDate, endDate, discretization)
|
||||
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false)})
|
||||
.catch(() => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||
.then(result => { setFatorPotenciaData(result); setSend(false); setLoader(false) })
|
||||
.catch(() => { setSend(false); setOpenSnackFields(true); setLoader(false) })
|
||||
}, [])
|
||||
|
||||
return(
|
||||
<main style={{width: '100%'}}>
|
||||
return (
|
||||
<main style={{ width: '100%' }}>
|
||||
<Head>
|
||||
<title>Smart Energia - Telemetria</title>
|
||||
</Head>
|
||||
@ -206,10 +204,10 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</Snackbar>
|
||||
|
||||
<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>
|
||||
{
|
||||
typeof window === 'undefined' || typeof window === undefined? null :
|
||||
typeof window === 'undefined' || typeof window === undefined ? null :
|
||||
<TelemetriaView>
|
||||
{/* <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,
|
||||
@ -220,20 +218,20 @@ export default function Telemetria({userName, clients}: any) {
|
||||
<TableHeader>
|
||||
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
|
||||
<Tab label={
|
||||
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'}/>
|
||||
<Tab label="Demanda"/>
|
||||
<Tab label="Fator Potência"/>
|
||||
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'} />
|
||||
<Tab label="Demanda" />
|
||||
<Tab label="Fator Potência" />
|
||||
</Tabs>
|
||||
</TableHeader>
|
||||
|
||||
{/* discretization chart */}
|
||||
<RenderIf isTrue={menu===0}>
|
||||
<RenderIf isTrue={menu === 0}>
|
||||
<ChartFilters>
|
||||
<div className='input'>
|
||||
<FormControl style={{ minWidth: 100, width: 200}} size="small">
|
||||
<FormControl style={{ minWidth: 100, width: 200 }} size="small">
|
||||
<InputLabel>Unidade</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
@ -241,7 +239,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
value={unity}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
@ -265,7 +263,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
value={discretization}
|
||||
label="Discretização"
|
||||
onChange={value => setDiscretization(value.target.value)}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
@ -290,20 +288,20 @@ export default function Telemetria({userName, clients}: any) {
|
||||
label="Mês"
|
||||
onChange={value => {
|
||||
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)
|
||||
setStartDate(firstOfTheMonth)
|
||||
setEndDate(lastOfTheMonth)
|
||||
}}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
{
|
||||
months.slice(0, new Date().getUTCMonth()+1).map(value => {
|
||||
return <MenuItem key={value} value={months.indexOf(value)+1 as number}>{value}</MenuItem>
|
||||
months.slice(0, new Date().getUTCMonth() + 1).map(value => {
|
||||
return <MenuItem key={value} value={months.indexOf(value) + 1 as number}>{value}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
@ -316,26 +314,26 @@ export default function Telemetria({userName, clients}: any) {
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={startDate}
|
||||
onChange={handleChangeStartDate}
|
||||
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
|
||||
renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
|
||||
/>
|
||||
</div>
|
||||
<div className='datePicker' style={{marginRight: 10}}>
|
||||
<div className='datePicker' style={{ marginRight: 10 }}>
|
||||
<DesktopDatePicker
|
||||
label="Data final"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
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)}
|
||||
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
|
||||
renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
|
||||
/>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
@ -344,22 +342,22 @@ export default function Telemetria({userName, clients}: any) {
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setLoader(true)
|
||||
getDiscretization(unity, startDate, endDate, discretization)
|
||||
.then(result => {setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||
}}/>
|
||||
.then(result => { setDiscretizedConsumptionData(result); setSend(false); setLoader(false); setTableData(result) })
|
||||
.catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
|
||||
}} />
|
||||
</div>
|
||||
</ChartFilters>
|
||||
<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/>
|
||||
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 />
|
||||
</RenderIf>
|
||||
|
||||
{/* demand chart */}
|
||||
<RenderIf isTrue={menu===1}>
|
||||
<RenderIf isTrue={menu === 1}>
|
||||
<ChartFilters>
|
||||
<div className='input'>
|
||||
<FormControl style={{ minWidth: 100, width: 200}} size="small">
|
||||
<FormControl style={{ minWidth: 100, width: 200 }} size="small">
|
||||
<InputLabel>Unidade</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
@ -367,7 +365,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
value={unity}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
@ -391,7 +389,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
value={discretization}
|
||||
label="Discretização"
|
||||
onChange={value => setDiscretization(value.target.value)}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
@ -412,26 +410,26 @@ export default function Telemetria({userName, clients}: any) {
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={startDate}
|
||||
onChange={handleChangeStartDate}
|
||||
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
|
||||
renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
|
||||
/>
|
||||
</div>
|
||||
<div className='datePicker' style={{marginRight: 10}}>
|
||||
<div className='datePicker' style={{ marginRight: 10 }}>
|
||||
<DesktopDatePicker
|
||||
label="Data final"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
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)}
|
||||
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
|
||||
renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
|
||||
/>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
@ -439,21 +437,21 @@ export default function Telemetria({userName, clients}: any) {
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setLoader(true)
|
||||
getDemand(unity, startDate, endDate, discretization)
|
||||
.then(result => {setDemRegXDemCon(result); setSend(false); setLoader(false); setTableData(result)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||
}}/>
|
||||
.then(result => { setDemRegXDemCon(result); setSend(false); setLoader(false); setTableData(result) })
|
||||
.catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
|
||||
}} />
|
||||
</div>
|
||||
</ChartFilters>
|
||||
<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/>
|
||||
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red />
|
||||
</RenderIf>
|
||||
|
||||
{/* power factor chart */}
|
||||
<RenderIf isTrue={menu===2}>
|
||||
<RenderIf isTrue={menu === 2}>
|
||||
<ChartFilters>
|
||||
<div className='input'>
|
||||
<FormControl style={{ minWidth: 100, width: 200}} size="small">
|
||||
<FormControl style={{ minWidth: 100, width: 200 }} size="small">
|
||||
<InputLabel>Unidade</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
@ -461,7 +459,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
value={unity}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
@ -485,7 +483,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
value={discretization}
|
||||
label="Discretização"
|
||||
onChange={value => setDiscretization(value.target.value)}
|
||||
sx={{height: 63, mb: 2}}
|
||||
sx={{ height: 63, mb: 2 }}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
@ -506,26 +504,26 @@ export default function Telemetria({userName, clients}: any) {
|
||||
inputFormat="dd/MM/yyyy"
|
||||
value={startDate}
|
||||
onChange={handleChangeStartDate}
|
||||
renderInput={(params) => <TextField {...params} sx={{mr: 1, mb: 2}}/>}
|
||||
renderInput={(params) => <TextField {...params} sx={{ mr: 1, mb: 2 }} />}
|
||||
/>
|
||||
</div>
|
||||
<div className='datePicker' style={{marginRight: 10}}>
|
||||
<div className='datePicker' style={{ marginRight: 10 }}>
|
||||
<DesktopDatePicker
|
||||
label="Data final"
|
||||
inputFormat="dd/MM/yyyy"
|
||||
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)}
|
||||
renderInput={(params) => <TextField {...params} sx={{mb: 2}}/>}
|
||||
renderInput={(params) => <TextField {...params} sx={{ mb: 2 }} />}
|
||||
/>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
@ -533,9 +531,9 @@ export default function Telemetria({userName, clients}: any) {
|
||||
<BasicButton title='Selecionar!' onClick={() => {
|
||||
setLoader(true)
|
||||
getPowerFactorData(unity, startDate, endDate, discretization)
|
||||
.then(result => {setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result)})
|
||||
.catch(exception => {setSend(false); setOpenSnackFields(true); setLoader(false)})
|
||||
}}/>
|
||||
.then(result => { setFatorPotenciaData(result); setSend(false); setLoader(false); setTableData(result) })
|
||||
.catch(exception => { setSend(false); setOpenSnackFields(true); setLoader(false) })
|
||||
}} />
|
||||
</div>
|
||||
</ChartFilters>
|
||||
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
|
||||
@ -555,54 +553,19 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</div>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={menu===2}>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Unidade</th>
|
||||
<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'>f_ref</th>
|
||||
<th className='tg-8oo6'>Consumo</th>
|
||||
<th className='tg-8oo6'>Reativa</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 registrada</th>
|
||||
<th className='tg-8oo6'>dem tolerancia</th>
|
||||
@ -610,55 +573,23 @@ export default function Telemetria({userName, clients}: any) {
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
demRegXDemCon!==null?
|
||||
demRegXDemCon?.map((value, index) => {
|
||||
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.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'>{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'>{unity}</td>
|
||||
<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-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?.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>
|
||||
<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>
|
||||
</>
|
||||
})
|
||||
@ -667,10 +598,9 @@ export default function Telemetria({userName, clients}: any) {
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</RenderIf>
|
||||
|
||||
<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>
|
||||
|
||||
<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={() => {
|
||||
const html = document.querySelector("table")?.outerHTML;
|
||||
htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`);
|
||||
}}/>
|
||||
}} />
|
||||
</Buttons>
|
||||
<p className='paragraph'>
|
||||
<i>
|
||||
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
|
||||
informadas são de responsabilidade <br/>do agente de
|
||||
informadas são de responsabilidade <br />do agente de
|
||||
medição - Distribuidora.
|
||||
</i>
|
||||
</p>
|
||||
@ -707,8 +637,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
|
||||
await apiClient.post('/units', {
|
||||
"filters": [
|
||||
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id},
|
||||
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
|
||||
{ "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id },
|
||||
{ "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] }
|
||||
],
|
||||
"fields": [
|
||||
"unidade",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user