119 lines
4.6 KiB
TypeScript
119 lines
4.6 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { ChatTelemetryView } from '../../styles/layouts/ChatTelemetry/ChatTelemetryView'
|
|
|
|
import Header from '../../components/header/Header'
|
|
import PageTitle from '../../components/pageTitle/PageTitle'
|
|
import Head from 'next/head'
|
|
|
|
import { GetServerSideProps } from 'next'
|
|
import { parseCookies } from 'nookies'
|
|
import getAPIClient from '../../services/ssrApi'
|
|
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'
|
|
|
|
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'
|
|
import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine'
|
|
import { useRouter } from 'next/router'
|
|
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'
|
|
import RenderIf from '../../utils/renderIf'
|
|
|
|
export default function chartTelemetry({userName}) {
|
|
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
|
|
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
|
|
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
|
|
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
|
|
|
|
const { ['user-cod_client']: cod_client } = parseCookies()
|
|
|
|
const router = useRouter()
|
|
|
|
const {startDate, endDate, unity, discretization} = router.query
|
|
|
|
function getChartsData() {
|
|
// getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
|
// .then(result => setFatorPotenciaData(result))
|
|
// .catch(exception => console.log('exeption', exception))
|
|
}
|
|
|
|
useEffect(() => {
|
|
getChartsData()
|
|
}, [])
|
|
|
|
return (
|
|
<ChatTelemetryView>
|
|
<Head>
|
|
<title>Smart Energia - Graficos Telemetria</title>
|
|
</Head>
|
|
<Header name={userName} />
|
|
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
|
|
<section className='chartContainer'>
|
|
{
|
|
demRegXDemCon===null?
|
|
<div id="preloader_1">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
:
|
|
<>
|
|
|
|
<RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
|
|
{/* <RenderIf isTrue={true}> */}
|
|
<div>
|
|
<DiscretizedConsumptionChart title={
|
|
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
|
|
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
|
|
} subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
|
|
<p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<DiscretizedConsumptionChartLine title={
|
|
discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
|
|
discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
|
|
} subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
|
|
label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
|
|
</div>
|
|
</RenderIf>
|
|
|
|
<div>
|
|
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
|
|
dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
|
|
label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
|
|
</div>
|
|
|
|
<div>
|
|
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
|
|
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => parseFloat(value.dia_num))} />
|
|
</div>
|
|
</>
|
|
}
|
|
</section>
|
|
</ChatTelemetryView>
|
|
)
|
|
}
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
const apiClient = getAPIClient(ctx)
|
|
|
|
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
|
const { ['user-name']: userName } = parseCookies(ctx)
|
|
const { ['user-cod_client']: cod_client } = parseCookies(ctx)
|
|
|
|
if (!token) {
|
|
return {
|
|
redirect: {
|
|
destination: '/',
|
|
permanent: false
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
props: {
|
|
userName,
|
|
}
|
|
}
|
|
}
|