From ddce1b573ffe909059679696eb2895d79fe770e1 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 11 Apr 2025 15:51:44 -0600
Subject: [PATCH] edit pie sorting

---
 .../hooks/useSeriesOptions/barSeriesBuilder.ts      | 12 +++++++++---
 .../MetricStylingApp/MetricStylingApp.tsx           |  4 +++-
 .../StylingAppStyling/EditPieSorting.tsx            | 10 +++++-----
 .../StylingAppStyling/StylingAppStyling.tsx         | 13 ++++++++-----
 4 files changed, 25 insertions(+), 14 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 6d5097191..fb1498d02 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts
+++ b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts
@@ -246,7 +246,13 @@ const getBarDimensions = (context: Context) => {
     context.dataIndex
   ] as BarElement;
 
-  const { width: barWidth, height: barHeight } = barElement.getProps(['width', 'height'], true);
+  const { width: barWidth, height: barHeight } = barElement?.getProps?.(
+    ['width', 'height'],
+    true
+  ) || {
+    width: 0,
+    height: 0
+  };
   return { barWidth, barHeight };
 };
 
@@ -286,8 +292,8 @@ const setGlobalRotation = (context: Context) => {
     });
 
   const labelNeedsToBeRotated = labels.some((label) => {
-    if (!label && !!context.chart.ctx.measureText) return false;
-    const { width: textWidth } = context.chart.ctx.measureText(label);
+    if (!label && !!context.chart.ctx?.measureText) return false;
+    const { width: textWidth } = context.chart.ctx?.measureText?.(label) || { width: 0 };
     const { barWidth, barHeight } = getBarDimensions(context);
     return textWidth > barWidth - TEXT_WIDTH_BUFFER;
   });
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
index dea250c93..b3f98b469 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
@@ -77,7 +77,8 @@ export const MetricStylingApp: React.FC<{
     yAxisShowAxisTitle,
     y2AxisShowAxisTitle,
     scatterDotSize,
-    disableTooltip
+    disableTooltip,
+    pieSortBy
   } = chartConfig;
 
   const selectedAxis: ChartEncodes | null = getSelectedAxis(
@@ -175,6 +176,7 @@ export const MetricStylingApp: React.FC<{
             columnLabelFormats={columnLabelFormats}
             barShowTotalAtTop={barShowTotalAtTop}
             rowCount={rowCount}
+            pieSortBy={pieSortBy}
           />
         )}
 
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditPieSorting.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditPieSorting.tsx
index 3cb9e369a..66d40197a 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditPieSorting.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditPieSorting.tsx
@@ -7,16 +7,16 @@ import { SortAlphaAscending, SortNumAscending, Empty } from '@/components/ui/ico
 import { useMemoizedFn } from '@/hooks';
 
 const options: SegmentedItem<NonNullable<PieSortBy> | 'none'>[] = [
-  {
-    value: 'key',
-    tooltip: 'Sort by key',
-    icon: <SortAlphaAscending />
-  },
   {
     icon: <SortNumAscending />,
     value: 'value',
     tooltip: 'Sort by value'
   },
+  {
+    value: 'key',
+    tooltip: 'Sort by key',
+    icon: <SortAlphaAscending />
+  },
   {
     icon: <Empty />,
     value: 'none',
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/StylingAppStyling.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/StylingAppStyling.tsx
index f5ad17fd3..25310ce00 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/StylingAppStyling.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/StylingAppStyling.tsx
@@ -39,11 +39,14 @@ const UNSUPPORTED_CHART_TYPES: ChartType[] = [ChartType.Table, ChartType.Metric]
 export const StylingAppStyling: React.FC<
   {
     className?: string;
-  } & Parameters<typeof StylingAppStylingNotSupported>[0] &
-    Parameters<typeof GlobalSettings>[0] &
-    Parameters<typeof ChartSpecificSettings>[0] &
-    Parameters<typeof EtcSettings>[0] &
-    Parameters<typeof PieSettings>[0]
+  } & Omit<
+    Parameters<typeof StylingAppStylingNotSupported>[0] &
+      Parameters<typeof GlobalSettings>[0] &
+      Parameters<typeof ChartSpecificSettings>[0] &
+      Parameters<typeof EtcSettings>[0] &
+      Parameters<typeof PieSettings>[0],
+    'onUpdateMetricChartConfig' | 'onUpdateYAxis' | 'onUpdateDataLabel' | 'onUpdateChartConfig'
+  >
 > = ({
   className = '',
   columnSettings,