use cursor-crosshair on brushable charts (#454)

ken-zlai · web-flow · commit c7cb682f36a6 · 2025-02-28T10:56:47.000-07:00
## Summary

## Checklist
- [ ] Added Unit Tests
- [ ] Covered by existing CI
- [ ] Integration tested
- [ ] Documentation update
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -68,7 +68,7 @@
 		"clsx": "^2.1.1",
 		"d3": "^7.9.0",
 		"dotenv": "^16.4.7",
-		"layerchart": "^1.0.1",
+		"layerchart": "^1.0.2",
 		"lodash": "^4.17.21",
 		"svelte-inspect-value": "0.3.0",
 		"svelte-ux": "^1.0.0",
diff --git a/frontend/src/lib/components/charts/FeaturesLineChart.svelte b/frontend/src/lib/components/charts/FeaturesLineChart.svelte
@@ -49,6 +49,11 @@
 		hideDelay: 150,
 		...(typeof restProps.tooltip === 'object' ? restProps.tooltip : null)
 	}}
+	props={{
+		canvas: {
+			class: 'cursor-crosshair'
+		}
+	}}
 >
 	<svelte:fragment slot="aboveMarks" let:xScale let:yScale>
 		{#if markPoint}
diff --git a/frontend/src/lib/components/charts/PercentileLineChart.svelte b/frontend/src/lib/components/charts/PercentileLineChart.svelte
@@ -57,4 +57,9 @@
 		},
 		restProps
 	)}
+	props={{
+		canvas: {
+			class: 'cursor-crosshair'
+		}
+	}}
 />
