PieChart: Filter NaN values from total calculation (#39503)

* Filter NaN values from total calculation

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

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(

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.
@@ -115,7 +112,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,
             });
           }

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;
+}