Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

Fix: created vs archived rendering errors; memoize options (#10562)

Browse Source 
Fixes the rendering / max update depth exceeded errors we were seeing in
the console for this chart by memoizing the options.

<img width="1710" height="1420" alt="image"
src="https://github.com/user-attachments/assets/9a24d4e5-b563-4a3c-9a76-915e0a5fda24"
/>

Now the chart doesn't throw any errors anymore.
This commit is contained in:
Thomas Heartman 2025-08-28 14:48:53 +02:00 committed by GitHub
parent 7fb523e348
commit b071b17dd6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 51 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -134,57 +134,62 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
const data =
notEnoughData || isLoading ? placeholderData : aggregateOrProjectData;
const options = useMemo(
() => ({
responsive: true,
interaction: {
mode: 'index' as const,
intersect: false,
},
plugins: {
legend: {
position: 'bottom' as const,
labels: {
color: theme.palette.text.secondary,
usePointStyle: true,
padding: 21,
boxHeight: 8,
},
},
tooltip: {
enabled: false,
position: 'average' as const,
external: createTooltip(setTooltip),
},
},
locale: locationSettings.locale,
scales: {
x: {
type: 'time' as const,
display: true,
time: {
unit: 'week' as const,
tooltipFormat: 'PPP',
},
grid: {
display: false,
},
},
y: {
type: 'linear' as const,
position: 'left' as const,
beginAtZero: true,
title: {
display: true,
text: 'Number of flags',
},
},
},
}),
[theme, locationSettings, setTooltip],
);
return (
<>
<Chart
type='bar'
data={data}
options={{
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: {
position: 'bottom' as const,
labels: {
color: theme.palette.text.secondary,
usePointStyle: true,
padding: 21,
boxHeight: 8,
},
},
tooltip: {
enabled: false,
position: 'average',
external: createTooltip(setTooltip),
},
},
locale: locationSettings.locale,
scales: {
x: {
type: 'time',
display: true,
time: {
unit: 'week',
tooltipFormat: 'PPP',
},
grid: {
display: false,
},
},
y: {
type: 'linear',
position: 'left',
beginAtZero: true,
title: {
display: true,
text: 'Number of flags',
},
},
},
}}
options={options}
height={100}
width={250}
/>