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

fixing chart

Browse Source
This commit is contained in:
joseCorte-exe 2022-07-04 17:03:01 -03:00
parent 4d308ba445
commit 725b70d88f
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { Bar, Line } from 'react-chartjs-2'; import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
import { import {
Chart as ChartJS, Chart as ChartJS,
CategoryScale, CategoryScale,
@ -54,9 +54,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 'black'
},
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;
@ -86,35 +84,37 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
}, },
}; };
const data = { const data: any = {
labels, labels,
datasets: [ datasets: [
{ {
type: 'bar',
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: '#255488'
// backgroundColor: (value, ctx) => { // backgroundColor: (value, ctx) => {
// return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb'); // return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
// }, // },
}, },
{ {
type: 'bar',
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: '#255488' // backgroundColor: '#255488'
// backgroundColor: (value, ctx) => { // backgroundColor: (value, ctx) => {
// return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb'); // return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
// }, // },
}, },
{ {
type: 'line', type: 'line',
label: 'Acumulado', label: ['Acumulado'],
backgroundColor: '#255488', // backgroundColor: '#255488',
data: [], data: [],
}, },
{ {
type: 'line', type: 'line',
label: 'Estimado', label: ['Estimado'],
backgroundColor: draw('diagonal-right-left', '#C2d5fb'), // backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
data: [], data: [],
} }
], ],
@ -129,10 +129,9 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
/> />
</RenderIf> */} </RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} /> <ChartTitle title={title} subtitle={subtitle} />
<Bar <ChartJs
options={options} options={options}
data={data} data={data} type={'bar'} />
/>
</ChartView> </ChartView>
) )
} }