From a3407db07c26008c1e65cd605000217d383238c8 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Tue, 28 Jun 2022 12:12:47 -0300 Subject: [PATCH] add loading at telemetry charts --- src/components/graph/SingleBar.tsx | 2 +- src/pages/chartTelemetry.tsx | 178 ++++++++++-------- src/pages/news.tsx | 7 +- src/styles/Home.module.css | 103 ---------- .../ChatTelemetry/ChatTelemetryView.ts | 43 ++++- src/styles/layouts/news/NewsView.ts | 14 ++ 6 files changed, 158 insertions(+), 189 deletions(-) diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index da7c3f9..5875681 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -56,7 +56,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel offset: -40, align: "start", font: { - size: 10 + size: 12 } }, legend: { diff --git a/src/pages/chartTelemetry.tsx b/src/pages/chartTelemetry.tsx index a3fc940..b183829 100644 --- a/src/pages/chartTelemetry.tsx +++ b/src/pages/chartTelemetry.tsx @@ -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}) {
-
setOpenFatorPotencia(true)}> - value.hora)} /> -
- - - - - + { + demRegXDemCon==null? +
+ + + + + +
+ : + <> +
setOpenFatorPotencia(true)}> + +
+ + + + + -
setOpenConsumoDiscretizado1(true)}> - parseFloat(data.reativa).toFixed(3))} /> -
- - - data.reativa)} /> - - +
setOpenConsumoDiscretizado1(true)}> + parseFloat(data.reativa).toFixed(3))} /> +
+ + + data.reativa)} /> + + -
setOpenConsumoDiscretizado2(true)}> - value.minut)} dataset={'Consumo'} dataset1='Estimado' month/> -
- - - - - +
setOpenConsumoDiscretizado2(true)}> + value.minut)} dataset={'Consumo'} dataset1='Estimado' month/> +
+ + + value.minut)} dataset={'Consumo'} dataset1='Estimado' month/> + + -
setOpenDemandaContratada(true)}> - value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> -
- - - value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> - - -
+
setOpenDemandaContratada(true)}> + value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> +
+ + + value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/> + + + + } + ) } diff --git a/src/pages/news.tsx b/src/pages/news.tsx index b436af2..4882be4 100644 --- a/src/pages/news.tsx +++ b/src/pages/news.tsx @@ -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 <>
-

+

ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL

{ -

+

}

diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index fbaf78e..567de43 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -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; - } -} diff --git a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts index 15f757f..06d922b 100644 --- a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts +++ b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts @@ -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);} + } ` diff --git a/src/styles/layouts/news/NewsView.ts b/src/styles/layouts/news/NewsView.ts index 992fc0b..ce39590 100644 --- a/src/styles/layouts/news/NewsView.ts +++ b/src/styles/layouts/news/NewsView.ts @@ -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;