Merge branch 'fix/chartsFixs' into 'dev'

more fixes

See merge request kluppsoftware/smart-energia-web!105

src/components/sidebar/Sidebar.tsx

@@ -12,18 +12,21 @@ import { AuthContext } from '../../contexts/AuthContext';
 import { api } from '../../services/api';
 
 import RenderIf from '../../utils/renderIf';
-import { SidebarView } from './SidebarView'
+import { ModalContainer, SidebarView } from './SidebarView'
 
 const style = {
   position: 'absolute' as const,
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  width: 400,
+  height: 500,
+  width: 680,
   bgcolor: 'background.paper',
   border: '2px solid #000',
   boxShadow: 24,
   p: 4,
+
+  borderRadius: 1
 };
 
 export default function Sidebar() {
@@ -126,13 +129,18 @@ export default function Sidebar() {
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
             >
-            <Box sx={style}>
+              <Box sx={style}>
-              <Typography id="modal-modal-title" variant="h6" component="h2">
+                <ModalContainer>
-                Deseja realmente sair ?
+                  <Image src='/assets/marca1.png' width={250} height={200}/>
-              </Typography>
+                  <Typography id="modal-modal-title" variant="h6" component="h2">
-              <Link href='/'><Button variant="contained" onClick={() => signOut()} sx={{mt:5}}>Sim</Button></Link>
+                    Deseja realmente sair ?
-              <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
+                  </Typography>
-            </Box>
+                  <article>
+                    <Link href='/'><button onClick={() => signOut()}>Sair</button></Link>
+                    <button onClick={handleClose} color="error">Voltar</button>
+                  </article>
+                </ModalContainer>
+              </Box>
           </Modal>
           </ul>
           <aside>

src/components/sidebar/SidebarView.ts

@@ -236,3 +236,44 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     }
   }
 `
+
+export const ModalContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+
+  article {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    width: 50%;
+
+    margin-top: 4em;
+    button {
+      width: 10em;
+      height: 4em;
+
+      cursor: pointer;
+
+      background: #254F7F;
+      border-radius: 8px;
+      border-style: none;
+
+      font-family: 'Poppins';
+      font-size: 90%;
+
+      transition: all 350ms ease-in;
+
+      :hover {
+        transform: scale(1.02);
+        opacity: 0.9;
+        box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
+      }
+
+      color: #FFFFFF;
+    }
+  }
+`

src/contexts/AuthContext.tsx

@@ -40,7 +40,7 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
   }
 
   async function signIn({email, password}: SignInData) {
-    await signOut()
+    signOut()
 
     const { token, user, exception }: any = await signInRequest({
       email,

src/pages/chartTelemetry/index.tsx

@@ -1,45 +1,23 @@
 import React, { useEffect, useState } from 'react'
-import { SingleBar } from '../../components/graph/SingleBar'
 import { ChatTelemetryView } from '../../styles/layouts/ChatTelemetry/ChatTelemetryView'
-// import router, { useRouter } from 'next/router'
 
-import { FatorPotencia } from '../../services/fatorPotencia'
-import { ConsumoDecretizadoBar } from '../../services/consumoDiscretizadoBar'
-import { ConsumoDecretizadoLine } from '../../services/consumoDiscretizadoLine'
-import LineChart from '../../components/graph/LineChart'
-import { LineBarChart } from '../../components/graph/LineBarChart'
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle'
 import Head from 'next/head'
 
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import Modal from '@mui/material/Modal';
 import { GetServerSideProps } from 'next'
 import { parseCookies } from 'nookies'
 import getAPIClient from '../../services/ssrApi'
-import { api } from '../../services/api'
 import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'
-// import { DemRegXDemConChart } from '../components/graph/demRegXDemConChart'
+
 import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'
 import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine'
-import router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'
 import RenderIf from '../../utils/renderIf'
-
+import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor'
-const style = {
+import { getDemand } from '../../services/charts/telemetry/getDemand'
-  display: 'flex',
+import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'
-  alignItems: 'center',
-  justifyContent: 'center',
-  position: 'absolute' as const,
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '80%',
-  bgcolor: 'white',
-  p: 5,
-};
 
 export default function chartTelemetry({userName}) {
   const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
@@ -53,109 +31,30 @@ export default function chartTelemetry({userName}) {
 
   const {startDate, endDate, unity, discretization} = router.query
 
-  // async function getChartsData() {
+  const { '@smartAuth-token': token } = parseCookies()
-  //   await api.post('/telemetry/powerFactor', {
-  //     "filters": [
-  //       {"type" : "=", "field": "med_5min.ponto", "value": unity},
-  //       {"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]}
-  //     ]
-  // }).then(res => {
-  //     console.log(res.data.data)
-  //     setFatorPotenciaData(res.data.data)
-  //   }).catch(res => {
-  //     // console.log(res)
-  //     router.push('/telemetria')
-  //   })
 
-  //   await api.post('/telemetry/discretization', {
+  function getChartsData() {
-  //     "type": discretization? discretization : "5_min",
+    console.log(token)
-  //     "filters": [
+    getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-  //         {"type" : "=", "field": "med_5min.ponto", "value": unity},
+      .then(result => setFatorPotenciaData(result))
-  //         {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
+      .catch(exception => console.log(exception))
-  //       ]
-  //   }).then(res => {
-  //     setDiscretizedConsumptionDataReativa(res.data.data)
-  //   }).catch(res => {
-  //     // console.log(res)
-  //     router.push('/telemetria')
-  //   })
 
-  // await api.post('/telemetry/discretization', {
+    getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-  //   "type": discretization? discretization : "5_min",
+      .then(result => setDiscretizedConsumptionDataReativa(result))
-  //   "filters": [
+      .catch(exception => console.log(exception))
-  //       {"type" : "=", "field": "med_5min.ponto", "value": unity},
-  //       {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
-  //     ]
-  //   }).then(res => {
-  //     setDiscretizedConsumptionData(res.data.data)
-  //   }).catch(res => {
-  //     // console.log(res)
-  //     router.push('/telemetria')
-  //   })
 
-  // await api.post('/telemetry/demand', {
+    getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-  //   "filters": [
+      .then(result => setDiscretizedConsumptionData(result))
-  //     {"type" : "=", "field": "med_5min.ponto", "value": unity},
+      .catch(exception => console.log(exception))
-  //     {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
-  //   ]
-  //   }).then(res => {
-  //     setDemRegXDemCon(res.data.data)
-  //   }).catch(res => {
-  //     // console.log(res)
-  //     router.push('/telemetria')
-  //   })
-  // }
-  async function getChartsData() {
-    await api.post('/telemetry/powerFactor', {
-      "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
-        {"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
-      ]
-  }).then(res => {
-        console.log(res.data.data)
-        setFatorPotenciaData(res.data.data)
-      }).catch(res => {
-        console.log(res)
-        // router.push('/telemetria')
-      })
 
-    await api.post('/telemetry/discretization', {
+    getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-      "type": "1_mes",
+      .then(result => setDemRegXDemCon(result))
-      "filters": [
+      .catch(exception => console.log(exception))
-          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
-        ]
-    }
-    ).then(res => {
-        setDiscretizedConsumptionDataReativa(res.data.data)
-      }).catch(res => {
-        console.log(res)
-        // router.push('/telemetria')
-      })
 
-    await api.post('/telemetry/discretization', {
+    // setFatorPotenciaData(res.data.data)
-      "type": "1_mes",
+    // setDiscretizedConsumptionDataReativa(res.data.data)
-      "filters": [
+    // setDiscretizedConsumptionData(res.data.data)
-          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
+    // setDemRegXDemCon(res.data.data)
-        ]
-    }
-    ).then(res => {
-        setDiscretizedConsumptionData(res.data.data)
-      }).catch(res => {
-        console.log(res)
-        // router.push('/telemetria')
-      })
-
-    await api.post('/telemetry/demand', {
-      "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
-        {"type" : "between", "field": ["dia_num"], "value": ["2022-01-03", "2022-01-03"]}
-      ]
-    }).then(res => {
-        setDemRegXDemCon(res.data.data)
-      }).catch(res => {
-        console.log(res)
-        // router.push('/telemetria')
-      })
   }
 
   useEffect(() => {

src/pages/estimatedCost/index.tsx

@@ -49,7 +49,7 @@ export default function EstimatedCost({graphData, userName, clients}: any) {
       <section>
         <CativoXLivreChart chartData={graphData}
         dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
-        label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado />
+        label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
       </section>
     </EstimatedCostView>
   )

src/pages/resumoOperacao/index.tsx

@@ -100,41 +100,49 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
         <article>
           <h3>Filtrar por Unidade e/ou Mês</h3>
           <div className='select'>
-            <FormControl fullWidth>
+            <div>
-              <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
+              <p>Selecionar unidade:</p>
-              <Select
+              <FormControl fullWidth>
-                labelId="demo-simple-select-label"
+                <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
-                id="demo-simple-select"
+                <Select
-                value={unidade}
+                  labelId="demo-simple-select-label"
-                label="Unidade"
+                  id="demo-simple-select"
-                onChange={handleChangeUnidade}
+                  value={unidade}
-              >
+                  label="Unidade"
-                <MenuItem key={1} value={''}>Todas</MenuItem>
+                  onChange={handleChangeUnidade}
-                {
+                  fullWidth
-                  clientsData.map((value) => {
+                >
-                    return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
+                  <MenuItem key={1} value={''}>Todas</MenuItem>
-                  })
+                  {
-                }
+                    clientsData.map((value) => {
-              </Select>
+                      return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
-            </FormControl>
+                    })
+                  }
+                </Select>
+              </FormControl>
+            </div>
 
-            <FormControl fullWidth sx={{ml: 2}}>
+            <div>
-              <InputLabel id="demo-simple-select-label">Mês</InputLabel>
+              <p>Selecionar mês:</p>
-              <Select
+              <FormControl fullWidth>
-                labelId="demo-simple-select-label"
+                <InputLabel id="demo-simple-select-label">Mês</InputLabel>
-                id="demo-simple-select"
+                <Select
-                value={month}
+                  labelId="demo-simple-select-label"
-                label="Month"
+                  id="demo-simple-select"
-                onChange={handleChangeMonth}
+                  value={month}
-              >
+                  label="Month"
-                <MenuItem value={''}>Todos</MenuItem>
+                  onChange={handleChangeMonth}
-                {
+                  fullWidth
-                  clientMonth.map((value) => {
+                >
-                    return <MenuItem key={1} value={value.mes}>{value.mes}</MenuItem>
+                  <MenuItem value={''}>Todos</MenuItem>
-                  })
+                  {
-                }
+                    clientMonth.map((value) => {
-              </Select>
+                      return <MenuItem key={1} value={value.mes}>{value.mes}</MenuItem>
-            </FormControl>
+                    })
+                  }
+                </Select>
+              </FormControl>
+            </div>
           </div>
         </article>
         <article>
@@ -198,18 +206,24 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     // console.log(res)
   })
 
-  await apiClient.post('/operation', {
+  await apiClient.post('/units', {
-    "filters": [],
+		"filters": [
-    "fields": ["cod_smart_unidade"],
+      {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
-    "distinct": true
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+		],
+		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"distinct": true
   }).then(res => {
+    console.log(res.data.data)
     clientsData = res.data.data
   }).catch(res => {
-    // console.log(res)
+    console.log(res)
   })
 
   await apiClient.post('/operation', {
-    "filters": [],
+    "filters": [
+      {"type" : ">=", "field":"dados_te.mes", "value":1, "interval": "year"}
+    ],
     "fields": ["mes"],
     "distinct": true
   }).then(res => {

src/services/charts/telemetry/getDemand.ts

@@ -1,4 +1,5 @@
-import { api } from "../../api"
+import axios from "axios"
+import { parseCookies } from "nookies"
 
 export async function getDemand(
     unity: string,
@@ -6,11 +7,16 @@ export async function getDemand(
     endDate: string,
     discretization: string
   ) {
-  const { data } = await api.post('/telemetry/demand', {
+  const { '@smartAuth-token': token } = parseCookies()
+  const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
 		"filters": [
 			{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
 			{"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
 		]
+  }, {
+    headers: {
+      'Authorization': `Bearer ${token}`
+    }
   })
 
   return data.data

src/services/charts/telemetry/getDiscretization.ts

@@ -1,4 +1,5 @@
-import { api } from "../../api"
+import axios from "axios"
+import { parseCookies } from "nookies"
 
 export async function getDiscretization(
     unity: string,
@@ -6,11 +7,16 @@ export async function getDiscretization(
     endDate: string,
     discretization: string
   ) {
-  const { data } = await api.post('/telemetry/discretization', {
+  const { '@smartAuth-token': token } = parseCookies()
+  const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
     "type": discretization,
     "filters": [
         {"type" : "=", "field": "med_5min.ponto", "value": unity}
       ]
+    }, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
     }
   )
 

src/services/charts/telemetry/getPowerFactor.ts

@@ -1,4 +1,5 @@
-import { api } from "../../api"
+import axios from "axios"
+import { parseCookies } from "nookies"
 
 export async function getPowerFactorData(
     unity: string,
@@ -6,12 +7,17 @@ export async function getPowerFactorData(
     endDate: string,
     discretization: string
   ) {
-  const { data } = await api.post('/telemetry/powerFactor', {
+  const { '@smartAuth-token': token } = parseCookies()
-    "filters": [
+  console.log(token.replace(/"/g, ''))
-      {"type" : "=", "field": `${discretization}.ponto`, "value": unity},
+  const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
-      {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
+		"filters": [
-    ]
+			{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
+			{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
+		]
+}, {
+    headers: {
+      'Authorization': `Bearer ${token}`
+    }
   })
-
   return data.data
 }

src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -138,9 +138,20 @@ export const TableHeader = styled.section`
 
   .select{
     display: flex;
+    justify-content: space-between;
     flex-direction: row;
 
     width: 30rem;
+
+    div {
+      display: flex;
+      justify-content: space-between;
+
+      align-items: flex-start;
+      flex-direction: column;
+
+      width: 95%;
+    }
   }
 `
 

src/styles/layouts/pld/PldView.ts

@@ -118,6 +118,16 @@ export const PldTableView = styled.main`
     color: black!important;
   }
 
+  table, th:last-child{
+    border: transparent;
+    border-top-right-radius: 20px;
+  }
+
+  table, th:first-child {
+    border: transparent;
+    border-top-left-radius: 20px;
+  }
+
   h3{
     font-weight: 600;
     font-size: 22px;