BarChart: Add check for empty series (#87761)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

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}
       />
     );

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,