layerchart 2.0.0-next.33 → 2.0.0-next.35

package/dist/components/Axis.svelte

@@ -439,8 +439,8 @@
   {#if rule !== false}
     {@const ruleProps = extractLayerProps(rule, 'axis-rule')}
     <Rule
-      x={placement === 'left' || placement === 'right' ? placement : placement === 'angle'}
-      y={placement === 'top' || placement === 'bottom' ? placement : placement === 'radius'}
+      x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
+      y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
       {motion}
       {...ruleProps}
       class={cls('stroke-surface-content/50', classes.rule, ruleProps?.class)}

package/dist/components/Bars.svelte

@@ -32,8 +32,8 @@
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
   import Group from './Group.svelte';
 
-  import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
+  import { chartDataArray } from '../utils/common.js';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
   let {

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/Points.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
   export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
   type Offset = number | ((value: number, context: any) => number) | undefined;
@@ -37,13 +37,6 @@
      */
     offsetY?: Offset;
 
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
-
     children?: Snippet<[{ points: Point[] }]>;
   } & CommonStyleProps;
 
@@ -71,7 +64,6 @@
     r = 5,
     offsetX,
     offsetY,
-    links = false,
     fill,
     fillOpacity,
     stroke,
@@ -136,66 +128,11 @@
       return [];
     }) as Point[]
   );
-
-  const _links = $derived(
-    pointsData.flatMap((d: any) => {
-      const xValue = xAccessor(d);
-      const yValue = yAccessor(d);
-
-      if (Array.isArray(xValue)) {
-        /*
-				x={["prop1" ,"prop2"]}
-				y="prop3"
-			*/
-        const [xMin, xMax] = extent(ctx.xGet(d)) as unknown as [number, number];
-        const y = ctx.yGet(d) + getOffset(ctx.yGet(d), offsetY, ctx.yScale);
-        return {
-          source: {
-            x: xMin + getOffset(xMin, offsetX, ctx.xScale) + (ctx.config.r ? ctx.rGet(d) : r),
-            y,
-          },
-          target: {
-            x: xMax + getOffset(xMax, offsetX, ctx.xScale) - (ctx.config.r ? ctx.rGet(d) : r),
-            y: y,
-          },
-          data: d,
-        };
-      } else if (Array.isArray(yValue)) {
-        /*
-				x="prop1"
-				y={["prop2" ,"prop3"]}
-			*/
-        const x = ctx.xGet(d) + getOffset(ctx.xGet(d), offsetX, ctx.xScale);
-        const [yMin, yMax] = extent(ctx.yGet(d)) as unknown as [number, number];
-        return {
-          source: {
-            x: x,
-            y: yMin + getOffset(yMin, offsetY, ctx.yScale),
-          },
-          target: {
-            x: x,
-            y: yMax + getOffset(yMax, offsetY, ctx.yScale),
-          },
-          data: d,
-        };
-      }
-    })
-  );
 </script>
 
 {#if children}
   {@render children({ points })}
 {:else}
-  {#if links}
-    {#each _links as link}
-      <Link
-        data={link}
-        stroke={fill ?? (ctx.config.c ? ctx.cGet(link.data) : null)}
-        {...extractLayerProps(links, 'points-link')}
-      />
-    {/each}
-  {/if}
-
   {#each points as point}
     <Circle
       cx={point.x}

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

@@ -1,5 +1,5 @@
 import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 export type Point = {
     x: number;
     y: number;
@@ -36,19 +36,12 @@ export type PointsPropsWithoutHTML = {
      * The offset of the point in the y direction
      */
     offsetY?: Offset;
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
     children?: Snippet<[{
         points: Point[];
     }]>;
 } & CommonStyleProps;
 export type PointsProps = PointsPropsWithoutHTML & Omit<Without<CircleProps, PointsPropsWithoutHTML>, 'ref'>;
 import { type CircleProps } from './Circle.svelte';
-import Link from './Link.svelte';
 import { type Accessor } from '../utils/common.js';
 declare const Points: import("svelte").Component<PointsProps, {}, "">;
 type Points = ReturnType<typeof Points>;

package/dist/components/Rule.svelte

@@ -3,6 +3,11 @@
   import type { SVGAttributes } from 'svelte/elements';
 
   export type BaseRulePropsWithoutHTML = {
+    /**
+     * Override the data from the context.
+     */
+    data?: any;
+
     /**
      * Create a vertical `x` line
      * - If true or 'left', will draw at chart left (xRange[0])
@@ -12,7 +17,7 @@
      *
      * @default false
      */
-    x?: number | Date | boolean | 'left' | 'right';
+    x?: number | Date | boolean | '$left' | '$right' | Accessor;
 
     /**
      * Pixel offset to apply to `x` coordinate
@@ -30,7 +35,7 @@
      *
      * @default false
      */
-    y?: number | Date | boolean | 'top' | 'bottom';
+    y?: number | Date | boolean | '$top' | '$bottom' | Accessor;
 
     /**
      * Pixel offset to apply to `y` coordinate
@@ -55,13 +60,17 @@
   import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
+  import { accessor, chartDataArray, type Accessor } from '../utils/common.js';
   import { layerClass } from '../utils/attributes.js';
+  import { isScaleBand, isScaleNumeric } from '../utils/scales.svelte.js';
 
   let {
+    data: dataProp,
     x = false,
     xOffset = 0,
     y = false,
     yOffset = 0,
+    stroke: strokeProp,
     class: className,
     children,
     ...restProps
@@ -69,89 +78,163 @@
 
   const ctx = getChartContext();
 
-  const xRangeMinMax = $derived(extent<number | Date>(ctx.xRange));
-  const yRangeMinMax = $derived(extent<number | Date>(ctx.yRange));
-
-  function showRule(value: typeof x | typeof y, axis: 'x' | 'y') {
-    switch (typeof value) {
-      case 'boolean':
-        return value;
-      case 'string':
-        return true;
-      default:
-        if (axis === 'x') {
-          return ctx.xScale(value) >= xRangeMinMax[0]! && ctx.xScale(value) <= xRangeMinMax[1]!;
-        } else {
-          return ctx.yScale(value) >= yRangeMinMax[0]! && ctx.yScale(value) <= yRangeMinMax[1]!;
-        }
+  const data = $derived(chartDataArray(dataProp ?? ctx.data));
+
+  const singleX = $derived(
+    typeof x === 'number' ||
+      x instanceof Date ||
+      x === true ||
+      x === '$left' ||
+      x === '$right' ||
+      (isScaleBand(ctx.xScale) && ctx.xDomain.includes(x as any))
+  );
+  const singleY = $derived(
+    typeof y === 'number' ||
+      y instanceof Date ||
+      y === true ||
+      y === '$bottom' ||
+      y === '$top' ||
+      (isScaleBand(ctx.yScale) && ctx.yDomain.includes(y as any))
+  );
+
+  const xRangeMinMax = $derived(extent<number>(ctx.xRange));
+  const yRangeMinMax = $derived(extent<number>(ctx.yRange));
+
+  const lines = $derived.by(() => {
+    const result: {
+      x1: number;
+      y1: number;
+      x2: number;
+      y2: number;
+      axis: 'x' | 'y';
+      stroke?: string;
+    }[] = [];
+
+    // Single x line
+    if (singleX) {
+      const _x =
+        x === true || x === '$left'
+          ? xRangeMinMax[0]!
+          : x === '$right'
+            ? xRangeMinMax[1]!
+            : ctx.xScale(x) + xOffset;
+
+      result.push({
+        x1: _x,
+        y1: ctx.yRange[0] || 0,
+        x2: _x,
+        y2: ctx.yRange[1] || 0,
+        axis: 'x',
+      });
+    }
+
+    // Single y line
+    if (singleY) {
+      const _y =
+        y === true || y === '$bottom'
+          ? yRangeMinMax[1]!
+          : y === '$top'
+            ? yRangeMinMax[0]!
+            : ctx.yScale(y) + yOffset;
+
+      result.push({
+        x1: ctx.xRange[0] || 0,
+        y1: _y,
+        x2: ctx.xRange[1] || 0,
+        y2: _y,
+        axis: 'y',
+      });
     }
-  }
+
+    // Data driven lines
+    if (!singleX && !singleY) {
+      const xAccessor = x !== false ? accessor(x as Accessor) : ctx.x;
+      const yAccessor = y !== false ? accessor(y as Accessor) : ctx.y;
+
+      const xBandOffset = isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0;
+      const yBandOffset = isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0;
+
+      for (const d of data) {
+        const xValue = xAccessor(d);
+        const yValue = yAccessor(d);
+
+        const x1Value = Array.isArray(xValue) ? xValue[0] : isScaleNumeric(ctx.xScale) ? 0 : xValue;
+        const x2Value = Array.isArray(xValue) ? xValue[1] : xValue;
+        const y1Value = Array.isArray(yValue) ? yValue[0] : isScaleNumeric(ctx.yScale) ? 0 : yValue;
+        const y2Value = Array.isArray(yValue) ? yValue[1] : yValue;
+
+        result.push({
+          x1: ctx.xScale(x1Value) + xBandOffset + xOffset,
+          y1: ctx.yScale(y1Value) + yBandOffset + yOffset,
+          x2: ctx.xScale(x2Value) + xBandOffset + xOffset,
+          y2: ctx.yScale(y2Value) + yBandOffset + yOffset,
+          axis: Array.isArray(yValue) || isScaleBand(ctx.xScale) ? 'x' : 'y', // TODO: what about single prop like lollipop?
+          stroke: (strokeProp ?? ctx.config.c) ? ctx.cGet(d) : null, // use color scale, if available
+        });
+      }
+    }
+
+    // Remove lines if out of range of chart (non-0 baseline, brushing, etc)
+    return result.filter((line) => {
+      return (
+        line.x1 >= xRangeMinMax[0]! &&
+        line.x2 <= xRangeMinMax[1]! &&
+        line.y1 >= yRangeMinMax[0]! &&
+        line.y2 <= yRangeMinMax[1]!
+      );
+    });
+  });
+
+  // $inspect({ lines });
 </script>
 
 <Group class={layerClass('rule-g')}>
-  {#if showRule(x, 'x')}
-    {@const xCoord =
-      x === true || x === 'left'
-        ? xRangeMinMax[0]
-        : x === 'right'
-          ? xRangeMinMax[1]
-          : ctx.xScale(x) + xOffset}
+  {#each lines as line}
+    {@const stroke = line.stroke}
 
     {#if ctx.radial}
-      {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMinMax[0]))}
-      {@const [x2, y2] = pointRadial(xCoord, Number(yRangeMinMax[1]))}
-
-      <Line
-        {...restProps}
-        {x1}
-        {y1}
-        {x2}
-        {y2}
-        class={cls(layerClass('rule-x-radial-line'), 'stroke-surface-content/10', className)}
-      />
+      {#if line.axis === 'x'}
+        {@const [x1, y1] = pointRadial(line.x1, line.y1)}
+        {@const [x2, y2] = pointRadial(line.x2, line.y2)}
+        <Line
+          {...restProps}
+          {x1}
+          {y1}
+          {x2}
+          {y2}
+          {stroke}
+          class={cls(
+            layerClass('rule-x-radial-line'),
+            !stroke && 'stroke-surface-content/10',
+            className
+          )}
+        />
+      {:else if line.axis === 'y'}
+        <Circle
+          r={line.y1}
+          {stroke}
+          class={cls(
+            layerClass('rule-y-radial-circle'),
+            !stroke && 'stroke-surface-content/50',
+            'fill-none',
+            className
+          )}
+        />
+      {/if}
     {:else}
       <Line
         {...restProps}
-        x1={xCoord}
-        x2={xCoord}
-        y1={ctx.yRange[0] || 0}
-        y2={ctx.yRange[1] || 0}
-        class={cls(layerClass('rule-x-line'), 'stroke-surface-content/50', className)}
-      />
-    {/if}
-  {/if}
-
-  {#if showRule(y, 'y')}
-    {#if ctx.radial}
-      <Circle
-        r={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
+        x1={line.x1}
+        y1={line.y1}
+        x2={line.x2}
+        y2={line.y2}
+        {stroke}
         class={cls(
-          layerClass('rule-y-radial-circle'),
-          'fill-none stroke-surface-content/50',
+          layerClass(line.axis === 'x' ? 'rule-x-line' : 'rule-y-line'),
+          !stroke && 'stroke-surface-content/50',
           className
         )}
       />
-    {:else}
-      <Line
-        {...restProps}
-        x1={ctx.xRange[0] || 0}
-        x2={ctx.xRange[1] || 0}
-        y1={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
-        y2={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
-        class={cls(layerClass('rule-y-line'), 'stroke-surface-content/50', className)}
-      />
     {/if}
-  {/if}
+  {/each}
 </Group>

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

@@ -1,6 +1,10 @@
 import type { Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 export type BaseRulePropsWithoutHTML = {
+    /**
+     * Override the data from the context.
+     */
+    data?: any;
     /**
      * Create a vertical `x` line
      * - If true or 'left', will draw at chart left (xRange[0])
@@ -10,7 +14,7 @@ export type BaseRulePropsWithoutHTML = {
      *
      * @default false
      */
-    x?: number | Date | boolean | 'left' | 'right';
+    x?: number | Date | boolean | '$left' | '$right' | Accessor;
     /**
      * Pixel offset to apply to `x` coordinate
      *
@@ -26,7 +30,7 @@ export type BaseRulePropsWithoutHTML = {
      *
      * @default false
      */
-    y?: number | Date | boolean | 'top' | 'bottom';
+    y?: number | Date | boolean | '$top' | '$bottom' | Accessor;
     /**
      * Pixel offset to apply to `y` coordinate
      * @default 0
@@ -36,6 +40,7 @@ export type BaseRulePropsWithoutHTML = {
 export type RulePropsWithoutHTML = BaseRulePropsWithoutHTML & Without<Partial<LinePropsWithoutHTML>, BaseRulePropsWithoutHTML>;
 export type RuleProps = RulePropsWithoutHTML & Without<SVGAttributes<SVGElement>, RulePropsWithoutHTML>;
 import { type LinePropsWithoutHTML } from './Line.svelte';
+import { type Accessor } from '../utils/common.js';
 declare const Rule: import("svelte").Component<RuleProps, {}, "">;
 type Rule = ReturnType<typeof Rule>;
 export default Rule;

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/genData.d.ts

@@ -23,21 +23,21 @@ export declare function createSeries<TKey extends string>(options: {
 }): ({
     x: number;
 } & { [K in TKey]: number; })[];
-export declare function createDateSeries<TKey extends string>(options: {
+export declare function createDateSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
+    min?: number;
+    max?: number;
     keys?: TKey[];
     value?: 'number' | 'integer';
 }): ({
     date: Date;
 } & { [K in TKey]: number; })[];
-export declare function createTimeSeries<TKey extends string>(options: {
+export declare function createTimeSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
-    keys: TKey[];
-    value: 'number' | 'integer';
+    min?: number;
+    max?: number;
+    keys?: TKey[];
+    value?: 'number' | 'integer';
 }): ({
     name: string;
     startDate: Date;

package/dist/utils/genData.js

@@ -43,29 +43,31 @@ export function createSeries(options) {
         };
     });
 }
-export function createDateSeries(options) {
+export function createDateSeries(options = {}) {
     const now = timeDay.floor(new Date());
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
+    const valueType = options.value ?? 'number';
     return Array.from({ length: count }).map((_, i) => {
         return {
             date: timeDay.offset(now, -count + i),
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };
     });
 }
-export function createTimeSeries(options) {
+export function createTimeSeries(options = {}) {
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
+    const valueType = options.value ?? 'number';
     let lastStartDate = timeDay.floor(new Date());
     const timeSeries = Array.from({ length: count }).map((_, i) => {
         const startDate = timeMinute.offset(lastStartDate, getRandomInteger(0, 60));
@@ -78,7 +80,7 @@ export function createTimeSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };

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;
@@ -25,6 +25,7 @@ export type AnyScale<TInput extends SingleDomainType = any, TOutput extends Sing
 };
 export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
+export declare function isScaleNumeric(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
 export declare function getRange(scale: any): any[];
 export type SingleDomainType = number | string | Date | null | undefined;
 export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;
@@ -54,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';
 }
@@ -12,6 +13,10 @@ export function isScaleTime(scale) {
     const domain = scale.domain();
     return domain[0] instanceof Date || domain[1] instanceof Date;
 }
+export function isScaleNumeric(scale) {
+    const domain = scale.domain();
+    return typeof domain[0] === 'number' || typeof domain[1] === 'number';
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();
@@ -87,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.33",
+  "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",