Trend: Add support for a logarithmic x axis (#101433)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

devenv/dev-dashboards/panel-trend/trend_example.json

@@ -18,8 +18,8 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
+  "id": 21370,
   "links": [],
-  "liveNow": false,
   "panels": [
     {
       "datasource": {
@@ -29,16 +29,16 @@
         "defaults": {
           "color": {
             "fixedColor": "blue",
-            "mode": "fixed"
+            "mode": "palette-classic"
           },
           "custom": {
+            "axisBorderShow": false,
             "axisCenteredZero": false,
             "axisColorMode": "series",
-            "axisLabel": "Torque (NM)",
+            "axisLabel": "",
             "axisPlacement": "auto",
-            "axisSoftMax": 280,
-            "axisSoftMin": 80,
             "barAlignment": 0,
+            "barWidthFactor": 0.6,
             "drawStyle": "line",
             "fillOpacity": 0,
             "gradientMode": "none",
@@ -47,6 +47,7 @@
               "tooltip": false,
               "viz": false
             },
+            "insertNulls": false,
             "lineInterpolation": "smooth",
             "lineStyle": {
               "fill": "solid"
@@ -73,7 +74,7 @@
             "steps": [
               {
                 "color": "green",
-                "value": null
+                "value": 0
               },
               {
                 "color": "red",
@@ -89,24 +90,24 @@
               "options": "Power (kW)"
             },
             "properties": [
-              {
-                "id": "custom.axisPlacement",
-                "value": "right"
-              },
               {
                 "id": "custom.axisLabel",
                 "value": "Power (kW)"
               },
-              {
-                "id": "custom.axisSoftMax",
-                "value": 120
-              },
               {
                 "id": "color",
                 "value": {
                   "fixedColor": "red",
                   "mode": "fixed"
                 }
+              },
+              {
+                "id": "custom.axisSoftMin",
+                "value": 20
+              },
+              {
+                "id": "custom.axisSoftMax",
+                "value": 120
               }
             ]
           },
@@ -119,6 +120,41 @@
               {
                 "id": "custom.axisLabel",
                 "value": "Speed (RPM)"
+              },
+              {
+                "id": "custom.axisSoftMin",
+                "value": 600
+              },
+              {
+                "id": "custom.axisSoftMax",
+                "value": 6800
+              }
+            ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Torque (NM)"
+            },
+            "properties": [
+              {
+                "id": "custom.axisLabel",
+                "value": "Torque (NM)"
+              },
+              {
+                "id": "color",
+                "value": {
+                  "fixedColor": "blue",
+                  "mode": "fixed"
+                }
+              },
+              {
+                "id": "custom.axisSoftMin",
+                "value": 80
+              },
+              {
+                "id": "custom.axisSoftMax",
+                "value": 280
               }
             ]
           }
@@ -139,14 +175,16 @@
           "showLegend": true
         },
         "tooltip": {
+          "hideZeros": false,
           "mode": "single",
           "sort": "none"
         },
         "xField": "Speed (RPM)"
       },
+      "pluginVersion": "12.2.0-pre",
       "targets": [
         {
-          "csvContent": "Speed (RPM),Torque (NM),Power (kW)\n0,,\n500,,\n800,180,20\n1500,215,40\n2000,227,50\n2500,230,62\n3000,233,75\n3500,236,86\n4000,234,92\n4500,230,100\n5000,220,107\n5500,210,110\n6000,178,106\n6500,120,92\n7000,,\n",
+          "csvContent": "Speed (RPM),Torque (NM),Power (kW)\n800,180,20\n1500,215,40\n2000,227,50\n2500,230,62\n3000,233,75\n3500,236,86\n4000,234,92\n4500,230,100\n5000,220,107\n5500,210,110\n6000,178,106\n6500,120,92",
           "datasource": {
             "type": "grafana-testdata-datasource"
           },
@@ -158,8 +196,9 @@
       "type": "trend"
     }
   ],
+  "preload": false,
   "refresh": "",
-  "schemaVersion": 38,
+  "schemaVersion": 41,
   "tags": ["gdev", "panel-tests", "graph-ng", "trend"],
   "templating": {
     "list": []
@@ -172,6 +211,5 @@
   "timezone": "",
   "title": "Panel Tests - Trend",
   "uid": "b36b5576-2e3d-4b0c-8dce-e79514d99345",
-  "version": 4,
-  "weekStart": ""
+  "version": 16
 }

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

@@ -22,6 +22,8 @@ export interface ScaleProps {
   centeredZero?: boolean;
   decimals?: DecimalCount;
   stackingMode?: StackingMode;
+  padMinBy?: number;
+  padMaxBy?: number;
 }
 
 export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
@@ -45,6 +47,8 @@ export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
       centeredZero,
       decimals,
       stackingMode,
+      padMinBy = 0.1,
+      padMaxBy = 0.1,
     } = this.props;
 
     if (stackingMode === StackingMode.Percent) {
@@ -144,13 +148,13 @@ export class UPlotScaleBuilder extends PlotConfigBuilder<ScaleProps, Scale> {
 
     const rangeConfig: Range.Config = {
       min: {
-        pad: 0.1,
+        pad: padMinBy,
         hard: hardMin ?? -Infinity,
         soft: softMin || 0,
         mode: softMinMode,
       },
       max: {
-        pad: 0.1,
+        pad: padMaxBy,
         hard: hardMax ?? Infinity,
         soft: softMax || 0,
         mode: softMaxMode,

public/app/core/components/TimeSeries/utils.ts

@@ -27,6 +27,7 @@ import {
   AxisColorMode,
   GraphGradientMode,
   VizOrientation,
+  ScaleDistributionConfig,
 } from '@grafana/schema';
 
 // unit lookup needed to determine if we want power-of-2 or power-of-10 axis ticks
@@ -180,20 +181,33 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({
       });
     }
   } else {
+    let custom = xField.config.custom;
+    let scaleDistr: ScaleDistributionConfig = { ...custom?.scaleDistribution };
+
     builder.addScale({
       scaleKey: xScaleKey,
       orientation: isHorizontal ? ScaleOrientation.Horizontal : ScaleOrientation.Vertical,
       direction: isHorizontal ? ScaleDirection.Right : ScaleDirection.Up,
-      range: (u, dataMin, dataMax) => [xField.config.min ?? dataMin, xField.config.max ?? dataMax],
+      distribution: scaleDistr?.type,
+      log: scaleDistr?.log,
+      linearThreshold: scaleDistr?.linearThreshold,
+      min: xField.config.min,
+      max: xField.config.max,
+      softMin: custom?.axisSoftMin,
+      softMax: custom?.axisSoftMax,
+      centeredZero: custom?.axisCenteredZero,
+      decimals: xField.config.decimals,
+      padMinBy: 0,
+      padMaxBy: 0,
     });
 
     builder.addAxis({
       scaleKey: xScaleKey,
       placement: xFieldAxisPlacement,
       show: xFieldAxisShow,
-      label: xField.config.custom?.axisLabel,
+      label: custom?.axisLabel,
       theme,
-      grid: { show: xField.config.custom?.axisGridShow },
+      grid: { show: custom?.axisGridShow },
       formatValue: (v, decimals) => formattedValueToString(xField.display!(v, decimals)),
     });
   }