diff --git a/public/app/plugins/panel/state-timeline/utils.test.ts b/public/app/plugins/panel/state-timeline/utils.test.ts index 9644a27dd697..cff8d46a5959 100644 --- a/public/app/plugins/panel/state-timeline/utils.test.ts +++ b/public/app/plugins/panel/state-timeline/utils.test.ts @@ -182,7 +182,7 @@ describe('getThresholdItems', () => { }); describe('prepareTimelineLegendItems', () => { - it('should return legend items', () => { + it('should return legend items without crashing when single (base) threshold', () => { const frame: any = [ { refId: 'A', diff --git a/public/app/plugins/panel/state-timeline/utils.ts b/public/app/plugins/panel/state-timeline/utils.ts index 4cc969aa25c2..ba2b7db6a8c8 100644 --- a/public/app/plugins/panel/state-timeline/utils.ts +++ b/public/app/plugins/panel/state-timeline/utils.ts @@ -478,10 +478,21 @@ export function getThresholdItems(fieldConfig: FieldConfig, theme: GrafanaTheme2 const fmt = (v: number) => formattedValueToString(disp(v)); - for (let i = 1; i <= steps.length; i++) { - const step = steps[i - 1]; + for (let i = 0; i < steps.length; i++) { + let step = steps[i]; + let value = step.value; + let pre = ''; + let suf = ''; + + if (value === -Infinity && i < steps.length - 1) { + value = steps[i + 1].value; + pre = '< '; + } else { + suf = '+'; + } + items.push({ - label: i === 1 ? `< ${fmt(step.value)}` : `${fmt(step.value)}+`, + label: `${pre}${fmt(value)}${suf}`, color: theme.visualization.getColorByName(step.color), yAxis: 1, }); @@ -510,10 +521,9 @@ export function getFieldLegendItem(fields: Field[], theme: GrafanaTheme2): VizLe const items: VizLegendItem[] = []; const fieldConfig = fields[0].config; const colorMode = fieldConfig.color?.mode ?? FieldColorModeId.Fixed; - const thresholds = fieldConfig.thresholds; // If thresholds are enabled show each step in the legend - if (colorMode === FieldColorModeId.Thresholds && thresholds?.steps && thresholds.steps.length > 1) { + if (colorMode === FieldColorModeId.Thresholds) { return getThresholdItems(fieldConfig, theme); }