IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PlotLegend: Memoize for better performance (#56123)

Browse Source
This commit is contained in:
kay delaney 2022-10-14 09:51:27 +01:00 committed by GitHub
parent 08ffcfdf16
commit e819ed0f51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 93 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
View File

@ -9,8 +9,8 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
gradient?: string;
}
export const SeriesIcon = React.forwardRef<HTMLDivElement, Props>(
({ color, className, gradient, ...restProps }, ref) => {
export const SeriesIcon = React.memo(
React.forwardRef<HTMLDivElement, Props>(({ color, className, gradient, ...restProps }, ref) => {
const theme = useTheme2();
let cssColor: string;
@ -36,7 +36,7 @@ export const SeriesIcon = React.forwardRef<HTMLDivElement, Props>(
};
return <div data-testid="series-icon" ref={ref} className={className} style={styles} {...restProps} />;
}
})
);
SeriesIcon.displayName = 'SeriesIcon';

2
packages/grafana-ui/src/components/VizLegend/VizLegend.tsx
View File

@ -110,4 +110,4 @@ export function VizLegend<T>({
}
}
VizLegend.displayName = 'Legend';
VizLegend.displayName = 'VizLegend';

4
packages/grafana-ui/src/components/VizLegend/VizLegendSeriesIcon.tsx
View File

@ -15,7 +15,7 @@ interface Props {
/**
* @internal
*/
export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ seriesName, color, gradient, readonly }) => {
export const VizLegendSeriesIcon = React.memo(({ seriesName, color, gradient, readonly }: Props) => {
const { onSeriesColorChange } = usePanelContext();
const onChange = useCallback(
(color: string) => {
@ -40,6 +40,6 @@ export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ seriesName
);
}
return <SeriesIcon color={color} gradient={gradient} />;
};
});
VizLegendSeriesIcon.displayName = 'VizLegendSeriesIcon';

13
packages/grafana-ui/src/components/uPlot/PlotLegend.tsx
View File

@ -27,14 +27,8 @@ interface PlotLegendProps extends VizLegendOptions, Omit<VizLayoutLegendProps, '
config: UPlotConfigBuilder;
}
export const PlotLegend: React.FC<PlotLegendProps> = ({
data,
config,
placement,
calcs,
displayMode,
...vizLayoutLegendProps
}) => {
export const PlotLegend: React.FC<PlotLegendProps> = React.memo(
({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }) => {
const theme = useTheme2();
const legendItems = config
.getSeries()
@ -136,6 +130,7 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
/>
</VizLayout.Legend>
);
};
}
);
PlotLegend.displayName = 'PlotLegend';