Spaces:
Runtime error
Runtime error
File size: 1,989 Bytes
56b6519 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { t } from 'i18next';
import React from 'react';
import { Doughnut } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
type SeverityData = {
name: string;
value: number;
color: string;
};
type Props = {
data: SeverityData[];
total: number;
};
export const SeverityPieChart: React.FC<Props> = ({ data, total }) => {
if (!data.length) {
return (
<p className="text-sm text-gray-500">{t('err.noMatchingRecords')}</p>
);
}
const chartData = {
labels: data.map(d => d.name),
datasets: [
{
data: data.map(d => d.value),
backgroundColor: data.map(d => d.color),
borderColor: data.map(d => d.color),
borderWidth: 1,
hoverOffset: 4,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'bottom' as const,
title: {
display: true,
text: t('filters'),
color: 'white' as const,
padding: {
top: 20,
},
font: {
weight: 'bold' as const,
size: 15,
},
},
},
datalabels: {
formatter: (value: number) => {
let total = 0;
data.forEach(d => {
total += d.value;
});
const percentage = ((value / total) * 100).toFixed(2);
if (percentage === '0.00' || percentage === 'NaN') {
return '';
}
return percentage + '%';
},
color: '#eee' as const,
},
},
};
return (
<>
<p className="text-sm text-gray-500 mb-4">
{total} {t('foundInTotal')}
</p>
<div className="h-auto w-fit mx-auto">
<Doughnut data={chartData} options={options} />
</div>
</>
);
};
|