diff --git a/src/components/graph/grossAnualChart/GrossAnualChart.tsx b/src/components/graph/grossAnualChart/GrossAnualChart.tsx index 09f058e..bd85d0a 100644 --- a/src/components/graph/grossAnualChart/GrossAnualChart.tsx +++ b/src/components/graph/grossAnualChart/GrossAnualChart.tsx @@ -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 } }, }, @@ -78,22 +77,25 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset, let sum = 0; const dataArr = ctx.chart.data.datasets[0].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'))}` - 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,8 +108,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset, }, }; - const labels: string[] = label.filter(function(item, pos) { - return label.indexOf(item) == pos; + const labels: string[] = label.filter((item, pos) => { + return label.indexOf(item) == pos; }); const data: any = { @@ -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 ( - + ) } diff --git a/src/components/graph/grossMensalChart/GrossMensalChart.tsx b/src/components/graph/grossMensalChart/GrossMensalChart.tsx index 5282598..6ca13f2 100644 --- a/src/components/graph/grossMensalChart/GrossMensalChart.tsx +++ b/src/components/graph/grossMensalChart/GrossMensalChart.tsx @@ -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) @@ -48,14 +41,14 @@ export default function GrossMensalChart({ string.length === 1 ? '' : string.length === 2 - ? '' - : string.length === 3 - ? ' ' - : string.length === 4 - ? ' ' - : string.length === 5 - ? ' ' - : '' + ? '' + : string.length === 3 + ? ' ' + : string.length === 4 + ? ' ' + : string.length === 5 + ? ' ' + : '' return spaces } @@ -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 }, diff --git a/src/pages/telemetria/index.tsx b/src/pages/telemetria/index.tsx index 29800df..27a5bdb 100644 --- a/src/pages/telemetria/index.tsx +++ b/src/pages/telemetria/index.tsx @@ -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(function Alert( props, @@ -42,18 +40,18 @@ const Alert = React.forwardRef(function Alert( return }) -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(false) const [openSnackError, setOpenSnackError] = useState(false) const [openSnackFields, setOpenSnackFields] = useState(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( -
+ return ( +
Smart Energia - Telemetria @@ -206,109 +204,205 @@ export default function Telemetria({userName, clients}: any) {
- +
{ - typeof window === 'undefined' || typeof window === undefined? null : - - {/* + {/* */} - - - setMenu(nv)} aria-label=""> - - - - - + + + setMenu(nv)} aria-label=""> + + + + + - {/* discretization chart */} - - -
- - Unidade - - -
-
- - Discretização - - -
- { - discretization === '1_mes' ? - - Discretização - - - : + {/* discretization chart */} + + +
+ + Unidade + + +
+
+ + Discretização + + +
+ { + discretization === '1_mes' ? + + Discretização + + + : + +
+ } + /> +
+
+ handleChangeEndDate(newValue)} + renderInput={(params) => } + /> +
+ + } +
+ { + 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) }) + }} /> +
+ + value.minut)} dataset={'Consumo'} dataset1='Estimado' month /> + + + {/* demand chart */} + + +
+ + Unidade + + +
+
+ + Discretização + + +
} + renderInput={(params) => } />
-
+
handleChangeEndDate(newValue)} - renderInput={(params) => } + renderInput={(params) => } />
+
+ { + 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) }) + }} /> +
+ + value.hora)} title='Demanda Contratada X Registrada' subtitle='' red /> + + + {/* power factor chart */} + + +
+ + Unidade + + +
+
+ + Discretização + + +
+ +
+ } + /> +
+
+ handleChangeEndDate(newValue)} + renderInput={(params) => } + /> +
+ +
+ { + 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) }) + }} /> +
+ + (value.day_formatted))} /> + + + + +
+
+ + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + { + fatorPotenciaData !== null ? + fatorPotenciaData?.map((value, index) => { + return <> + + + + + + + + + + + + + + + + + }) + : + null } -
- { - 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)}) - }}/> -
- - value.minut)} dataset={'Consumo'} dataset1='Estimado' month/> - + +
UnidadePontoNumero do diaDia formatadoHoraMinutof_refConsumoReativafpdem contratadadem registradadem tolerancia
{unity}{value?.ponto}{parseFloat(value?.dia_num)}{value?.day_formatted}{value?.hora}{value.minut}{value?.f_ref}{parseFloat(value?.consumo).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}{parseFloat(value?.reativa).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}{parseFloat(value?.fp)}{value?.dem_cont}{value?.dem_reg}{value?.dem_tolerancia}
- {/* demand chart */} - - -
- - Unidade - - -
-
- - Discretização - - -
- -
- } - /> -
-
- handleChangeEndDate(newValue)} - renderInput={(params) => } - /> -
- -
- { - 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)}) - }}/> -
- - value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> - + + value.hora)} title='Demanda Contratada X Registrada' subtitle='' red /> + - {/* power factor chart */} - - -
- - Unidade - - -
-
- - Discretização - - -
- -
- } - /> -
-
- handleChangeEndDate(newValue)} - renderInput={(params) => } - /> -
- -
- { - 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)}) - }}/> -
- - (value.day_formatted))} /> - - - - -
-
- - - - - -
-
- - - - - - - - - - - - - - - - - - { - fatorPotenciaData!==null? - fatorPotenciaData?.map((value, index) => { - return <> - - - - - - - - - - - - }) - : - null - } - -
PontoNumero do diaDia formatadoHoraf_refConsumoReativafp
{value.ponto}{parseFloat(value.dia_num)}{value.day_formatted}{value.hora}{value.f_ref}{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(value.fp)}
- - - - - - - - - - {/* não temos */} - - - - - - - - - { - demRegXDemCon!==null? - demRegXDemCon?.map((value, index) => { - return <> - - - - - - {/* */} - - - - - - - - }) - : - null - } - -
PontoNumero do diaDia formatadoHoraMinutoConsumoReativadem contratadadem registradadem tolerancia
{value.ponto}{parseFloat(value.dia_num)}{value.day_formatted}{value.hora}{value.minut}{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{value.dem_cont}{value.dem_reg}{value.dem_tolerancia}
- - - - - - - - - - - - - - - - { - discretizedConsumptionData!==null? - discretizedConsumptionData?.map((value, index) => { - return <> - - - - - - - - - - - }) - : - null - } - -
PontoNumero do diaDia formatadoHoraMinutoConsumoReativa
{value.ponto}{parseFloat(value.dia_num)}{value.day_formatted}{value.hora}{value.minut}{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}
- - - - value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> - - - - {/* setShowChart(!showChart)} purple /> */} - {/* handleVerifyFields()} orange /> */} - { - const html = document.querySelector("table")?.outerHTML; - htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`); - }}/> - -

- - Fonte: Dados coletados do Sistema de Coleta de Dados - de Energia - SCDE da Câmara de Comercialização
- Energia Elétrica – CCEE, sendo que as quantidades aqui - informadas são de responsabilidade
do agente de - medição - Distribuidora. - -

- + + {/* setShowChart(!showChart)} purple /> */} + {/* handleVerifyFields()} orange /> */} + { + const html = document.querySelector("table")?.outerHTML; + htmlToCSV(html, `${menu === 2 ? 'fator_potencia' : menu === 1 ? 'demanda' : 'consumo_discretizado'}.csv`); + }} /> + +

+ + Fonte: Dados coletados do Sistema de Coleta de Dados + de Energia - SCDE da Câmara de Comercialização
+ Energia Elétrica – CCEE, sendo que as quantidades aqui + informadas são de responsabilidade
do agente de + medição - Distribuidora. + +

+ }
) @@ -706,15 +636,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { let clients = [] 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"]} - ], - "fields": [ - "unidade", - "cod_smart_unidade", - "codigo_scde"], - "distinct": true + "filters": [ + { "type": "=", "field": "dados_cadastrais.cod_smart_cliente", "value": client_id }, + { "type": "not_in", "field": "dados_cadastrais.codigo_scde", "value": ["0P"] } + ], + "fields": [ + "unidade", + "cod_smart_unidade", + "codigo_scde"], + "distinct": true }).then(res => { console.log(res.data) clients = res.data.data