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; gradient?: string;
} }
export const SeriesIcon = React.forwardRef<HTMLDivElement, Props>( export const SeriesIcon = React.memo(
({ color, className, gradient, ...restProps }, ref) => { React.forwardRef<HTMLDivElement, Props>(({ color, className, gradient, ...restProps }, ref) => {
const theme = useTheme2(); const theme = useTheme2();
let cssColor: string; 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} />; return <div data-testid="series-icon" ref={ref} className={className} style={styles} {...restProps} />;
} })
); );
SeriesIcon.displayName = 'SeriesIcon'; 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 * @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 { onSeriesColorChange } = usePanelContext();
const onChange = useCallback( const onChange = useCallback(
(color: string) => { (color: string) => {
@ -40,6 +40,6 @@ export const VizLegendSeriesIcon: React.FunctionComponent<Props> = ({ seriesName
); );
} }
return <SeriesIcon color={color} gradient={gradient} />; return <SeriesIcon color={color} gradient={gradient} />;
}; });
VizLegendSeriesIcon.displayName = 'VizLegendSeriesIcon'; 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; config: UPlotConfigBuilder;
} }
export const PlotLegend: React.FC<PlotLegendProps> = ({ export const PlotLegend: React.FC<PlotLegendProps> = React.memo(
data, ({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }) => {
config,
placement,
calcs,
displayMode,
...vizLayoutLegendProps
}) => {
const theme = useTheme2(); const theme = useTheme2();
const legendItems = config const legendItems = config
.getSeries() .getSeries()
@ -136,6 +130,7 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
/> />
</VizLayout.Legend> </VizLayout.Legend>
); );
}; }
);
PlotLegend.displayName = 'PlotLegend'; PlotLegend.displayName = 'PlotLegend';