292 lines
11 KiB
TypeScript
292 lines
11 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
|
||
import { DashboardView } from '../../styles/layouts/dashboard/DashboardView'
|
||
|
||
import Link from 'next/link'
|
||
import GraphCard from '../../components/graph/graphCard/ChartCard'
|
||
import Header from '../../components/header/Header'
|
||
import MapCard from '../../components/mapCard/MapCard'
|
||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||
|
||
import { format } from 'date-fns'
|
||
import { GetServerSideProps } from 'next'
|
||
import Head from 'next/head'
|
||
import { parseCookies, setCookie } from 'nookies'
|
||
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
|
||
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
|
||
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
|
||
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
|
||
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
|
||
import getAPIClient from '../../services/ssrApi'
|
||
|
||
import Box from '@mui/material/Box'
|
||
import Modal from '@mui/material/Modal'
|
||
import Typography from '@mui/material/Typography'
|
||
import BasicButton from '../../components/buttons/basicButton/BasicButton'
|
||
|
||
const style = {
|
||
position: 'absolute' as const,
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
height: 600,
|
||
width: 500,
|
||
bgcolor: 'background.paper',
|
||
border: '0px solid #000',
|
||
boxShadow: 24,
|
||
p: 4,
|
||
|
||
borderRadius: 3,
|
||
|
||
overflow: 'scroll'
|
||
};
|
||
|
||
export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator }: any) {
|
||
const months = [
|
||
'Jan',
|
||
'Fev',
|
||
'Mar',
|
||
'Abr',
|
||
'Mai',
|
||
'Jun',
|
||
'Jul',
|
||
'Ago',
|
||
'Set',
|
||
'Out',
|
||
'Nov',
|
||
'Dez'
|
||
]
|
||
|
||
const { ['terms']: terms } = parseCookies()
|
||
|
||
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
|
||
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
|
||
|
||
const [open, setOpen] = useState(true);
|
||
const handleOpen = () => setOpen(true);
|
||
const handleClose = () => setOpen(false);
|
||
|
||
useEffect(() => {
|
||
let lastDataMensal = '0'
|
||
let lastDataAnual = '0'
|
||
let index = 0
|
||
|
||
while (index < grossMensalGraph.length) {
|
||
if (!grossMensalGraph[index].dad_estimado && grossMensalGraph[index].economia_acumulada !== null)
|
||
lastDataMensal = grossMensalGraph[index].economia_acumulada
|
||
index++
|
||
}
|
||
setLastDataBrutaMensal(`${parseFloat(lastDataMensal).toFixed(3)}`)
|
||
index = 0
|
||
while (index < grossAnualGraph.length) {
|
||
if (!grossAnualGraph[index].dad_estimado)
|
||
lastDataAnual = grossAnualGraph[index].economia_acumulada
|
||
index++
|
||
}
|
||
setLastDataBrutaAnual(`${parseFloat(lastDataAnual).toFixed(3)}`)
|
||
}, [])
|
||
|
||
console.log(grossAnualGraph)
|
||
|
||
return (
|
||
<DashboardView>
|
||
<Head>
|
||
<title>Smart Energia - Visão Geral</title>
|
||
</Head>
|
||
<Header name={userName}>
|
||
<PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
|
||
</Header>
|
||
|
||
<Link href='pld'>
|
||
<section className="cardsSection" >
|
||
<MapCard title='R$/MWh' subtitle='' date={`${format(new Date(), 'MM/yyyy')}`} statistic='' imgSource='/moneyIcon2.png' />
|
||
{
|
||
mapsInfo.map(value => {
|
||
return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
|
||
})
|
||
}
|
||
</section>
|
||
</Link>
|
||
|
||
{
|
||
typeof window === 'undefined' || typeof window === undefined ? null :
|
||
<>
|
||
<section className='dashboard'>
|
||
<GraphCard title='Economia Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
|
||
<AccumulatedEconomyTitle value={lastDataBrutaAnualS} />
|
||
<GrossAnualChart title='' subtitle=''
|
||
dataset='Consolidada'
|
||
dataProps={grossAnualGraph}
|
||
label={grossAnualYears} barLabel bruta miniature />
|
||
</GraphCard>
|
||
|
||
<GraphCard title='Economia Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
|
||
<AccumulatedEconomyTitle value={lastDataBrutaMensalS} />
|
||
<GrossMensalChart title='' subtitle=''
|
||
data1={grossMensalGraph}
|
||
data2={grossMensalGraph}
|
||
label={months}
|
||
miniature
|
||
/>
|
||
</GraphCard>
|
||
|
||
<GraphCard title='Custo Mensal Cativo x Livre' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil'>
|
||
<CativoXLivreChart chartData={acumulatedGraph}
|
||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado miniature />
|
||
</GraphCard>
|
||
|
||
<GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
|
||
<CostIndicatorChart title='' subtitle=''
|
||
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes(costIndicator[0].mes.slice(0, 4))).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
|
||
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes(costIndicator[costIndicator.length - 1].mes.slice(0, 4))).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
|
||
years={[costIndicator[0].mes.slice(0, 4), costIndicator[costIndicator.length - 1].mes.slice(0, 4)]}
|
||
label={months}
|
||
miniature
|
||
/>
|
||
</GraphCard>
|
||
</section>
|
||
<Modal
|
||
open={terms == 'false'}
|
||
aria-labelledby="modal-modal-title"
|
||
aria-describedby="modal-modal-description"
|
||
>
|
||
<Box sx={style}>
|
||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||
Termos de uso
|
||
</Typography>
|
||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||
<p>
|
||
Bem-vindo ao Smart Energy View, a Plataforma Web da SMART ENERGIA!
|
||
</p>
|
||
|
||
<p>
|
||
Agora você terá a Gestão da sua Energia na palma da sua mão!!!!
|
||
</p>
|
||
|
||
<p>
|
||
Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
|
||
</p>
|
||
|
||
<p>
|
||
Estamos na última fase de testes da plataforma e em breve também iremos disponibilizar os aplicativos para seu celular, nos sistemas operacionais IOS e Android.
|
||
</p>
|
||
|
||
<p>
|
||
Encontrando qualquer dificuldade, eventuais inconsistências ou dúvidas, nos contate!
|
||
</p>
|
||
|
||
<p>
|
||
Lembrando que conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros sendo destinadas a seu uso exclusivo.
|
||
</p>
|
||
|
||
<p>
|
||
A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
|
||
</p>
|
||
|
||
|
||
|
||
<p>
|
||
Destacamos que os resultados informados são meramente indicativos, não vinculantes a resultados e que as premissas disponibilizadas na plataforma são as mesmas utilizadas nos Energys Reports e estudos encaminhados.
|
||
</p>
|
||
|
||
|
||
<p>
|
||
<strong>Aproveite essa nova ferramenta de acompanhar sua Gestão de Energia!</strong>
|
||
</p>
|
||
{/* <p>
|
||
Bem-vindo a Plataforma Web – SMART ENERGIA!
|
||
</p>
|
||
<p>
|
||
Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
|
||
</p>
|
||
<p>
|
||
Conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros.
|
||
</p>
|
||
<p>
|
||
A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
|
||
</p>
|
||
<p>
|
||
Ressaltamos que os resultados informados são meramente indicativos.
|
||
</p> */}
|
||
<BasicButton title="Aceito os termos" onClick={() => {
|
||
setCookie(undefined, 'terms', 'true')
|
||
setOpen(false)
|
||
}} />
|
||
</Typography>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
}
|
||
</DashboardView>
|
||
)
|
||
}
|
||
|
||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||
const apiClient = getAPIClient(ctx)
|
||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||
const { ['user-name']: userName } = parseCookies(ctx)
|
||
|
||
let grossAnualGraph = [];
|
||
let grossMensalGraph = [];
|
||
let acumulatedGraph = [];
|
||
let costIndicator = []
|
||
let mapsInfo = [];
|
||
|
||
await apiClient.post('/economy/grossAnnual').then(res => {
|
||
grossAnualGraph = res.data.data
|
||
})
|
||
.then(console.log)
|
||
.catch(console.log)
|
||
|
||
await apiClient.post('/economy/grossMonthly').then(res => {
|
||
grossMensalGraph = res.data.data
|
||
}).catch(res => {
|
||
// console.log(res)
|
||
})
|
||
|
||
await apiClient.post('/economy/estimates').then(res => {
|
||
acumulatedGraph = res.data.data
|
||
}).catch(res => {
|
||
// console.log(res)
|
||
})
|
||
|
||
await apiClient.post('/economy/MWh').then(res => {
|
||
costIndicator = res.data.data
|
||
}).catch(res => {
|
||
// console.log(res)
|
||
})
|
||
|
||
await apiClient.post('/pld/overview').then(res => {
|
||
mapsInfo = res.data.data
|
||
}).catch(res => {
|
||
// console.log(res)
|
||
})
|
||
|
||
const grossMensalYears = grossMensalGraph.map((value) => value.mes)
|
||
const grossAnualYears = grossAnualGraph.map((value) => value.ano)
|
||
|
||
if (!token) {
|
||
return {
|
||
redirect: {
|
||
destination: '/',
|
||
permanent: false
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
props: {
|
||
grossAnualGraph,
|
||
grossAnualYears,
|
||
grossMensalYears,
|
||
grossMensalGraph,
|
||
acumulatedGraph,
|
||
costIndicator,
|
||
mapsInfo,
|
||
|
||
userName
|
||
}
|
||
}
|
||
}
|