From cd43a7b6aa1ce224f3379f169ec7925f96383943 Mon Sep 17 00:00:00 2001
From: Yann Amsellem <yann@agnostic.engineering>
Date: Tue, 26 Nov 2024 11:07:44 +0100
Subject: [PATCH] fix: update position for ticks on Y axis

---
 src/lib/components/charts/Line/Chart.svelte | 16 ++++++++++++----
 src/lib/utils.ts                            | 14 ++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/utils.ts

diff --git a/src/lib/components/charts/Line/Chart.svelte b/src/lib/components/charts/Line/Chart.svelte
index f31eeff..34c5f06 100644
--- a/src/lib/components/charts/Line/Chart.svelte
+++ b/src/lib/components/charts/Line/Chart.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="Item">
+	import { getTextWidth } from '$lib/utils';
 	import * as d3 from 'd3';
 	import { sineOut } from 'svelte/easing';
 	import { tweened } from 'svelte/motion';
-	import { fade } from 'svelte/transition';
 	import { line_chart, line_generator } from './graph';
 
 	interface Props {
@@ -30,9 +30,17 @@
 	let width = $state(0);
 	let height = $state(0);
 
-	const margin = { top: 30, right: 40, bottom: 30, left: 40 };
+	const margin = $state({ top: 0, right: 0, bottom: 30, left: 40 });
 	const tick_size = 3;
 
+	$effect(() => {
+		if (data.length) {
+			const last_index = data.length - 1;
+			const text = y_format(y_accessor(data[last_index]));
+			margin.left = getTextWidth(text) + tick_size + 4;
+		}
+	});
+
 	const { scales, coords } = $derived(
 		line_chart(data, {
 			x_accessor,
@@ -82,7 +90,7 @@
 					stroke-width="1"
 				/>
 
-				{#if i % 2 === 0}
+				{#if i % 2 === 1}
 					<text
 						fill="var(--line-color)"
 						text-anchor="middle"
@@ -105,7 +113,7 @@
 				stroke="var(--line-color)"
 				stroke-width="1"
 			/>
-			{#each scales.y.ticks(10) as tick, i (tick)}
+			{#each scales.y.ticks(9) as tick, i (tick)}
 				{@const y = scales.y(tick)}
 				<line
 					x1={margin.left}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..393dac6
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,14 @@
+export function getTextWidth(text: string) {
+	let width = 0;
+	const div = document.createElement('div');
+	div.innerText = text;
+	div.style.position = 'absolute';
+	div.style.float = 'left';
+	div.style.whiteSpace = 'nowrap';
+	div.style.visibility = 'hidden';
+	document.body.appendChild(div);
+	width = div.clientWidth;
+	div.remove();
+
+	return width;
+}