61 lines
1.9 KiB
TypeScript
Executable File
61 lines
1.9 KiB
TypeScript
Executable File
import {BaseChart, BaseChartProps} from './base-chart';
|
|
import {ChartData, ChartOptions} from 'chart.js';
|
|
import {ChartColors} from './chart-colors';
|
|
import {useSelectedLocale} from '../i18n/selected-locale';
|
|
import {FormattedDatasetItem} from './data/formatted-dataset-item';
|
|
import {useMemo} from 'react';
|
|
import {formatReportData} from './data/format-report-data';
|
|
import {DatasetItem, ReportMetric} from '../admin/analytics/report-metric';
|
|
import clsx from 'clsx';
|
|
|
|
interface BarChartProps extends Omit<BaseChartProps<'bar'>, 'type' | 'data'> {
|
|
direction?: 'horizontal' | 'vertical';
|
|
individualBarColors?: boolean;
|
|
data?: ReportMetric<DatasetItem>;
|
|
}
|
|
export function BarChart({
|
|
data,
|
|
direction = 'vertical',
|
|
individualBarColors = false,
|
|
className,
|
|
...props
|
|
}: BarChartProps) {
|
|
const {localeCode} = useSelectedLocale();
|
|
const formattedData: ChartData<'bar', FormattedDatasetItem[]> =
|
|
useMemo(() => {
|
|
const formattedData = formatReportData(data, {localeCode});
|
|
formattedData.datasets = formattedData.datasets.map((dataset, i) => ({
|
|
...dataset,
|
|
backgroundColor: individualBarColors
|
|
? ChartColors.map(c => c[1])
|
|
: ChartColors[i][1],
|
|
borderColor: individualBarColors
|
|
? ChartColors.map(c => c[0])
|
|
: ChartColors[i][0],
|
|
borderWidth: 2,
|
|
}));
|
|
return formattedData;
|
|
}, [data, localeCode, individualBarColors]);
|
|
|
|
const isHorizontal = direction === 'horizontal';
|
|
const options: ChartOptions<'bar'> = useMemo(() => {
|
|
return {
|
|
indexAxis: isHorizontal ? 'y' : 'x',
|
|
parsing: {
|
|
xAxisKey: isHorizontal ? 'value' : 'label',
|
|
yAxisKey: isHorizontal ? 'label' : 'value',
|
|
},
|
|
};
|
|
}, [isHorizontal]);
|
|
|
|
return (
|
|
<BaseChart
|
|
type="bar"
|
|
className={clsx(className, 'min-w-500')}
|
|
data={formattedData}
|
|
options={options}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|