[Axis] Fix ticks defined as function. Useful to only show first/las…

…t values or filter (ex. integers only). Issue #119
techniq · Mar 22, 2024 · c78f17a · c78f17a
1 parent 524cbc4
commit c78f17a
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 3 deletions.
diff --git a/.changeset/funny-apricots-sing.md b/.changeset/funny-apricots-sing.md
@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Axis] Fix `ticks` defined as function. Useful to only show first/last values or filter (ex. integers only)
diff --git a/packages/layerchart/src/lib/components/Axis.svelte b/packages/layerchart/src/lib/components/Axis.svelte
@@ -56,9 +56,11 @@
 
   $: tickVals = Array.isArray(ticks)
     ? ticks
-    : isScaleBand(scale)
-      ? scale.domain()
-      : scale.ticks(typeof ticks === 'function' ? ticks(scale) : ticks);
+    : typeof ticks === 'function'
+      ? ticks(scale)
+      : isScaleBand(scale)
+        ? scale.domain()
+        : scale.ticks(ticks);
 
   function getCoords(tick: any) {
     switch (placement) {

diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
@@ -236,3 +236,112 @@
     </Chart>
   </div>
 </Preview>
+
+<h2>Only first/last ticks</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, 100]}
+      yNice
+      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" ticks={(scale) => scale.domain()} />
+        <Axis placement="left" ticks={(scale) => scale.domain()} />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Integer only ticks</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, 2]}
+      yNice
+      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" />
+        <Axis
+          placement="left"
+          ticks={(scale) => scale.ticks().filter(Number.isInteger)}
+          format="integer"
+        />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Explicit ticks</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, 100]}
+      yNice
+      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" />
+        <Axis placement="left" ticks={[0, 50, 100]} />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Tick count</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, 100]}
+      yNice
+      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" />
+        <Axis placement="left" ticks={20} />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Remove default tick count</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, 100]}
+      yNice
+      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" />
+        <Axis placement="left" ticks={undefined} />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>