Reduce overlapping of labels

Relates to #5

src/components/AxisX.svelte

@@ -7,29 +7,46 @@
   import { innerRadius } from '../stores/dimensions';
 
   export let selectedData = [];
+  
+  let labels = [];
+
+  $: {
+    const grouped = rollups(
+      selectedData,
+      (v) => v[0].angle,
+      (d) => [d.data.year, d.data.volume].join('/')
+    );
 
-  $: labels = rollups(
-    selectedData,
-    (v) => v[0].angle,
-    (d) => [d.data.year, d.data.volume].join('/')
-  );
+    let yearsDone = new Set();
+    labels = grouped.map(([text, angle]) => {
+      const split = text.split('/')
+      const year = +split[0];
+      if (yearsDone.has(year)) {
+        text = split[1];
+      } else {
+        text = text.slice(2);
+      }
+      yearsDone.add(year);
+      return { text, angle };
+    });
+  }
 </script>
 
 <g class="axis axis-x">
   <g class="axis-lines">
-    {#each labels as [, angle]}
-      <AxisXLine {angle} />
+    {#each labels as label}
+      <AxisXLine angle={label.angle} />
     {/each}
   </g>
   <g class="axis-labels">
-    {#each labels as [text, angle], i}
+    {#each labels as label, i}
       <Label
         pathId={`path-axis-x-label-${i}`}
         radius={$innerRadius}
-        {angle}
+        angle={label.angle}
         hanging
       >
-        {text.slice(2)}
+        {label.text}
       </Label>
     {/each}
   </g>