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: highlight is too wide when batching weeks in archived:created chart (#10751)

Browse Source 
Makes it so that the default width calculation for the highlighter
plugin attempts to first use the number of entries in the data set for
the x axis, but falls back to using the number of categories if that is
not available. This is probably the more "correct" / "do what I mean"
approach to setting highlighter width.

Fixes an issue where the highlight would be too wide if the labels were
set to "auto" instead of "data".

The width function is only used in two places (the archived:created
graph and the network graph). Both of those work fine with the new
update.

Before:
<img width="831" height="401" alt="image"
src="https://github.com/user-attachments/assets/8487b95f-cc49-4ff6-a519-7f79e1048eed"
/>

After:
<img width="886" height="378" alt="image"
src="https://github.com/user-attachments/assets/ad2102cb-3342-4a28-aa54-6b31caa495e1"
/>
This commit is contained in:
Thomas Heartman 2025-10-07 14:34:06 +02:00 committed by GitHub
parent 6a63e27ebd
commit 3e10ca6611
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/common/Chart/customHighlightPlugin.ts
View File

@ -7,9 +7,10 @@ type CustomHighlightPluginOptions = {
};
const defaultCategoryPercentage = 0.8;
export const categoryWidth = (chart: Chart) => {
export const smartWidth = (chart: Chart) => {
const xAxisEntries = chart.data.datasets[0]?.data ?? chart.scales.x.ticks;
return (
(chart.width / chart.scales.x.ticks.length) *
(chart.width / xAxisEntries.length) *
(chart.options.datasets?.bar?.categoryPercentage ??
defaultCategoryPercentage)
);
@ -22,7 +23,7 @@ export const customHighlightPlugin = (
id: 'customLine',
beforeDraw: (chart: Chart) => {
const {
width = categoryWidth,
width = smartWidth,
maxHighlightOpacity = 0.12,
bottomOverflow = 0,
} = options ?? {};