add loading at telemetry charts

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: {

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 [fatorPotenciaData, setFatorPotenciaData] = useState(null);
-  const [demRegXDemCon, setDemRegXDemCon] = useState([]);
+  const [demRegXDemCon, setDemRegXDemCon] = useState(null);
-  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
+  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
-  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
+  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)} />
+          demRegXDemCon==null?
-        </div>
+          <div id="preloader_1">
-        <Modal
+            <span></span>
-          open={openFatorPotencia}
+            <span></span>
-          onClose={handleCloseFatorPotencia}
+            <span></span>
-          aria-labelledby="modal-modal-title"
+            <span></span>
-          aria-describedby="modal-modal-description"
+            <span></span>
-        >
+          </div>
-          <Box sx={style}>
+          :
-          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
+          <>
-          </Box>
+            <div onClick={() => setOpenFatorPotencia(true)}>
-        </Modal>
+            <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)}>
+            <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))} />
+              <DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
-        </div>
+            </div>
-        <Modal
+            <Modal
-          open={openConsumoDiscretizado1}
+              open={openConsumoDiscretizado1}
-          onClose={handleCloseConsumoDiscretizado1}
+              onClose={handleCloseConsumoDiscretizado1}
-          aria-labelledby="modal-modal-title"
+              aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
+              aria-describedby="modal-modal-description"
-        >
+            >
-          <Box sx={style}>
+              <Box sx={style}>
-            <DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
+                <DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
-          </Box>
+              </Box>
-        </Modal>
+            </Modal>
 
-        <div onClick={() => setOpenConsumoDiscretizado2(true)}>
+            <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/>
+              <DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
-        </div>
+            </div>
-        <Modal
+            <Modal
-          open={openConsumoDiscretizado2}
+              open={openConsumoDiscretizado2}
-          onClose={handleCloseConsumoDiscretizado2}
+              onClose={handleCloseConsumoDiscretizado2}
-          aria-labelledby="modal-modal-title"
+              aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
+              aria-describedby="modal-modal-description"
-        >
+            >
-          <Box sx={style}>
+              <Box sx={style}>
-            <SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'}/>
+                <DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
-          </Box>
+              </Box>
-        </Modal>
+            </Modal>
 
-        <div onClick={() => setOpenDemandaContratada(true)}>
+            <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/>
+              <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>
-        <Modal
+            <Modal
-          open={openDemandaContratada}
+              open={openDemandaContratada}
-          onClose={handleCloseDemandaContratada}
+              onClose={handleCloseDemandaContratada}
-          aria-labelledby="modal-modal-title"
+              aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
+              aria-describedby="modal-modal-description"
-        >
+            >
-          <Box sx={style}>
+              <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/>
+                <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>
+              </Box>
-        </Modal>
+            </Modal>
-      </section>
+            </>
+        }
+        </section>
     </ChatTelemetryView>
   )
 }

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 <>
             <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>

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;
-  }
-}

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);}
+  }
 `

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;