CS-282: Create FunnelChart Component

.changeset/add-funnel-chart.md

@@ -0,0 +1,5 @@
+---
+'@embeddable.com/remarkable-ui': minor
+---
+
+Add FunnelChart component

package.json

@@ -73,6 +73,7 @@
     "@tabler/icons-react": "^3.34.1",
     "auto-text-size": "^0.2.3",
     "chart.js": "^4.5.0",
+    "chartjs-chart-funnel": "^4.2.5",
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "clsx": "^2.1.1",

src/components/charts/funnel/FunnelChart.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { FunnelChart } from './FunnelChart';
+import { funnelDataMock } from './funnel.mock';
+import { decoratorsResizeCard, decoratorsSquare } from '../../../storybook.constants';
+
+const meta = {
+  title: 'Charts/FunnelChart',
+  component: FunnelChart,
+  args: {
+    data: funnelDataMock,
+    showValueLabels: true,
+    showPercentage: false,
+    percentageDecimalPlaces: 1,
+  },
+} satisfies Meta<typeof FunnelChart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: decoratorsSquare,
+};
+
+export const Resize: Story = {
+  decorators: decoratorsResizeCard,
+};

src/components/charts/funnel/FunnelChart.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { FunnelChart } from './FunnelChart';
+import { funnelDataMock } from './funnel.mock';
+
+vi.mock('react-chartjs-2', async () => {
+  const { forwardRef } = await import('react');
+  return {
+    Chart: forwardRef(
+      (
+        { onClick }: { onClick?: React.MouseEventHandler<HTMLCanvasElement> },
+        ref: React.Ref<HTMLCanvasElement>,
+      ) => <canvas data-testid="funnel-chart" onClick={onClick} ref={ref} />,
+    ),
+    getElementAtEvent: vi.fn(() => []),
+    getElementsAtEvent: vi.fn(() => []),
+    getDatasetAtEvent: vi.fn(() => []),
+  };
+});
+
+const MOCK_DATA = funnelDataMock;
+
+describe('FunnelChart', () => {
+  describe('rendering', () => {
+    it('renders the chart canvas', () => {
+      render(<FunnelChart data={MOCK_DATA} />);
+
+      expect(screen.getByTestId('funnel-chart')).toBeInTheDocument();
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onClick with the event and chartRef', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(<FunnelChart data={MOCK_DATA} onClick={handleClick} />);
+
+      await user.click(screen.getByTestId('funnel-chart'));
+
+      expect(handleClick).toHaveBeenCalledWith({
+        event: expect.objectContaining({ type: 'click' }),
+        elementAtEvent: [],
+        elementsAtEvent: [],
+        datasetAtEvent: [],
+      });
+    });
+
+    it('does not throw when onClick is not provided', async () => {
+      const user = userEvent.setup();
+
+      render(<FunnelChart data={MOCK_DATA} />);
+
+      await user.click(screen.getByTestId('funnel-chart'));
+    });
+  });
+});

src/components/charts/funnel/FunnelChart.tsx

@@ -0,0 +1,57 @@
+import { FC, useRef } from 'react';
+import { Chart } from 'react-chartjs-2';
+import { buildChartjsOnClick } from '../chartjs.utils';
+import { Chart as ChartJS, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
+import { FunnelController, TrapezoidElement } from 'chartjs-chart-funnel';
+import { getFunnelChartData, getFunnelChartOptions } from './funnel.utils';
+import { BaseFunnelChartProps } from './funnel.types';
+import styles from '../charts.module.css';
+import { mergician } from 'mergician';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+ChartJS.register(
+  FunnelController,
+  TrapezoidElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+  ChartDataLabels,
+);
+
+export type FunnelChartProps = BaseFunnelChartProps;
+
+export const FunnelChart: FC<FunnelChartProps> = ({
+  data,
+  options = {},
+  onClick,
+  showLegend = true,
+  showTooltips = true,
+  showValueLabels = true,
+  showPercentage = false,
+  percentageDecimalPlaces = 1,
+}) => {
+  const chartRef = useRef(null);
+  const funnelOptions = mergician(
+    getFunnelChartOptions({
+      showLegend,
+      showTooltips,
+      showValueLabels,
+      showPercentage,
+      percentageDecimalPlaces,
+    }),
+    options,
+  );
+
+  return (
+    <div className={styles.chartContainer}>
+      <Chart
+        ref={chartRef}
+        type="funnel"
+        data={getFunnelChartData(data)}
+        options={funnelOptions}
+        onClick={buildChartjsOnClick(chartRef, onClick)}
+      />
+    </div>
+  );
+};

src/components/charts/funnel/funnel.mock.ts

@@ -0,0 +1,8 @@
+export const funnelDataMock = {
+  labels: ['Near Misses', 'Injury/Illness', 'Recordable', 'DART'],
+  datasets: [
+    {
+      data: [33, 30, 14, 5],
+    },
+  ],
+};

src/components/charts/funnel/funnel.types.ts

@@ -0,0 +1,17 @@
+import 'chartjs-chart-funnel';
+import { ChartData, ChartOptions } from 'chart.js';
+import { ChartClickArgs } from '../charts.types';
+
+export type FunnelChartConfigurationProps = {
+  showLegend?: boolean;
+  showTooltips?: boolean;
+  showValueLabels?: boolean;
+  showPercentage?: boolean;
+  percentageDecimalPlaces?: number;
+};
+
+export type BaseFunnelChartProps = {
+  data: ChartData<'funnel'>;
+  options?: Partial<ChartOptions<'funnel'>>;
+  onClick?: (args: ChartClickArgs) => void;
+} & FunnelChartConfigurationProps;