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
This commit is contained in:
Dominik Prokop 2021-11-18 08:55:26 +01:00 committed by GitHub
parent 0798fbb5d4
commit 1be9a61f43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 13 deletions

View File

@ -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",

View File

@ -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 = {
...defaultConfig,
...config.custom,
};
const config = {
...field.config,
custom: {
...defaultConfig,
...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;
}