Histogram: Send proper dataframe to PlotLegend (#53284)

* Send proper dataframe to PlotLegend

* Update dataFrameFieldIndex for multiple frames
This commit is contained in:
Victor Marin 2022-08-09 15:39:42 +03:00 committed by GitHub
parent 8185b6fdf7
commit 3893c46976
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 4 deletions

View File

@ -41,6 +41,7 @@ export interface HistogramProps extends Themeable2 {
height: number; height: number;
structureRev?: number; // a number that will change when the frames[] structure changes structureRev?: number; // a number that will change when the frames[] structure changes
legend: VizLegendOptions; legend: VizLegendOptions;
rawSeries?: DataFrame[];
children?: (builder: UPlotConfigBuilder, frame: DataFrame) => React.ReactNode; children?: (builder: UPlotConfigBuilder, frame: DataFrame) => React.ReactNode;
} }
@ -209,8 +210,8 @@ const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
// The following properties are not used in the uPlot config, but are utilized as transport for legend config // The following properties are not used in the uPlot config, but are utilized as transport for legend config
dataFrameFieldIndex: { dataFrameFieldIndex: {
fieldIndex: i, fieldIndex: 1,
frameIndex: 0, frameIndex: i - 2,
}, },
}); });
} }
@ -271,11 +272,11 @@ export class Histogram extends React.Component<HistogramProps, State> {
renderLegend(config: UPlotConfigBuilder) { renderLegend(config: UPlotConfigBuilder) {
const { legend } = this.props; const { legend } = this.props;
if (!config || legend.showLegend === false) { if (!config || legend.showLegend === false || !this.props.rawSeries) {
return null; return null;
} }
return <PlotLegend data={[this.props.alignedFrame]} config={config} maxHeight="35%" maxWidth="60%" {...legend} />; return <PlotLegend data={this.props.rawSeries} config={config} maxHeight="35%" maxWidth="60%" {...legend} />;
} }
componentDidUpdate(prevProps: HistogramProps) { componentDidUpdate(prevProps: HistogramProps) {

View File

@ -45,6 +45,7 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
options={options} options={options}
theme={theme} theme={theme}
legend={options.legend} legend={options.legend}
rawSeries={data.series}
structureRev={data.structureRev} structureRev={data.structureRev}
width={width} width={width}
height={height} height={height}