size works with scatter charts

web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts

@@ -286,7 +286,7 @@ const setGlobalRotation = (context: Context) => {
     });
 
   const labelNeedsToBeRotated = labels.some((label) => {
-    if (!label) return false;
+    if (!label && !!context.chart.ctx.measureText) return false;
     const { width: textWidth } = context.chart.ctx.measureText(label);
     const { barWidth, barHeight } = getBarDimensions(context);
     return textWidth > barWidth - TEXT_WIDTH_BUFFER;

web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/scatterSeriesBuilder.ts

@@ -71,6 +71,7 @@ const radiusMethod = (
 ) => {
   //@ts-ignore
   const originalR = context.raw?.originalR;
+
   if (typeof originalR === 'number' && sizeKeyIndex) {
     return computeSizeRatio(
       originalR,

web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/useSeriesOptions.ts

@@ -5,7 +5,7 @@ import type {
   ChartType,
   ScatterAxis
 } from '@/api/asset_interfaces/metric/charts';
-import { DatasetOption } from '../../../chartHooks';
+import { DatasetOption, extractFieldsFromChain } from '../../../chartHooks';
 import { ChartProps } from '../../core';
 import type { ChartType as ChartJSChartType } from 'chart.js';
 import { useMemo } from 'react';
@@ -88,12 +88,23 @@ export const useSeriesOptions = ({
       return null;
     }
     const size = sizeKey[0];
-    const index = selectedDataset.dimensions.findIndex((dimension) => dimension === size);
+    const index = selectedDataset.dimensions.findIndex((dimension) => {
+      const chain = extractFieldsFromChain(dimension);
+      return chain.some((item) => item.key === size);
+    });
     if (index === -1) return null;
 
     const assosciatedColumnMetadata = columnMetadata.find((item) => item.name === size);
 
-    if (!assosciatedColumnMetadata) return null;
+    if (!assosciatedColumnMetadata) {
+      console.warn(`Column metadata not found for size key: ${size}`);
+      return {
+        name: size,
+        index,
+        minValue: 0,
+        maxValue: 10
+      };
+    }
 
     return {
       name: size,

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

@@ -118,3 +118,30 @@ export const LargeDataset: Story = {
     );
   }
 };
+
+export const WithSize: Story = {
+  args: {
+    ...Default.args,
+    data: Array.from({ length: 5 }, (x, index) => ({
+      x: index,
+      y: index,
+      size: index,
+      category: 'Electronics'
+    })),
+    scatterAxis: {
+      x: ['x'],
+      y: ['y'],
+      size: ['size']
+    },
+    columnMetadata: [
+      {
+        name: 'size',
+        min_value: 0,
+        max_value: 5,
+        unique_values: 3,
+        simple_type: 'number',
+        type: 'number'
+      }
+    ]
+  }
+};

web/src/components/ui/select/Select.stories.tsx

@@ -19,9 +19,9 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 
 const basicItems = [
-  { value: 'option1', label: 'Option 1' },
-  { value: 'option2', label: 'Option 2' },
-  { value: 'option3', label: 'Option 3' }
+  { value: 'apples', label: 'Apples' },
+  { value: 'bananas', label: 'Bananas' },
+  { value: 'cherries', label: 'Cherries' }
 ];
 
 const itemsWithIcons = [