TimeSeries: Allow multiple axes for the same unit (#41635)

* TimeSeries: Allow multiple axis for the same unit

* Update snapshot

* Add axis label and soft min/max to the scale key

* Removed console.log

packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap

@@ -41,7 +41,7 @@ Object {
       },
       "labelGap": 0,
       "rotate": undefined,
-      "scale": "__fixed",
+      "scale": "__fixed/na-na/na-na/auto/linear/na",
       "show": true,
       "side": 3,
       "size": [Function],
@@ -105,7 +105,7 @@ Object {
   "mode": 1,
   "padding": undefined,
   "scales": Object {
-    "__fixed": Object {
+    "__fixed/na-na/na-na/auto/linear/na": Object {
       "auto": true,
       "dir": 1,
       "distr": 1,
@@ -143,7 +143,7 @@ Object {
         "stroke": "#ff0000",
       },
       "pxAlign": undefined,
-      "scale": "__fixed",
+      "scale": "__fixed/na-na/na-na/auto/linear/na",
       "show": true,
       "spanGaps": false,
       "stroke": "#ff0000",
@@ -166,7 +166,7 @@ Object {
         "stroke": "#ff0000",
       },
       "pxAlign": undefined,
-      "scale": "__fixed",
+      "scale": "__fixed/na-na/na-na/auto/linear/na",
       "show": true,
       "spanGaps": false,
       "stroke": "#ff0000",
@@ -189,7 +189,7 @@ Object {
         "stroke": "#ff0000",
       },
       "pxAlign": undefined,
-      "scale": "__fixed",
+      "scale": "__fixed/na-na/na-na/auto/linear/na",
       "show": true,
       "spanGaps": false,
       "stroke": "#ff0000",
@@ -212,7 +212,7 @@ Object {
         "stroke": "#ff0000",
       },
       "pxAlign": undefined,
-      "scale": "__fixed",
+      "scale": "__fixed/na-na/na-na/auto/linear/na",
       "show": true,
       "spanGaps": false,
       "stroke": "#ff0000",
@@ -235,7 +235,7 @@ Object {
         "stroke": "#ff0000",
       },
       "pxAlign": undefined,
-      "scale": "__fixed",
+      "scale": "__fixed/na-na/na-na/auto/linear/na",
       "show": true,
       "spanGaps": false,
       "stroke": "#ff0000",

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

@@ -24,6 +24,8 @@ import {
   ScaleDirection,
   ScaleOrientation,
   VizLegendOptions,
+  ScaleDistributionConfig,
+  ScaleDistribution,
 } from '@grafana/schema';
 import { collectStackingGroups, orderIdsByCalcs, preparePlotData } from '../uPlot/utils';
 import uPlot from 'uplot';
@@ -117,11 +119,16 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
 
   for (let i = 1; i < frame.fields.length; i++) {
     const field = frame.fields[i];
-    const config = field.config as FieldConfig<GraphFieldConfig>;
-    const customConfig: GraphFieldConfig = {
+
+    const config = {
+      ...field.config,
+      custom: {
         ...defaultConfig,
-      ...config.custom,
-    };
+        ...field.config.custom,
+      },
+    } as FieldConfig<GraphFieldConfig>;
+
+    const customConfig: GraphFieldConfig = config.custom!;
 
     if (field === xField || field.type !== FieldType.number) {
       continue;
@@ -131,7 +138,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
     field.state!.seriesIndex = seriesIndex++;
 
     const fmt = field.display ?? defaultFormatter;
-    const scaleKey = config.unit || FIXED_UNIT;
+
+    const scaleKey = buildScaleKey(config);
     const colorMode = getFieldColorModeForField(field);
     const scaleColor = getFieldSeriesColor(field, theme);
     const seriesColor = scaleColor.color;
@@ -427,3 +435,34 @@ export function getNamesToFieldIndex(frame: DataFrame, allFrames: DataFrame[]):
   });
   return originNames;
 }
+
+function buildScaleKey(config: FieldConfig<GraphFieldConfig>) {
+  const defaultPart = 'na';
+
+  const scaleRange = `${config.min !== undefined ? config.min : defaultPart}-${
+    config.max !== undefined ? config.max : defaultPart
+  }`;
+
+  const scaleSoftRange = `${config.custom?.axisSoftMin !== undefined ? config.custom.axisSoftMin : defaultPart}-${
+    config.custom?.axisSoftMax !== undefined ? config.custom.axisSoftMax : defaultPart
+  }`;
+
+  const scalePlacement = `${config.custom?.axisPlacement !== undefined ? config.custom?.axisPlacement : defaultPart}`;
+
+  const scaleUnit = config.unit ?? FIXED_UNIT;
+
+  const scaleDistribution = config.custom?.scaleDistribution
+    ? getScaleDistributionPart(config.custom.scaleDistribution)
+    : ScaleDistribution.Linear;
+
+  const scaleLabel = Boolean(config.custom?.axisLabel) ? config.custom!.axisLabel : defaultPart;
+
+  return `${scaleUnit}/${scaleRange}/${scaleSoftRange}/${scalePlacement}/${scaleDistribution}/${scaleLabel}`;
+}
+
+function getScaleDistributionPart(config: ScaleDistributionConfig) {
+  if (config.type === ScaleDistribution.Log) {
+    return `${config.type}${config.log}`;
+  }
+  return config.type;
+}