diff --git a/devenv/dev-dashboards/panel-trend/trend_example.json b/devenv/dev-dashboards/panel-trend/trend_example.json index 2f16489573d..37c1b7546c1 100644 --- a/devenv/dev-dashboards/panel-trend/trend_example.json +++ b/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 } diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts index ee16d9a348d..111f5632484 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts +++ b/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 { @@ -45,6 +47,8 @@ export class UPlotScaleBuilder extends PlotConfigBuilder { centeredZero, decimals, stackingMode, + padMinBy = 0.1, + padMaxBy = 0.1, } = this.props; if (stackingMode === StackingMode.Percent) { @@ -144,13 +148,13 @@ export class UPlotScaleBuilder extends PlotConfigBuilder { 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, diff --git a/public/app/core/components/TimeSeries/utils.ts b/public/app/core/components/TimeSeries/utils.ts index f87801d5955..1bf0c5a18c0 100644 --- a/public/app/core/components/TimeSeries/utils.ts +++ b/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)), }); }