Improve PercentileLineChart perf (and thus Summary page) by over 20x (#469)

## Summary

By extracting `series` from the markup (which made it reactive) and
intentionally NOT using `$derived`, rendering performance of
`PercentileLineChart` improved by over 20x (`>1100ms` down to `<50ms`).

This makes navigating to the Summary tab MUCH better (before we would
sometimes hit the browser "Are you sure you want to wait" prompts).

`$state.opaque()` runes was being
[considered](sveltejs/svelte#14639) that could
have helped here, but it was decided to not be the right abstraction.
(I'm waiting on a solution to fix LayerChart's force simulations that
have a perf regression in Svelte 5 due to granular reactivity / proxy
creation)

## Before


https://github.com/user-attachments/assets/9e93f4eb-5247-4bff-a56d-413564e50022

## After


https://github.com/user-attachments/assets/8dbe075d-0479-4d5e-a3f8-45fb1d350402


## 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

- **Refactor**
- Optimized the chart component's data handling to improve performance
and overall clarity.
- Adjusted the internal structure by moving data definitions outside
inline usage and refining type specifications for better consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- av pr metadata
This information is embedded by the av CLI when creating PRs to track
the status of stacks when using Aviator. Please do not delete or edit
this section of the PR.
```
{"parent":"main","parentHead":"","trunk":"main"}
```
-->

---------

Co-authored-by: Sean Lynch <[email protected]>

Author: sean-zlai

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

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
+	import { type ComponentProps } from 'svelte';
 	import { LineChart } from 'layerchart';
 	import merge from 'lodash/merge';
 
 	import { lineChartProps } from './common';
 	import type { ITileSummarySeriesArgs } from '$src/lib/types/codegen';
 	import { zip } from 'd3';
-	import { Int64 } from '@creditkarma/thrift-server-core';
 	import { NULL_VALUE } from '$src/lib/constants/common';
 
 	type LineChartProps = ComponentProps<typeof LineChart>;
@@ -18,12 +17,9 @@
 	} & Omit<LineChartProps, 'data'>;
 
 	let { data, onbrushend, ...restProps }: Props = $props();
-</script>
 
-<LineChart
-	x="date"
-	y="value"
-	series={[
+	// Using `$derived()` or defining inline causes performance issue (likely due to creating proxies for deep reactivity).
+	const series = [
 		{ label: 'p95', color: '#2976E6', index: 2 },
 		{ label: 'p50', color: '#3DDC91', index: 1 },
 		{ label: 'p5', color: '#E5B72D', index: 0 }
@@ -33,18 +29,24 @@
 
 		return {
 			key: c.label,
-			data: zip<Int64 | number>(
+			data: zip(
 				timestamps.map((ts) => Number(ts)),
 				values
-			).map(([ts, value]) => {
+			).map(([ts, value]: number[]) => {
 				return {
 					date: new Date(ts as number),
 					value: value === NULL_VALUE ? null : value
 				};
 			}),
 			color: c.color
 		};
-	})}
+	});
+</script>
+
+<LineChart
+	x="date"
+	y="value"
+	{series}
 	padding={{ top: 4, left: 36, bottom: 20 }}
 	brush={{ onbrushend }}
 	{...merge(