[FEATURE]: Adds support for log type y-axis (as well as linear) for TimeSeriesChart

- adds possibility for choosing the "ECharts yaxis type:log" field instead of just 'value'.
- adds options for choosing log-base (2, 10)
- adds cue and updates go-sdk with logbase

---------

on-behalf-of: @SAP Simon Olander (simon.olander@sap.com)

Author: olandr

timeserieschart/schemas/migrate/migrate.cue

@@ -106,6 +106,17 @@ spec: {
 		yAxis: max: #max
 	}
 
+	#logBase: [// switch
+		if (*#panel.fieldConfig.defaults.logBase | null) != null {
+			#panel.fieldConfig.defaults.logBase
+		},
+		null,
+	][0]
+	if #logBase != null {
+		yAxis: logBase: #logBase
+		yAxis: type: "log"
+	}
+
 	#yAxisLabel: *#panel.fieldConfig.defaults.custom.axisLabel | null
 	if #yAxisLabel != null if len(#yAxisLabel) > 0 {
 		yAxis: label: #yAxisLabel

timeserieschart/schemas/migrate/tests/basic-4/expected.json

@@ -0,0 +1,38 @@
+{
+  "kind": "TimeSeriesChart",
+  "spec": {
+    "legend": {
+      "mode": "list",
+      "position": "bottom",
+      "values": []
+    },
+    "visual": {
+      "areaOpacity": 0.1,
+      "connectNulls": false,
+      "display": "line",
+      "lineWidth": 1,
+      "lineStyle": "solid"
+    },
+    "yAxis": {
+      "format": {
+        "unit": "bytes"
+      },
+      "label": "Amount of endpoints succesfully monitored",
+      "min": 0,
+      "logBase": 2,
+      "type": "log"
+    },
+    "thresholds": {
+      "steps": [
+        {
+          "color": "#73bf69",
+          "value": 0
+        },
+        {
+          "color": "#f2cc0c",
+          "value": 80
+        }
+      ]
+    }
+  }
+}

timeserieschart/schemas/migrate/tests/basic-4/input.json

@@ -0,0 +1,100 @@
+{
+  "datasource": {
+    "type": "prometheus",
+    "uid": "${datasource}"
+  },
+  "description": "Current raw capacity of DataNode in bytes",
+  "fieldConfig": {
+    "defaults": {
+      "color": {
+        "mode": "palette-classic"
+      },
+      "custom": {
+        "axisLabel": "Amount of endpoints succesfully monitored",
+        "barAlignment": 0,
+        "barWidthFactor": 0.6,
+        "drawStyle": "line",
+        "fillOpacity": 10,
+        "gradientMode": "none",
+        "hideFrom": {
+          "legend": false,
+          "tooltip": false,
+          "viz": false
+        },
+        "insertNulls": false,
+        "lineInterpolation": "linear",
+        "lineWidth": 1,
+        "lineStyle": {
+          "fill": "solid"
+        },
+        "pointSize": 5,
+        "scaleDistribution": {
+          "type": "linear"
+        },
+        "showPoints": "never",
+        "spanNulls": false,
+        "stacking": {
+          "group": "A",
+          "mode": "none"
+        },
+        "thresholdsStyle": {
+          "mode": "line"
+        }
+      },
+      "links": [],
+      "mappings": [],
+      "min": 0,
+      "logBase": 2,
+      "thresholds": {
+        "mode": "absolute",
+        "steps": [
+          {
+            "color": "green",
+            "value": null
+          },
+          {
+            "color": "semi-dark-yellow",
+            "value": 80
+          }
+        ]
+      },
+      "unit": "bytes"
+    },
+    "overrides": []
+  },
+  "gridPos": {
+    "h": 7,
+    "w": 6,
+    "x": 0,
+    "y": 0
+  },
+  "id": 27,
+  "options": {
+    "legend": {
+      "calcs": [],
+      "displayMode": "list",
+      "placement": "bottom",
+      "showLegend": true
+    },
+    "tooltip": {
+      "mode": "multi",
+      "sort": "desc"
+    }
+  },
+  "pluginVersion": "11.3.0-pre",
+  "targets": [
+    {
+      "datasource": {
+        "uid": "${datasource}"
+      },
+      "editorMode": "code",
+      "expr": "avg without (instance) (hadoop_hdfs_datanode_capacity{bar_stack_id=\"$bar_stack_id\", _target=~\"$datanode\"})",
+      "interval": "",
+      "legendFormat": "{{_target}}",
+      "range": true,
+      "refId": "A"
+    }
+  ],
+  "title": "datanode_capacity",
+  "type": "timeseries"
+}

timeserieschart/schemas/time-series.cue

@@ -56,6 +56,7 @@ spec: close({
 	if min != _|_ && max != _|_ {
 		max: >=min
 	}
+	logBase?: 2 | 10
 }
 
 #querySettings: [...{
@@ -67,4 +68,4 @@ spec: close({
 }]
 
 #lineStyle:   "solid" | "dashed" | "dotted"
-#areaOpacity: number & >=0 & <=1 // transparency level from 0 (transparent) to 1 (opaque)
+#areaOpacity: number & >=0 & <=1 // transparency level from 0 (transparent) to 1 (opaque)

timeserieschart/sdk/go/time-series.go

@@ -96,11 +96,12 @@ type Visual struct {
 }
 
 type YAxis struct {
-	Show   bool           `json:"show,omitempty" yaml:"show,omitempty"`
-	Label  string         `json:"label,omitempty" yaml:"label,omitempty"`
-	Format *common.Format `json:"format,omitempty" yaml:"format,omitempty"`
-	Min    float64        `json:"min,omitempty" yaml:"min,omitempty"`
-	Max    float64        `json:"max,omitempty" yaml:"max,omitempty"`
+	Show    bool           `json:"show,omitempty" yaml:"show,omitempty"`
+	Label   string         `json:"label,omitempty" yaml:"label,omitempty"`
+	Format  *common.Format `json:"format,omitempty" yaml:"format,omitempty"`
+	Min     float64        `json:"min,omitempty" yaml:"min,omitempty"`
+	Max     float64        `json:"max,omitempty" yaml:"max,omitempty"`
+	LogBase uint           `json:"logBase,omitempty" yaml:"logBase,omitempty"`
 }
 
 type PluginSpec struct {

timeserieschart/src/TimeSeriesChartPanel.tsx

@@ -54,6 +54,7 @@ import {
   DEFAULT_VISUAL,
   THRESHOLD_PLOT_INTERVAL,
   QuerySettingsOptions,
+  LOG_BASE,
 } from './time-series-chart-model';
 import {
   getTimeSeries,
@@ -121,10 +122,13 @@ export function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement
     return merge({}, DEFAULT_VISUAL, props.spec.visual);
   }, [props.spec.visual]);
 
+  // Use the logBase from yAxis options, defaulting to 'none' if not set
+  const useLogarithmicBase: LOG_BASE = yAxis?.logBase ?? 'none';
+  
   // convert Perses dashboard format to be ECharts compatible
   const echartsYAxis = useMemo(() => {
-    return convertPanelYAxis(yAxis);
-  }, [yAxis]);
+    return convertPanelYAxis(yAxis, useLogarithmicBase);
+  }, [yAxis, useLogarithmicBase]);
 
   const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');
   const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();

timeserieschart/src/YAxisOptionsEditor.tsx

@@ -12,16 +12,20 @@
 // limitations under the License.
 
 import { Switch, TextField } from '@mui/material';
-import { OptionsEditorControl, OptionsEditorGroup, FormatControls } from '@perses-dev/components';
+
+import { OptionsEditorControl, OptionsEditorGroup, FormatControls, SettingsAutocomplete } from '@perses-dev/components';
 import { ReactElement } from 'react';
-import { DEFAULT_FORMAT, DEFAULT_Y_AXIS, TimeSeriesChartYAxisOptions, Y_AXIS_CONFIG } from './time-series-chart-model';
+import { DEFAULT_FORMAT, DEFAULT_Y_AXIS, TimeSeriesChartYAxisOptions, Y_AXIS_CONFIG, LOG_BASE_LABEL, LOG_BASE, LOG_BASE_OPTIONS, LOG_BASE_CONFIG, LOG_VALID_BASES} from './time-series-chart-model';
 
 export interface YAxisOptionsEditorProps {
   value: TimeSeriesChartYAxisOptions;
   onChange: (yAxis: TimeSeriesChartYAxisOptions) => void;
 }
 
 export function YAxisOptionsEditor({ value, onChange }: YAxisOptionsEditorProps): ReactElement {
+  
+  const logBase = LOG_BASE_CONFIG[LOG_VALID_BASES[value.logBase ?? 'none']];
+  
   return (
     <OptionsEditorGroup title="Y Axis">
       <OptionsEditorControl
@@ -47,6 +51,27 @@ export function YAxisOptionsEditor({ value, onChange }: YAxisOptionsEditorProps)
           })
         }
       />
+      <OptionsEditorControl
+        label={Y_AXIS_CONFIG.logBase.label}
+        control={
+          <SettingsAutocomplete
+            value={{
+              ...logBase,
+              id: logBase.label,
+            }}
+            options={LOG_BASE_OPTIONS}
+            onChange={(__, newValue) => {
+              const updatedValue: TimeSeriesChartYAxisOptions = {
+                ...value,
+                logBase: newValue.log
+              };
+              onChange(updatedValue);
+            }}
+            disabled={value === undefined}
+            disableClearable
+          ></SettingsAutocomplete>
+        }
+      />
       <OptionsEditorControl
         label={Y_AXIS_CONFIG.label.label}
         control={

timeserieschart/src/time-series-chart-model.ts

@@ -54,6 +54,7 @@ export interface TimeSeriesChartYAxisOptions {
   format?: FormatOptions;
   min?: number;
   max?: number;
+  logBase?: LOG_BASE;
 }
 
 export interface TooltipSpecOptions {
@@ -87,6 +88,7 @@ export const DEFAULT_Y_AXIS: TimeSeriesChartYAxisOptions = {
   format: DEFAULT_FORMAT,
   min: undefined,
   max: undefined,
+  logBase: 'none',
 };
 
 export const Y_AXIS_CONFIG = {
@@ -95,6 +97,7 @@ export const Y_AXIS_CONFIG = {
   unit: { label: 'Unit' },
   min: { label: 'Min' },
   max: { label: 'Max' },
+  logBase: { label: 'Log Base' },
 };
 
 export const DEFAULT_DISPLAY = 'line';
@@ -183,6 +186,28 @@ export const OPACITY_CONFIG = {
   step: 0.05,
 };
 
+// LogBase outlines the allowed log bases for the log-supported charts.
+export type LOG_BASE_LABEL = 'none' | 'log2' | 'log10';
+export type LOG_BASE = 'none' | 2 | 10;
+
+// Single source of truth for log base configuration
+export const LOG_BASE_CONFIG: Record<LOG_BASE_LABEL, { label: string; log: LOG_BASE }> = {
+  'none': { label: 'None', log: 'none' },
+  'log2': { label: '2', log: 2 },
+  'log10': { label: '10', log: 10 },
+};
+
+// Options array for SettingsAutocomplete
+export const LOG_BASE_OPTIONS = Object.entries(LOG_BASE_CONFIG).map(([id, config]) => ({
+  id: id as LOG_BASE_LABEL,
+  ...config,
+}));
+
+// Reverse lookup map from LOG_BASE value to LOG_BASE_LABEL
+export const LOG_VALID_BASES: Record<LOG_BASE, LOG_BASE_LABEL> = Object.fromEntries(
+  Object.entries(LOG_BASE_CONFIG).map(([label, config]) => [config.log, label])
+) as Record<LOG_BASE, LOG_BASE_LABEL>;
+
 // Both of these constants help produce a value that is LESS THAN the initial value.
 // For positive values, we multiply by a number less than 1 to get this outcome.
 // For negative values, we multiply to a number greater than 1 to get this outcome.

timeserieschart/src/utils/data-transform.test.ts

@@ -54,7 +54,7 @@ describe('convertPanelYAxis', () => {
       min: 0.1,
       max: 1,
     };
-    const echartsAxis = convertPanelYAxis(persesAxis);
+    const echartsAxis = convertPanelYAxis(persesAxis, 'none');
     // Axis label is handled outside of echarts since it is built with a custom React component.
     expect(echartsAxis).toEqual({
       show: true,