layerchart 2.0.0-next.2 → 2.0.0-next.20

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

@@ -1,6 +1,6 @@
 import Text, { type TextProps } from './Text.svelte';
 import { type ComponentProps, type Snippet } from 'svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Without } from '../utils/types.js';
 import { type Point } from './Points.svelte';
 import { type Accessor } from '../utils/common.js';
@@ -42,7 +42,7 @@ export type LabelsPropsWithoutHTML<T = any> = {
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
      * `index` position used by default

package/dist/components/Legend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { Placement } from './types.js';
-  import type { Without } from '../utils/types.js';
+  import { asAny, type Without } from '../utils/types.js';
 
   export type LegendItem = {
     value: any;
@@ -37,7 +37,7 @@
      * @default width / 64
      */
     ticks?: number;
-    tickFormat?: FormatType;
+    tickFormat?: FormatType | FormatConfig;
     tickValues?: any[];
     /**
      * The font size of the tick labels.
@@ -110,7 +110,7 @@
   import { scaleBand, scaleLinear } from 'd3-scale';
   import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
   import { quantile, range } from 'd3-array';
-  import { format, type FormatType } from '@layerstack/utils';
+  import { format, type FormatType, type FormatConfig } from '@layerstack/utils';
 
   import ColorRamp from './ColorRamp.svelte';
   import { cls } from '@layerstack/tailwind';
@@ -245,6 +245,7 @@
       const tickValues = range(thresholds.length);
       const tickFormat = (i: number) => {
         const value = thresholds[i];
+        // @ts-expect-error - improve types
         return tickFormatProp ? format(value, tickFormatProp) : value;
       };
 
@@ -360,7 +361,8 @@
               classes.label
             )}
           >
-            {tickFormatProp ? format(tick, tickFormatProp) : tick}
+            <!-- @ts-expect-error - improve types -->
+            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </text>
 
           {#if scaleConfig.tickLine}
@@ -409,7 +411,8 @@
               classes.label
             )}
           >
-            {tickFormatProp ? format(tick, tickFormatProp) : tick}
+            <!-- @ts-expect-error - improve types -->
+            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </div>
         </button>
       {/each}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Placement } from './types.js';
-import type { Without } from '../utils/types.js';
+import { type Without } from '../utils/types.js';
 export type LegendItem = {
     value: any;
     color: string;
@@ -30,7 +30,7 @@ export type LegendPropsWithoutHTML = {
      * @default width / 64
      */
     ticks?: number;
-    tickFormat?: FormatType;
+    tickFormat?: FormatType | FormatConfig;
     tickValues?: any[];
     /**
      * The font size of the tick labels.
@@ -90,7 +90,7 @@ export type LegendPropsWithoutHTML = {
 };
 export type LegendProps = LegendPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, LegendPropsWithoutHTML>;
 import type { HTMLAttributes } from 'svelte/elements';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { AnyScale } from '../utils/scales.svelte.js';
 declare const Legend: import("svelte").Component<LegendProps, {}, "ref">;
 type Legend = ReturnType<typeof Legend>;

package/dist/components/MonthPath.svelte

@@ -20,30 +20,33 @@
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
   };
 
   export type MonthPathProps = MonthPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
+    // we omit the spline props to avoid conflicts with attribute names since we are
+    // passing them through to `<Spline />`
+    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
-  import { timeWeek, timeYear } from 'd3-time';
-  import { endOfMonth } from 'date-fns';
+  import { timeWeek, timeMonth, timeYear } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
+  import { endOfInterval } from '@layerstack/utils';
   import { layerClass } from '../utils/attributes.js';
+  import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
   let {
     date,
     cellSize: cellSizeProp,
-    ref: refProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
   }: MonthPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    refProp = ref;
+    pathRefProp = pathRef;
   });
 
   const cellSize = $derived(
@@ -55,7 +58,7 @@
   const startWeek = $derived(timeWeek.count(timeYear(date), date));
 
   // end of month
-  const monthEnd = $derived(endOfMonth(date));
+  const monthEnd = $derived(endOfInterval('month', date));
   const endDayOfWeek = $derived(monthEnd.getDay());
   const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
 
@@ -68,9 +71,9 @@
   `);
 </script>
 
-<path
-  bind:this={ref}
-  d={pathData}
+<Spline
+  bind:pathRef
+  {pathData}
   fill="none"
   class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
   {...restProps}

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

@@ -16,9 +16,10 @@ export type MonthPathPropsWithoutHTML = {
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
 };
-export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
-declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "ref">;
+export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
+import { type SplinePropsWithoutHTML } from './Spline.svelte';
+declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "pathRef">;
 type MonthPath = ReturnType<typeof MonthPath>;
 export default MonthPath;

package/dist/components/Polygon.svelte

@@ -0,0 +1,285 @@
+<script lang="ts" module>
+  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>;
+</script>
+
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { getRenderContext } from './Chart.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type MotionProp,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+  import { polygon } from '../utils/shape.js';
+  import { roundedPolygonPath } from '../utils/path.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    r = 1,
+    initialR: initialRProp,
+    points = 4,
+    cornerRadius = 0,
+    rotate = 0,
+    inset = 0,
+    scaleX = 1,
+    scaleY = 1,
+    skewX = 0,
+    skewY = 0,
+    tiltX = 0,
+    tiltY = 0,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: PolygonProps = $props();
+
+  let ref = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialR = initialRProp ?? r;
+
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionR = createMotion(initialR, () => r, motion);
+
+  let polygonPoints = $derived(
+    typeof points === 'number'
+      ? polygon({
+          cx: motionCx.current,
+          cy: motionCy.current,
+          count: points,
+          radius: motionR.current,
+          rotate,
+          inset,
+          scaleX,
+          scaleY,
+          skewX,
+          skewY,
+          tiltX,
+          tiltY,
+        })
+      : points
+  );
+  let d = $derived(roundedPolygonPath(polygonPoints, cornerRadius));
+
+  const extractedTween = extractTweenConfig(motion);
+
+  const tweenedOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: { interpolate: interpolatePath, ...extractedTween.options },
+      }
+    : undefined;
+
+  const tweenedState = createMotion(null, () => d, tweenedOptions);
+
+  const renderCtx = getRenderContext();
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      tweenedState.current,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            classes: cls(layerClass('polygon'), fill == null && 'fill-surface-content', className),
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Polygon',
+      render,
+      events: {
+        click: restProps.onclick,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
+        pointerdown: restProps.onpointerdown,
+        pointerover: restProps.onpointerover,
+        pointerout: restProps.onpointerout,
+        touchmove: restProps.ontouchmove,
+      },
+      deps: () => [
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+        tweenedState.current,
+      ],
+    });
+  }
+</script>
+
+{#if renderCtx === 'svg'}
+  <path
+    d={tweenedState.current}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    class={cls(layerClass('polygon'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
+    bind:this={ref}
+  />
+{/if}

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

@@ -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();

package/dist/components/Rule.svelte

@@ -52,6 +52,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import Circle from './Circle.svelte';
+  import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
   import { layerClass } from '../utils/attributes.js';
@@ -87,7 +88,7 @@
   }
 </script>
 
-<g class={layerClass('rule-g')}>
+<Group class={layerClass('rule-g')}>
   {#if showRule(x, 'x')}
     {@const xCoord =
       x === true || x === 'left'
@@ -153,4 +154,4 @@
       />
     {/if}
   {/if}
-</g>
+</Group>