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

resolv conflicts

Browse Source
This commit is contained in:
Alex Santos 2022-06-26 12:24:36 -03:00
commit 78552b5b85
16 changed files with 632 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/graph/DemRegXDemConChart.tsx Normal file
View File

@ -0,0 +1,154 @@
import React, { useRef, useEffect } from 'react';
import {
Chart as ChartJS,
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip,
} from 'chart.js';
import { Chart } from 'react-chartjs-2';
import faker from 'faker';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import pattern from 'patternomaly'
ChartJS.register(
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip
);
// function triggerTooltip(chart: ChartJS | null) {
// const tooltip = chart?.tooltip;
// if (!tooltip) {
// return;
// }
// if (tooltip.getActiveElements().length > 0) {
// tooltip.setActiveElements([], { x: 0, y: 0 });
// } else {
// const { chartArea } = chart;
// tooltip.setActiveElements(
// [
// {
// datasetIndex: 0,
// index: 2,
// },
// {
// datasetIndex: 1,
// index: 2,
// },
// ],
// {
// x: (chartArea.left + chartArea.right) / 2,
// y: (chartArea.top + chartArea.bottom) / 2,
// }
// );
// }
// chart.update();
// }
interface LineBarChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
red?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
barLabel?: boolean | undefined,
hashurado?: boolean | undefined,
reais?: boolean | undefined
}
export function DemRegXDemConChart({
title,
subtitle,
data1,
data2,
label,
red,
dataset1,
dataset2,
dataset3,
barLabel
}: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const currentTime = new Date();
const labels = label
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
// backgroundColor: '#255488',
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 12
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = {
labels,
datasets: [
{
type: 'line' as const,
label: 'Demanda Contratada',
borderColor: red?
'#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value.dem_cont),
},
{
type: 'bar' as const,
label: 'Demanda Registrada',
backgroundColor: '#255488',
data: data2.map(value => value.dem_reg),
},
],
};
useEffect(() => {
const chart = chartRef.current;
// triggerTooltip(chart);
}, []);
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle}/>
<div>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
</ChartView>
)
}

93
src/components/graph/DiscretizedConsumptionChart.tsx Normal file
View File

@ -0,0 +1,93 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw, generate } from 'patternomaly'
import React from 'react';
import { Bar } from 'react-chartjs-2';
import ChartTitle from './ChartTitle';
import { ChartView } from './ChartView';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
ChartDataLabels
);
interface SingleBarInterface{
title: string,
subtitle: string,
dataProps: any,
label: Array<string>,
dataset: string,
barLabel?: boolean | undefined,
year?: boolean | undefined,
month?: boolean | undefined,
dataset1?: string,
}
export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) {
const currentTime = new Date();
const options: object = {
responsive: true,
series: {
downsample: {
threshold: 1000
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${parseFloat(value).toFixed(0)}\n ${percentage}`
return value==null? null : result
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
anchor: "end",
offset: -40,
align: "start",
font: {
size: 10
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: false,
text: '',
},
},
};
const labels = label;
const data: any = {
labels,
datasets: [
{
label: dataset,
data: dataProps.map(value => value.consumo),
backgroundColor: '#255488'
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
</ChartView>
)
}

91
src/components/graph/DiscretizedConsumptionChartLine.tsx Normal file
View File

@ -0,0 +1,91 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
import { ChartView } from './ChartView';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
ScatterDataPoint,
} from 'chart.js';
import ChartTitle from './ChartTitle';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
data3?: any,
data4?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string,
barLabel?: boolean | undefined
}
export default function DiscretizedConsumptionChartLine({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 12
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const labels = label;
const data = {
labels,
datasets: [
{
label: dataset1,
data: data1.map(value => value.reativa),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0)',
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Line options={options} data={data} />
</ChartView>
)
}

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

@ -27,9 +27,6 @@ interface SingleBarInterface{
year?: boolean | undefined,
month?: boolean | undefined,
dataset1?: string,
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
@ -85,7 +82,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
return parseFloat(value.economia_acumulada).toFixed(2)
}),
backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : '#C2d5fb'
},
},

97
src/components/graph/fatorPotenciaChart.tsx Normal file
View File

@ -0,0 +1,97 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
import { ChartView } from './ChartView';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
ScatterDataPoint,
} from 'chart.js';
import ChartTitle from './ChartTitle';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
data3?: any,
data4?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string,
barLabel?: boolean | undefined
}
export default function FatorPotenciaChart({ title, subtitle, data1, data2, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 12
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const labels = label;
const data = {
labels,
datasets: [
{
label: dataset1? dataset1 : 'Dataset 1',
data: data1.map(value => value.fp),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0)',
},
{
label: dataset2? dataset2 : '',
data: data2.map(value => value.f_ref),
borderColor: 'rgb(0, 0, 0)' ,
backgroundColor: 'rgba(255, 145, 0, 0)' ,
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Line options={options} data={data} />
</ChartView>
)
}

5
src/components/sidebar/Sidebar.tsx
View File

@ -67,7 +67,7 @@ export default function Sidebar() {
<Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
<Link href='/administrative/notification'><li className={router.pathname=='/administrative/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
<Link href='/administrative/industryInfo'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
<Link href='/administrative/industryInfo'><li className={router.pathname=='/administrative/industryInfo'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
<Modal
open={open}
@ -79,7 +79,7 @@ export default function Sidebar() {
<Typography id="modal-modal-title" variant="h6" component="h2">
Deseja realmente sair ?
</Typography>
<Link href='/'><Button variant="contained" sx={{mt:5}}>Sim</Button></Link>
<Link href='/'><Button variant="contained" sx={{mt:5}} onClick={() => signOut()}>Sim</Button></Link>
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
</Box>
</Modal>
@ -90,6 +90,7 @@ export default function Sidebar() {
</aside>
</SidebarView>
</RenderIf>
<RenderIf isTrue={role === '2'}>
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >

20
src/contexts/AuthContext.tsx
View File

@ -31,7 +31,17 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
const isAuthenticated = !!user
function signOut() {
destroyCookie(null, 'user-client_id')
destroyCookie(null, 'user-name')
destroyCookie(null, 'user-role')
destroyCookie(null, 'user-id')
destroyCookie(null, '@smartAuth-token')
}
async function signIn({email, password}: SignInData) {
await signOut()
const { token, user, exception }: any = await signInRequest({
email,
password
@ -51,6 +61,9 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
if (user.name)
setCookie(undefined, 'user-name', user.name)
if (user.client_id)
setCookie(undefined, 'user-client_id', user.client_id)
api.defaults.headers['Authorization'] = `Bearer ${token}`
if (!exception) {
@ -65,13 +78,6 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
}
}
function signOut() {
destroyCookie(null, 'user-name')
destroyCookie(null, 'user-role')
destroyCookie(null, 'user-id')
destroyCookie(null, '@smartAuth-token')
}
return (
<AuthContext.Provider value={{ user, isAuthenticated, signIn, signOut }}>
{children}

7
src/pages/accumulatedSavings.tsx
View File

@ -22,7 +22,12 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal (Valores em R$ mil)' />
<section>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
dataset1='Estimada' dataProps={graphData}
dataset1='Estimada' dataProps={graphData.sort((a, b) => {
if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
return 0
})}
label={years} barLabel month/>
</section>
</AccumulatedSavingsView>

4
src/pages/administrative/faq/index.tsx
View File

@ -66,7 +66,6 @@ export default function Sidebar({faqData, userName} : any ) {
if (reason === 'clickaway') {
return;
}
setOpenSnackError(false);
setOpenSnackSuccess(false);
};
@ -76,14 +75,13 @@ export default function Sidebar({faqData, userName} : any ) {
if (reason === 'clickaway') {
return;
}
setOpenSnackErrorDelete(false);
setOpenSnackSuccessDelete(false);
};
async function handleDeleteNotification(id: any) {
await id.map((value) => {
api.delete(`/faq/${value.id}`).then(res => {
api.delete(`/faq/${value}`).then(res => {
setOpenSnackSuccessDelete(true)
setOpenModalInativar(false)
window.location.reload()

13
src/pages/administrative/general.tsx
View File

@ -1,13 +1,8 @@
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import { SelectChangeEvent } from '@mui/material/Select';
import { Editor } from '@tinymce/tinymce-react'
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
import React, { useRef, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import Header from '../../components/header/Header';
import PageTitle from '../../components/pageTitle/PageTitle';
@ -24,9 +19,11 @@ export default function index({userName}: any) {
console.log(editorRef.current.getContent());
}
};
const handleChange = (event: SelectChangeEvent) => {
setText(event.target.value);
};
async function handleRegisterAboutUs() {
await api.post('/aboutUs', {
about: editorRef.current.value
@ -39,8 +36,10 @@ export default function index({userName}: any) {
<GeneralView>
<Header name={userName} admin/>
<PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
<div style={{width: '100%', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', marginTop: '30px', marginBottom: '10px'}}>
<BasicButton title='Salvar Texto' onClick={() => handleRegisterAboutUs()}/>
</div>
<BasicButton onClick={() => handleRegisterAboutUs(editorRef)} title='Enviar'/>
<br />
<Editor
onInit={(evt, editor) => editorRef.current = editor}

105
src/pages/chartTelemetry.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { SingleBar } from '../components/graph/SingleBar'
import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
import { useRouter } from 'next/router'
// import router, { useRouter } from 'next/router'
import { FatorPotencia } from '../services/fatorPotencia'
import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar'
@ -18,6 +18,12 @@ 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'
const style = {
display: 'flex',
@ -45,6 +51,65 @@ 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 { ['user-cod_client']: cod_client } = parseCookies()
async function getChartsData() {
await api.post('/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
]
}).then(res => {
setFatorPotenciaData(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": ["2022-01-03", "2022-01-03"]}
]
}).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": ["2022-01-03", "2022-01-03"]}
]
}).then(res => {
setDiscretizedConsumptionData(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": ["2022-01-03", "2022-01-03"]}
]
}).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => {
console.log(res)
})
}
useEffect(() => {
getChartsData()
}, [])
return (
<ChatTelemetryView>
<Head>
@ -54,7 +119,7 @@ export default function chartTelemetry({userName}) {
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'>
<div onClick={() => setOpenFatorPotencia(true)}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
<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}
@ -63,12 +128,12 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
<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)}>
<LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<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}
@ -77,12 +142,12 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<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)}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} 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>
<Modal
open={openConsumoDiscretizado2}
@ -96,7 +161,7 @@ export default function chartTelemetry({userName}) {
</Modal>
<div onClick={() => setOpenDemandaContratada(true)}>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={ConsumoDecretizadoLine.label1} 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>
<Modal
open={openDemandaContratada}
@ -105,7 +170,7 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} 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>
</Modal>
</section>
@ -114,8 +179,26 @@ export default function chartTelemetry({userName}) {
}
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)
const fatorPotenciaChart = []
console.log('olha os query ai', ctx.query)
// await apiClient.post('/telemetry/powerFactor', {
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": cod_client},
// {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
// ]
// }).then(res => {
// fatorPotenciaChart = res.data
// }).catch(res => {
// console.log(res)
// })
if (!token) {
return {
@ -128,8 +211,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
userName
userName,
fatorPotenciaChart
}
}
}

9
src/pages/pld/index.tsx
View File

@ -128,6 +128,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
return 'dullRed'
}
const dateFormated = new Date()
useEffect(() => {
getDataByHour()
getDataByDay()
@ -175,7 +177,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
if (index === 0) {
return <>
<tr>
<td className='tg-gceh'>Max</td>
<td className='tg-gceh'>Máximo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
@ -185,7 +187,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
} else if (index===1) {
return <>
<tr>
<td className='tg-gceh'>Min</td>
<td className='tg-gceh'>Mínimo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
@ -293,7 +295,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
</section>
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
title={`Período - ${date}`}
title={new Date(date).toLocaleString('pt-br').split(" ")[0]!='Invalid' && new Date(date).toLocaleString('pt-br').split(" ")[0]!='NaN'
? 'Período - ' + new Date(date).toLocaleString('pt-br').split(" ")[0] : 'Período - '}
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
</PldGraphView>
</RenderIf>

75
src/pages/telemetria.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { useRouter } from 'next/router'
import React, { useState } from 'react';
import router, { useRouter } from 'next/router'
import Banner from '../components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@ -18,16 +18,15 @@ import RenderIf from '../utils/renderIf';
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
export default function Telemetria({userName}: any) {
const [unity, setUnity] = React.useState('');
const [startDate, setStartDate] = React.useState('');
const [endDate, setEndDate] = React.useState('');
const [discretization, setDiscretization] = React.useState('');
const [unity, setUnity] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [discretization, setDiscretization] = useState('');
const [showChart, setShowChart] = React.useState(false);
const [date, setDate] = useState('');
const [showChart, setShowChart] = useState(false);
const handleChange = (event: SelectChangeEvent) => {
// setAge(event.target.value);
@ -72,50 +71,13 @@ export default function Telemetria({userName}: any) {
<div className='select'>
<p className='title' >Data inicial</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Data Inicial</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={startDate}
label="Unidade"
onChange={value => setStartDate(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value={10}>20/05/2022</MenuItem>
<MenuItem value={20}>10/06/2022</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
</Select>
</FormControl>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/>
</div>
<div className='select'>
<p className='title' >Data Final</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Data Final</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={endDate}
label="Unidade"
onChange={value => setEndDate(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value={10}>20/05/2022</MenuItem>
<MenuItem value={20}>10/06/2022</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
</Select>
</FormControl>
<p className='title' >Data final</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
</div>
<div className='select'>
@ -133,10 +95,6 @@ export default function Telemetria({userName}: any) {
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
@ -147,7 +105,12 @@ export default function Telemetria({userName}: any) {
</RenderIf>
<Buttons>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry', { query: {
startDate,
endDate,
discretization
}})}/>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/>
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
</Buttons>

15
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -12,6 +12,21 @@ export const TelemetriaView = styled.main`
margin: 0 0 0 10px;
}
input {
width: 15rem;
height: 2.5rem;
padding: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border-radius: 6px;
border: solid gray 1px;
background-color: #F9F9F9;
}
span {
font-family: 'Inter';
font-style: normal;

17
src/styles/layouts/administerView/faq/faqView.ts
View File

@ -42,6 +42,23 @@ export const FaqView = styled.nav`
margin-left: 19px;
}
.MuiBox-root .css-4y2i0o {
:-webkit-scrollbar {
width: 15px!important;
}
:-webkit-scrollbar-track {
background-color: #EFEFEF!important;
}
:-webkit-scrollbar-thumb {
background-color: rgb(37,79,127)!important;
border: 3px solid #EFEFEF!important;
border-radius: 10px!important
}
:-webkit-scrollbar-thumb:hover {
background-color: #1d3e63!important;
}
}
/*
.teste{
display: flex;

18
src/styles/layouts/administerView/notification/notificationView.ts
View File

@ -77,7 +77,21 @@ export const NotificationView = styled.nav`
margin-left: 16px;
}
.MuiBox-root .css-4y2i0o {
:-webkit-scrollbar {
width: 15px!important;
}
:-webkit-scrollbar-track {
background-color: #EFEFEF!important;
}
:-webkit-scrollbar-thumb {
background-color: rgb(37,79,127)!important;
border: 3px solid #EFEFEF!important;
border-radius: 10px!important
}
:-webkit-scrollbar-thumb:hover {
background-color: #1d3e63!important;
}
}
`