BarChart: fix stale colorByField being used in value mappings (#54820)

This commit is contained in:
Leon Sorokin 2022-09-07 09:31:31 -05:00 committed by GitHub
parent b193eaed6e
commit 75de42fba7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -4,6 +4,7 @@ import {
CartesianCoords2D, CartesianCoords2D,
compareDataFrameStructures, compareDataFrameStructures,
DataFrame, DataFrame,
Field,
getFieldDisplayName, getFieldDisplayName,
PanelProps, PanelProps,
TimeRange, TimeRange,
@ -97,9 +98,13 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
}; };
const frame0Ref = useRef<DataFrame>(); const frame0Ref = useRef<DataFrame>();
const colorByFieldRef = useRef<Field>();
const info = useMemo(() => prepareBarChartDisplayValues(data?.series, theme, options), [data, theme, options]); const info = useMemo(() => prepareBarChartDisplayValues(data?.series, theme, options), [data, theme, options]);
const chartDisplay = 'viz' in info ? info : null; const chartDisplay = 'viz' in info ? info : null;
colorByFieldRef.current = chartDisplay?.colorByField;
const structureRef = useRef(10000); const structureRef = useRef(10000);
useMemo(() => { useMemo(() => {
@ -226,7 +231,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
const disp = colorByField.display!; const disp = colorByField.display!;
fillOpacity = (colorByField.config.custom.fillOpacity ?? 100) / 100; fillOpacity = (colorByField.config.custom.fillOpacity ?? 100) / 100;
// gradientMode? ignore? // gradientMode? ignore?
getColor = (seriesIdx: number, valueIdx: number) => disp(colorByField.values.get(valueIdx)).color!; getColor = (seriesIdx: number, valueIdx: number) => disp(colorByFieldRef.current?.values.get(valueIdx)).color!;
} }
const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => { const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {