update stories

web/src/app/test/page.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { ChartType, IColumnLabelFormat } from '@/api/asset_interfaces/metric/charts';
-import { BusterChart } from '@/components/ui/charts';
-import { Chart } from '@/components/ui/charts/BusterChartJS/core';
-import ChartDeferred from 'chartjs-plugin-deferred';
-import ChartJsAnnotationPlugin from 'chartjs-plugin-annotation';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { Title } from '@/components/ui/typography';
-
-export default function TestPage() {
-  const data = {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [
-      {
-        label: 'Amount',
-        data: [65, 59, 80, 81, 56, 55, 40]
-      }
-    ]
-  };
-
-  BusterChart;
-
-  return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      <BusterChart
-        data={[
-          { segment: 'A', value1: 302323, value2: 45 },
-          { segment: 'B', value1: 20340, value2: 25 },
-          { segment: 'C', value1: 5777770, value2: 30 }
-        ]}
-        selectedChartType={ChartType.Pie}
-        pieChartAxis={{
-          x: ['segment'],
-          y: ['value1', 'value2']
-        }}
-        barAndLineAxis={{
-          x: ['segment'],
-          y: ['value1', 'value2'],
-          category: []
-        }}
-        scatterAxis={{
-          x: ['segment'],
-          y: ['value1', 'value2'],
-          size: [],
-          category: []
-        }}
-        comboChartAxis={{
-          x: ['segment'],
-          y: ['value1', 'value2'],
-          category: []
-        }}
-        metricColumnId="test"
-        columnLabelFormats={{
-          segment: {
-            columnType: 'string',
-            style: 'string'
-          } satisfies IColumnLabelFormat,
-          value1: {
-            columnType: 'number',
-            style: 'number',
-            numberSeparatorStyle: ','
-          } satisfies IColumnLabelFormat,
-          value2: {
-            columnType: 'number',
-            style: 'number',
-            numberSeparatorStyle: ','
-          } satisfies IColumnLabelFormat
-        }}
-      />
-    </div>
-  );
-}

web/src/components/ui/charts/BusterChart.tsx

@@ -132,6 +132,7 @@ export const BusterChart: React.FC<BusterChartProps> = React.memo(
 
       const chartProps: BusterChartRenderComponentProps = {
         ...DEFAULT_CHART_CONFIG,
+        columnMetadata: props.columnMetadata ?? [],
         data,
         onChartMounted,
         onInitialAnimationEnd: onInitialAnimationEndPreflight,

web/src/components/ui/charts/stories/BusterChart.PieChart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { BusterChart } from '../BusterChart';
 import { ChartType } from '../../../../api/asset_interfaces/metric/charts/enum';
 import { IColumnLabelFormat } from '../../../../api/asset_interfaces/metric/charts/columnLabelInterfaces';
@@ -132,3 +133,40 @@ export const DonutMultipleValues: Story = {
     className: 'w-[500px] h-[500px]'
   }
 };
+
+export const ResizableContainer: Story = {
+  render: (args) => (
+    <div className="h-[500px] min-h-[200px] w-[500px] min-w-[200px] resize overflow-auto rounded-lg border border-gray-200 p-4">
+      <BusterChart {...args} className="h-full w-full" />
+    </div>
+  ),
+  args: {
+    selectedChartType: ChartType.Pie,
+    data: generatePieChartData(),
+    pieChartAxis: {
+      x: ['segment'],
+      y: ['value']
+    },
+    columnLabelFormats: {
+      segment: {
+        columnType: 'text',
+        style: 'string'
+      } satisfies IColumnLabelFormat,
+      value: {
+        columnType: 'number',
+        style: 'number',
+        numberSeparatorStyle: ','
+      } satisfies IColumnLabelFormat
+    } satisfies Record<keyof PieChartData, IColumnLabelFormat>,
+    pieDisplayLabelAs: 'percent',
+    pieDonutWidth: 0
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This story provides a resizable container. Drag the bottom-right corner to resize the chart.'
+      }
+    }
+  }
+};