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

Merge branch 'administativePages' into 'dev'

Browse Source 
correcoes

See merge request kluppsoftware/smart-energia-web!94
This commit is contained in:
José Corte 2022-07-01 17:50:57 +00:00
commit f03dd71297
10 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,7 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { draw, generate } from 'patternomaly'
import { Bar, Line } from 'react-chartjs-2'; import { Bar, Line } from 'react-chartjs-2';
import { import {
Chart as ChartJS, Chart as ChartJS,
@ -54,9 +56,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
plugins: { plugins: {
datalabels: { datalabels: {
display: true, display: true,
color: (value, ctx) => { color: 'black',
return value.dataset.label==='2021'? 'black' : 'white'
},
formatter: (value, ctx) => { formatter: (value, ctx) => {
let sum = 0; let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data; const dataArr = ctx.chart.data.datasets[0].data;
@ -67,13 +67,10 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
return value==null? null : result return value==null? null : result
}, },
anchor: "start", anchor: "end",
offset: 20,
align: "end", align: "end",
rotation: -90,
font: { font: {
size: !miniature? 15 : 10, size: !miniature? 15 : 10,
weight: !miniature? 800 : 100
} }
}, },
legend: { legend: {
@ -93,12 +90,16 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
{ {
label: dataset1? dataset1 : '2021', label: dataset1? dataset1 : '2021',
data: data1.map(value => value.custo_unit), data: data1.map(value => value.custo_unit),
backgroundColor: '#C2D5FB', backgroundColor: (value, ctx) => {
return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
},
}, },
{ {
label: dataset2? dataset2 : '2022', label: dataset2? dataset2 : '2022',
data: data2.map(value => value.custo_unit), data: data2.map(value => value.custo_unit),
backgroundColor: '#255488', backgroundColor: (value, ctx) => {
return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
},
} }
], ],
} }

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

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react' import React from 'react'
import { Bar, Line } from 'react-chartjs-2'; import { Bar, Line } from 'react-chartjs-2';
import { import {
@ -11,9 +11,9 @@ import {
Legend Legend
} from 'chart.js' } from 'chart.js'
import faker from 'faker' import { draw, generate } from 'patternomaly'
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import RenderIf from '../../utils/renderIf';
import ChartTitle from './ChartTitle'; import ChartTitle from './ChartTitle';
// import { data } from './LineBarChart'; // import { data } from './LineBarChart';
@ -92,14 +92,17 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
{ {
label: dataset1? dataset1 : '2021', label: dataset1? dataset1 : '2021',
data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0), data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0),
backgroundColor: '#255488', backgroundColor: (value, ctx) => {
return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
},
}, },
data2?
{ {
label: dataset2? dataset2 : '2022', label: dataset2? dataset2 : '2022',
data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0), data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0),
backgroundColor: '#C2D5FB', backgroundColor: (value, ctx) => {
} : null return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
},
}
], ],
} }

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

@ -95,7 +95,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
return parseFloat(value.economia_acumulada).toFixed(2) return parseFloat(value.economia_acumulada).toFixed(2)
}), }),
backgroundColor: (value, ctx) => { backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : '#C2d5fb' return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
}, },
}, },
{ {

2
src/pages/_document.tsx
View File

@ -37,7 +37,7 @@ export default class MyDocument extends Document {
return ( return (
<Html> <Html>
<Head> <Head>
<meta charSet="UTF-8"/>
<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"/>

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

@ -61,27 +61,27 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</Link> </Link>
<section className='dashboard'> <section className='dashboard'>
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - (Valores em R$ mil)'> <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ mil'>
<SingleBar title='' subtitle='' <SingleBar title='' subtitle=''
dataset='Consolidada' dataset='Consolidada'
dataProps={grossAnualGraph} dataProps={grossAnualGraph}
label={grossAnualYears} barLabel miniature/> label={grossAnualYears} barLabel miniature/>
</GraphCard> </GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - (Valores em R$)' singleBar> <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ mil' singleBar>
<Chart2 title='' subtitle='' <Chart2 title='' subtitle=''
data1={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2021'))} data1={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
data2={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2022'))} data2={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
label={months} miniature/> label={months} miniature/>
</GraphCard> </GraphCard>
<GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - (Valores em R$/MWh)' singleBar> <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ mil' singleBar>
<LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph} <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
title='' subtitle='' barLabel hashurado miniature/> title='' subtitle='' barLabel hashurado miniature/>
</GraphCard> </GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'> <GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
<Chart title='' subtitle='' <Chart title='' subtitle=''
data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))} data1={costIndicator.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
// data1={graphData} // data1={graphData}

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

@ -130,13 +130,13 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
function handleColorNorte(value, region) { function handleColorNorte(value, region) {
if (value <= tableData.result[1].norte_min) if (value <= tableData.result[1].norte_min)
return 'green' return ''
else if (value >= tableData.result[0][`${region}_max`]) else if (value >= tableData.result[0][`${region}_max`])
return 'red' return ''
else if (tableData.result[0][`${region}_max`] - value > tableData.result[0][`${region}_max`]/2) else if (tableData.result[0][`${region}_max`] - value > tableData.result[0][`${region}_max`]/2)
return 'dullGreen' return ''
else if (tableData.result[1][`${region}_min`] - value <= tableData.result[1][`${region}_min`]) else if (tableData.result[1][`${region}_min`] - value <= tableData.result[1][`${region}_min`])
return 'dullRed' return ''
} }
function downloadCSVFile(csv, filename) { function downloadCSVFile(csv, filename) {

7
src/pages/resumoOperacao/index.tsx
View File

@ -147,7 +147,12 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
</thead> </thead>
<tbody> <tbody>
{ {
tableDataState.map((value, index) => { tableDataState.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
}).map((value, index) => {
return <> return <>
<tr> <tr>
<td key={index} className='tg-gceh'>{value.mes}</td> <td key={index} className='tg-gceh'>{value.mes}</td>

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

@ -56,12 +56,15 @@ export const TableView = styled.div`
word-break:normal; word-break:normal;
} }
.tg .tg-8oo6{ .tg .tg-8oo6{
color:#464a53; font-size:14px;
font-size:13px;
text-align:center; text-align:center;
vertical-align:top; vertical-align:top;
padding: 10px 18px; padding: 10px 18px;
text-align: center; text-align: center;
color: white;
background-color: #254F7F;
} }
.tg .tg-uulg{ .tg .tg-uulg{
background-color:#efefef; background-color:#efefef;

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

@ -39,11 +39,15 @@ export const PldTableView = styled.main`
word-break:normal; word-break:normal;
} }
.tg .tg-8oo6{ .tg .tg-8oo6{
font-size:13px; font-size:20px;
text-align:center; text-align:center;
vertical-align:top; vertical-align:top;
padding: 10px 18px; padding: 10px 18px;
text-align: center; text-align: center;
color: white;
background-color: #254F7F;
} }
.tg .tg-uulg{ .tg .tg-uulg{
background-color:#efefef; background-color:#efefef;

1
yarn.lock
View File

@ -4008,6 +4008,7 @@ path-type@^4.0.0:
patternomaly@^1.3.2: patternomaly@^1.3.2:
version "1.3.2" version "1.3.2"
resolved "https://registry.yarnpkg.com/patternomaly/-/patternomaly-1.3.2.tgz#70b8db17d7318ab1471cc43f94011bb866c54d09" resolved "https://registry.yarnpkg.com/patternomaly/-/patternomaly-1.3.2.tgz#70b8db17d7318ab1471cc43f94011bb866c54d09"
integrity sha512-70UhA5+ZrnNgdfDBKXIGbMHpP+naTzfx9vPT4KwIdhtWWs0x6FWZRJQMXXhV2jcK0mxl28FA/2LPAKArNG058Q==
pdfjs-dist@^2.7.570: pdfjs-dist@^2.7.570:
version "2.14.305" version "2.14.305"