[FEATURE] Status history panel series sorting

statushistorychart/schemas/migrate/migrate.cue

@@ -32,6 +32,7 @@ import "list"
 
 kind: "StatusHistoryChart"
 spec: {
+        sorting: "asc"
 		#showLegend: *#panel.options.legend.showLegend | true
 		if #showLegend {
 			legend: {

statushistorychart/schemas/migrate/tests/mappings/expected.json

@@ -5,6 +5,7 @@
       "mode": "list",
       "position": "bottom"
     },
+    "sorting": "asc",
     "mappings": [
       {
         "kind": "Value",
@@ -56,4 +57,4 @@
       }
     ]
   }
-}
+}

statushistorychart/schemas/status-history.cue

@@ -21,4 +21,5 @@ kind: "StatusHistoryChart"
 spec: close({
 	legend?: common.#legend
 	mappings?: [...common.#mappings]
+	sorting?: "asc" | "desc"
 })

statushistorychart/schemas/tests/valid/status-history.json

@@ -3,6 +3,7 @@
     "spec": {
         "legend": {
             "position": "bottom"
-        }
+        },
+        "sorting": "asc"
     }
 }

statushistorychart/src/StatusHistoryChartOptionsEditorSettings.tsx

@@ -13,7 +13,14 @@
 
 import { LegendOptionsEditor, LegendOptionsEditorProps } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
-import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn } from '@perses-dev/components';
+import {
+  OptionsEditorGroup,
+  OptionsEditorGrid,
+  OptionsEditorColumn,
+  SortSelector,
+  SortOption,
+  SortSelectorProps,
+} from '@perses-dev/components';
 import { Button } from '@mui/material';
 import { ReactElement } from 'react';
 import { StatusHistoryChartOptions, StatusHistroyChartEditorProps } from './status-history-model.js';
@@ -30,6 +37,14 @@ export function StatusHistoryChartOptionsEditorSettings(props: StatusHistroyChar
     );
   };
 
+  const handleSortChange: SortSelectorProps['onChange'] = (newSort: SortOption) => {
+    onChange(
+      produce(value, (draft: StatusHistoryChartOptions) => {
+        draft.sorting = newSort;
+      })
+    );
+  };
+
   return (
     <OptionsEditorGrid>
       <OptionsEditorColumn>
@@ -39,6 +54,7 @@ export function StatusHistoryChartOptionsEditorSettings(props: StatusHistroyChar
           value={value.legend}
           onChange={handleLegendChange}
         />
+        <SortSelector value={value.sorting} onChange={handleSortChange} />
       </OptionsEditorColumn>
       <OptionsEditorColumn>
         <OptionsEditorGroup title="Reset Settings">

statushistorychart/src/status-history-model.ts

@@ -21,6 +21,9 @@ export function createInitialStatusHistoryChartOptions(): Record<string, unknown
 export interface StatusHistoryChartOptions {
   legend?: LegendSpecOptions;
   mappings?: ValueMapping[];
+  sorting?: StatusHistorySorting;
 }
 
+export type StatusHistorySorting = 'asc' | 'desc';
+
 export type StatusHistroyChartEditorProps = OptionsEditorProps<StatusHistoryChartOptions>;

statushistorychart/src/utils/data-transform.ts

@@ -60,6 +60,25 @@ export function useStatusHistoryDataModel(
       };
     }
 
+    const allSeries = queryResults.reduce<TimeSeriesData['series']>((acc, { data }) => {
+      if (data && data.series) {
+        acc.push(...data.series);
+      }
+      return acc;
+    }, []);
+
+    if (spec.sorting) {
+      allSeries.sort((a, b) => {
+        const nameA = a.formattedName || '';
+        const nameB = b.formattedName || '';
+        if (spec.sorting === 'asc') {
+          return nameA.localeCompare(nameA);
+        } else {
+          return nameB.localeCompare(nameB);
+        }
+      });
+    }
+
     const timeScale = getCommonTimeScaleForQueries(queryResults);
     const statusHistoryData: StatusHistoryDataItem[] = [];
     const yAxisCategories: string[] = [];
@@ -68,33 +87,24 @@ export function useStatusHistoryDataModel(
 
     const xAxisCategories = generateCompleteTimestamps(timeScale);
 
-    queryResults.forEach(({ data }) => {
-      if (!data) {
-        return;
-      }
-
-      data.series.forEach((item) => {
-        const instance = item.formattedName || '';
-
-        yAxisCategories.push(instance);
-
-        const yIndex = yAxisCategories.length - 1;
-
-        item.values.forEach(([time, value]) => {
-          const itemIndexOnXaxis = xAxisCategories.findIndex((v) => v === time);
-          if (value !== null && itemIndexOnXaxis !== -1) {
-            let itemLabel: string | number = value;
-            if (hasValueMappings) {
-              const mappedValue = applyValueMapping(value, spec.mappings);
-              itemLabel = mappedValue.value;
-            }
-            legendSet.add(value);
-            statusHistoryData.push({
-              value: [itemIndexOnXaxis, yIndex, value],
-              label: String(itemLabel),
-            });
+    allSeries.forEach((item) => {
+      const instance = item.formattedName || '';
+      yAxisCategories.push(instance);
+      const yIndex = yAxisCategories.length - 1;
+      item.values.forEach(([time, value]) => {
+        const itemIndexOnXaxis = xAxisCategories.findIndex((v) => v === time);
+        if (value !== null && itemIndexOnXaxis !== -1) {
+          let itemLabel: string | number = value;
+          if (hasValueMappings) {
+            const mappedValue = applyValueMapping(value, spec.mappings);
+            itemLabel = mappedValue.value;
           }
-        });
+          legendSet.add(value);
+          statusHistoryData.push({
+            value: [itemIndexOnXaxis, yIndex, value],
+            label: String(itemLabel),
+          });
+        }
       });
     });
 
@@ -141,5 +151,5 @@ export function useStatusHistoryDataModel(
       timeScale,
       colors,
     };
-  }, [queryResults, spec.mappings, themeColors]);
+  }, [queryResults, themeColors, spec]);
 }