TimeSeries: Fix fill below for dataframes with name (#35453)

Use original dataframes for matching config.

public/app/plugins/panel/barchart/BarChart.tsx

@@ -34,7 +34,7 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
     return <PlotLegend data={props.frames} config={config} maxHeight="35%" maxWidth="60%" {...props.legend} />;
   };
 
-  const prepConfig = (alignedFrame: DataFrame, getTimeRange: () => TimeRange) => {
+  const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
     const { timeZone, orientation, barWidth, showValue, groupWidth, stacking, legend, tooltip, text } = props;
 
     return preparePlotConfigBuilder({
@@ -51,6 +51,7 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
       legend,
       tooltip,
       text,
+      allFrames: props.frames,
     });
   };
 

public/app/plugins/panel/barchart/utils.test.ts

@@ -105,6 +105,7 @@ describe('BarChart utils', () => {
         timeZone: DefaultTimeZone,
         getTimeRange: getDefaultTimeRange,
         eventBus: new EventBusSrv(),
+        allFrames: [frame],
       }).getConfig();
       expect(result).toMatchSnapshot();
     });
@@ -119,6 +120,7 @@ describe('BarChart utils', () => {
           timeZone: DefaultTimeZone,
           getTimeRange: getDefaultTimeRange,
           eventBus: new EventBusSrv(),
+          allFrames: [frame],
         }).getConfig()
       ).toMatchSnapshot();
     });
@@ -133,6 +135,7 @@ describe('BarChart utils', () => {
           timeZone: DefaultTimeZone,
           getTimeRange: getDefaultTimeRange,
           eventBus: new EventBusSrv(),
+          allFrames: [frame],
         }).getConfig()
       ).toMatchSnapshot();
     });

public/app/plugins/panel/state-timeline/TimelineChart.tsx

@@ -35,7 +35,7 @@ export class TimelineChart extends React.Component<TimelineProps> {
   static contextType = PanelContextRoot;
   panelContext: PanelContext = {} as PanelContext;
 
-  prepConfig = (alignedFrame: DataFrame, getTimeRange: () => TimeRange) => {
+  prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
     this.panelContext = this.context as PanelContext;
     const { eventBus } = this.panelContext;
 
@@ -43,6 +43,7 @@ export class TimelineChart extends React.Component<TimelineProps> {
       frame: alignedFrame,
       getTimeRange,
       eventBus,
+      allFrames: this.props.frames,
       ...this.props,
 
       // When there is only one row, use the full space