You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.7 KiB
83 lines
1.7 KiB
import React from 'react';
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
} from 'chart.js';
|
|
import { Bar } from 'react-chartjs-2';
|
|
import { PRIMARY_COLOR } from '../../_constants/common';
|
|
|
|
ChartJS.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
);
|
|
|
|
export function VerticalBarChart({data = [], labels = []}) {
|
|
if (!data?.length) {
|
|
return null
|
|
}
|
|
let maxValue = 0;
|
|
data?.map(item => {
|
|
if (item > maxValue) {
|
|
maxValue = item;
|
|
}
|
|
})
|
|
|
|
const options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
datalabels: {
|
|
anchor: 'end', // Position of the labels (start, end, center, etc.)
|
|
align: 'end', // Alignment of the labels (start, end, center, etc.)
|
|
color: 'blue', // Color of the labels
|
|
font: {
|
|
weight: 'bold',
|
|
},
|
|
formatter: function (value, context) {
|
|
return value; // Display the actual data value
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
max: maxValue < 5 ? 5 : maxValue < 20 ? maxValue + 5 : maxValue + 10,
|
|
ticks: {
|
|
callback: function(value) {if (value % 1 === 0) {return value;}},
|
|
stepSize: 1,
|
|
precision: 0,
|
|
}
|
|
},
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
callback: function(value) {if (value % 1 === 0) {return value;}},
|
|
stepSize: 1,
|
|
precision: 0,
|
|
}
|
|
}]
|
|
},
|
|
};
|
|
|
|
return <Bar options={options} data={{
|
|
labels,
|
|
datasets: [
|
|
{
|
|
data,
|
|
backgroundColor: PRIMARY_COLOR,
|
|
barPercentage: 0.4,
|
|
},
|
|
],
|
|
}} />;
|
|
}
|
|
|