From 80a0de511f4cd234c9ec091104d974b818760d49 Mon Sep 17 00:00:00 2001 From: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com> Date: Fri, 24 May 2024 15:41:20 -0400 Subject: [PATCH] data trails: alternate legend display for missing label value (#88153) * fix: alternate legend display for missing label value * Update public/app/features/trails/ActionTabs/BreakdownScene.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * Update public/app/features/trails/ActionTabs/BreakdownScene.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> --------- Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> --- .../trails/ActionTabs/BreakdownScene.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/public/app/features/trails/ActionTabs/BreakdownScene.tsx b/public/app/features/trails/ActionTabs/BreakdownScene.tsx index fddae99bb79..a187f340b03 100644 --- a/public/app/features/trails/ActionTabs/BreakdownScene.tsx +++ b/public/app/features/trails/ActionTabs/BreakdownScene.tsx @@ -21,6 +21,7 @@ import { VariableDependencyConfig, VizPanel, } from '@grafana/scenes'; +import { DataQuery } from '@grafana/schema'; import { Button, Field, useStyles2 } from '@grafana/ui'; import { ALL_VARIABLE_VALUE } from 'app/features/variables/constants'; @@ -303,6 +304,7 @@ export function buildAllLayout(options: Array>, queryDef ) .setHeaderActions(new SelectLabelAction({ labelName: String(option.value) })) .setUnit(unit) + .setBehaviors([fixLegendForUnspecifiedLabelValueBehavior]) .build(); vizPanel.addActivationHandler(() => { @@ -456,3 +458,27 @@ function getBreakdownSceneFor(model: SceneObject): BreakdownScene { throw new Error('Unable to find breakdown scene'); } + +function fixLegendForUnspecifiedLabelValueBehavior(vizPanel: VizPanel) { + vizPanel.state.$data?.subscribeToState((newState, prevState) => { + const target = newState.data?.request?.targets[0]; + if (hasLegendFormat(target)) { + const { legendFormat } = target; + // Assume {{label}} + const label = legendFormat.slice(2, -2); + + newState.data?.series.forEach((series) => { + if (!series.fields[1].labels?.[label]) { + const labels = series.fields[1].labels; + if (labels) { + labels[label] = ``; + } + } + }); + } + }); +} + +function hasLegendFormat(target: DataQuery | undefined): target is DataQuery & { legendFormat: string } { + return target !== undefined && 'legendFormat' in target && typeof target.legendFormat === 'string'; +}