From d284e55dec3dbf8af7c76b236ef3c148d8e0c84d Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 11 Apr 2025 14:25:27 -0600
Subject: [PATCH] size works with scatter charts

---
 .../useSeriesOptions/barSeriesBuilder.ts      |  2 +-
 .../useSeriesOptions/scatterSeriesBuilder.ts  |  1 +
 .../useSeriesOptions/useSeriesOptions.ts      | 17 +++++++++---
 .../BusterChart.ScatterChart.stories.tsx      | 27 +++++++++++++++++++
 .../components/ui/select/Select.stories.tsx   |  6 ++---
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts
index 139962edc..6d5097191 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts
+++ b/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;
diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/scatterSeriesBuilder.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/scatterSeriesBuilder.ts
index e454bce54..800bcd04f 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/scatterSeriesBuilder.ts
+++ b/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,
diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/useSeriesOptions.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/useSeriesOptions.ts
index a777acb19..ce12ebdce 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/useSeriesOptions.ts
+++ b/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,
diff --git a/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx b/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx
index 8685928e7..eb08c1964 100644
--- a/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx
+++ b/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'
+      }
+    ]
+  }
+};
diff --git a/web/src/components/ui/select/Select.stories.tsx b/web/src/components/ui/select/Select.stories.tsx
index 03c60bc66..4886801f5 100644
--- a/web/src/components/ui/select/Select.stories.tsx
+++ b/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 = [