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

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

@@ -0,0 +1,115 @@
+import type { CommonStyleProps, Without } from '../utils/types.js';
+export type PolygonPropsWithoutHTML = {
+    /**
+     * The center x position of the polygon.
+     *
+     * @default 0
+     */
+    cx?: number;
+    /**
+     * The initial center x position of the polygon.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+    /**
+     * The center y position of the polygon.
+     *
+     * @default 0
+     */
+    cy?: number;
+    /**
+     * The initial center y position of the polygon.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+    /**
+     * The radius of the polygon.
+     *
+     * @default 1
+     */
+    r?: number;
+    /**
+     * The initial radius of the polygon.
+     *
+     * @default r
+     */
+    initialR?: number;
+    /**
+     * The number of points or explicit points to create the polygon.
+     *
+     * @default 4
+     */
+    points?: number | {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * The radius of the curve for rounded corners.
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * The rotation of the polygon.
+     *
+     * @default 0
+     */
+    rotate?: number;
+    /**
+     * The percent to inset the odd points of the star (<1 inset, >1 outset)
+     *
+     * @default 0
+     */
+    inset?: number;
+    /**
+     * The horizontal stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleX?: number;
+    /**
+     * The vertical stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleY?: number;
+    /**
+     * The skew angle in degrees along the X axis.
+     *
+     * @default 0
+     */
+    skewX?: number;
+    /**
+     * The skew angle in degrees along the Y axis.
+     *
+     * @default 0
+     */
+    skewY?: number;
+    /**
+     * The tilt factor for x-coordinates.
+     *
+     * @default 1
+     */
+    tiltX?: number;
+    /**
+     * The tilt factor for y-coordinates.
+     *
+     * @default 1
+     */
+    tiltY?: number;
+    /**
+     * A bindable reference to the `<path>` element
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type PolygonProps = PolygonPropsWithoutHTML & Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
+import type { SVGAttributes } from 'svelte/elements';
+import { type MotionProp } from '../utils/motion.svelte.js';
+declare const Polygon: import("svelte").Component<PolygonProps, {}, "ref">;
+type Polygon = ReturnType<typeof Polygon>;
+export default Polygon;

package/dist/components/RadialGradient.svelte

@@ -89,7 +89,7 @@
   import { parsePercent } from '../utils/math.js';
   import { getChartContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -102,6 +102,7 @@
     fx = cx,
     fy = cy,
     r = '50%',
+    // fr = '0%'; // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
     spreadMethod = 'pad',
     transform = undefined,
     units = 'objectBoundingBox',
@@ -111,9 +112,6 @@
     ...restProps
   }: RadialGradientProps = $props();
 
-  // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
-  // export let fr = '0%';
-
   const ctx = getChartContext();
 
   const renderCtx = getRenderContext();
@@ -169,12 +167,12 @@
       {spreadMethod}
       gradientTransform={transform}
       gradientUnits={units}
-      {...extractLayerProps({ ...restProps, class: className }, 'radial-gradient')}
+      {...extractLayerProps({ ...restProps, class: className }, 'lc-radial-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent()}
       {:else if stops}
-        {@const stopClass = cls(layerClass('radial-gradient-stop'), className)}
+        {@const stopClass = cls('lc-radial-gradient-stop', className)}
         {#each stops as stop, i}
           {#if Array.isArray(stop)}
             <stop offset={stop[0]} stop-color={stop[1]} class={stopClass} />

package/dist/components/Rect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
@@ -39,7 +39,8 @@
   } & CommonStyleProps;
 
   export type RectProps = RectPropsWithoutHTML &
-    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -49,7 +50,6 @@
   import { getRenderContext } from './Chart.svelte';
   import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     height,
@@ -107,7 +107,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-rect', className),
           }
     );
   }
@@ -155,7 +155,7 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('rect'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-rect', className)}
     {...restProps}
     {onclick}
     {ondblclick}
@@ -166,4 +166,54 @@
     {onpointerout}
     bind:this={ref}
   />
+{:else if renderCtx === 'html'}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    style:position="absolute"
+    style:left="{motionX.current}px"
+    style:top="{motionY.current}px"
+    style:width="{motionWidth.current}px"
+    style:height="{motionHeight.current}px"
+    style:background={fill}
+    style:background-opacity={opacity}
+    style:border-width="{strokeWidth}px"
+    style:border-style="solid"
+    style:border-color={stroke}
+    style:border-radius="{restProps.rx}px"
+    class={cls('lc-rect', className)}
+    {...restProps as any}
+    {onclick}
+    {ondblclick}
+    {onpointerenter}
+    {onpointermove}
+    {onpointerleave}
+    {onpointerover}
+    {onpointerout}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-rect)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-rect):not([background])) {
+      background: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-rect):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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

@@ -1,4 +1,4 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import { type MotionProp } from '../utils/motion.svelte.js';
 export type RectPropsWithoutHTML = {
@@ -30,7 +30,7 @@ export type RectPropsWithoutHTML = {
     ref?: SVGRectElement;
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 } & CommonStyleProps;
-export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/components/RectClipPath.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import type { Without } from '../utils/types.js';
+  import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
@@ -58,7 +58,8 @@
     Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
 
   export type RectClipPathProps = RectClipPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -81,7 +82,7 @@
 
 <ClipPath {id} {disabled}>
   {#snippet clip()}
-    <Rect {x} {y} {...extractLayerProps(restProps, 'clip-path-rect')} />
+    <Rect {x} {y} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
   {/snippet}
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}

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

@@ -1,5 +1,5 @@
 import { type RectPropsWithoutHTML } from './Rect.svelte';
-import type { Without } from '../utils/types.js';
+import type { CommonEvents, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 export type BaseRectClipPathPropsWithoutHTML = {
@@ -48,7 +48,7 @@ export type BaseRectClipPathPropsWithoutHTML = {
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 };
 export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML & Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
-export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> & CommonEvents;
 import type { MotionProp } from '../utils/motion.svelte.js';
 declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
 type RectClipPath = ReturnType<typeof RectClipPath>;

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,16 @@
   import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
-  import { layerClass } from '../utils/attributes.js';
+  import { accessor, chartDataArray, type Accessor } from '../utils/common.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 +77,171 @@
 
   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',
+      });
     }
-  }
-</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}
+    // 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',
+      });
+    }
 
-    {#if ctx.radial}
-      {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMinMax[0]))}
-      {@const [x2, y2] = pointRadial(xCoord, Number(yRangeMinMax[1]))}
+    // 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
+        });
+      }
+    }
 
-      <Line
-        {...restProps}
-        {x1}
-        {y1}
-        {x2}
-        {y2}
-        class={cls(layerClass('rule-x-radial-line'), 'stroke-surface-content/10', className)}
-      />
-    {: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}
+    // 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="lc-rule-g">
+  {#each lines as line}
+    {@const stroke = line.stroke ?? strokeProp}
 
-  {#if showRule(y, 'y')}
     {#if ctx.radial}
-      <Circle
-        r={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
-        class={cls(
-          layerClass('rule-y-radial-circle'),
-          'fill-none stroke-surface-content/50',
-          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('lc-rule-x-radial-line', className)}
+        />
+      {:else if line.axis === 'y'}
+        <Circle r={line.y1} {stroke} class={cls('lc-rule-y-radial-circle', className)} />
+      {/if}
     {: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)}
+        x1={line.x1}
+        y1={line.y1}
+        x2={line.x2}
+        y2={line.y2}
+        {stroke}
+        class={cls(line.axis === 'x' ? 'lc-rule-x-line' : 'lc-rule-y-line', className)}
       />
     {/if}
-  {/if}
+  {/each}
 </Group>
+
+<style>
+  @layer components {
+    /* TODO: better way to handle this without affecting other components? */
+    /* Could add a layer between "components" and "base" but would require more setup (and not alignw with TW layers) */
+    :global(
+      :where(
+        .lc-rule-x-line,
+        .lc-rule-y-line,
+        .lc-rule-x-radial-line,
+        .lc-rule-y-radial-circle
+      ):not([class*='lc-axis'], [class*='lc-grid'])
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-rule-y-radial-circle)) {
+      --fill-color: none;
+    }
+  }
+</style>

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;