From ecf40f033108a220fdf4f64b1413c2a9b361b9f2 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Wed, 8 Sep 2021 09:07:09 +0200
Subject: [PATCH] PieChart: Display "No data" when there is no data (#38808)

PieChart: Display "No data" when there is no data
---
 public/app/plugins/panel/piechart/PieChart.tsx      |  4 ----
 public/app/plugins/panel/piechart/PieChartPanel.tsx | 12 ++++++++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx
index e24dcf8d3b8..fb75c65dbfe 100644
--- a/public/app/plugins/panel/piechart/PieChart.tsx
+++ b/public/app/plugins/panel/piechart/PieChart.tsx
@@ -66,10 +66,6 @@ export const PieChart: FC<PieChartProps> = ({
     return !dv.field.custom.hideFrom.viz;
   });
 
-  if (filteredFieldDisplayValues.length < 0) {
-    return <div>No data</div>;
-  }
-
   const getValue = (d: FieldDisplay) => d.display.numeric;
   const getGradientId = (color: string) => `${componentInstanceId}-${tinycolor(color).toHex()}`;
   const getGradientColor = (color: string) => {
diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx
index 42f6bb1f6d6..69f80843757 100644
--- a/public/app/plugins/panel/piechart/PieChartPanel.tsx
+++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx
@@ -49,6 +49,14 @@ export function PieChartPanel(props: Props) {
     timeZone,
   });
 
+  if (!hasFrames(fieldDisplayValues)) {
+    return (
+      <div className="panel-empty">
+        <p>No data</p>
+      </div>
+    );
+  }
+
   return (
     <VizLayout width={width} height={height} legend={getLegend(props, fieldDisplayValues)}>
       {(vizWidth: number, vizHeight: number) => {
@@ -127,6 +135,10 @@ function getLegend(props: Props, displayValues: FieldDisplay[]) {
   );
 }
 
+function hasFrames(fieldDisplayValues: FieldDisplay[]) {
+  return fieldDisplayValues.some((fd) => fd.view?.dataFrame.length);
+}
+
 function useSliceHighlightState() {
   const [highlightedTitle, setHighlightedTitle] = useState<string>();
   const { eventBus } = usePanelContext();