File size: 1,246 Bytes
a1aef88 | 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 | import Plot from 'react-plotly.js';
import type { DistributionItem } from '../../types';
interface Props {
data: DistributionItem[];
title: string;
height?: number;
}
const COLORS = [
'#58a6ff', '#3fb950', '#f0883e', '#bc8cff', '#39d2c0',
'#f85149', '#d29922', '#79c0ff', '#56d364', '#ffa657',
];
export function DistributionChart({ data, title, height = 300 }: Props) {
return (
<Plot
data={[
{
labels: data.map((d) => d.label),
values: data.map((d) => d.count),
type: 'pie',
hole: 0.5,
marker: { colors: COLORS },
textfont: { color: '#e6edf3', size: 9 },
hovertemplate: '%{label}<br>Count: %{value}<br>%{percent}<extra></extra>',
},
]}
layout={{
title: { text: title, font: { color: '#e6edf3', size: 13 } },
paper_bgcolor: 'transparent',
plot_bgcolor: 'transparent',
font: { color: '#8b949e', size: 9 },
margin: { l: 10, r: 10, t: 40, b: 10 },
showlegend: true,
legend: { font: { size: 8, color: '#8b949e' }, bgcolor: 'transparent' },
height,
}}
config={{ responsive: true, displayModeBar: false }}
style={{ width: '100%' }}
/>
);
}
|