File "bar-chart-20260314162945.tsx"
Full Path: /home/markqprx/iniasli.pro/client/charts/bar-chart-20260314162945.tsx
File size: 1.88 KB
MIME-type: text/plain
Charset: utf-8
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}
/>
);
}