refactor utilization chart component for improved data handling and styling

Author: rbjornstad

src/routes/team/[team]/[env]/app/[app]/utilization/+page.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import EChart from '$lib/chart/EChart.svelte';
+	import GraphErrors from '$lib/GraphErrors.svelte';
+	import type { EChartsOption } from 'echarts';
+
 	import { UtilizationResourceType } from '$houdini';
 	import Card from '$lib/Card.svelte';
 	import { euroValueFormatter } from '$lib/chart/cost_transformer';
-	import EChart from '$lib/chart/EChart.svelte';
 	import SummaryCard from '$lib/components/SummaryCard.svelte';
-	import GraphErrors from '$lib/GraphErrors.svelte';
 	import CpuIcon from '$lib/icons/CpuIcon.svelte';
 	import MemoryIcon from '$lib/icons/MemoryIcon.svelte';
 	import { cpuUtilization, memoryUtilization, yearlyOverageCost } from '$lib/utils/resources';
+	import { Heading } from '@nais/ds-svelte-community';
 	import { WalletIcon } from '@nais/ds-svelte-community/icons';
-	import type { EChartsOption } from 'echarts';
 	import prettyBytes from 'pretty-bytes';
-
 	import type { PageProps } from './$houdini';
 
 	let { data }: PageProps = $props();
@@ -29,7 +30,22 @@
 		limit?: number,
 		color: string = '#000000'
 	): EChartsOption {
-		const dates = data?.map((d) => d.timestamp) || [];
+		const safeData = data ?? [];
+		const dates = safeData.map((d) =>
+			d.timestamp.toLocaleString('en-GB', {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric',
+				hour: '2-digit',
+				minute: '2-digit'
+			})
+		);
+
+		const usageValues = safeData.map((d) => d.value);
+		const referenceValues = Array(safeData.length).fill(null);
+		const limitValues = limit !== undefined ? Array(safeData.length).fill(limit) : referenceValues;
+		const requestValues = Array(safeData.length).fill(request);
+
 		return {
 			tooltip: {
 				trigger: 'axis',
@@ -42,39 +58,76 @@
 			xAxis: {
 				type: 'category',
 				boundaryGap: false,
-				data: dates.map((date) => {
-					return date.toLocaleDateString('en-GB', {
-						year: 'numeric',
-						month: 'short',
-						day: 'numeric',
-						hour: '2-digit',
-						minute: '2-digit'
-					});
-				})
+				data: dates
 			},
 			series: [
 				{
 					name: 'Usage',
 					type: 'line',
-					data: data?.map((d) => d.value) || [],
-					color
-				},
-				{
-					name: 'Limit',
-					type: 'line',
-					data: data?.map(() => limit) || [],
+					data: usageValues,
 					showSymbol: false,
-					color: '#C30000'
+					color,
+					areaStyle: {
+						opacity: 0.2
+					}
 				},
+				...(limit !== undefined
+					? [
+							{
+								name: 'Limit',
+								type: 'line',
+								data: limitValues,
+								showSymbol: false,
+								color: limitColor,
+								markLine: {
+									symbol: ['none', 'none'],
+									data: [
+										{
+											yAxis: limit,
+											label: {
+												formatter: 'Limit',
+												position: 'end',
+												color: limitColor,
+												padding: [2, 5],
+												borderRadius: 3
+											}
+										}
+									],
+									lineStyle: {
+										type: 'solid',
+										color: limitColor
+									}
+								}
+							}
+						]
+					: []),
 				{
 					name: 'Requested',
 					type: 'line',
-					data: data?.map(() => request) || [],
+					data: requestValues,
 					showSymbol: false,
-					color: '#00C300'
+					color: requestColor,
+					markLine: {
+						symbol: ['none', 'none'],
+						data: [
+							{
+								yAxis: request,
+								label: {
+									formatter: 'Requested',
+									position: 'end',
+									color: requestColor,
+									padding: [2, 5],
+									borderRadius: 3
+								}
+							}
+						],
+						lineStyle: {
+							type: 'solid',
+							color: requestColor
+						}
+					}
 				}
 			],
-
 			yAxis: {
 				type: 'value',
 				name: 'Usage of requested resources',
@@ -85,13 +138,17 @@
 			}
 		} as EChartsOption;
 	}
+
+	const limitColor = '#DE2E2E';
+	const usageMemColor = '#8269A2';
+	const usageCPUColor = '#FF9100';
+	const requestColor = '#3386E0';
 </script>
 
 <GraphErrors errors={$ResourceUtilizationForApp.errors} />
 
 {#if $ResourceUtilizationForApp.data}
 	{@const utilization = $ResourceUtilizationForApp.data.team.environment.application.utilization}
-
 	<div class="grid">
 		<Card columns={3} borderColor="#83bff6">
 			<SummaryCard
@@ -171,55 +228,53 @@
 				)}
 			</SummaryCard>
 		</Card>
-		<Card columns={12} borderColor="var(--a-gray-100)">
-			<span class="graphHeader">
-				<h3 style="margin-bottom: 0">Memory usage</h3>
-				<span class="intervalPicker">
-					{#each ['1h', '6h', '1d', '7d', '30d'] as interval (interval)}
-						<a
-							class:active={(page.url.searchParams.get('interval') || '7d') == interval}
-							href="?interval={interval}">{interval}</a
-						>
-					{/each}
-				</span>
-			</span>
-			<EChart
-				options={options(
-					utilization.memory_series.map((d) => {
-						return { timestamp: d.timestamp, value: d.value / 1024 / 1024 / 1024 };
-					}),
-					utilization.requested_memory / 1024 / 1024 / 1024,
-					utilization.limit_memory ? utilization.limit_memory / 1024 / 1024 / 1024 : undefined,
-					'rgb(145, 220, 117)'
-				)}
-				style="height: 400px"
-			/>
-
-			<span class="graphHeader">
-				<h3 style="margin-bottom: 0">CPU usage</h3>
-			</span>
-			<EChart
-				options={options(
-					utilization.cpu_series,
-					utilization.requested_cpu,
-					utilization.limit_cpu ? utilization.limit_cpu : undefined,
-					'rgb(131, 191, 246)'
-				)}
-				style="height: 400px"
-			/>
-		</Card>
 	</div>
+	<span class="graphHeader">
+		<Heading level="2" size="medium">Memory usage</Heading>
+		<span class="intervalPicker">
+			{#each ['1h', '6h', '1d', '7d', '30d'] as interval (interval)}
+				<a
+					class:active={(page.url.searchParams.get('interval') || '7d') == interval}
+					href="?interval={interval}">{interval}</a
+				>
+			{/each}
+		</span>
+	</span>
+	<EChart
+		options={options(
+			utilization.memory_series.map((d) => {
+				return { timestamp: d.timestamp, value: d.value / 1024 / 1024 / 1024 };
+			}),
+			utilization.requested_memory / 1024 / 1024 / 1024,
+			utilization.limit_memory ? utilization.limit_memory / 1024 / 1024 / 1024 : undefined,
+			usageMemColor
+		)}
+		style="height: 400px"
+	/>
+
+	<span class="graphHeader">
+		<Heading level="2" size="medium">CPU usage</Heading>
+	</span>
+	<EChart
+		options={options(
+			utilization.cpu_series,
+			utilization.requested_cpu,
+			utilization.limit_cpu ? utilization.limit_cpu : undefined,
+			usageCPUColor
+		)}
+		style="height: 400px"
+	/>
 {/if}
 
 <style>
 	.grid {
 		margin-top: 1rem;
+		margin-bottom: var(--a-spacing-6);
 		display: grid;
 		grid-template-columns: repeat(12, 1fr);
 		column-gap: 1rem;
 		row-gap: 1rem;
 	}
-
 	.graphHeader {
 		display: flex;
 		justify-content: space-between;