update some stories

web/.storybook/preview.tsx

@@ -11,6 +11,7 @@ initialize();
 const preview: Preview = {
   parameters: {
     controls: {
+      expanded: true,
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i

web/src/api/asset_interfaces/metric/charts/interfaces.ts

@@ -10,7 +10,7 @@ export type BusterChartProps = {
   animateLegend?: boolean;
   id?: string;
   error?: string;
-  columnMetadata: ColumnMetaData[] | undefined;
+  columnMetadata?: ColumnMetaData[];
   useRapidResizeObserver?: boolean;
   editable?: boolean;
   onInitialAnimationEnd?: () => void;

web/src/api/asset_interfaces/metric/charts/tickInterfaces.ts

@@ -1,30 +1,101 @@
+/**
+ * Configuration options for the Y-axis of a chart.
+ */
 export type YAxisConfig = {
-  yAxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
+  /** Whether to show the axis label. Defaults to true. */
-  yAxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
+  yAxisShowAxisLabel?: boolean;
-  yAxisAxisTitle?: string | null; //OPTIONAL: default is the name of the first column that is plotted on the Y-axis. Default is null.
+
-  yAxisStartAxisAtZero?: boolean | null; //OPTIONAL: default is true.
+  /** Whether to show the axis title. Defaults to true. */
-  yAxisScaleType?: 'log' | 'linear'; //OPTIONAL: default is linear.
+  yAxisShowAxisTitle?: boolean;
+
+  /**
+   * The title of the Y-axis.
+   * @default null - Uses the name of the first column plotted on the Y-axis
+   */
+  yAxisAxisTitle?: string | null;
+
+  /** Whether to start the axis at zero. Defaults to true. */
+  yAxisStartAxisAtZero?: boolean | null;
+
+  /**
+   * The scale type for the Y-axis.
+   * @default "linear"
+   */
+  yAxisScaleType?: 'log' | 'linear';
 };
 
 //The y2 (or right axis) Y-axis is used for secondary Y-axes in a combo chart.
+/**
+ * Configuration options for the secondary Y-axis (Y2) in a combo chart.
+ */
 export type Y2AxisConfig = {
-  y2AxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
+  /** Whether to show the axis label. Defaults to true. */
-  y2AxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
+  y2AxisShowAxisLabel?: boolean;
-  y2AxisAxisTitle?: string | null; //OPTIONAL: default is the name of the first column that is plotted on the Y-axis. Default is null.
+
-  y2AxisStartAxisAtZero?: boolean; //OPTIONAL: default is true.
+  /** Whether to show the axis title. Defaults to true. */
-  y2AxisScaleType?: 'log' | 'linear'; //OPTIONAL: default is linear.
+  y2AxisShowAxisTitle?: boolean;
+
+  /**
+   * The title of the secondary Y-axis.
+   * @default null - Uses the name of the first column plotted on the Y2-axis
+   */
+  y2AxisAxisTitle?: string | null;
+
+  /** Whether to start the axis at zero. Defaults to true. */
+  y2AxisStartAxisAtZero?: boolean;
+
+  /**
+   * The scale type for the secondary Y-axis.
+   * @default "linear"
+   */
+  y2AxisScaleType?: 'log' | 'linear';
 };
 
+/**
+ * Configuration options for the X-axis of a chart.
+ */
 export type XAxisConfig = {
-  xAxisTimeInterval?: 'day' | 'week' | 'month' | 'quarter' | 'year' | null; //OPTIONAL: default is null. Will only apply to combo and line charts
+  /**
-  xAxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
+   * The time interval for the X-axis. Only applies to combo and line charts.
-  xAxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
+   * @default null
-  xAxisAxisTitle?: string | null; //OPTIONAL: default is null. If null the axis title will be a concatenation of all the x columns applied to the axis.
+   */
-  xAxisLabelRotation?: 0 | 45 | 90 | 'auto'; //OPTIONAL: default is auto.
+  xAxisTimeInterval?: 'day' | 'week' | 'month' | 'quarter' | 'year' | null;
-  xAxisDataZoom?: boolean; //OPTIONAL: default is false. The LLM should never set this to true. Only the user can set this to true.
+
+  /** Whether to show the axis label. Defaults to true. */
+  xAxisShowAxisLabel?: boolean;
+
+  /** Whether to show the axis title. Defaults to true. */
+  xAxisShowAxisTitle?: boolean;
+
+  /**
+   * The title of the X-axis.
+   * @default null - Uses a concatenation of all X columns applied to the axis
+   */
+  xAxisAxisTitle?: string | null;
+
+  /**
+   * The rotation angle for the X-axis labels.
+   * @default "auto"
+   */
+  xAxisLabelRotation?: 0 | 45 | 90 | 'auto';
+
+  /**
+   * Whether to enable data zooming on the X-axis.
+   * Should only be set to true by the user.
+   * @default false
+   */
+  xAxisDataZoom?: boolean;
 };
 
 //The category axis works differently than the other axes. It is used to color and group the data.
+/**
+ * Configuration options for styling the category axis.
+ * The category axis is used to color and group the data.
+ */
 export type CategoryAxisStyleConfig = {
+  /**
+   * The title of the category axis.
+   * @default null
+   */
   categoryAxisTitle?: string | null;
 };

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { BusterChart } from './BusterChart';
 import { ChartType } from '../../../api/asset_interfaces/metric/charts/enum';
 import { IColumnLabelFormat } from '../../../api/asset_interfaces/metric/charts/columnLabelInterfaces';
+import { DEFAULT_CHART_CONFIG } from '../../../api/asset_interfaces/metric/defaults';
 import {
   generateBarChartData,
   generateLineChartData,
@@ -22,10 +23,35 @@ const meta: Meta<typeof BusterChart> = {
     layout: 'centered'
   },
   argTypes: {
-    className: {
+    colors: {
-      control: false,
+      description:
-      defaultValue: 'w-[800px] h-[400px]'
+        'Array of colors to be used for the chart series. If not provided, defaults to the theme colors.',
+      control: 'array',
+      table: {
+        type: { summary: 'string[]' },
+        defaultValue: { summary: 'DEFAULT_CHART_THEME' }
       }
+    },
+    selectedChartType: {
+      control: 'select',
+      description: 'The type of chart to display.',
+      defaultValue: ChartType.Table,
+      options: Object.values(ChartType)
+    },
+    xAxisTimeInterval: {
+      control: 'select',
+      description:
+        'Time interval for x-axis when displaying time series data. Only applies to combo and line charts.',
+      options: ['day', 'week', 'month', 'quarter', 'year', null],
+      table: {
+        type: { summary: "'day' | 'week' | 'month' | 'quarter' | 'year' | null" },
+        defaultValue: { summary: 'null' }
+      }
+    }
+  },
+  args: {
+    ...DEFAULT_CHART_CONFIG,
+    className: 'w-[800px] h-[400px]'
   }
 };
 
@@ -33,6 +59,7 @@ export default meta;
 type Story = StoryObj<typeof BusterChart>;
 
 export const LineChart: Story = {
+  argTypes: meta.argTypes,
   args: {
     selectedChartType: ChartType.Line,
     data: generateLineChartData(),

web/src/components/ui/typography/Text.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text } from './Text';
+import React from 'react';
 
 const meta: Meta<typeof Text> = {
   title: 'UI/Typography/Text',