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

add loading at telemetry charts

Browse Source
This commit is contained in:
joseCorte-exe 2022-06-28 12:12:47 -03:00
parent 631cf7940e
commit a3407db07c
6 changed files with 158 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/graph/SingleBar.tsx
View File

@ -56,7 +56,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
offset: -40,
align: "start",
font: {
size: 10
size: 12
}
},
legend: {

178
src/pages/chartTelemetry.tsx
View File

@ -53,10 +53,10 @@ export default function chartTelemetry({userName}) {
const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
const [demRegXDemCon, setDemRegXDemCon] = useState(null);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState(null);
const { ['user-cod_client']: cod_client } = parseCookies()
@ -77,29 +77,6 @@ export default function chartTelemetry({userName}) {
console.log(res)
})
await api.post('/telemetry/demand', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/discretization', {
"type": "5_min",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDiscretizedConsumptionData(res.data.data)
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/discretization', {
"type": "5_min",
"filters": [
@ -111,10 +88,36 @@ export default function chartTelemetry({userName}) {
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/discretization', {
"type": "5_min",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDiscretizedConsumptionData(res.data.data)
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/demand', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
console.log(res)
})
}
useEffect(() => {
getChartsData()
console.log(fatorPotenciaData)
}, [])
return (
@ -125,62 +128,77 @@ export default function chartTelemetry({userName}) {
<Header name={userName} />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'>
<div onClick={() => setOpenFatorPotencia(true)}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => value.hora)} />
</div>
<Modal
open={openFatorPotencia}
onClose={handleCloseFatorPotencia}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
</Box>
</Modal>
{
demRegXDemCon==null?
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
:
<>
<div onClick={() => setOpenFatorPotencia(true)}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
</div>
<Modal
open={openFatorPotencia}
onClose={handleCloseFatorPotencia}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
</div>
<Modal
open={openConsumoDiscretizado1}
onClose={handleCloseConsumoDiscretizado1}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
</div>
<Modal
open={openConsumoDiscretizado1}
onClose={handleCloseConsumoDiscretizado1}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
<DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</div>
<Modal
open={openConsumoDiscretizado2}
onClose={handleCloseConsumoDiscretizado2}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'}/>
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
<DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</div>
<Modal
open={openConsumoDiscretizado2}
onClose={handleCloseConsumoDiscretizado2}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</Box>
</Modal>
<div onClick={() => setOpenDemandaContratada(true)}>
<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>
<Modal
open={openDemandaContratada}
onClose={handleCloseDemandaContratada}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<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/>
</Box>
</Modal>
</section>
<div onClick={() => setOpenDemandaContratada(true)}>
<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>
<Modal
open={openDemandaContratada}
onClose={handleCloseDemandaContratada}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<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/>
</Box>
</Modal>
</>
}
</section>
</ChatTelemetryView>
)
}

7
src/pages/news.tsx
View File

@ -2,6 +2,7 @@ import axios from 'axios';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Link from 'next/link'
import { Router } from 'next/router';
import { parseCookies } from 'nookies';
import React from 'react'
@ -27,17 +28,17 @@ export default function aboutUs({userName, news}: any) {
return <>
<section>
<h2 dangerouslySetInnerHTML={{__html: data.pubDate}} />
<h2 dangerouslySetInnerHTML={{__html: data.pubDate.slice(0, -5)}} />
<strong dangerouslySetInnerHTML={{__html: data.title}} />
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
<br />
<br />
{
<p dangerouslySetInnerHTML={{__html: data.description}} />
<p dangerouslySetInnerHTML={{__html: data.description}} className='description'/>
}
<Button>
<fieldset>
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
<legend> <BasicButton title='Ver Mais...' onClick={() => window.open(data.guid)}/></legend>
</fieldset>
</Button>
</section>

103
src/styles/Home.module.css
View File

@ -19,106 +19,3 @@
align-items: center;
font-family: 'Poppins';
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

43
src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
View File

@ -2,14 +2,14 @@ import styled from "styled-components";
export const ChatTelemetryView = styled.main`
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
flex-direction: column;
width: 100%;
padding-top: 0px!important;
padding-top: 40px!important;
.chartContainer {
display: flex;
@ -18,4 +18,43 @@ export const ChatTelemetryView = styled.main`
width: 100%;
}
#preloader_1{
position:absolute;
top: 50%;
left: 50%;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#9b59b6;
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;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
25% {height:30px;transform:translateY(15px);background:#254F7F;}
50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
}
`

14
src/styles/layouts/news/NewsView.ts
View File

@ -5,6 +5,20 @@ export const NewsView = styled.main`
margin-bottom: 100px;
.description {
a {
display: none;
}
p {
:last-child {
display: none;
}
}
.read-more {
display: none;
}
}
p {
font-family: 'Poppins';
font-style: normal;