layerchart 2.0.0-next.4 → 2.0.0-next.41

package/dist/components/Chart.svelte

@@ -1,12 +1,14 @@
 <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,
+    isScaleTime,
     makeAccessor,
     type AnyScale,
     type DomainType,
@@ -39,7 +41,7 @@
   import { geoFitObjectTransform } from '../utils/geo.js';
   import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
   import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
-  import { layerClass } from '../utils/attributes.js';
+  import type { TimeInterval } from 'd3-time';
 
   const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
 
@@ -149,6 +151,8 @@
     cGet: (d: T) => any;
     x1Get: (d: T) => any;
     y1Get: (d: T) => any;
+    xInterval: TimeInterval | null;
+    yInterval: TimeInterval | null;
     radial: boolean;
     tooltip: TooltipContextValue<T>;
     geo: GeoContextValue;
@@ -417,21 +421,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;
 
@@ -445,14 +449,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;
 
@@ -640,6 +644,16 @@
      */
     yBaseline?: number | null;
 
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
+
     /* Props passed to ChartContext */
 
     /**
@@ -703,6 +717,7 @@
     z: zProp,
     r: rProp,
     data = [],
+    flatData: flatDataProp,
     xDomain: xDomainProp,
     yDomain: yDomainProp,
     zDomain: zDomainProp,
@@ -716,12 +731,12 @@
     zPadding,
     rPadding,
     // @ts-expect-error shh
-    xScale: xScaleProp = scaleLinear(),
+    xScale: xScaleProp = autoScale(xDomainProp, flatDataProp ?? data, xProp),
     // @ts-expect-error shh
-    yScale: yScaleProp = scaleLinear(),
-    zScale: zScaleProp = scaleLinear(),
+    yScale: yScaleProp = autoScale(yDomainProp, flatDataProp ?? data, yProp),
+    // @ts-expect-error shh
+    zScale: zScaleProp = autoScale(zDomainProp, flatDataProp ?? data, zProp),
     rScale: rScaleProp = scaleSqrt(),
-    flatData: flatDataProp,
     padding: paddingProp = {},
     verbose = true,
     debug = false,
@@ -738,6 +753,8 @@
     rRange: rRangeProp,
     xBaseline = null,
     yBaseline = null,
+    xInterval = null,
+    yInterval = null,
     meta = {},
     children: _children,
     radial = false,
@@ -780,6 +797,12 @@
 
   const _xDomain: DomainType | undefined = $derived.by(() => {
     if (xDomainProp !== undefined) return xDomainProp;
+
+    if (xInterval != null && Array.isArray(data) && data.length > 0) {
+      const lastXValue = accessor(xProp)(data[data.length - 1]);
+      return [null, xInterval.offset(lastXValue)];
+    }
+
     if (xBaseline != null && Array.isArray(data)) {
       const xValues = data.flatMap(accessor(xProp));
       return [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
@@ -788,6 +811,12 @@
 
   const _yDomain: DomainType | undefined = $derived.by(() => {
     if (yDomainProp !== undefined) return yDomainProp;
+
+    if (yInterval != null && Array.isArray(data) && data.length > 0) {
+      const lastYValue = accessor(yProp)(data[data.length - 1]);
+      return [null, yInterval.offset(lastYValue)];
+    }
+
     if (yBaseline != null && Array.isArray(data)) {
       const yValues = data.flatMap(accessor(yProp));
       return [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
@@ -798,7 +827,9 @@
     _yRangeProp ?? (radial ? ({ height }: { height: number }) => [0, height / 2] : undefined)
   );
 
-  const yReverse = $derived(yScaleProp ? !isScaleBand(yScaleProp) : true);
+  const yReverse = $derived(
+    yScaleProp ? !isScaleBand(yScaleProp) && !isScaleTime(yScaleProp) : true
+  );
 
   const x = $derived(makeAccessor(xProp));
   const y = $derived(makeAccessor(yProp));
@@ -844,12 +875,12 @@
     if (verbose === true) {
       if (width <= 0 && isMounted === true) {
         console.warn(
-          '[LayerChart] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?'
+          `[LayerChart] Target div has zero or negative width (${width}). Did you forget to set an explicit width in CSS on the container?`
         );
       }
       if (height <= 0 && isMounted === true) {
         console.warn(
-          '[LayerChart] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?'
+          `[LayerChart] Target div has zero or negative height (${height}). Did you forget to set an explicit height in CSS on the container?`
         );
       }
     }
@@ -979,24 +1010,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
   );
 
@@ -1247,6 +1290,12 @@
     get y1Scale() {
       return y1Scale;
     },
+    get xInterval() {
+      return xInterval;
+    },
+    get yInterval() {
+      return yInterval;
+    },
     get radial() {
       return radial;
     },
@@ -1344,7 +1393,7 @@
     style:pointer-events={pointerEvents === false ? 'none' : null}
     bind:clientWidth={containerWidth}
     bind:clientHeight={containerHeight}
-    class={layerClass('root-container')}
+    class="lc-root-container"
   >
     {#key isMounted}
       <!-- svelte-ignore ownership_invalid_binding -->

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

@@ -8,6 +8,7 @@ import type { HierarchyNode } from 'd3-hierarchy';
 import type { SankeyGraph } from 'd3-sankey';
 import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
 import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
+import type { TimeInterval } from 'd3-time';
 export type ChartResizeDetail = {
     width: number;
     height: number;
@@ -81,6 +82,8 @@ export type ChartContextValue<T = any, XScale extends AnyScale = AnyScale, YScal
     cGet: (d: T) => any;
     x1Get: (d: T) => any;
     y1Get: (d: T) => any;
+    xInterval: TimeInterval | null;
+    yInterval: TimeInterval | null;
     radial: boolean;
     tooltip: TooltipContextValue<T>;
     geo: GeoContextValue;
@@ -285,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;
     /**
@@ -309,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;
     /**
@@ -484,6 +487,14 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
      * @default null
      */
     yBaseline?: number | null;
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
     /**
      * Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.
      * Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`)
@@ -521,10 +532,17 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
     ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
     onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
 };
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartPropsWithoutHTML<TData, XScale, YScale>;
+    exports: {};
+    bindings: "ref" | "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
-    props(): ChartPropsWithoutHTML<TData, XScale, YScale>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
     bindings(): "ref" | "context";
     exports(): {};
 }

package/dist/components/ChartClipPath.svelte

@@ -41,5 +41,5 @@
   {disabled}
   height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
   width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
-  {...extractLayerProps(restProps, 'chart-clip-path')}
+  {...extractLayerProps(restProps, 'lc-chart-clip-path')}
 />

package/dist/components/Circle.svelte

@@ -68,7 +68,6 @@
   import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     cx = 0,
@@ -115,7 +114,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-circle', className),
           }
     );
   }
@@ -161,7 +160,49 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('circle'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-circle', className)}
     {...restProps}
   />
+{:else if renderCtx === 'html'}
+  <div
+    style:position="absolute"
+    style:left="{motionCx.current}px"
+    style:top="{motionCy.current}px"
+    style:width="{motionR.current * 2}px"
+    style:height="{motionR.current * 2}px"
+    style:border-radius="50%"
+    style:background-color={fill}
+    style:opacity
+    style:border-width={strokeWidth}
+    style:border-color={stroke}
+    style:border-style="solid"
+    style:transform="translate(-50%, -50%)"
+    class={cls('lc-circle', className)}
+    {...restProps}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-circle)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-circle, svg.lc-circle):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-circle, svg.lc-circle):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-circle):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-circle):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/CircleClipPath.svelte

@@ -80,6 +80,13 @@
 
 <ClipPath {id} {disabled} {children}>
   {#snippet clip()}
-    <Circle {cx} {cy} {r} {motion} {...extractLayerProps(restProps, 'clip-path-circle')} bind:ref />
+    <Circle
+      {cx}
+      {cy}
+      {r}
+      {motion}
+      {...extractLayerProps(restProps, 'lc-clip-path-circle')}
+      bind:ref
+    />
   {/snippet}
 </ClipPath>

package/dist/components/ClipPath.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import { createId } from '../utils/createId.js';
   import type { Without } from '../utils/types.js';
-  import { layerClass } from '../utils/attributes.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import { getRenderContext } from './Chart.svelte';
@@ -76,7 +75,7 @@
   {#if disabled || renderContext !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
-    <g style:clip-path={url} class={layerClass('clip-path-g')}>
+    <g style:clip-path={url} class="lc-clip-path-g">
       {@render children({ id, url, useId })}
     </g>
   {/if}

package/dist/components/ColorRamp.svelte

@@ -83,5 +83,5 @@
   preserveAspectRatio="none"
   {height}
   {width}
-  {...extractLayerProps(restProps, 'color-ramp')}
+  {...extractLayerProps(restProps, 'lc-color-ramp')}
 />

package/dist/components/ComputedStyles.svelte

@@ -13,7 +13,6 @@
 <script lang="ts">
   import { computedStyles } from '@layerstack/svelte-actions';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
 
   let { class: className, children }: ComputedStylesProps = $props();
 
@@ -21,8 +20,16 @@
 </script>
 
 <div
-  class={cls(layerClass('computed-styles'), 'hidden', className)}
+  class={cls('lc-computed-styles', className)}
   use:computedStyles={(_styles) => (styles = _styles)}
 ></div>
 
 {@render children?.({ styles })}
+
+<style>
+  @layer base {
+    :global(:where(.lc-computed-styles)) {
+      display: none;
+    }
+  }
+</style>

package/dist/components/Connector.svelte

@@ -82,7 +82,7 @@
     type = 'rounded',
     radius = 20,
     curve = curveLinear,
-    splineRef = $bindable(),
+    pathRef = $bindable(),
     pathData: pathDataProp,
     marker,
     markerStart,
@@ -137,11 +137,11 @@
 
 <Spline
   pathData={motionPath.current}
-  bind:splineRef
+  bind:pathRef
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  {...extractLayerProps(restProps, 'connector')}
+  {...extractLayerProps(restProps, 'lc-connector')}
   {...restProps}
 />
 <MarkerWrapper id={markerStartId} marker={markerStart} />

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

@@ -46,6 +46,6 @@ import { type CurveFactory } from 'd3-shape';
 import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
 import { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
 import type { Without } from '../utils/types.js';
-declare const Connector: import("svelte").Component<ConnectorProps, {}, "splineRef">;
+declare const Connector: import("svelte").Component<ConnectorProps, {}, "pathRef">;
 type Connector = ReturnType<typeof Connector>;
 export default Connector;