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

Merge branch 'telemetry' into 'dev'

Browse Source 
fixing telemtry charts and pointeds issues

See merge request kluppsoftware/smart-energia-web!112
This commit is contained in:
José Corte 2022-07-19 19:43:56 +00:00
commit d8c7d1784d
20 changed files with 606 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/graph/ChartView.ts
View File

@ -1,7 +1,7 @@
import styled from "styled-components"
export const ChartView = styled.div`
width: 90%;
min-width: 90%;
div{
/* margin-top: 10px; */

16
src/components/graph/DemRegXDemConChart.tsx
View File

@ -84,12 +84,22 @@ export function DemRegXDemConChart({
}: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const currentTime = new Date();
const labels = label
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
@ -144,7 +154,7 @@ export function DemRegXDemConChart({
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle}/>
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>

97
src/components/graph/DiscretizedConsumptionChart.tsx
View File

@ -2,7 +2,8 @@ import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw, generate } from 'patternomaly'
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Bar, Chart } from 'react-chartjs-2';
// import Chart from './Chart';
import ChartTitle from './ChartTitle';
import { ChartView } from './ChartView';
@ -30,82 +31,76 @@ interface SingleBarInterface{
}
export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) {
const currentTime = new Date();
const options: object = {
const labels = label
const options: any = {
responsive: true,
series: {
downsample: {
threshold: 1000
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${parseInt(value).toFixed(0)}\n ${percentage}`
return value==null? null : result
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
anchor: "end",
offset: -40,
align: "start",
font: {
size: 10
}
display: false,
},
legend: {
position: 'bottom' as const,
},
title: {
display: false,
display: true,
text: '',
},
},
};
const labels = label;
const data: any = {
labels,
labels: dataProps.map(value => value.day_formatted),
datasets: [
{
label: dataset,
type: 'line' as const,
label: 'reativa',
borderColor: '#F00' ,
fill: false,
borderDash: [5, 5],
backgroundColor: 'rgba(255, 145, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
data: dataProps.map(value => value.reativa),
},
{
type: 'bar' as const,
label: 'consumo',
backgroundColor: '#74acec',
data: dataProps.map(value => value.consumo),
backgroundColor: '#255488'
},
{
type: 'line' as const,
label: 'base',
data: dataProps.map(value => 500),
borderColor: 'rgb(0, 0, 0)',
fill: false,
backgroundColor: 'rgb(0, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
{
type: 'line' as const,
label: 'tolerância',
data: dataProps.map(value => 525),
borderColor: 'rgb(255, 0, 0)',
fill: false,
backgroundColor: 'rgb(255, 0, 0)' ,
pointBorderColor: 'rgba(255, 145, 0, 0)',
},
// {
// type: 'line' as const,
// label: 'Livre',
// // backgroundColor: '#255488',
// backgroundColor: (value, ctx) => {
// return '#255488'
// },
// data: dataProps.map(value => {
// return parseInt(value.custo_livre)
// }),
// },
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div>
<Chart type='bar' options={options} data={data} />
</div>
</ChartView>
)
}

14
src/components/graph/fatorPotenciaChart.tsx
View File

@ -46,6 +46,18 @@ interface ChartInterface {
export default function FatorPotenciaChart({ title, subtitle, data1, data2, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
@ -93,7 +105,7 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
{/* <ChartTitle title={title} subtitle={subtitle} /> */}
<Line options={options} data={data} />
</ChartView>
)

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

@ -50,8 +50,6 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
return spaces
}
const labels = label;
const options: any = {
responsive: true,
scales: {
@ -104,7 +102,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
datasets: [
{
type: 'bar',
label: 'Acumulado',
label: 'Consolidado',
data: data1.map(value => value?.economia_acumulada),
backgroundColor: '#255488'
},

6
src/components/sidebar/Sidebar.tsx
View File

@ -129,12 +129,12 @@ export default function Sidebar() {
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria'}</li></Link>
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias'}</li></Link>
<li onClick={() => setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li>
<div className='pldDrawer drawer'>
<Link href='/pld'><li onClick={() => setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
{/* <div className='pldDrawer drawer'>
<Link href='/pld'><li onClick={() => setPldMenu(0)} className={pldMenu==0? 'actualPathDrawer' : null}>PLD Histórico</li></Link>
<Link href='/pld'><li onClick={() => setPldMenu(1)} className={pldMenu===1? 'actualPathDrawer' : null}>Valores Diários</li></Link>
<Link href='/pld'><li onClick={() => setPldMenu(2)} className={pldMenu===2? 'actualPathDrawer' : null}>Valores Horários</li></Link>
</div>
</div> */}
<Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
{/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>

7
src/pages/aboutUs/index.tsx
View File

@ -5,6 +5,7 @@ import { parseCookies } from 'nookies'
import React from 'react'
import Banner from '../../components/banner/Banner'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
import getAPIClient from '../../services/ssrApi'
import { AboutUsView } from '../../styles/layouts/aboutUs/AboutUsView'
@ -15,8 +16,10 @@ export default function aboutUs({userName, text}) {
<title>Smart Energia - Sobre nós</title>
</Head>
<Header name={userName}/>
<Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
<Header name={userName}>
<PageTitle title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia'/>
</Header>
{/* <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' /> */}
<section dangerouslySetInnerHTML={{__html: text[0]?.about}}/>
<article>

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

@ -35,9 +35,9 @@ export default function chartTelemetry({userName}) {
function getChartsData() {
console.log(token)
getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setFatorPotenciaData(result))
.catch(exception => console.log('exeption', exception))
// getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setFatorPotenciaData(result))
// .catch(exception => console.log('exeption', exception))
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionDataReativa(result))

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

@ -93,13 +93,13 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</Head>
<div id='title'/>
<Header name={userName}>
<PageTitle title='Economia' subtitle='Graficos de economia'/>
<PageTitle title='Economia' subtitle='Gráficos de economia'/>
</Header>
<TableHeader>
<Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
<Tab label="Bruta Anual"/>
<Tab label="Bruta Mensal"/>
<Tab label="Acumulada Anual"/>
<Tab label="Acumulada Mensal"/>
<Tab label="Cativo x Livre Mensal"/>
<Tab label="Custo R$/MWh"/>
</Tabs>
@ -125,6 +125,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</RenderIf>
<RenderIf isTrue={economyMenu===2}>
<div style={{paddingLeft: '7%'}}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
@ -144,6 +145,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
}
</Select>
</FormControl>
</div>
<section>
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
@ -152,6 +154,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
</RenderIf>
<RenderIf isTrue={economyMenu===3}>
<div style={{paddingLeft: '7%'}}>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
@ -171,6 +174,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
}
</Select>
</FormControl>
</div>
<section>
<CostIndicatorChart title='' subtitle=''
data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))

4
src/pages/faq/index.tsx
View File

@ -10,7 +10,6 @@ import { api } from '../../services/api'
import getAPIClient from '../../services/ssrApi'
import { FaqView } from '../../styles/layouts/commonQuestions/FaqView'
export default function commonQuestions({faqData, userName}) {
return (
<FaqView>
@ -18,8 +17,9 @@ export default function commonQuestions({faqData, userName}) {
<title>Smart Energia - FAQ</title>
</Head>
<Header name={userName}>
<PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!'/>
</Header>
<Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/>
{/* <Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/> */}
<section className='CommonQuestionsSection' >
{
faqData.length<1?

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

@ -59,8 +59,9 @@ export default function industryInfo({userName}: any) {
<title>Smart Energia - Info de Setor</title>
</Head>
<Header name={userName}>
<PageTitle title='Info setorial' subtitle='Baixe o pdf para ver o info setorial'/>
</Header>
<Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/>
{/* <Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/> */}
<p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
<button onClick={() => handleDownloadPdf()}>Clique aqui para baixar o arquivo em PDF</button>

9
src/pages/news/index.tsx
View File

@ -8,6 +8,7 @@ import React from 'react'
import Banner from '../../components/banner/Banner'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle';
import getAPIClient from '../../services/ssrApi';
import { Button, NewsView } from '../../styles/layouts/news/NewsView'
@ -17,11 +18,13 @@ export default function aboutUs({userName, news}: any) {
<Head>
<title>Smart Energia - Noticias</title>
</Head>
<Header name={userName} />
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/newsBanner.webp'/>
<Header name={userName}>
<PageTitle title='Notícias' subtitle='Tudo de importante no setor de energia'/>
</Header>
{/* <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/newsBanner.webp'/> */}
{
news.map(data => {
news.slice(0, 3).map(data => {
return <>
<section>

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

@ -17,8 +17,9 @@ export default function Notifications({notificationData, userName}: any) {
<title>Smart Energia - Notificações</title>
</Head>
<Header name={userName}>
<PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!'/>
</Header>
<Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/>
{/* <Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/> */}
<section className='CommonQuestionsSection' >
{
notificationData.length!=0?

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

@ -153,7 +153,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
})
}
function handleColorNorte(value, region) {
function handleColor(value, region) {
if (value <= tableData.result[1].norte_min)
return ''
else if (value >= tableData.result[0][`${region}_max`])
@ -373,9 +373,8 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<RenderIf isTrue={pldMenu===1}>
<PldGraphView>
<section className='toolsbar'>
<div className='select'>
<FormControl sx={{
width: '100%'
width: '320px'
}}>
<InputLabel id="demo-simple-select-label">Região</InputLabel>
<Select
@ -383,9 +382,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
onChange={handleChange}
displayEmpty
label='Região'
sx={{
width: '100%'
}}
>
<MenuItem value={'NORTE'}>Norte</MenuItem>
<MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
@ -393,9 +389,8 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
<MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
</Select>
</FormControl>
</div>
<FormControl sx={{
width: '22%',
width: '320px',
ml: 1
}}>
<InputLabel id="demo-simple-select-label">Mês</InputLabel>

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

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import Banner from '../../components/banner/Banner';
import { TelemetriaView, Buttons, TableHeader} from '../../styles/layouts/Telemetria/TelemetriaView';
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';
@ -31,6 +31,10 @@ import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine';
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
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';
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
@ -49,6 +53,8 @@ export default function Telemetria({userName, clients}: any) {
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const [openSnackFields, setOpenSnackFields] = useState<boolean>(false)
const currentDate = new Date().toLocaleDateString().split('/').reverse().join('-')
const handleCloseSnack = (
event?: React.SyntheticEvent | Event,
reason?: string
@ -106,8 +112,6 @@ export default function Telemetria({userName, clients}: any) {
const [open, setOpen] = useState(false);
// const [demRegXDemCon, setDemRegXDemCon] = useState(null);
const handleChangeStartDate = (newValue: Date | null) => {
console.log(newValue)
setStartDate(newValue)
@ -123,8 +127,8 @@ export default function Telemetria({userName, clients}: any) {
await api.post('/telemetry/powerFactor', {
"type": discretization,
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [currentDate, currentDate]}
]
}).then(res => {
setTableData(res.data.data)
@ -132,8 +136,8 @@ export default function Telemetria({userName, clients}: any) {
setOpenSnackSuccess(true)
setOpen(false)
}).catch(res => {
setException(true)
setSend(false)
setException(true)
setOpenSnackError(true)
setOpenSnackSuccess(false)
})
@ -171,33 +175,11 @@ export default function Telemetria({userName, clients}: any) {
})
}
const [filters, setFilters] = useState()
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
function getChartsData() {
// console.log(token)
// getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setFatorPotenciaData(result))
// .catch(exception => console.log('exeption', exception))
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionDataReativa(result))
// .catch(exception => console.log(exception))
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionData(result))
// .catch(exception => console.log(exception))
// getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDemRegXDemCon(result))
// .catch(exception => console.log(exception))
// setFatorPotenciaData(res.data.data)
// setDiscretizedConsumptionDataReativa(res.data.data)
// setDiscretizedConsumptionData(res.data.data)
// setDemRegXDemCon(res.data.data)
}
useEffect(() => {
setSend(false)
@ -208,6 +190,12 @@ export default function Telemetria({userName, clients}: any) {
getChartData()
}, [send])
useEffect(() => {
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionData(result))
// .catch(exception => console.log(exception))
}, [discretization])
return(
<TelemetriaView>
<Head>
@ -254,17 +242,33 @@ export default function Telemetria({userName, clients}: any) {
</Alert>
</Snackbar>
<Header name={userName} />
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
<Header name={userName}>
<PageTitle title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia'/>
</Header>
{/* <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,
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
- Distribuidora.' imgSource='/assets/graphical.png' />
- Distribuidora.' imgSource='/assets/graphical.png' /> */}
<section>
<div className='select'>
<p className='title' >Unidade</p>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<RenderIf isTrue={true}>
<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 Potencia"/>
<Tab label="Mês Atual"/>
</Tabs>
</TableHeader>
<RenderIf isTrue={menu===0}>
<ChartFilters>
<div className='input'>
<FormControl style={{ minWidth: 100, width: 200}} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
@ -286,16 +290,14 @@ export default function Telemetria({userName, clients}: any) {
</Select>
</FormControl>
</div>
<div className='select'>
<p className='title' >Discretização</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Discretização</InputLabel>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Unidade"
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
@ -311,10 +313,8 @@ export default function Telemetria({userName, clients}: any) {
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='select datePicker'>
<p className='title' >Data inicial</p>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
@ -323,8 +323,7 @@ export default function Telemetria({userName, clients}: any) {
renderInput={(params) => <TextField {...params}/>}
/>
</div>
<div className='select datePicker' style={{marginRight: 10}}>
<p className='title' >Data final</p>
<div className='datePicker' style={{marginRight: 10}}>
<DesktopDatePicker
label="Data final"
inputFormat="dd/MM/yyyy"
@ -344,63 +343,269 @@ export default function Telemetria({userName, clients}: any) {
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
setSend(true)
getTableData()
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</section>
<RenderIf isTrue={!!unity && !!discretization}>
<TableHeader>
<Tabs value={menu} onChange={(e, nv) => setMenu(nv)} aria-label="">
<Tab label="Discretização em 1 hora"/>
<Tab label="Discretização em 1 minuto"/>
<Tab label="Demanda"/>
<Tab label="Fator Potencia"/>
</Tabs>
</TableHeader>
<RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
{/* <RenderIf isTrue={true}> */}
<RenderIf isTrue={menu===0}>
<div>
</div>
</ChartFilters>
{/* <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}> */}
<DiscretizedConsumptionChart title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
<p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p>
</div>
{/* <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p> */}
{/* </RenderIf> */}
</RenderIf>
<RenderIf isTrue={menu===1}>
<div>
<DiscretizedConsumptionChartLine title={
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
} subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
</RenderIf>
</RenderIf>
<RenderIf isTrue={menu===2}>
<div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div>
<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)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</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/>
</RenderIf>
<RenderIf isTrue={menu===2}>
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className='datePicker'>
<DesktopDatePicker
label="Data inicial"
inputFormat="dd/MM/yyyy"
value={startDate}
onChange={handleChangeStartDate}
renderInput={(params) => <TextField {...params}/>}
/>
</div>
<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)
:
discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
:
discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
:
discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
:
new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
}
onChange={(newValue: any) => handleChangeEndDate(newValue)}
renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
/>
</div>
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</div>
</ChartFilters>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
</RenderIf>
<RenderIf isTrue={menu===3}>
<div>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
<ChartFilters>
<div className='input'>
<FormControl sx={{ minWidth: 100, width: 200 }} size="small">
<InputLabel>Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {
return <MenuItem key={1} value={value.codigo_scde}>{value.unidade}</MenuItem>
})
}
</Select>
</FormControl>
</div>
<div className='input'>
<FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
<InputLabel>Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Discretização"
onChange={value => setDiscretization(value.target.value)}
sx={{height: 63, mb: 0.5}}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="5_min">5 minutos</MenuItem>
<MenuItem value="15_min">15 minutos</MenuItem>
<MenuItem value="1_hora">1 hora</MenuItem>
<MenuItem value="1_dia">1 dia</MenuItem>
<MenuItem value="1_mes">1 mês</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
}}/>
</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/>
</RenderIf>
</RenderIf>
<RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
<div className='modal'>
<div id="preloader_1">
@ -451,12 +656,19 @@ export default function Telemetria({userName, clients}: any) {
<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/>
</RenderIf>
<Buttons>
<GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple />
<GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange />
{/* <GradientButton title='DADOS' description='CLIQUE AQUI PARA GERAR GRÁFICO DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} purple /> */}
{/* <GradientButton title='GRÁFICO' description='CLIQUE AQUI PARA GERAR GRÁFICO DO PERÍODO SELECIONADO' onClick={() => handleVerifyFields()} orange /> */}
<GradientButton title='DOWNLOADS' description={`CLIQUE AQUI PARA BAIXAR OS DADOS EM FORMATO EXCEL DO PERÍODO SELECIONADO`} green onClick={() => {
if (send) {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "telemetria.csv");
}
else {
setSend(true)
getTableData()
}
}}/>
</Buttons>
<p className='paragraph'>

15
src/services/charts/telemetry/getDemand.ts
View File

@ -1,22 +1,19 @@
import axios from "axios"
import { parseCookies } from "nookies"
import { api } from "../../api"
export async function getDemand(
unity: string,
startDate: string,
endDate: string,
startDate: Date,
endDate: Date,
discretization: string
) {
const { '@smartAuth-token': token } = parseCookies()
const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
const { data } = await api.post('https://smart-energia-api.herokuapp.com/api/telemetry/demand', {
"filters": [
{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
{"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
{"type" : "=", "field": `med_5min.ponto`, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
]
}, {
headers: {
'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
}
})
return data.data

22
src/services/charts/telemetry/getDiscretization.ts
View File

@ -1,22 +1,26 @@
import axios from "axios"
import { parseCookies } from "nookies"
import { api } from "../../api"
const { '@smartAuth-token': token } = parseCookies()
export async function getDiscretization(
unity: string,
startDate: string,
endDate: string,
startDate: Date,
endDate: Date,
discretization: string
) {
const { '@smartAuth-token': token } = parseCookies()
const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/discretization', {
console.log(new Date(startDate).toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString())
const { data } = await api.post('/telemetry/discretization', {
"type": discretization,
// "type": "1_hora",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity}
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
]
}, {
headers: {
'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
}
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
// ]
}
)

17
src/services/charts/telemetry/getPowerFactor.ts
View File

@ -1,23 +1,18 @@
import axios from "axios"
import { parseCookies } from "nookies"
import { api } from "../../api"
export async function getPowerFactorData(
unity: string,
startDate: string,
endDate: string,
startDate: Date,
endDate: Date,
discretization: string
) {
const { '@smartAuth-token': token } = parseCookies()
console.log(token.replace(/"/g, ''))
const { data } = await axios.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
const { data } = await api.post('http://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
{"type" : "=", "field": "med_5min.ponto", "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate.toLocaleDateString().split('/').reverse().join('-'), endDate.toLocaleDateString().split('/').reverse().join('-')]}
]
}, {
headers: {
'Authorization': `Bearer 1292|E4jbc5ZWmgCCBMOVn4PvPx56MUbf4nUg5MNgxjmP`
}
})
return data.data
}

36
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -1,6 +1,12 @@
import styled from 'styled-components';
export const TelemetriaView = styled.main`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
width: 100%;
@ -18,7 +24,7 @@ export const TelemetriaView = styled.main`
left: 0;
width: 100%;
height: 100%;
height: 100vh;
z-index: 999;
}
@ -37,11 +43,9 @@ export const TelemetriaView = styled.main`
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
@ -172,6 +176,8 @@ export const TelemetriaView = styled.main`
input {
width: 15rem;
height: 10px!important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
@ -181,6 +187,12 @@ export const TelemetriaView = styled.main`
background-color: #F9F9F9;
}
.input {
.MuiInputLabel-root, .MuiInputLabel-formControl {
margin-top: 11px;
}
}
span {
font-family: 'Inter';
font-style: normal;
@ -216,7 +228,7 @@ export const TelemetriaView = styled.main`
justify-content: center;
flex-direction: column;
height: 10em;
/* height: 10em; */
:nth-child(1) {
label {
@ -362,7 +374,7 @@ export const Uploads = styled.div`
padding-right: 100px;
`;
export const TableHeader = styled.label`
export const TableHeader = styled.div`
width: 100%;
display: flex;
@ -373,3 +385,17 @@ export const TableHeader = styled.label`
padding: 0 40px 0 40px
`
export const ChartFilters = styled.section`
display: flex;
align-items: center;
justify-content: center!important;
align-self: flex-start;
width: 100%;
margin-top: 20px;
/* margin-left: 108px; */
`

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

@ -444,13 +444,11 @@ export const PldGraphView = styled.main`
justify-content: center;
align-items: flex-start!important;
align-self: flex-start;
flex-direction: row;
padding-bottom: 13px;
p {
margin: 0;
}
flex-wrap: nowrap;
}
.toolsbar2 {
display: flex;
@ -459,7 +457,7 @@ export const PldGraphView = styled.main`
flex-direction: column;
margin-bottom: 9px;
/* margin-bottom: 9px; */
/* transform: translateY(-8px); */