From aa2dbd63f36277cb6bc0b36fba6aab0a02e05154 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 23 Sep 2021 06:00:36 -0400
Subject: [PATCH] PieChart: Filter NaN values from total calculation (#39503)
 (#39509)

* Filter NaN values from total calculation

* remove duplicated code, use missing value string for NaN and hidden series

(cherry picked from commit a1d8d6e95e99572ccaaf89fe81180bb1270b2811)

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>
---
 public/app/plugins/panel/piechart/PieChart.tsx      |  7 +++----
 public/app/plugins/panel/piechart/PieChartPanel.tsx | 12 ++++++------
 public/app/plugins/panel/piechart/utils.ts          |  9 +++++++++
 3 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 public/app/plugins/panel/piechart/utils.ts

diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx
index fb75c65dbfe..c0d53ec1a16 100644
--- a/public/app/plugins/panel/piechart/PieChart.tsx
+++ b/public/app/plugins/panel/piechart/PieChart.tsx
@@ -29,6 +29,7 @@ import { css } from '@emotion/css';
 import { useComponentInstanceId } from '@grafana/ui/src/utils/useComponetInstanceId';
 import { getTooltipContainerStyles } from '@grafana/ui/src/themes/mixins';
 import { selectors } from '@grafana/e2e-selectors';
+import { filterDisplayItems, sumDisplayItemsReducer } from './utils';
 
 /**
  * @beta
@@ -62,9 +63,7 @@ export const PieChart: FC<PieChartProps> = ({
     scroll: true,
   });
 
-  const filteredFieldDisplayValues = fieldDisplayValues.filter((dv) => {
-    return !dv.field.custom.hideFrom.viz;
-  });
+  const filteredFieldDisplayValues = fieldDisplayValues.filter(filterDisplayItems);
 
   const getValue = (d: FieldDisplay) => d.display.numeric;
   const getGradientId = (color: string) => `${componentInstanceId}-${tinycolor(color).toHex()}`;
@@ -74,7 +73,7 @@ export const PieChart: FC<PieChartProps> = ({
 
   const showLabel = displayLabels.length > 0;
   const showTooltip = tooltipOptions.mode !== 'none' && tooltip.tooltipOpen;
-  const total = filteredFieldDisplayValues.reduce((acc, item) => item.display.numeric + acc, 0);
+  const total = filteredFieldDisplayValues.reduce(sumDisplayItemsReducer, 0);
   const layout = getPieLayout(width, height, pieType);
   const colors = [
     ...new Set(
diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx
index cc5192aaa3a..8e93d529262 100644
--- a/public/app/plugins/panel/piechart/PieChartPanel.tsx
+++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx
@@ -22,6 +22,7 @@ import {
   VizLegend,
   VizLegendItem,
 } from '@grafana/ui';
+import { filterDisplayItems, sumDisplayItemsReducer } from './utils';
 
 const defaultLegendOptions: PieChartLegendOptions = {
   displayMode: LegendDisplayMode.List,
@@ -82,11 +83,7 @@ function getLegend(props: Props, displayValues: FieldDisplay[]) {
   if (legendOptions.displayMode === LegendDisplayMode.Hidden) {
     return undefined;
   }
-  const total = displayValues
-    .filter((item) => {
-      return !item.field.custom?.hideFrom?.viz;
-    })
-    .reduce((acc, item) => item.display.numeric + acc, 0);
+  const total = displayValues.filter(filterDisplayItems).reduce(sumDisplayItemsReducer, 0);
 
   const legendItems = displayValues
     // Since the pie chart is always sorted, let's sort the legend as well.
@@ -123,7 +120,10 @@ function getLegend(props: Props, displayValues: FieldDisplay[]) {
             displayValues.push({
               numeric: fractionOfTotal,
               percent: percentOfTotal,
-              text: hidden ? '-' : percentOfTotal.toFixed(0) + '%',
+              text:
+                hidden || isNaN(fractionOfTotal)
+                  ? props.fieldConfig.defaults.noValue ?? '-'
+                  : percentOfTotal.toFixed(0) + '%',
               title: valuesToShow.length > 1 ? 'Percent' : undefined,
             });
           }
diff --git a/public/app/plugins/panel/piechart/utils.ts b/public/app/plugins/panel/piechart/utils.ts
new file mode 100644
index 00000000000..3eac2f34885
--- /dev/null
+++ b/public/app/plugins/panel/piechart/utils.ts
@@ -0,0 +1,9 @@
+import { FieldDisplay } from '@grafana/data';
+
+export function filterDisplayItems(item: FieldDisplay) {
+  return !item.field.custom?.hideFrom?.viz && !isNaN(item.display.numeric);
+}
+
+export function sumDisplayItemsReducer(acc: number, item: FieldDisplay) {
+  return item.display.numeric + acc;
+}