edit pie sorting

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;
+    if (!label && !!context.chart.ctx?.measureText) return false;
-    const { width: textWidth } = context.chart.ctx.measureText(label);
+    const { width: textWidth } = context.chart.ctx?.measureText?.(label) || { width: 0 };
     const { barWidth, barHeight } = getBarDimensions(context);
     return textWidth > barWidth - TEXT_WIDTH_BUFFER;
   });

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}
           />
         )}
 

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

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] &
+  } & Omit<
+    Parameters<typeof StylingAppStylingNotSupported>[0] &
       Parameters<typeof GlobalSettings>[0] &
       Parameters<typeof ChartSpecificSettings>[0] &
       Parameters<typeof EtcSettings>[0] &
-    Parameters<typeof PieSettings>[0]
+      Parameters<typeof PieSettings>[0],
+    'onUpdateMetricChartConfig' | 'onUpdateYAxis' | 'onUpdateDataLabel' | 'onUpdateChartConfig'
+  >
 > = ({
   className = '',
   columnSettings,