From a1e581170e6b356ffe86ffb6b1c09cde08085410 Mon Sep 17 00:00:00 2001 From: Belyakin Alexander <21216343+abelyakin@users.noreply.github.com> Date: Mon, 24 Feb 2025 17:12:13 +0300 Subject: [PATCH] Add status history series sorting Signed-off-by: Alexander Belyakin <21216343+abelyakin@users.noreply.github.com> --- .../schemas/migrate/migrate.cue | 1 + statushistorychart/schemas/status-history.cue | 1 + .../schemas/status-history.json | 3 +- ...tatusHistoryChartOptionsEditorSettings.tsx | 18 ++++- .../src/status-history-model.ts | 3 + .../src/utils/data-transform.ts | 66 +++++++++++-------- 6 files changed, 62 insertions(+), 30 deletions(-) diff --git a/statushistorychart/schemas/migrate/migrate.cue b/statushistorychart/schemas/migrate/migrate.cue index 88d47849..491a8c03 100644 --- a/statushistorychart/schemas/migrate/migrate.cue +++ b/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: { diff --git a/statushistorychart/schemas/status-history.cue b/statushistorychart/schemas/status-history.cue index 5d04bdd2..eef74f4e 100644 --- a/statushistorychart/schemas/status-history.cue +++ b/statushistorychart/schemas/status-history.cue @@ -21,4 +21,5 @@ kind: "StatusHistoryChart" spec: close({ legend?: common.#legend mappings?: [...common.#mappings] + sorting?: "asc" | "desc" }) diff --git a/statushistorychart/schemas/status-history.json b/statushistorychart/schemas/status-history.json index 98138486..f948d2c9 100644 --- a/statushistorychart/schemas/status-history.json +++ b/statushistorychart/schemas/status-history.json @@ -3,6 +3,7 @@ "spec": { "legend": { "position": "bottom" - } + }, + "sorting": "asc" } } \ No newline at end of file diff --git a/statushistorychart/src/StatusHistoryChartOptionsEditorSettings.tsx b/statushistorychart/src/StatusHistoryChartOptionsEditorSettings.tsx index cabeab56..163ab26a 100644 --- a/statushistorychart/src/StatusHistoryChartOptionsEditorSettings.tsx +++ b/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,10 +37,19 @@ export function StatusHistoryChartOptionsEditorSettings(props: StatusHistroyChar ); }; + const handleSortChange: SortSelectorProps['onChange'] = (newSort: SortOption) => { + onChange( + produce(value, (draft: StatusHistoryChartOptions) => { + draft.sorting = newSort; + }) + ); + }; + return ( + diff --git a/statushistorychart/src/status-history-model.ts b/statushistorychart/src/status-history-model.ts index 39c21ac2..b4562aff 100644 --- a/statushistorychart/src/status-history-model.ts +++ b/statushistorychart/src/status-history-model.ts @@ -21,6 +21,9 @@ export function createInitialStatusHistoryChartOptions(): Record; diff --git a/statushistorychart/src/utils/data-transform.ts b/statushistorychart/src/utils/data-transform.ts index 7775d0e3..ccad336d 100644 --- a/statushistorychart/src/utils/data-transform.ts +++ b/statushistorychart/src/utils/data-transform.ts @@ -1,4 +1,4 @@ -// Copyright 2024 The Perses Authors +// Copyright 2025 The Perses Authors // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at @@ -60,6 +60,25 @@ export function useStatusHistoryDataModel( }; } + const allSeries = queryResults.reduce((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]); }