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

add hachurado chart

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-19 17:12:39 -03:00
parent 60ad6c4478
commit ffb92556d7
17 changed files with 71 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"next": "12.1.6", "next": "12.1.6",
"npm": "^8.10.0", "npm": "^8.10.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"patternomaly": "^1.3.2",
"react": "18.1.0", "react": "18.1.0",
"react-calendar": "^3.7.0", "react-calendar": "^3.7.0",
"react-chartjs-2": "^4.1.0", "react-chartjs-2": "^4.1.0",

18
src/components/graph/LineBarChart.tsx
View File

@ -13,6 +13,7 @@ import { Chart } from 'react-chartjs-2';
import faker from 'faker'; import faker from 'faker';
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle'; import ChartTitle from './ChartTitle';
import pattern from 'patternomaly'
ChartJS.register( ChartJS.register(
LinearScale, LinearScale,
@ -68,12 +69,16 @@ interface LineBarChartInterface {
dataset1?: string, dataset1?: string,
dataset2?: string, dataset2?: string,
dataset3?: string, dataset3?: string,
barLabel?: boolean | undefined barLabel?: boolean | undefined,
hashurado?: boolean | undefined,
} }
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel }: LineBarChartInterface) { export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null); const chartRef = useRef<ChartJS>(null);
const currentTime = new Date();
const labels = label const labels = label
const options: any = { const options: any = {
@ -112,13 +117,18 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
{ {
type: 'bar' as const, type: 'bar' as const,
label: dataset2? dataset2 : 'Dataset 2', label: dataset2? dataset2 : 'Dataset 2',
backgroundColor: '#C2D5FB', backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
},
data: data3.map(value => value), data: data3.map(value => value),
}, },
{ {
type: 'bar' as const, type: 'bar' as const,
label: dataset3? dataset3 : 'Dataset 2', label: dataset3? dataset3 : 'Dataset 2',
backgroundColor: '#255488', // backgroundColor: '#255488',
backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
},
data: data2.map(value => value), data: data2.map(value => value),
}, },
], ],

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

@ -12,6 +12,7 @@ import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels'; import ChartDataLabels from 'chartjs-plugin-datalabels';
import { ChartView } from './ChartView'; import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle'; import ChartTitle from './ChartTitle';
import pattern from 'patternomaly'
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -26,30 +27,44 @@ ChartJS.register(
interface SingleBarInterface{ interface SingleBarInterface{
title: string, title: string,
subtitle: string, subtitle: string,
dataProps: any, dataProps: Array<number>,
label: any, label: Array<string>,
dataset: string, dataset: string,
barLabel?: boolean | undefined, barLabel?: boolean | undefined,
year?: boolean | undefined,
day?: boolean | undefined,
dataset1?: string,
} }
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel }: SingleBarInterface) { export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, day }: SingleBarInterface) {
const options: any = { const currentTime = new Date();
const options: object = {
responsive: true, responsive: true,
plugins: { plugins: {
datalabels: { datalabels: {
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (value*100 / sum).toFixed(2)+"%";
const result = ` ${value}\n ${percentage}`
return result;
},
display: true, display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)", color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end", anchor: "end",
offset: -20, offset: -35,
align: "start" align: "start"
}, },
legend: { legend: {
position: 'bottom' as const, position: 'bottom' as const,
}, },
title: { title: {
display: true, display: false,
text: '', text: '',
}, },
}, },
@ -57,14 +72,20 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
const labels = label; const labels = label;
const data = { const data: any = {
labels, labels,
datasets: [ datasets: [
{ {
label: dataset, label: dataset,
data: dataProps.map(value => value), data: dataProps.map(value => value),
backgroundColor: '#255488', backgroundColor: (value, ctx) => {
return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : pattern.draw('diagonal', '#C2D5FB') : day? parseInt(label[value.dataIndex])<=currentTime.getDay()? '#255488' : pattern.draw('diagonal', '#C2D5FB') : null
}, },
},
{
label: dataset1,
backgroundColor: pattern.draw('diagonal', '#C2D5FB')
}
], ],
}; };
return ( return (

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

@ -105,7 +105,7 @@ export const ChartCardView = styled.article`
@media (max-width: 1640px) { @media (max-width: 1640px) {
font-size: 13px; font-size: 13px;
min-height: 32rem; min-height: 26rem;
.info { .info {
max-width: 4rem; max-width: 4rem;

2
src/pages/accumulatedSavings.tsx
View File

@ -18,7 +18,7 @@ export default function AccumulatedSavings() {
<Header name='' /> <Header name='' />
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' /> <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section> <section>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel /> <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel day/>
</section> </section>
</AccumulatedSavingsView> </AccumulatedSavingsView>
) )

2
src/pages/chartTelemetry.tsx
View File

@ -24,7 +24,7 @@ export default function chartTelemetry() {
<section className='chartContainer' > <section className='chartContainer' >
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} /> <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
<LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} /> <LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} /> <SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' day/>
<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/> <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/>
</section> </section>
</ChatTelemetryView> </ChatTelemetryView>

8
src/pages/dashboard.tsx
View File

@ -39,16 +39,16 @@ export default function Dashboard() {
<section className='dashboard'> <section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo'> <GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataProps={dataEconomiaBruta.data} /> <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
</GraphCard> </GraphCard>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar> <GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} /> <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel day/>
</GraphCard> </GraphCard>
<GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar> <GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='2020' dataset3='2021' title='Custo Estimado' subtitle='(Valores em R$/MWh)' /> <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
</GraphCard> </GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'> <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} /> <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel/>
</GraphCard> </GraphCard>
</section> </section>
</DashboardView> </DashboardView>

2
src/pages/estimatedCost.tsx
View File

@ -18,7 +18,7 @@ export default function EstimatedCost() {
<Header name='' /> <Header name='' />
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' /> <PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
<section> <section>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel /> <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
</section> </section>
</EstimatedCostView> </EstimatedCostView>
) )

2
src/pages/grossSavings.tsx
View File

@ -18,7 +18,7 @@ export default function GrossSavings() {
<Header name='' /> <Header name='' />
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' /> <PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section> <section>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataProps={dataEconomiaBruta.data} barLabel /> <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
</section> </section>
</GrossSavingsView> </GrossSavingsView>
) )

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

@ -204,7 +204,7 @@ export default function region() {
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' /> <BasicButton title='Download (csv)' />
</section> </section>
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'line'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' /> <LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
</PldGraphView> </PldGraphView>
</RenderIf> </RenderIf>

2
src/services/consumoDiscretizadoBar.js
View File

@ -1,5 +1,5 @@
export const ConsumoDecretizadoBar = { export const ConsumoDecretizadoBar = {
data : 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, [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, 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 155, 158, 161, 164, 168, 172, 176, 200, 203, 206, 209, 213, 217, 221, 223, 226, 229, 231, 234, 238, 240, 244, 248

2
src/services/consumoDiscretizadoLine.js
View File

@ -3,9 +3,11 @@ export const ConsumoDecretizadoLine = {
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,
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, 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,
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', 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',
'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', ]

8
src/services/consumoEstimado.js
View File

@ -1,6 +1,6 @@
export const ConsumoEstimado = { export const ConsumoEstimado = {
data : [245,202, 176, 150, 102, 138, 155, 177, 228, 161, 316, 335], 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], 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], 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'] label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']
} }

2
src/services/economiaAcumulada.js
View File

@ -10,6 +10,6 @@ export const EconomiaAcumulada = {
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'], label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'],
label1: ['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'], 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', '25', '26', '27', '28', '29', '30'],
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',] 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',]
} }

4
src/services/economiaBruta.js
View File

@ -1,4 +1,4 @@
export const dataEconomiaBruta = { export const dataEconomiaBruta = {
data: [872, 1615, 2196, 2930, 3838, 4814, 5853], data: [872, 1615, 2196, 2930, 3838, 4814, 5700],
labels: ['até 2020', '2021', '2022', '2023', '2024', '2025', '2026'] labels: ['2020', '2021', '2022', '2023', '2024', '2025', '2026']
} }

2
src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
View File

@ -9,6 +9,8 @@ export const ChatTelemetryView = styled.main`
width: 100%; width: 100%;
padding-top: 0px!important;
.chartContainer { .chartContainer {
display: grid; display: grid;

4
yarn.lock
View File

@ -3796,6 +3796,10 @@ path-type@^4.0.0:
version "4.0.0" version "4.0.0"
resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz" resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
patternomaly@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/patternomaly/-/patternomaly-1.3.2.tgz#70b8db17d7318ab1471cc43f94011bb866c54d09"
picocolors@^1.0.0: picocolors@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz" resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"