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 2023-02-16 15:30:37 -03:00
parent 309c2b456a
commit a8dd640f39
3 changed files with 459 additions and 537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -1,12 +1,11 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'; import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels'; import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw } from 'patternomaly'
import React, { useEffect } from 'react';
import { Chart } from 'react-chartjs-2';
import 'chartjs-plugin-style'; import 'chartjs-plugin-style';
import { draw } from 'patternomaly';
import { Chart } from 'react-chartjs-2';
import { GrossAnualChartView } from './GrossAnualChartView';
import ChartTitle from '../ChartTitle'; import ChartTitle from '../ChartTitle';
import { GrossAnualChartView } from './GrossAnualChartView';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -18,7 +17,7 @@ ChartJS.register(
ChartDataLabels, ChartDataLabels,
); );
interface SingleBarInterface{ interface SingleBarInterface {
title: string, title: string,
subtitle: string, subtitle: string,
dataProps: any, dataProps: any,
@ -29,9 +28,9 @@ interface SingleBarInterface{
bruta?: boolean | undefined bruta?: boolean | undefined
} }
export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset, barLabel, miniature, bruta }: SingleBarInterface) { export function GrossAnualChart({ title, subtitle, dataProps = [], label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
function spacement(string) { 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 return spaces
} }
@ -46,20 +45,20 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
}, },
ticks: { ticks: {
font: { font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/125 size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
} }
}, },
}, },
y: { y: {
stacked: false, stacked: false,
max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada,0)) + 350, max: Number.parseInt(dataProps.reduce((prev, current) => prev.economia_acumulada < current.economia_acumulada ? prev.economia_acumulada : current.economia_acumulada, 0)) + 350,
min: 0, min: 0,
grid: { grid: {
display: false display: false
}, },
ticks: { ticks: {
font: { font: {
size: !miniature? window.innerWidth/90 : window.innerWidth/125 size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
} }
}, },
}, },
@ -78,22 +77,25 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
let sum = 0; let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data; const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => { dataArr.map(data => {
sum += data; sum += data;
}); });
const percentage = (dataProps[ctx.dataIndex]?.econ_percentual*100).toFixed(0)+"%"; const percentage = (dataProps[ctx.dataIndex]?.econ_percentual * 100).toFixed(0) + "%";
const result = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}${spacement(parseInt(value).toLocaleString('pt-br'))}` const result = `${spacement(parseInt(value).toLocaleString('pt-br'))}${percentage}\n${parseInt(value).toLocaleString('pt-br')}${spacement(parseInt(value).toLocaleString('pt-br'))}`
return value==null? null : result console.log(value == null ? null : result)
console.log(dataProps)
return value == null ? null : result
}, },
display: true, display: true,
anchor: "end", anchor: "end",
align: "end", align: "end",
font: { font: {
weight: 'bold', weight: 'bold',
size: !miniature? window.innerWidth/80 : window.innerWidth/125, size: !miniature ? window.innerWidth / 80 : window.innerWidth / 125,
}, },
color: (value) => { color: (value) => {
return value.dataset.label==='Consolidada'? '#fff' : '#255488' return value.dataset.label === 'Consolidada' ? '#fff' : '#255488'
}, },
}, },
legend: { legend: {
@ -106,8 +108,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
}, },
}; };
const labels: string[] = label.filter(function(item, pos) { const labels: string[] = label.filter((item, pos) => {
return label.indexOf(item) == pos; return label.indexOf(item) == pos;
}); });
const data: any = { const data: any = {
@ -141,11 +143,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
return 0 return 0
}) })
}, },
data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => { data: [].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
if (value.dad_estimado) return parseFloat(value?.economia_acumulada)
return parseFloat(value.economia_acumulada)
else
return 0
})), })),
borderRadius: 10, borderRadius: 10,
backgroundColor: draw('diagonal-right-left', '#C2d5fb'), backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
@ -156,7 +155,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
return ( return (
<GrossAnualChartView> <GrossAnualChartView>
<ChartTitle title={title} subtitle={subtitle} /> <ChartTitle title={title} subtitle={subtitle} />
<Chart options={options} data={data} type='bar' height={150}/> <Chart options={options} data={data} type='bar' height={150} />
</GrossAnualChartView> </GrossAnualChartView>
) )
} }

39
src/components/graph/grossMensalChart/GrossMensalChart.tsx
View File

@ -1,23 +1,16 @@
import React, { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2'
import { import {
Chart as ChartJS, BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title,
CategoryScale, Tooltip
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js' } from 'chart.js'
import { Chart as ChartJs } from 'react-chartjs-2'
import document from 'next/document'
import { draw, generate } from 'patternomaly' import { draw } from 'patternomaly'
import { GrossMensalChartView } from './GrossMensalChartView'
import ChartTitle from '../ChartTitle' import ChartTitle from '../ChartTitle'
import { config } from '../config' import { GrossMensalChartView } from './GrossMensalChartView'
// import { data } from './LineBarChart'; // import { data } from './LineBarChart';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend) ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
@ -48,14 +41,14 @@ export default function GrossMensalChart({
string.length === 1 string.length === 1
? '' ? ''
: string.length === 2 : string.length === 2
? '' ? ''
: string.length === 3 : string.length === 3
? ' ' ? ' '
: string.length === 4 : string.length === 4
? ' ' ? ' '
: string.length === 5 : string.length === 5
? ' ' ? ' '
: '' : ''
return spaces return spaces
} }
@ -80,7 +73,7 @@ export default function GrossMensalChart({
responsive: true, responsive: true,
scales: { scales: {
x: { x: {
stacked: false, stacked: true,
grid: { grid: {
display: false display: false
}, },
@ -91,7 +84,7 @@ export default function GrossMensalChart({
} }
}, },
y: { y: {
stacked: false, stacked: true,
grid: { grid: {
display: false display: false
}, },

912
src/pages/telemetria/index.tsx
View File

File diff suppressed because it is too large Load Diff