Merge branch 'bugfix/fix-the-legend-order-issue' into q/1.0

Author: bert-e

src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -41,11 +41,13 @@ export type ChartLegendWrapperProps = {
   colorSet:
     | Record<string, ChartColors | string>
     | ((seriesNames: string[]) => Record<string, ChartColors | string>);
+  sortOrder?: 'alphabetical' | 'status' | ((a: string, b: string) => number);
 };
 
 export const ChartLegendWrapper = ({
   children,
   colorSet,
+  sortOrder = 'alphabetical',
 }: ChartLegendWrapperProps) => {
   const [registeredColorSets, setRegisteredColorSets] = useState<
     Record<string, string[]>
@@ -133,8 +135,20 @@ export const ChartLegendWrapper = ({
   );
 
   const listResources = useCallback(() => {
-    return Object.keys(internalColorSet).sort();
-  }, [internalColorSet]);
+    const resources = Object.keys(internalColorSet);
+
+    if (sortOrder === 'alphabetical') {
+      return resources.sort((a, b) => a.localeCompare(b));
+    } else if (sortOrder === 'status') {
+      return ['Success', 'Warning', 'Failed'].filter((status) =>
+        resources.includes(status),
+      );
+    } else if (typeof sortOrder === 'function') {
+      return resources.sort(sortOrder);
+    }
+
+    return resources;
+  }, [internalColorSet, sortOrder]);
 
   const chartLegendState = useMemo(
     () => ({

stories/BarChart/barchart.stories.tsx

@@ -59,6 +59,7 @@ export const Playground: Story = {
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
+        sortOrder="status"
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
@@ -123,6 +124,7 @@ export const Time7Days: Story = {
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
+        sortOrder="status"
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
@@ -408,6 +410,7 @@ export const Stacked: Story = {
           Failed: theme.statusCritical,
           Warning: theme.statusWarning,
         }}
+        sortOrder="status"
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
@@ -464,6 +467,7 @@ export const DefaultSort: Story = {
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
+        sortOrder="status"
       >
         <Barchart
           type={{ type: 'category' }}
@@ -542,6 +546,7 @@ export const WithCustomTooltip: Story = {
             Success: theme.statusHealthy,
             Failed: theme.statusCritical,
           }}
+          sortOrder="status"
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
@@ -614,6 +619,14 @@ export const StatusColors: Story = {
           'Failed Requests': theme.statusCritical,
           'Warning Events': theme.statusWarning,
         }}
+        sortOrder={(a, b) => {
+          const statusOrder: Record<string, number> = {
+            'Success Rate': 0,
+            'Warning Events': 1,
+            'Failed Requests': 2,
+          };
+          return statusOrder[a] - statusOrder[b];
+        }}
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
@@ -668,6 +681,7 @@ export const LegendShapes: Story = {
             Failed: theme.statusCritical,
             Warning: theme.statusWarning,
           }}
+          sortOrder="status"
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
@@ -685,6 +699,7 @@ export const LegendShapes: Story = {
             Failed: theme.statusCritical,
             Warning: theme.statusWarning,
           }}
+          sortOrder="status"
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
@@ -740,6 +755,7 @@ export const BarchartsWithSingleLegend: Story = {
             Failed: theme.statusCritical,
             Warning: theme.statusWarning,
           }}
+          sortOrder="status"
         >
           <Barchart
             type={{ type: 'category' }}
@@ -770,6 +786,7 @@ export const ErrorState: Story = {
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
+        sortOrder="status"
       >
         <Barchart
           type={{ type: 'category' }}
@@ -821,6 +838,7 @@ export const StackedBarSort: Story = {
           Warning: theme.statusWarning,
           Failed: theme.statusCritical,
         }}
+        sortOrder="status"
       >
         <Barchart
           type={{ type: 'category' }}
@@ -896,6 +914,7 @@ export const CompleteExample: Story = {
             Success: 'lineColor1',
             Failed: 'lineColor2',
           }}
+          sortOrder="status"
         >
           <Barchart
             type={{ type: 'category' }}