layerchart 2.0.0-next.34 → 2.0.0-next.35

package/dist/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 '../utils/common.js';
   import { printDebug } from '../utils/debug.js';
   import { filterObject } from '../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
   );
 

package/dist/components/Chart.svelte.d.ts

@@ -288,19 +288,19 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, 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
      */
     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;
     /**
@@ -312,13 +312,13 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
     /**
      * 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;
     /**

package/dist/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

package/dist/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

package/dist/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)']}

package/dist/utils/scales.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ScaleBand, type ScaleTime } from 'd3-scale';
 import { type MotionProp, type MotionOptions, type SpringOptions, type TweenOptions } from './motion.svelte.js';
-import type { Accessor } from './common.js';
+import { type Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
 export type AnyScale<TInput extends SingleDomainType = any, TOutput extends SingleDomainType = any, TScaleArgs extends any[] | readonly any[] = any[]> = {
     (value: TInput): TOutput;
@@ -55,6 +55,10 @@ export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number)
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create new copy of scale with domain and range */
 export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any[]>;
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export declare function autoScale(domain?: DomainType, data?: any[], propAccessor?: Accessor<any>): AnyScale;
 /**
  * Create a `scaleBand()` within another scaleBand()'s bandwidth
  * (typically a x1 of an x0 scale, used for grouping)

package/dist/utils/scales.svelte.js

@@ -1,7 +1,8 @@
 import { unique } from '@layerstack/utils';
-import { scaleBand } from 'd3-scale';
+import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
 import { createControlledMotion, } from './motion.svelte.js';
 import { Spring, Tween } from 'svelte/motion';
+import { accessor } from './common.js';
 function isAnyScale(scale) {
     return typeof scale === 'function' && typeof scale.range === 'function';
 }
@@ -91,6 +92,40 @@ export function createScale(scale, domain, range, context) {
     }
     return scaleCopy;
 }
+/**
+ * Auto-detect scale type based on domain values or data values
+ */
+export function autoScale(domain, data, propAccessor) {
+    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)

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.34",
+  "version": "2.0.0-next.35",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",
@@ -55,7 +55,7 @@
     "svelte": "5.34.1",
     "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.14",
+    "svelte-ux": "2.0.0-next.17",
     "svelte2tsx": "^0.7.39",
     "tailwindcss": "^4.1.10",
     "topojson-client": "^3.1.0",