fixing charts fonst and add more features
This commit is contained in:
parent
801ca929b2
commit
62afd28f90
@ -6,7 +6,7 @@ const nextConfig = {
|
||||
styledComponents: true,
|
||||
},
|
||||
images: {
|
||||
domains: ["kluppdevelopment.s3.sa-east-1.amazonaws.com"]
|
||||
domains: ["kluppdevelopment.s3.sa-east-1.amazonaws.com", "api.energiasmart.com.br"]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ export function DemRegXDemConChart({
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
size: window.innerWidth/80
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -105,7 +105,7 @@ export function DemRegXDemConChart({
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
size: window.innerWidth/80
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -43,7 +43,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
size: window.innerWidth/80
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -53,7 +53,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
size: window.innerWidth/80
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -85,7 +85,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -95,7 +95,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -43,22 +43,24 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
// stacked: false,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
stacked: false,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -101,6 +103,12 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
|
||||
label: '2021',
|
||||
data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
|
||||
borderRadius: 8,
|
||||
datalabels: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 8,
|
||||
opacity: .8,
|
||||
offset: -5
|
||||
},
|
||||
backgroundColor: (value, ctx) => {
|
||||
if (value.dad_estimado)
|
||||
return draw('diagonal-right-left', '#C2d5fb');
|
||||
|
||||
@ -53,7 +53,7 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
size: window.innerWidth/80
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -63,7 +63,7 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: 16
|
||||
size: window.innerWidth/80
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -46,7 +46,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -57,7 +57,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
|
||||
import {
|
||||
@ -44,11 +44,20 @@ interface ChartInterface {
|
||||
export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
|
||||
function spacement(string) {
|
||||
const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? ' ' : string.length===5? ' ' : ''
|
||||
// const spaces = string.length===1?'' : string.length===2? '⠀⠀⠀⠀' : string.length===3? '⠀⠀⠀' : string.length===4? '⠀⠀' : string.length===5? '⠀' : ''
|
||||
|
||||
return spaces
|
||||
}
|
||||
|
||||
const [lastDataS, setLastData] = useState('')
|
||||
useEffect(() => {
|
||||
let lastData = '0'
|
||||
let index=0
|
||||
while (index < data1.length) {
|
||||
data1[index].dad_estimado? lastData=data1[index].economia_acumulada : null
|
||||
index++
|
||||
setLastData(`economia acumulada: R$ ${parseFloat(lastData).toFixed(3)}`)
|
||||
}
|
||||
}, [data1])
|
||||
|
||||
const options: any = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
@ -58,7 +67,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -68,7 +77,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
||||
},
|
||||
ticks: {
|
||||
font: {
|
||||
size: !miniature? 16 : 10
|
||||
size: !miniature? window.innerWidth/80 : window.innerWidth/100
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -101,7 +110,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: '',
|
||||
text: ''
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
import Image from 'next/image';
|
||||
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import TextField from '@mui/material/TextField';
|
||||
|
||||
import { HeaderView } from './HeaderView'
|
||||
import { parseCookies } from 'nookies';
|
||||
import { GetServerSideProps } from 'next';
|
||||
@ -27,11 +24,13 @@ export default function Header({name, admin, children}: headerInterface) {
|
||||
<section>
|
||||
{
|
||||
!admin && profile_picture?
|
||||
<Image src={profile_picture} height={100} width={108}/>
|
||||
<div className='logoContainer'>
|
||||
<img src={profile_picture} alt=''/>
|
||||
</div>
|
||||
:
|
||||
<Image src='/assets/marca1.png' height={75} width={108}/>
|
||||
}
|
||||
<div className='icon' >
|
||||
<div className='icon'>
|
||||
<p>
|
||||
olá, {name}
|
||||
</p>
|
||||
|
||||
@ -30,6 +30,19 @@ export const HeaderView = styled.header`
|
||||
}
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 40%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -15,9 +15,6 @@ import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedC
|
||||
import { useRouter } from 'next/router'
|
||||
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor'
|
||||
import { getDemand } from '../../services/charts/telemetry/getDemand'
|
||||
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'
|
||||
|
||||
export default function chartTelemetry({userName}) {
|
||||
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
|
||||
@ -31,30 +28,10 @@ export default function chartTelemetry({userName}) {
|
||||
|
||||
const {startDate, endDate, unity, discretization} = router.query
|
||||
|
||||
const { '@smartAuth-token': token } = parseCookies()
|
||||
|
||||
function getChartsData() {
|
||||
console.log(token)
|
||||
// getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
||||
// .then(result => setFatorPotenciaData(result))
|
||||
// .catch(exception => console.log('exeption', exception))
|
||||
|
||||
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
||||
// .then(result => setDiscretizedConsumptionDataReativa(result))
|
||||
// .catch(exception => console.log(exception))
|
||||
|
||||
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
||||
// .then(result => setDiscretizedConsumptionData(result))
|
||||
// .catch(exception => console.log(exception))
|
||||
|
||||
// getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
|
||||
// .then(result => setDemRegXDemCon(result))
|
||||
// .catch(exception => console.log(exception))
|
||||
|
||||
// setFatorPotenciaData(res.data.data)
|
||||
// setDiscretizedConsumptionDataReativa(res.data.data)
|
||||
// setDiscretizedConsumptionData(res.data.data)
|
||||
// setDemRegXDemCon(res.data.data)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
import Chart from '../../components/graph/Chart'
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { dataEconomiaIndicador } from '../../services/economiaIndicador'
|
||||
import { ConsumptionView } from '../../styles/layouts/consumption/ConsumptionView'
|
||||
|
||||
export default function Consumption({userName}: any) {
|
||||
return (
|
||||
<ConsumptionView>
|
||||
<Head>
|
||||
<title>Smart Energia - Consumo</title>
|
||||
</Head>
|
||||
<Header name={userName} />
|
||||
<PageTitle title='Consumo' subtitle='Análise de Consumo'/>
|
||||
<section>
|
||||
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} />
|
||||
</section>
|
||||
</ConsumptionView>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
const { ['user-name']: userName } = parseCookies(ctx)
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
userName
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import { DashboardView } from '../../styles/layouts/dashboard/DashboardView'
|
||||
|
||||
@ -7,26 +7,15 @@ import GraphCard from '../../components/graph/graphCard/ChartCard'
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import Link from 'next/link'
|
||||
import LineChart from '../../components/graph/LineChart'
|
||||
import { SingleBar } from '../../components/graph/SingleBar'
|
||||
|
||||
import { dataEconomiaBruta } from '../../services/economiaBruta'
|
||||
import { dataEconomiaIndicador } from '../../services/economiaIndicador'
|
||||
import { EconomiaAcumulada } from '../../services/economiaAcumulada'
|
||||
import Chart from '../../components/graph/Chart'
|
||||
import { LineBarChart } from '../../components/graph/LineBarChart'
|
||||
import { LineBarChart2 } from '../../components/graph/LineBarChart2'
|
||||
import { ConsumoEstimado } from '../../services/consumoEstimado'
|
||||
import Head from 'next/head'
|
||||
import recoverUserInformation from '../../services/auth'
|
||||
import { parseCookies } from 'nookies'
|
||||
import { GetServerSideProps } from 'next'
|
||||
import getAPIClient from '../../services/ssrApi'
|
||||
import Chart2 from '../../components/graph/Chart2'
|
||||
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
|
||||
import CostIndicatorChart from '../../components/graph/costIndicatorChart'
|
||||
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
|
||||
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
|
||||
import Head from 'next/head'
|
||||
|
||||
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
|
||||
const months = [
|
||||
@ -44,6 +33,27 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
'Dez'
|
||||
]
|
||||
|
||||
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
|
||||
const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
|
||||
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(`economia acumulada: R$ ${parseFloat(lastDataMensal).toFixed(3)}`)
|
||||
index=0
|
||||
while (index < grossAnualGraph.length) {
|
||||
if (!grossAnualGraph[index].dad_estimado)
|
||||
lastDataAnual=grossAnualGraph[index].economia_acumulada
|
||||
index++
|
||||
}
|
||||
setLastDataBrutaAnual(`economia acumulada: R$ ${parseFloat(lastDataAnual).toFixed(3)}`)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<DashboardView>
|
||||
<Head>
|
||||
@ -69,6 +79,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
<>
|
||||
<section className='dashboard'>
|
||||
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
|
||||
<p style={{color: '#254F7F'}}>{lastDataBrutaAnualS}</p>
|
||||
<GrossAnualChart title='' subtitle=''
|
||||
dataset='Consolidada'
|
||||
dataProps={grossAnualGraph}
|
||||
@ -76,18 +87,19 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
|
||||
</GraphCard>
|
||||
|
||||
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={grossMensalGraph}
|
||||
data2={grossMensalGraph}
|
||||
label={grossMensalGraph.map((value) => value.mes)}
|
||||
miniature
|
||||
/>
|
||||
<p style={{color: '#254F7F'}}>{lastDataBrutaMensalS}</p>
|
||||
<GrossMensalChart title='' subtitle=''
|
||||
data1={grossMensalGraph}
|
||||
data2={grossMensalGraph}
|
||||
label={grossMensalGraph.map((value) => value.mes)}
|
||||
miniature
|
||||
/>
|
||||
</GraphCard>
|
||||
|
||||
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil'>
|
||||
<CativoXLivreChart chartData={acumulatedGraph}
|
||||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||||
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
|
||||
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'>
|
||||
|
||||
@ -1,39 +1,26 @@
|
||||
import Fab from '@mui/material/Fab';
|
||||
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 Select from '@mui/material/Select';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { parseCookies } from 'nookies';
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import { LineBarChart } from '../../components/graph/LineBarChart';
|
||||
import LineChart from '../../components/graph/LineChart';
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { api } from '../../services/api';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { GoBack, PldGraphView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView'
|
||||
import { TableHeader } from '../../styles/layouts/pld/PldView'
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
|
||||
import NavigationIcon from '@mui/icons-material/Navigation';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { MenuContext } from '../../contexts/menu/MenuContext';
|
||||
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
|
||||
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
|
||||
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
|
||||
import { ConsumoEstimado } from '../../services/consumoEstimado';
|
||||
import CostIndicatorChart from '../../components/graph/costIndicatorChart';
|
||||
import { EconomyView } from '../../styles/layouts/economy/economy';
|
||||
|
||||
@ -60,6 +47,26 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
'Dez'
|
||||
]
|
||||
|
||||
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
|
||||
useEffect(() => {
|
||||
let lastData = '0'
|
||||
let index=0
|
||||
if (economyMenu) {
|
||||
while (index < brutaMensal.length) {
|
||||
if (!brutaMensal[index].dad_estimado)
|
||||
lastData=brutaMensal[index].economia_acumulada
|
||||
index++
|
||||
}
|
||||
} else {
|
||||
while (index < anual.length) {
|
||||
if (!anual[index].dad_estimado)
|
||||
lastData=brutaMensal[index].economia_acumulada
|
||||
index++
|
||||
}
|
||||
}
|
||||
setLastDataBrutaMensal(`economia acumulada: R$ ${parseFloat(lastData).toFixed(3)}`)
|
||||
}, [economyMenu])
|
||||
|
||||
useEffect(() => {
|
||||
api.post('/economy/estimates', unity!==''?{
|
||||
"filters": [
|
||||
@ -67,21 +74,14 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
]
|
||||
}:{}).then(res => {
|
||||
setCatLivDataState(res.data.data)
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
}, [unity])
|
||||
|
||||
useEffect(() => {
|
||||
api.post('/economy/MWh', unity!==''?{
|
||||
"filters": [
|
||||
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity!=="default"? null : unity}
|
||||
]
|
||||
}:{}).then(res => {
|
||||
setIndicatorDataState(res.data.data)
|
||||
console.log('res', res.data.data)
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
}, [unity])
|
||||
|
||||
@ -103,18 +103,23 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
<Tab label="Custo R$/MWh"/>
|
||||
</Tabs>
|
||||
</TableHeader>
|
||||
{
|
||||
economyMenu === 0?
|
||||
<p style={{marginLeft: '3%'}}>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p>
|
||||
:
|
||||
economyMenu === 1?
|
||||
<p style={{marginLeft: '3%'}}>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p>
|
||||
:
|
||||
economyMenu === 2?
|
||||
<p style={{marginLeft: '3%'}}>Comparativo de Custo Estimado - Valores em R$ x mil</p>
|
||||
:
|
||||
<p style={{marginLeft: '3%'}}>Indicador de Custo - Valores em R$/MWh</p>
|
||||
}
|
||||
<article>
|
||||
{
|
||||
economyMenu === 0 || economyMenu === 1?
|
||||
<p>Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil</p>
|
||||
:
|
||||
economyMenu === 2?
|
||||
<p>Comparativo de Custo Estimado - Valores em R$ x mil</p>
|
||||
:
|
||||
<p>Indicador de Custo - Valores em R$/MWh</p>
|
||||
}
|
||||
<p>{
|
||||
economyMenu===0 || economyMenu===1?
|
||||
lastDataBrutaMensalS
|
||||
:
|
||||
null
|
||||
}</p>
|
||||
</article>
|
||||
{
|
||||
typeof window === 'undefined' || typeof window === undefined? null :
|
||||
<>
|
||||
@ -165,7 +170,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
|
||||
<section>
|
||||
<CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
|
||||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||||
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
|
||||
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado/>
|
||||
</section>
|
||||
</RenderIf>
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@ import Select from '@mui/material/Select';
|
||||
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { ConsumoEstimado } from '../../services/consumoEstimado'
|
||||
import getAPIClient from '../../services/ssrApi'
|
||||
import { EstimatedCostView } from '../../styles/layouts/economy/estimatedCost/EstimatedCostView'
|
||||
|
||||
@ -65,7 +64,7 @@ export default function EstimatedCost({graphData, userName, clients}: any) {
|
||||
<section>
|
||||
<CativoXLivreChart chartData={unity!==null? graphDataState : graphData}
|
||||
dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
|
||||
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
|
||||
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']} title='' subtitle='' barLabel hashurado/>
|
||||
</section>
|
||||
</EstimatedCostView>
|
||||
)
|
||||
|
||||
@ -3,12 +3,9 @@ import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
|
||||
import Chart from '../../components/graph/Chart'
|
||||
import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
|
||||
import { SingleBar } from '../../components/graph/SingleBar'
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { dataEconomiaBruta } from '../../services/economiaBruta'
|
||||
import getAPIClient from '../../services/ssrApi'
|
||||
|
||||
import { GrossSavingsView } from '../../styles/layouts/economy/grossSavings/GrossSavings'
|
||||
|
||||
@ -5,7 +5,6 @@ import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { parseCookies } from 'nookies';
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
|
||||
@ -15,9 +14,8 @@ import LineChart from '../../components/graph/LineChart';
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { api } from '../../services/api';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { GoBack, PldGraphView, PldTableMinMaxView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView'
|
||||
import { PldGraphView, PldTableMinMaxView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView'
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
|
||||
@ -7,18 +7,13 @@ import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import { parseCookies } from 'nookies';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
// import Teste from '../files/teste.csv';
|
||||
import { CSVDownload, CSVLink } from "react-csv";
|
||||
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import Header from '../../components/header/Header';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import Sidebar from '../../components/sidebar/Sidebar';
|
||||
import { api } from '../../services/api';
|
||||
// import { dados } from '../services/DadosTabelaResumoOperacao';
|
||||
import data from '../../services/dados.json'
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { Pagination, TableBodyView, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||
import { TableBodyView, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||
|
||||
import Fab from '@mui/material/Fab';
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ export default function Telemetria({userName, clients}: any) {
|
||||
const [unity, setUnity] = useState('');
|
||||
const [startDate, setStartDate] = useState(new Date());
|
||||
const [endDate, setEndDate] = useState(new Date());
|
||||
const [discretization, setDiscretization] = useState('');
|
||||
const [discretization, setDiscretization] = useState('1_hora');
|
||||
|
||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
|
||||
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
// {
|
||||
// "unidades": [
|
||||
// { "value": "unidade1", "name": "Unidade-1", "operacao": "Compra", "montante": "130,00", "contraparte": "cOPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
// { "value": "unidade2", "name": "Unidade-2", "operacao": "Compra", "montante": "20,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15"},
|
||||
// { "value": "unidade3", "name": "Unidade-3", "operacao": "Compra", "montante": "30,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
// { "value": "unidade4", "name": "Unidade-4", "operacao": "Compra", "montante": "40,00", "contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
// { "value": "unidade5", "name": "Unidade-5", "operacao": "Compra", "montante": "500,00","contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
// { "value": "unidade6", "name": "Unidade-6", "operacao": "Compra", "montante": "300,00", "contraparte": "COPEL COM I5", "preco":"234,67", "valorNF": "965,95" }
|
||||
// ]
|
||||
// }
|
||||
@ -1,12 +0,0 @@
|
||||
export const ConsumoDecretizadoBar = {
|
||||
data:
|
||||
[1, 3, 4, 7, 10, 14, 17, 20, 23, 25, 28, 31, 34, 37, 40, 43, 46, 49, 53, 56, 58, 60, 63, 66,
|
||||
69, 72, 76, 79, 82, 86, 90, 93, 97, 103, 106, 109, 112, 116, 120, 124, 127, 130, 134, 138, 142, 145, 148, 152,
|
||||
155, 158, 161, 164, 168, 172, 176, 200, 203, 206, 209, 213, 217, 221, 223, 226, 229, 231, 234, 238, 240, 244, 248
|
||||
],
|
||||
|
||||
label:
|
||||
['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22',
|
||||
'0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22',
|
||||
'0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22']
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
export const ConsumoDecretizadoLine = {
|
||||
data: [100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
|
||||
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
|
||||
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
|
||||
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,],
|
||||
|
||||
data1: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
|
||||
600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
|
||||
600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,],
|
||||
|
||||
label1:['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0',
|
||||
'0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0',
|
||||
'0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', ]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
export const ConsumoEstimado = {
|
||||
data: [245,202, 176, 150, 102, 138, 155, 177, 228, 161, 316, 335],
|
||||
data1: [214, 167, 129, 114, 68, 99, 116, 129, 183, 93, 165, 164],
|
||||
data2: [31, 35, 47, 37, 39, 39, 48, 45, 68, 151, 171],
|
||||
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"unidades": [
|
||||
{ "value": "unidade1", "name": "Unidade-1", "operacao": "Compra", "montante": "130,00", "contraparte": "cOPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
{ "value": "unidade2", "name": "Unidade-2", "operacao": "Compra", "montante": "20,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15"},
|
||||
{ "value": "unidade3", "name": "Unidade-3", "operacao": "Compra", "montante": "30,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
{ "value": "unidade4", "name": "Unidade-4", "operacao": "Compra", "montante": "40,00", "contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
{ "value": "unidade5", "name": "Unidade-5", "operacao": "Compra", "montante": "500,00","contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" },
|
||||
{ "value": "unidade6", "name": "Unidade-6", "operacao": "Compra", "montante": "300,00", "contraparte": "COPEL COM I5", "preco":"234,67", "valorNF": "965,95" }
|
||||
]
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
export const EconomiaAcumulada = {
|
||||
data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294],
|
||||
data1 : [1445, 1615],
|
||||
data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872],
|
||||
|
||||
data3: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
|
||||
data4: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
|
||||
data5: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
|
||||
data6: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
|
||||
|
||||
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'],
|
||||
label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
|
||||
label3: ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
export const dataEconomiaBruta = {
|
||||
data: [872, 1615, 2196, 2930, 3838, 4814, 5700],
|
||||
labels: ['2020', '2021', '2022', '2023', '2024', '2025', '2026']
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"consolidada": [],
|
||||
"2020": [],
|
||||
"2021": [],
|
||||
"labels": [2020, 2021, 2022, 2023, 2024, 2025, 2026]
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
export const dataEconomiaIndicador = {
|
||||
data1: [591, 552, 527, 1138, 529, 478, 456, 515, 526, 731, 890, 742],
|
||||
data2: [714, 683, 547, 575, 660, 628, 699, 751, 819, 700],
|
||||
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
export const EvolucaoPld = {
|
||||
data :[97.00, 98.00, 99.00, 100.00, 105.00, 113.00, 116.00, 120.00, 123.00, 120.00, 120.00, 118.00, 113.00, 101.00, 100.00, 98.00,
|
||||
98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00],
|
||||
|
||||
data1 :[97.00, 98.00, 99.00, 100.00, 105.00, 113.00, 116.00, 120.00, 123.00, 120.00, 120.00, 118.00, 113.00, 101.00, 100.00, 98.00,
|
||||
98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00, 98.00],
|
||||
label: ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
export const FatorPotencia = {
|
||||
data : [1.00, 1.00, 1.00, -0.96, -0.96, 0.97, 0.98, 0.95, 0.94, 0.98, 0.95, 0.95, 0.98, 1.01, 1.05, 1.00, 1.00, 0.95, 0.97, 0.97, 0.97, 0.97, 0.97, 0.97, 0.98, 1.00, 0.97, 0.97, 0.97, 0.97, 0.97, 0.96, 0.95, 0.94, 0.95, 0.95,],
|
||||
|
||||
data1 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90],
|
||||
data2 : [.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98],
|
||||
|
||||
label1: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
|
||||
}
|
||||
@ -28,4 +28,19 @@ export const EconomyView = styled.main`
|
||||
|
||||
.chartBox {
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
:first-child {
|
||||
margin-left: '3%'
|
||||
}
|
||||
:last-child {
|
||||
color: #254F7F;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user