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

fixing

Browse Source
This commit is contained in:
joseCorte-exe 2022-08-15 15:47:59 -03:00
parent cc2f2dd81d
commit aed20dec5a
17 changed files with 142 additions and 500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/accumulatedEconomyTitle/AccumulatedEconomyTitle.tsx Normal file
View File

@ -0,0 +1,6 @@
import React from 'react'
import { AccumulatedEconomyTitleView } from './AccumulatedEconomyTitleView'
export default function AccumulatedEconomyTitle({value}: {value: string}) {
return <AccumulatedEconomyTitleView>Economia Acumulada:<p>R${value}</p></AccumulatedEconomyTitleView>
}

16
src/components/accumulatedEconomyTitle/AccumulatedEconomyTitleView.ts Normal file
View File

@ -0,0 +1,16 @@
import styled from "styled-components";
export const AccumulatedEconomyTitleView = styled.b`
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #254F7F;
p {
font-size: 20px;
color: #018A8A;
margin-left: 5px
}
`

125
src/components/graph/Chart.tsx
View File

@ -1,125 +0,0 @@
import React, { useState, useEffect } from 'react'
import { draw, generate } from 'patternomaly'
import { Bar, Line } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import faker from 'faker'
import { ChartView } from './ChartView';
import RenderIf from '../../utils/renderIf';
import ChartTitle from './ChartTitle';
// import { data } from './LineBarChart';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2: any,
single?: any
label: any,
dataset1?: string,
dataset2?: string,
miniature?: boolean | undefined
}
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) {
const labels = label;
const options: any = {
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
color: 'black',
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const result = `${parseInt(value).toLocaleString('pt-br')}`
return value==null? null : result
},
anchor: "end",
align: "end",
font: {
size: !miniature? 15 : 10,
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = {
labels,
datasets: [
{
label: dataset1? dataset1 : '2021',
data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
backgroundColor: '#255488'
// backgroundColor: (value, ctx) => {
// return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
// },
},
{
label: dataset2? dataset2 : '2022',
data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#C2d5fb'
backgroundColor: (value, ctx) => {
return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
},
}
],
}
return (
<ChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<Bar
options={options}
data={data}
/>
</ChartView>
)
}

124
src/components/graph/Chart2.tsx
View File

@ -1,124 +0,0 @@
import React from 'react'
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { draw, generate } from 'patternomaly'
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
// import { data } from './LineBarChart';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2: any,
single?: any
label: any,
dataset1?: string,
dataset2?: string,
miniature?: boolean | undefined
}
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) {
const labels = label;
const options: any = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
},
},
plugins: {
datalabels: {
display: true,
color: 'black',
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
const result = `${parseInt(value)!=0? percentage : ''}\n ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
return value==null? null : result
},
anchor: "end",
offset: 0,
align: "end",
font: {
size: !miniature? 18 : 10,
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data: any = {
labels,
datasets: [
{
type: 'bar',
label: 'Acumulado',
data: data1.map(value => value?.economia_acumulada),
backgroundColor: '#255488'
},
{
type: 'bar',
label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null
},
],
}
return (
<ChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<ChartJs
options={options}
data={data} type={'bar'} />
</ChartView>
)
}

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

@ -1,127 +0,0 @@
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,
miniature?: boolean | undefined,
bruta?: boolean | undefined
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
const options: object = {
responsive: true,
scales: {
x: {
font: {
size: 20
},
grid: {
display: false
}
},
},
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 = ` ${parseInt(value).toLocaleString('pt-br')}\n ${percentage}`
return value==null? null : result
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
anchor: "end",
offset: -60,
align: "start",
font: {
size: !miniature? 22 : 10
}
},
legend: {
position: 'bottom' as const,
labels: {
font: {
size: 16
}
}
},
title: {
display: false,
text: '',
},
},
};
let labels: string[];
if (bruta) {
labels = label.map(value => value.replace('2021', 'até 2021'))
} else {
labels = label
}
const data: any = {
labels,
datasets: [
{
label: 'Estimado',
data: [],
backgroundColor: '#C2d5fb',
},
{
label: dataset,
data: dataProps.map((value, index) => {
return parseFloat(value.economia_acumulada).toFixed(2)
}),
backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
},
},
{
label: '',
data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1],
backgroundColor: 'transparent',
datalabels: {
display: false
}
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
</ChartView>
)
}

66
src/components/graph/config.ts Normal file
View File

@ -0,0 +1,66 @@
import { ChartOptions, ChartType } from "chart.js";
const config = (miniature: boolean | undefined): ChartOptions<ChartType> => {
const options: any = {
responsive: true,
scales: {
x: {
stacked: false,
grid: {
display: false
},
ticks: {
font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/110
}
},
},
y: {
stacked: false,
grid: {
display: false
},
ticks: {
font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/110
}
},
},
},
plugins: {
datalabels: {
display: true,
color: '#255488',
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const result = `${parseFloat((parseFloat(value)).toLocaleString('pt-br'))}`
return value==null? null : result
},
anchor: "end",
align: "end",
font: {
weight: 'bold',
size: !miniature? window.innerWidth/80 : window.innerWidth/105
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
return options
}
export {
config
}

71
src/components/graph/costIndicatorChart/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React from 'react'
import { draw } from 'patternomaly'
@ -16,6 +16,7 @@ import {
import { CostIndicatorChartView } from './CostIndicatorChartView';
import ChartTitle from '../ChartTitle';
import { Stack } from '@mui/material';
import { config } from '../config';
ChartJS.register(
CategoryScale,
@ -40,72 +41,18 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
const labels = label;
const options: any = {
responsive: true,
scales: {
x: {
stacked: false,
grid: {
display: false
},
ticks: {
font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/110
}
},
},
y: {
stacked: false,
grid: {
display: false
},
ticks: {
font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/110
}
},
},
},
plugins: {
datalabels: {
display: true,
color: '#255488',
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const result = `${parseFloat((parseFloat(value)).toLocaleString('pt-br'))}`
const options: any = config(miniature)
return value==null? null : result
},
anchor: "end",
align: "end",
font: {
weight: 'bold',
size: !miniature? window.innerWidth/80 : window.innerWidth/105
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
console.log(data1?.map(value => value))
const data = {
labels,
datasets: [
{
label: '2021',
data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
borderRadius: 8,
data: data1?.map(value => value),
skipNull: true,
borderRadius: 8,
datalabels: {
backgroundColor: 'white',
borderRadius: 8,
@ -113,7 +60,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
offset: -5
},
backgroundColor: (value, ctx) => {
if (value.dad_estimado)
if (value?.dad_estimado)
return draw('diagonal-right-left', '#C2d5fb');
else
return '#C2d5fb'
@ -121,11 +68,11 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
},
{
label: '2022',
data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
data: data2?.map(value => value?.custo_unit),
skipNull: true,
borderRadius: 8,
backgroundColor: (value, ctx) => {
if (value.dad_estimado)
if (value?.dad_estimado)
return draw('diagonal-right-left', '#255488');
else
return '#255488'

15
src/components/graph/graphCard/ChartCardView.ts
View File

@ -26,21 +26,6 @@ export const ChartCardView = styled.article`
margin-bottom: 10px;
}
b {
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #254F7F;
p {
font-size: 20px;
color: #018A8A;
margin-left: 5px
}
}
a {
font-family: 'Poppins';
font-style: normal;

3
src/pages/aboutUs/index.tsx
View File

@ -3,7 +3,6 @@ import Head from 'next/head'
import Image from 'next/image'
import { parseCookies } from 'nookies'
import React from 'react'
import Banner from '../../components/banner/Banner'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
import getAPIClient from '../../services/ssrApi'
@ -38,7 +37,7 @@ export default function aboutUs({userName, text}) {
</ul>
</section>
<div className='image'>
<Image src='/assets/banners/aboutUs.jpg' width={280} height={180}/>
<Image src='/assets/banners/aboutUs.jpg' width={310} height={210}/>
</div>
<article>
<aside>

10
src/pages/dashboard/index.tsx
View File

@ -16,6 +16,7 @@ import CostIndicatorChart from '../../components/graph/costIndicatorChart'
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
import Head from 'next/head'
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
const months = [
@ -79,7 +80,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<>
<section className='dashboard'>
<GraphCard title='Economia Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
<b>Economia Acumulada:<p>R${lastDataBrutaMensalS}</p></b>
<AccumulatedEconomyTitle value={lastDataBrutaAnualS}/>
<GrossAnualChart title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
@ -87,7 +88,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</GraphCard>
<GraphCard title='Economia Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
<b>Economia Acumulada:<p>{` R$${lastDataBrutaMensalS}`}</p></b>
<AccumulatedEconomyTitle value={lastDataBrutaMensalS}/>
<GrossMensalChart title='' subtitle=''
data1={grossMensalGraph}
data2={grossMensalGraph}
@ -104,9 +105,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
<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('2021'))}
data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit? value.custo_unit : null)}
// data1={graphData}
data2={costIndicator.filter((value, index) => value.mes.slice(0, 4).includes('2022'))}
data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022'))}
label={months}
miniature
/>
@ -114,7 +115,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</section>
</>
}
</DashboardView>
)
}

33
src/pages/economy/index.tsx
View File

@ -23,8 +23,9 @@ import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensa
import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
import CostIndicatorChart from '../../components/graph/costIndicatorChart';
import { EconomyView } from '../../styles/layouts/economy/economy';
import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
export default function economy({userName, anual, years, brutaMensal, catLiv, clients, indicatorCost}: any) {
const {economyMenu, setEconomyMenu} = useContext(MenuContext)
const [unity, setUnity] = useState<string>('');
@ -47,7 +48,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
'Dez'
]
const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
const [lastDataBruta, setLastDataBruta] = useState('')
useEffect(() => {
let lastData = '0'
let index=0
@ -60,11 +61,11 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
} else {
while (index < anual.length) {
if (!anual[index].dad_estimado)
lastData=brutaMensal[index].economia_acumulada
lastData=anual[index].economia_acumulada
index++
}
}
setLastDataBrutaMensal(`${parseFloat(lastData).toFixed(3)}`)
setLastDataBruta(`${parseFloat(lastData).toFixed(3)}`)
}, [economyMenu])
useEffect(() => {
@ -113,12 +114,12 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
:
<p>Indicador de Custo - Valores em R$/MWh</p>
}
<p>{
{
economyMenu===0 || economyMenu===1?
<><b>Economia Acumulada: <p style={{color: '#018A8A', marginLeft: '5px'}}>R${lastDataBrutaMensalS}</p></b></>
<AccumulatedEconomyTitle value={lastDataBruta}/>
:
null
}</p>
}
</article>
{
typeof window === 'undefined' || typeof window === undefined? null :
@ -139,7 +140,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
<GrossMensalChart title='' subtitle=''
data1={brutaMensal}
data2={brutaMensal}
label={yearsBrutaMensal}
label={months}
/>
</section>
</RenderIf>
@ -222,8 +223,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/economy/grossAnnual').then(res => {
anual = res.data.data
}).catch(res => {
// console.log(res)
})
const years = anual.map((value) => value.ano)
@ -232,9 +231,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.post('/economy/grossMonthly').then(res => {
brutaMensal = res.data.data
// console.log(graphData[0].mes)
}).catch(res => {
// console.log(res)
})
const yearsBrutaMensal = brutaMensal.map((value) => value.mes)
@ -252,26 +248,17 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
"cod_smart_unidade",
"codigo_scde"],
"distinct": true
}).then(res => {
}).then(res => {
clients = res.data.data
}).catch(res => {
// console.log(res)
})
await apiClient.post('/economy/estimates').then(res => {
catLiv = res.data.data
}).catch(res => {
// console.log(res)
})
let indicatorCost = []
await apiClient.post('/economy/MWh').then(res => {
indicatorCost = res.data.data
}).catch(res => {
// console.log(res)
})
if (!token) {
return {
redirect: {

4
src/pages/industryInfo/index.tsx
View File

@ -65,9 +65,9 @@ export default function industryInfo({userName}: any) {
<IndustryInfoView>
<section>
<article>
<p>A Smart é uma empresa de vanguarda na informação sobre o Setor Elétrico Brasileiro e mantém sólidos relacionamentos com os agentes e entidades do setor,
<p style={{marginRight: '10px'}}>A Smart é uma empresa de vanguarda na informação sobre o Setor Elétrico Brasileiro e mantém sólidos relacionamentos com os agentes e entidades do setor,
a informação precisa aliada à mais de 21 anos de experiência torna a sua consultoria estratégica para consumidores e geradores</p>
<Image src='/assets/banners/sectoriaInf.jpg' width={200} height={200}/>
<Image src='/assets/banners/sectoriaInf.jpg' width={350} height={250}/>
</article>
<p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
</section>

6
src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
View File

@ -175,6 +175,12 @@ export const TableBodyView = styled.section`
border-style:solid;
border-width: 1px;
background: #F8F8F8;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
border-radius: 10px;
tr {
:last-child {
/* background-color: red; */

5
src/styles/layouts/aboutUs/AboutUsView.ts
View File

@ -19,7 +19,12 @@ export const AboutUsView = styled.main`
transform: translateY(-190px);
}
p {
text-align: justify;
}
h2 {
margin-top: 40px;
font-size: 16px;
}

16
src/styles/layouts/economy/economy.ts
View File

@ -34,25 +34,13 @@ export const EconomyView = styled.main`
align-items: center;
justify-content: space-between;
b {
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
p {
font-size: 20px;
text-decoration: underline;
}
}
p {
/* p {
:first-child {
margin-left: '3%'
}
:last-child {
color: #254F7F;
}
}
} */
}
`

3
src/styles/layouts/industryInfo/IndustryInfoView.ts
View File

@ -18,7 +18,7 @@ export const IndustryInfoView = styled.main`
}
p {
text-align: justify;
text-align: justify!important;
}
button{
@ -64,6 +64,7 @@ export const IndustryInfoView = styled.main`
flex-direction: row;
p {
text-align: justify;
width: 75%
}
}

12
src/styles/layouts/pld/PldView.ts
View File

@ -9,6 +9,12 @@ export const PldTableMinMaxView = styled.div`
border-style:solid;
border-width: 1px;
background: #F8F8F8;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
border-radius: 10px;
background-color: #FFFFFF;
margin-top: 15px;
@ -218,6 +224,12 @@ export const PldTableView = styled.div<{display?: boolean}>`
border-style:solid;
border-width: 1px;
background: #F8F8F8;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ;
border-radius: 10px;
background-color: #FFFFFF;
margin-top: 38px;