TimeSeries: Add option for symmetrical y axes (align 0) (#52555)

packages/grafana-schema/src/schema/mudball.cue

@@ -95,6 +95,7 @@ AxisConfig: {
 	axisSoftMax?:       number
 	axisGridShow?:      bool
 	scaleDistribution?: ScaleDistributionConfig
+	axisCenteredZero?:   bool
 } @cuetsy(kind="interface")
 
 // TODO docs

packages/grafana-schema/src/schema/mudball.gen.ts

@@ -123,6 +123,7 @@ export interface ScaleDistributionConfig {
 }
 
 export interface AxisConfig {
+  axisCenteredZero?: boolean;
   axisColorMode?: AxisColorMode;
   axisGridShow?: boolean;
   axisLabel?: string;

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -185,6 +185,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
           max: field.config.max,
           softMin: customConfig.axisSoftMin,
           softMax: customConfig.axisSoftMax,
+          centeredZero: customConfig.axisCenteredZero,
         },
         field
       )

packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts

@@ -17,6 +17,7 @@ export interface ScaleProps {
   orientation: ScaleOrientation;
   direction: ScaleDirection;
   log?: number;
+  centeredZero?: boolean;
 }
 
 export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
@@ -26,7 +27,18 @@ export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
   }
 
   getConfig(): Scale {
-    let { isTime, scaleKey, min: hardMin, max: hardMax, softMin, softMax, range, direction, orientation } = this.props;
+    let {
+      isTime,
+      scaleKey,
+      min: hardMin,
+      max: hardMax,
+      softMin,
+      softMax,
+      range,
+      direction,
+      orientation,
+      centeredZero,
+    } = this.props;
     const distribution = !isTime
       ? {
           distr:
@@ -68,6 +80,14 @@ export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
       let minMax: uPlot.Range.MinMax = [dataMin, dataMax];
 
       if (scale.distr === 1 || scale.distr === 2) {
+        if (centeredZero) {
+          let absMin = Math.abs(dataMin);
+          let absMax = Math.abs(dataMax);
+          let max = Math.max(absMin, absMax);
+          dataMin = -max;
+          dataMax = max;
+        }
+
         // @ts-ignore here we may use hardMin / hardMax to make sure any extra padding is computed from a more accurate delta
         minMax = uPlot.rangeNum(hardMinOnly ? hardMin : dataMin, hardMaxOnly ? hardMax : dataMax, rangeConfig);
       } else if (scale.distr === 3) {

packages/grafana-ui/src/options/builder/axis.tsx

@@ -20,6 +20,8 @@ export function addAxisConfig(
   hideScale?: boolean
 ) {
   const category = ['Axis'];
+
+  // options for axis appearance
   builder
     .addRadio({
       path: 'axisPlacement',
@@ -51,24 +53,6 @@ export function addAxisConfig(
       },
       showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden,
     })
-    .addNumberInput({
-      path: 'axisSoftMin',
-      name: 'Soft min',
-      defaultValue: defaultConfig.axisSoftMin,
-      category,
-      settings: {
-        placeholder: 'See: Standard options > Min',
-      },
-    })
-    .addNumberInput({
-      path: 'axisSoftMax',
-      name: 'Soft max',
-      defaultValue: defaultConfig.axisSoftMax,
-      category,
-      settings: {
-        placeholder: 'See: Standard options > Max',
-      },
-    })
     .addRadio({
       path: 'axisGridShow',
       name: 'Show grid lines',
@@ -95,8 +79,9 @@ export function addAxisConfig(
       },
     });
 
-  if (!hideScale) {
+  // options for scale range
-    builder.addCustomEditor<void, ScaleDistributionConfig>({
+  builder
+    .addCustomEditor<void, ScaleDistributionConfig>({
       id: 'scaleDistribution',
       path: 'scaleDistribution',
       name: 'Scale',
@@ -106,8 +91,32 @@ export function addAxisConfig(
       defaultValue: { type: ScaleDistribution.Linear },
       shouldApply: (f) => f.type === FieldType.number,
       process: identityOverrideProcessor,
+    })
+    .addBooleanSwitch({
+      path: 'axisCenteredZero',
+      name: 'Centered zero',
+      category,
+      defaultValue: false,
+      showIf: (c) => c.scaleDistribution?.type !== ScaleDistribution.Log,
+    })
+    .addNumberInput({
+      path: 'axisSoftMin',
+      name: 'Soft min',
+      defaultValue: defaultConfig.axisSoftMin,
+      category,
+      settings: {
+        placeholder: 'See: Standard options > Min',
+      },
+    })
+    .addNumberInput({
+      path: 'axisSoftMax',
+      name: 'Soft max',
+      defaultValue: defaultConfig.axisSoftMax,
+      category,
+      settings: {
+        placeholder: 'See: Standard options > Max',
+      },
     });
-  }
 }
 
 const DISTRIBUTION_OPTIONS: Array<SelectableValue<ScaleDistribution>> = [

public/app/plugins/panel/timeseries/config.ts

@@ -37,6 +37,7 @@ export const defaultGraphConfig: GraphFieldConfig = {
     group: 'A',
   },
   axisGridShow: true,
+  axisCenteredZero: false,
 };
 
 const categoryStyles = ['Graph styles'];