first commit

common/resources/client/charts/bar-chart.tsx

@@ -0,0 +1,60 @@
+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}
+    />
+  );
+}