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/axisInterfaces.ts

@@ -1,8 +1,8 @@
 export type BarAndLineAxis = {
-  x: string[]; //the column ids to use for the x axis. If multiple column ids are provided, they will be grouped together and summed. The LLM should NEVER set multiple x axis columns. Only the user can set this.
+  x: string[]; // the column ids to use for the x axis. If multiple column ids are provided, they will be grouped together and summed. The LLM should NEVER set multiple x axis columns. Only the user can set this.
-  y: string[]; //the column ids to use for the y axis.
+  y: string[]; // the column ids to use for the y axis.
-  category: string[]; //the column ids to use for the category axis. If multiple column ids are provided, they will be grouped together. THE LLM SHOULD NEVER SET MULTIPLE CATEGORY COLUMNS. ONLY THE USER CAN SET THIS.
+  category: string[]; // the column ids to use for the category axis. If multiple column ids are provided, they will be grouped together. THE LLM SHOULD NEVER SET MULTIPLE CATEGORY COLUMNS. ONLY THE USER CAN SET THIS.
-  tooltip?: string[] | null; //if null the y axis will automatically be used, the y axis will be used for the tooltip.
+  tooltip?: string[] | null; // if null the y axis will automatically be used, the y axis will be used for the tooltip.
 };
 
 export type ScatterAxis = {

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',