PieChart: Display "No data" when there is no data (#38808) (#38960)

PieChart: Display "No data" when there is no data
(cherry picked from commit ecf40f0331)

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>

public/app/plugins/panel/piechart/PieChart.tsx

@@ -67,10 +67,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) => {

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();