From 0876c647d50ac8630d4a1db43ad3bef1a4b091f2 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 6 Jun 2022 13:55:27 -0400
Subject: [PATCH] Legend: Use correct unit for percent and count calculations
 (#49004) (#49151)

(cherry picked from commit cdc6344a969560f46c753f9da0b2ff8218a9b9bc)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
---
 .../src/components/uPlot/PlotLegend.tsx       | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

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<PlotLegendProps> = ({
           }
 
           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<PlotLegendProps> = ({
 
           return calcs.map<DisplayValue>((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,
             };