some chart stylings to match the old version (#351)

## Summary
Couple of changes to get my feet wet with LayerChart and bring the chart
styles closer to what they were using ECharts.

## Checklist
- [ ] Added Unit Tests
- [ ] Covered by existing CI
- [ ] Integration tested
- [ ] Documentation update



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced chart interactivity with improved tooltip behavior and legend
styling for a smoother, more engaging visualization experience.
- Added customizable options for axis configurations and highlighted
points, allowing for a more refined display of data trends.

- **Chores**
- Updated a core charting dependency to its latest version, contributing
to improved performance and stability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: ken-zlai

frontend/package-lock.json

@@ -66,7 +66,7 @@
 		"clsx": "^2.1.1",
 		"d3": "^7.9.0",
 		"dotenv": "^16.4.7",
-		"layerchart": "^0.93.9",
+		"layerchart": "^0.95.0",
 		"lodash": "^4.17.21",
 		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.1"

frontend/package.json

@@ -51,11 +51,20 @@
 		};
 	})}
 	padding={{ left: 24, bottom: 48 }}
-	legend={{ placement: 'bottom-left', classes: { root: 'right-0 overflow-auto scrollbar-none' } }}
+	legend={{
+		placement: 'bottom-left',
+		classes: {
+			root: 'right-0 overflow-auto scrollbar-none',
+			swatch: 'h-2 w-2 rounded-full',
+			label: 'text-sm',
+			item: () => 'flex items-center gap-2'
+		}
+	}}
 	renderContext="canvas"
 	{...lineChartProps}
 	{...restProps}
 	brush={{ onbrushend }}
+	tooltip={{ hideDelay: 150 }}
 >
 	<svelte:fragment slot="aboveMarks" let:xScale let:yScale>
 		{#if markPoint}
@@ -72,7 +81,14 @@
 		{/if}
 	</svelte:fragment>
 
-	<svelte:fragment slot="tooltip" let:x let:y let:height let:visibleSeries>
+	<svelte:fragment
+		slot="tooltip"
+		let:x
+		let:y
+		let:height
+		let:visibleSeries
+		let:setHighlightSeriesKey
+	>
 		<Tooltip.Root {...tooltipProps.root} x="data" y={height + 24} pointerEvents let:data>
 			<Tooltip.Header {...tooltipProps.header}>
 				{formatDate(x(data))}
@@ -87,6 +103,8 @@
 					<button
 						class="col-span-full grid grid-cols-[1fr,auto] gap-6 hover:bg-neutral-400 py-2 px-3 rounded"
 						onclick={() => onitemclick?.({ series: s, data: seriesTooltipData, value })}
+						onmouseenter={() => setHighlightSeriesKey(s.key)}
+						onmouseleave={() => setHighlightSeriesKey(null)}
 					>
 						<Tooltip.Item
 							label={s.label ?? (s.key !== 'default' ? s.key : 'value')}

frontend/src/lib/components/charts/FeaturesLineChart.svelte

@@ -23,6 +23,20 @@ export const colors = [
 	'#CB5587'
 ];
 
+export const xAxisProps = {
+	placement: 'bottom' as const,
+	classes: {
+		tickLabel: 'fill-neutral-700 text-xs'
+	}
+};
+
+export const yAxisProps = {
+	placement: 'left' as const,
+	classes: {
+		tickLabel: 'fill-neutral-700 text-xs'
+	}
+};
+
 export const tooltipProps = {
 	root: {
 		variant: 'none',
@@ -44,7 +58,11 @@ export const tooltipProps = {
 } satisfies NonNullable<ComponentProps<typeof LineChart>['props']>['tooltip'];
 
 export const highlightProps = {
-	motion: false
+	motion: false,
+	points: {
+		r: 8,
+		strokeWidth: 4
+	}
 } satisfies NonNullable<ComponentProps<typeof LineChart>['props']>['highlight'];
 
 export const barChartProps = {
@@ -60,7 +78,9 @@ export const lineChartProps = {
 	},
 	props: {
 		tooltip: tooltipProps,
-		highlight: highlightProps
+		highlight: highlightProps,
+		xAxis: xAxisProps,
+		yAxis: yAxisProps
 	}
 } satisfies NonNullable<ComponentProps<typeof LineChart>>;