diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx index 188f3d93c33..04190c2ce61 100644 --- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx +++ b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx @@ -2,11 +2,14 @@ import React from 'react'; import { DataFrame, + DisplayProcessor, DisplayValue, fieldReducers, + getDisplayProcessor, getFieldDisplayName, getFieldSeriesColor, reduceField, + ReducerID, } from '@grafana/data'; import { VizLegendOptions, AxisPlacement } from '@grafana/schema'; @@ -66,6 +69,8 @@ export const PlotLegend: React.FC = ({ } const fmt = field.display ?? defaultFormatter; + let countFormatter: DisplayProcessor | null = null; + const fieldCalcs = reduceField({ field, reducers: calcs, @@ -73,9 +78,43 @@ export const PlotLegend: React.FC = ({ return calcs.map((reducerId) => { const fieldReducer = fieldReducers.get(reducerId); + let formatter = fmt; + + if (fieldReducer.id === ReducerID.diffperc) { + formatter = getDisplayProcessor({ + field: { + ...field, + config: { + ...field.config, + unit: 'percent', + }, + }, + theme, + }); + } + + if ( + fieldReducer.id === ReducerID.count || + fieldReducer.id === ReducerID.changeCount || + fieldReducer.id === ReducerID.distinctCount + ) { + if (!countFormatter) { + countFormatter = getDisplayProcessor({ + field: { + ...field, + config: { + ...field.config, + unit: 'none', + }, + }, + theme, + }); + } + formatter = countFormatter; + } return { - ...fmt(fieldCalcs[reducerId]), + ...formatter(fieldCalcs[reducerId]), title: fieldReducer.name, description: fieldReducer.description, };