From fa66816be41a53ed65d665a3a371aba81ee40449 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Tue, 14 May 2024 06:38:29 -0600
Subject: [PATCH] BarChart: Add check for empty series (#87761)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
---
 .../plugins/panel/barchart/BarChartPanel.tsx  | 28 +++++++++++--------
 public/app/plugins/panel/barchart/utils.ts    |  6 ++--
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx
index ac544801c73..b1b11abd435 100644
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx
@@ -82,21 +82,22 @@ export const BarChartPanel = (props: PanelProps<Options>) => {
   );
 
   const vizSeries = useMemo(
-    () => [
-      {
-        ...info.series![0],
-        fields: info.series![0].fields.filter((field, i) => i === 0 || !field.state?.hideFrom?.viz),
-      },
-    ],
+    () =>
+      info.series.map((frame) => ({
+        ...frame,
+        fields: frame.fields.filter((field, i) => i === 0 || !field.state?.hideFrom?.viz),
+      })),
     [info.series]
   );
 
-  const xGroupsCount = vizSeries[0].length;
-  const seriesCount = vizSeries[0].fields?.length;
+  const xGroupsCount = vizSeries[0]?.length ?? 0;
+  const seriesCount = vizSeries[0]?.fields.length ?? 0;
 
   let { builder, prepData } = useMemo(
     () => {
-      return prepConfig({ series: vizSeries, color: info.color, orientation, options, timeZone, theme });
+      return xGroupsCount === 0
+        ? { builder: null, prepData: null }
+        : prepConfig({ series: vizSeries, color: info.color, orientation, options, timeZone, theme });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -125,15 +126,18 @@ export const BarChartPanel = (props: PanelProps<Options>) => {
     ]
   );
 
-  const plotData = useMemo(() => prepData(vizSeries, info.color), [prepData, vizSeries, info.color]);
+  const plotData = useMemo(
+    () => (prepData == null ? [] : prepData(vizSeries, info.color)),
+    [prepData, vizSeries, info.color]
+  );
 
-  if (info.warn != null) {
+  if (info.warn != null || builder == null) {
     return (
       <PanelDataErrorView
         panelId={id}
         fieldConfig={fieldConfig}
         data={data}
-        message={info.warn}
+        message={info.warn ?? ''}
         needsNumberField={true}
       />
     );
diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts
index 550ea52c711..54994587323 100644
--- a/public/app/plugins/panel/barchart/utils.ts
+++ b/public/app/plugins/panel/barchart/utils.ts
@@ -308,18 +308,18 @@ export const prepConfig = ({ series, color, orientation, options, timeZone, them
   });
 
   const xFieldAxisPlacement =
-    frame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden
+    frame.fields[0]?.config.custom?.axisPlacement !== AxisPlacement.Hidden
       ? vizOrientation.xOri === ScaleOrientation.Horizontal
         ? AxisPlacement.Bottom
         : AxisPlacement.Left
       : AxisPlacement.Hidden;
-  const xFieldAxisShow = frame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden;
+  const xFieldAxisShow = frame.fields[0]?.config.custom?.axisPlacement !== AxisPlacement.Hidden;
 
   builder.addAxis({
     scaleKey: 'x',
     isTime: false,
     placement: xFieldAxisPlacement,
-    label: frame.fields[0].config.custom?.axisLabel,
+    label: frame.fields[0]?.config.custom?.axisLabel,
     splits: config.xSplits,
     filter: vizOrientation.xOri === 0 ? config.hFilter : undefined,
     values: config.xValues,