Disable motion on all chart tooltips and LineChart highlights (improves performance for large datasets)

Author: techniq

frontend/src/lib/components/charts/common.ts

@@ -24,8 +24,8 @@ export const colors = [
 export const tooltipProps = {
 	root: {
 		variant: 'none',
-		class: 'text-small bg-neutral-200 border border-neutral-400 rounded-md shadow-lg'
-		// motion: false,
+		class: 'text-small bg-neutral-200 border border-neutral-400 rounded-md shadow-lg',
+		motion: false
 	},
 	header: {
 		class: 'text-neutral-700 bg-neutral-300 px-3 py-1'
@@ -41,6 +41,10 @@ export const tooltipProps = {
 	}
 } satisfies NonNullable<ComponentProps<typeof LineChart>['props']>['tooltip'];
 
+export const highlightProps = {
+	motion: false
+} satisfies NonNullable<ComponentProps<typeof LineChart>['props']>['highlight'];
+
 export const barChartProps = {
 	props: {
 		tooltip: tooltipProps
@@ -54,8 +58,8 @@ export const lineChartProps = {
 	},
 	props: {
 		spline: { class: 'stroke-1' },
-		tooltip: tooltipProps
-		// highlight: { motion: false }
+		tooltip: tooltipProps,
+		highlight: highlightProps
 	}
 } satisfies NonNullable<ComponentProps<typeof LineChart>>;