107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
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, Chart } from 'react-chartjs-2';
|
|
// import Chart from './Chart';
|
|
|
|
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,
|
|
year?: boolean | undefined,
|
|
month?: boolean | undefined,
|
|
dataset1?: string,
|
|
}
|
|
|
|
export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) {
|
|
|
|
const labels = label
|
|
|
|
const options: any = {
|
|
responsive: true,
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
},
|
|
},
|
|
plugins: {
|
|
datalabels: {
|
|
display: false,
|
|
},
|
|
legend: {
|
|
position: 'bottom' as const,
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: '',
|
|
},
|
|
},
|
|
};
|
|
|
|
const data: any = {
|
|
labels: dataProps.map(value => value.day_formatted),
|
|
datasets: [
|
|
{
|
|
type: 'line' as const,
|
|
label: 'reativa',
|
|
borderColor: '#F00' ,
|
|
fill: false,
|
|
borderDash: [5, 5],
|
|
backgroundColor: 'rgba(255, 145, 0, 0)' ,
|
|
pointBorderColor: 'rgba(255, 145, 0, 0)',
|
|
data: dataProps.map(value => value.reativa),
|
|
},
|
|
{
|
|
type: 'bar' as const,
|
|
label: 'consumo',
|
|
backgroundColor: '#74acec',
|
|
data: dataProps.map(value => value.consumo),
|
|
},
|
|
// {
|
|
// type: 'line' as const,
|
|
// label: 'Livre',
|
|
// // backgroundColor: '#255488',
|
|
// backgroundColor: (value, ctx) => {
|
|
// return '#255488'
|
|
// },
|
|
// data: dataProps.map(value => {
|
|
// return parseInt(value.custo_livre)
|
|
// }),
|
|
// },
|
|
],
|
|
}
|
|
|
|
return (
|
|
<ChartView>
|
|
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
|
|
<div>
|
|
<Chart type='bar' options={options} data={data} />
|
|
</div>
|
|
</ChartView>
|
|
)
|
|
}
|