diff --git a/.gitignore b/.gitignore index 9aa2aebd2e..0949f27b5a 100644 --- a/.gitignore +++ b/.gitignore @@ -55,3 +55,4 @@ storybook-static .agents .vscode/mcp.json AGENTS.md +.vitest/ diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue index e3fb33a826..9cb6761efd 100644 --- a/app/components/Chart/SplitSparkline.vue +++ b/app/components/Chart/SplitSparkline.vue @@ -59,7 +59,7 @@ const { colors } = useColors(rootEl) const isDarkMode = computed(() => resolvedMode.value === 'dark') -const selectedIndex = ref(null) +const selectedIndex = ref() const isInteracting = ref(false) function isLargeSeries(seriesIndex: number): boolean { @@ -149,7 +149,7 @@ function startInteraction() { function resetHover() { isInteracting.value = false - selectedIndex.value = null + selectedIndex.value = undefined step.value += 1 // required to reset all chart instances } @@ -175,6 +175,7 @@ const configs = computed(() => { : (lightenColor(seriesColor, 0.5) ?? seriesColor) // palette uses hex colours return { + useCursorPointer: true, a11y: { translations: { keyboardNavigation: $t( @@ -230,6 +231,7 @@ const configs = computed(() => { }, line: { color: seriesColor, + strokeWidth: 1, dashIndices, dashArray: 3, cutNullValues: false, @@ -252,14 +254,24 @@ const configs = computed(() => { }, padding: { left: 0, - right: 0, + right: 24, top: 0, bottom: 0, }, + // Drag to zoom + zoom: { + show: true, + resetButton: { + title: $t('package.trends.sparkline_zoom_reset.title'), + ariaLabel: $t('package.trends.sparkline_zoom_reset.aria_label'), + }, + }, }, } }) }) + +const zoomState = ref(null)