Created PieChart component. Refactored charts.

src/components/charts/BarChart.tsx

@@ -0,0 +1,85 @@
+import { useTheme } from 'components/hooks';
+import Chart, { ChartProps } from 'components/charts/Chart';
+import { renderNumberLabels } from 'lib/charts';
+import { useState } from 'react';
+import BarChartTooltip from 'components/charts/BarChartTooltip';
+
+export interface BarChartProps extends ChartProps {
+  unit: string;
+  stacked?: boolean;
+  renderXLabel?: (label: string, index: number, values: any[]) => string;
+  renderYLabel?: (label: string, index: number, values: any[]) => string;
+  XAxisType?: string;
+  YAxisType?: string;
+}
+
+export function BarChart(props: BarChartProps) {
+  const [tooltip, setTooltip] = useState(null);
+  const { colors } = useTheme();
+  const {
+    renderXLabel,
+    renderYLabel,
+    unit,
+    XAxisType = 'time',
+    YAxisType = 'linear',
+    stacked = false,
+  } = props;
+
+  const options = {
+    scales: {
+      x: {
+        type: XAxisType,
+        stacked: true,
+        time: {
+          unit,
+        },
+        grid: {
+          display: false,
+        },
+        border: {
+          color: colors.chart.line,
+        },
+        ticks: {
+          color: colors.chart.text,
+          autoSkip: false,
+          maxRotation: 0,
+          callback: renderXLabel,
+        },
+      },
+      y: {
+        type: YAxisType,
+        min: 0,
+        beginAtZero: true,
+        stacked,
+        grid: {
+          color: colors.chart.line,
+        },
+        border: {
+          color: colors.chart.line,
+        },
+        ticks: {
+          color: colors.chart.text,
+          callback: renderYLabel || renderNumberLabels,
+        },
+      },
+    },
+  };
+
+  const handleTooltip = ({ tooltip }: { tooltip: any }) => {
+    const { opacity } = tooltip;
+
+    setTooltip(opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} /> : null);
+  };
+
+  return (
+    <Chart
+      {...props}
+      type="bar"
+      chartOptions={options}
+      tooltip={tooltip}
+      onTooltip={handleTooltip}
+    />
+  );
+}
+
+export default BarChart;

src/components/charts/BarChartTooltip.tsx

@@ -0,0 +1,32 @@
+import { formatDate } from 'lib/date';
+import { Flexbox, StatusLight } from 'react-basics';
+import { formatLongNumber } from 'lib/format';
+import { useLocale } from 'components/hooks';
+
+const formats = {
+  millisecond: 'T',
+  second: 'pp',
+  minute: 'p',
+  hour: 'h:mm aaa - PP',
+  day: 'PPPP',
+  week: 'PPPP',
+  month: 'LLLL yyyy',
+  quarter: 'qqq',
+  year: 'yyyy',
+};
+
+export default function BarChartTooltip({ tooltip, unit }) {
+  const { locale } = useLocale();
+  const { labelColors, dataPoints } = tooltip;
+
+  return (
+    <Flexbox direction="column" gap={10}>
+      <div>{formatDate(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
+      <div>
+        <StatusLight color={labelColors?.[0]?.backgroundColor}>
+          {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
+        </StatusLight>
+      </div>
+    </Flexbox>
+  );
+}

src/components/charts/Chart.module.css

@@ -0,0 +1,11 @@
+.chart {
+  position: relative;
+  height: 400px;
+  overflow: hidden;
+}
+
+.tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

src/components/charts/Chart.tsx

@@ -0,0 +1,141 @@
+import { useState, useRef, useEffect, ReactNode } from 'react';
+import { Loading } from 'react-basics';
+import classNames from 'classnames';
+import ChartJS, { LegendItem } from 'chart.js/auto';
+import HoverTooltip from 'components/common/HoverTooltip';
+import Legend from 'components/metrics/Legend';
+import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import styles from './Chart.module.css';
+
+export interface ChartProps {
+  type?: 'bar' | 'bubble' | 'doughnut' | 'pie' | 'line' | 'polarArea' | 'radar' | 'scatter';
+  data?: object;
+  isLoading?: boolean;
+  animationDuration?: number;
+  updateMode?: string;
+  onCreate?: (chart: any) => void;
+  onUpdate?: (chart: any) => void;
+  onTooltip?: (model: any) => void;
+  className?: string;
+  chartOptions?: { [key: string]: any };
+  tooltip?: ReactNode;
+}
+
+export function Chart({
+  type,
+  data,
+  isLoading = false,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  tooltip,
+  updateMode,
+  onCreate,
+  onUpdate,
+  onTooltip,
+  className,
+  chartOptions,
+}: ChartProps) {
+  const canvas = useRef();
+  const chart = useRef(null);
+  const [legendItems, setLegendItems] = useState([]);
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: {
+      duration: animationDuration,
+      resize: {
+        duration: 0,
+      },
+      active: {
+        duration: 0,
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: false,
+        external: onTooltip,
+      },
+    },
+    ...chartOptions,
+  };
+
+  const createChart = (data: any) => {
+    ChartJS.defaults.font.family = 'Inter';
+
+    chart.current = new ChartJS(canvas.current, {
+      type,
+      data,
+      options,
+    });
+
+    onCreate?.(chart.current);
+
+    setLegendItems(chart.current.legend.legendItems);
+  };
+
+  const updateChart = (data: any) => {
+    chart.current.data.datasets.forEach((dataset: { data: any }, index: string | number) => {
+      dataset.data = data?.datasets[index]?.data;
+    });
+
+    chart.current.options = options;
+
+    // Allow config changes before update
+    onUpdate?.(chart.current);
+
+    chart.current.update(updateMode);
+
+    setLegendItems(chart.current.legend.legendItems);
+  };
+
+  useEffect(() => {
+    if (data) {
+      if (!chart.current) {
+        createChart(data);
+      } else {
+        updateChart(data);
+      }
+    }
+  }, [data]);
+
+  const handleLegendClick = (item: LegendItem) => {
+    if (type === 'bar') {
+      const { datasetIndex } = item;
+      const meta = chart.current.getDatasetMeta(datasetIndex);
+
+      meta.hidden =
+        meta.hidden === null ? !chart.current.data.datasets[datasetIndex]?.hidden : null;
+    } else {
+      const { index } = item;
+      const meta = chart.current.getDatasetMeta(0);
+      const hidden = !!meta.data[index].hidden;
+
+      meta.data[index].hidden = !hidden;
+      chart.current.legend.legendItems[index].hidden = !hidden;
+    }
+
+    chart.current.update(updateMode);
+
+    setLegendItems(chart.current.legend.legendItems);
+  };
+
+  return (
+    <>
+      <div className={classNames(styles.chart, className)}>
+        {isLoading && <Loading position="page" icon="dots" />}
+        <canvas ref={canvas} />
+      </div>
+      <Legend items={legendItems} onClick={handleLegendClick} />
+      {tooltip && (
+        <HoverTooltip>
+          <div className={styles.tooltip}>{tooltip}</div>
+        </HoverTooltip>
+      )}
+    </>
+  );
+}
+
+export default Chart;

src/components/charts/PieChart.tsx

@@ -0,0 +1,27 @@
+import { Chart, ChartProps } from 'components/charts/Chart';
+import { useState } from 'react';
+import { StatusLight } from 'react-basics';
+import { formatLongNumber } from 'lib/format';
+
+export interface PieChartProps extends ChartProps {
+  type?: 'doughnut' | 'pie';
+}
+
+export default function PieChart(props: PieChartProps) {
+  const [tooltip, setTooltip] = useState(null);
+  const { type } = props;
+
+  const handleTooltip = ({ tooltip }) => {
+    const { labelColors, dataPoints } = tooltip;
+
+    setTooltip(
+      tooltip.opacity ? (
+        <StatusLight color={labelColors?.[0]?.backgroundColor}>
+          {formatLongNumber(dataPoints?.[0]?.raw)} {dataPoints?.[0]?.label}
+        </StatusLight>
+      ) : null,
+    );
+  };
+
+  return <Chart {...props} type={type || 'pie'} tooltip={tooltip} onTooltip={handleTooltip} />;
+}