feat: AutoScale (#624)

* feat(Chart): Automatically determine scale based on data and domain values (instead of defaulting to scaleLinear)

* Remove `cScale={scaleOrdinal()}` usage (already default)

* Cleanup yNice={#} (since axis ticks now support `tickSpacing`)

* Setup autoScale for x1Scale and y1Scale

* docs: Improve bar padding examples

Author: techniq

.changeset/shaky-dots-go.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Automatically determine scale based on data and domain values (instead of defaulting to scaleLinear)

packages/layerchart/src/lib/components/Chart.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>
-  import { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';
+  import { scaleOrdinal, scaleSqrt } from 'd3-scale';
   import { type Accessor, accessor, chartDataArray } from '$lib/utils/common.js';
   import { printDebug } from '$lib/utils/debug.js';
   import { filterObject } from '$lib/utils/filterObject.js';
   import {
+    autoScale,
     createScale,
     getRange,
     isScaleBand,
@@ -421,21 +422,21 @@
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     xScale?: XScale;
 
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     yScale?: YScale;
 
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     zScale?: AnyScale;
 
@@ -449,14 +450,14 @@
     /**
      * The D3 scale that should be used for the x1-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     x1Scale?: AnyScale;
 
     /**
      * The D3 scale that should be used for the y1-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     y1Scale?: AnyScale;
 
@@ -717,6 +718,7 @@
     z: zProp,
     r: rProp,
     data = [],
+    flatData: flatDataProp,
     xDomain: xDomainProp,
     yDomain: yDomainProp,
     zDomain: zDomainProp,
@@ -730,12 +732,12 @@
     zPadding,
     rPadding,
     // @ts-expect-error shh
-    xScale: xScaleProp = scaleLinear(),
+    xScale: xScaleProp = autoScale(xDomainProp, flatDataProp ?? data, xProp),
+    // @ts-expect-error shh
+    yScale: yScaleProp = autoScale(yDomainProp, flatDataProp ?? data, yProp),
     // @ts-expect-error shh
-    yScale: yScaleProp = scaleLinear(),
-    zScale: zScaleProp = scaleLinear(),
+    zScale: zScaleProp = autoScale(zDomainProp, flatDataProp ?? data, zProp),
     rScale: rScaleProp = scaleSqrt(),
-    flatData: flatDataProp,
     padding: paddingProp = {},
     verbose = true,
     debug = false,
@@ -1009,24 +1011,36 @@
   const rGet = $derived(createGetter(r, rScale));
 
   const x1Scale = $derived(
-    x1ScaleProp && x1RangeProp
-      ? createScale(x1ScaleProp, x1Domain, x1RangeProp, {
-          xScale: xScale,
-          width,
-          height,
-        })
+    x1RangeProp
+      ? createScale(
+          // @ts-expect-error shh
+          x1ScaleProp ?? autoScale(x1DomainProp, flatDataProp ?? data, x1Prop),
+          x1Domain,
+          x1RangeProp,
+          {
+            xScale,
+            width,
+            height,
+          }
+        )
       : null
   );
 
   const x1Get = $derived(createGetter(x1, x1Scale));
 
   const y1Scale = $derived(
-    y1ScaleProp && y1RangeProp
-      ? createScale(y1ScaleProp, y1Domain, y1RangeProp, {
-          yScale: yScale,
-          width,
-          height,
-        })
+    y1RangeProp
+      ? createScale(
+          // @ts-expect-error shh
+          y1ScaleProp ?? autoScale(y1DomainProp, flatDataProp ?? data, y1Prop),
+          y1Domain,
+          y1RangeProp,
+          {
+            yScale,
+            width,
+            height,
+          }
+        )
       : null
   );
 

packages/layerchart/src/lib/components/charts/AreaChart.svelte

@@ -122,7 +122,6 @@
     renderContext = 'svg',
     profile = false,
     debug = false,
-    xScale: xScaleProp,
     children: childrenProp,
     aboveContext,
     belowContext,
@@ -196,11 +195,6 @@
     return _chartData;
   });
 
-  // Default xScale based on first data's `x` value
-  const xScale = $derived(
-    xScaleProp ?? (accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear())
-  );
-
   function isStackData(d: TData): d is TData & { stackData: any[] } {
     return d && typeof d === 'object' && 'stackData' in d;
   }
@@ -433,7 +427,6 @@
   data={chartData}
   {x}
   {xDomain}
-  {xScale}
   y={resolveAccessor(y)}
   yBaseline={0}
   yNice

packages/layerchart/src/lib/components/charts/LineChart.svelte

@@ -69,7 +69,6 @@
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleLinear, scaleTime } from 'd3-scale';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -124,7 +123,6 @@
     renderContext = 'svg',
     profile = false,
     debug = false,
-    xScale: xScaleProp,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -159,11 +157,6 @@
       : chartDataArray(data)) as Array<TData>
   );
 
-  // Default xScale based on first data's `x` value
-  const xScale = $derived(
-    xScaleProp ?? (accessor(xProp)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear())
-  );
-
   function getSplineProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const splineProps: ComponentProps<typeof Spline> = {
       data: s.data,
@@ -333,7 +326,6 @@
   data={chartData}
   x={xProp}
   {xDomain}
-  {xScale}
   y={yProp ?? series.map((s) => s.value ?? s.key)}
   yBaseline={0}
   yNice

packages/layerchart/src/lib/components/charts/ScatterChart.svelte

@@ -44,7 +44,6 @@
 </script>
 
 <script lang="ts" generics="TData">
-  import { scaleLinear, scaleTime } from 'd3-scale';
   import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
@@ -88,8 +87,6 @@
     renderContext = 'svg',
     profile = false,
     debug = false,
-    xScale: xScaleProp,
-    yScale: yScaleProp,
     children: childrenProp,
     aboveContext,
     belowContext,
@@ -107,18 +104,6 @@
 
   const seriesState = new SeriesState(() => series);
 
-  // Default xScale based on first data's `x` value
-  const xScale = $derived(
-    xScaleProp ??
-      (accessor(xProp)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear())
-  );
-
-  // Default yScale based on first data's `y` value
-  const yScale = $derived(
-    yScaleProp ??
-      (accessor(yProp)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear())
-  );
-
   const chartData = $derived(
     seriesState.visibleSeries
       .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
@@ -241,10 +226,8 @@
   data={chartData}
   x={xProp}
   {xDomain}
-  {xScale}
   y={yProp}
   {yDomain}
-  {yScale}
   yNice
   c={yProp}
   cRange={['var(--color-primary)']}

packages/layerchart/src/lib/utils/scales.svelte.ts

@@ -1,5 +1,5 @@
 import { unique } from '@layerstack/utils';
-import { scaleBand, type ScaleBand, type ScaleTime } from 'd3-scale';
+import { scaleBand, scaleLinear, scaleTime, type ScaleBand, type ScaleTime } from 'd3-scale';
 import {
   createControlledMotion,
   type MotionProp,
@@ -8,7 +8,7 @@ import {
   type TweenOptions,
 } from '$lib/utils/motion.svelte.js';
 import { Spring, Tween } from 'svelte/motion';
-import type { Accessor } from './common.js';
+import { accessor, type Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
 import type { TimeInterval } from 'd3-time';
 
@@ -162,6 +162,44 @@ export function createScale(
   return scaleCopy;
 }
 
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export function autoScale(
+  domain?: DomainType,
+  data?: any[],
+  propAccessor?: Accessor<any>
+): AnyScale {
+  let values = null;
+  if (domain && domain.length > 0) {
+    // Determine based on domain values
+    values = domain;
+  } else if (data && data.length > 0 && propAccessor) {
+    // Determine based on data values
+    const value = accessor(propAccessor)(data[0]);
+
+    // If accessor defined with an array (ex. `x={['start', 'end']}`) use both values
+    if (Array.isArray(value)) {
+      values = value;
+    } else {
+      values = [value];
+    }
+  }
+
+  if (values) {
+    if (values.some((v) => v instanceof Date)) {
+      return scaleTime();
+    } else if (values.some((v) => typeof v === 'number')) {
+      return scaleLinear();
+    } else if (values.some((v) => typeof v === 'string')) {
+      return scaleBand();
+    }
+  }
+
+  // fallback to linear scale
+  return scaleLinear();
+}
+
 /**
  * Create a `scaleBand()` within another scaleBand()'s bandwidth
  * (typically a x1 of an x0 scale, used for grouping)