layerchart 2.0.0-next.1 → 2.0.0-next.10

package/dist/components/Pattern.svelte

@@ -1,15 +1,301 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  import { asAny, type Without } from '../utils/types.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { createId } from '../utils/createId.js';
+
+  type PatternLineDef = {
+    /**
+     * The width of the line
+     * @default 1
+     */
+    width?: string;
+
+    /**
+     * The rotation of the line
+     * @default 0
+     */
+    rotate?: number;
+
+    /**
+     * The color of the line
+     * @default 'var(--color-surface-content)'
+     */
+    color?: string;
+
+    /**
+     * The opacity of the line
+     * @default 1
+     */
+    opacity?: number;
+  };
+
+  type PatternCircleDef = {
+    /**
+     * The radius of the circle
+     * @default 1
+     */
+    radius?: number;
+
+    /**
+     * Stagger the circle layout
+     * @default false
+     */
+    stagger?: boolean;
+
+    /**
+     * The color of the circle
+     * @default 'var(--color-surface-content)'
+     */
+    color?: string;
+
+    /**
+     * The opacity of the circle
+     * @default 1
+     */
+    opacity?: number;
+  };
+
+  export type PatternPropsWithoutHTML = {
+    /**
+     * The id of the pattern
+     */
+    id?: string;
+
+    /**
+     * The size of the pattern (sets `width` and `height` as same value).
+     */
+    size?: number;
+
+    /**
+     * The width of the pattern for custom patterns (set by `lines`, etc)
+     */
+    width?: number;
+
+    /**
+     * The height of the pattern for custom patterns (set by `lines`, etc)
+     */
+    height?: number;
+
+    /**
+     * The number of lines to render
+     */
+    lines?: boolean | PatternLineDef | PatternLineDef[];
+
+    /**
+     * The number of circles to render
+     */
+    circles?: boolean | PatternCircleDef | PatternCircleDef[];
+
+    /**
+     * The background color of the pattern
+     */
+    background?: string;
+
+    /**
+     * Render as a child of the pattern
+     */
+    patternContent?: Snippet;
+
+    children?: Snippet<[{ id: string; pattern: string }]>;
+  };
+
+  export type PatternProps = PatternPropsWithoutHTML &
+    Without<SVGAttributes<SVGPatternElement>, PatternPropsWithoutHTML>;
+
+  export type CircleShape = {
+    type: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill: string;
+    opacity: number;
+  };
+  export type LineShape = {
+    type: 'line';
+    path: string;
+    stroke: string;
+    strokeWidth: string | number;
+    opacity: number;
+  };
+
+  export type PatternShape = CircleShape | LineShape;
+</script>
+
 <script lang="ts">
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
-  // https://airbnb.io/visx/patterns
-  // https://github.com/airbnb/visx/tree/master/packages/visx-pattern/src/patterns
-  export let id: string;
+  import { getRenderContext } from './Chart.svelte';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { createPattern } from '../utils/canvas.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('pattern-', uid),
+    size = 4,
+    width = size,
+    height = size,
+    lines: linesProp,
+    circles: circlesProp,
+    background,
+    patternContent,
+    children,
+    ...restProps
+  }: PatternProps = $props();
+
+  const renderCtx = getRenderContext();
+
+  let canvasPattern = $state<CanvasPattern | null>(null);
+
+  let shapes = $state<PatternShape[]>([]);
+
+  if (linesProp) {
+    const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
+    for (const line of lineDefs) {
+      // const spacing = Math.abs(line.spacing);
+      const stroke = line.color ?? 'var(--color-surface-content)';
+      const strokeWidth = line.width ?? 1;
+      const opacity = line.opacity ?? 1;
 
-  export let width: number;
-  export let height: number;
+      let rotate = Math.round(line.rotate ?? 0) % 360;
+      if (rotate > 180) rotate = rotate - 360;
+      else if (rotate > 90) rotate = rotate - 180;
+      else if (rotate < -180) rotate = rotate + 360;
+      else if (rotate < -90) rotate = rotate + 180;
+
+      // Use a <path> instead of a <line> to have corners without gaps (start, main line, end)
+      let path = '';
+
+      if (rotate === 0) {
+        path = `
+        M 0 0 L ${width} 0
+        M 0 ${height} L ${width} ${height}
+    `;
+      } else if (rotate === 90) {
+        path = `
+        M 0 0 L 0 ${height}
+        M ${width} 0 L ${width} ${height}
+    `;
+      } else {
+        if (rotate > 0) {
+          path = `
+          M 0 ${-height} L ${width * 2} ${height}
+          M ${-width} ${-height} L ${width} ${height}
+          M ${-width} 0 L ${width} ${height * 2}
+      `;
+        } else {
+          path = `
+          M ${-width} ${height} L ${width} ${-height}
+          M ${-width} ${height * 2} L ${width * 2} ${-height}
+          M 0 ${height * 2} L ${width * 2} 0
+      `;
+        }
+      }
+
+      shapes.push({
+        type: 'line',
+        path,
+        stroke,
+        strokeWidth,
+        opacity,
+      });
+    }
+  }
+
+  if (circlesProp) {
+    const circleDefs = Array.isArray(circlesProp)
+      ? circlesProp
+      : circlesProp === true
+        ? [{}]
+        : [circlesProp];
+    for (const circle of circleDefs) {
+      if (circle.stagger) {
+        shapes.push(
+          {
+            type: 'circle',
+            cx: size / 4,
+            cy: size / 4,
+            r: circle.radius ?? 1,
+            fill: circle.color ?? 'var(--color-surface-content)',
+            opacity: circle.opacity ?? 1,
+          },
+          {
+            type: 'circle',
+            cx: (size * 3) / 4,
+            cy: (size * 3) / 4,
+            r: circle.radius ?? 1,
+            fill: circle.color ?? 'var(--color-surface-content)',
+            opacity: circle.opacity ?? 1,
+          }
+        );
+      } else {
+        shapes.push({
+          type: 'circle',
+          cx: size / 2,
+          cy: size / 2,
+          r: circle.radius ?? 1,
+          fill: circle.color ?? 'var(--color-surface-content)',
+          opacity: circle.opacity ?? 1,
+        });
+      }
+    }
+  }
+
+  function render(_ctx: CanvasRenderingContext2D) {
+    const pattern = createPattern(_ctx, width, height, shapes, background);
+    canvasPattern = pattern;
+  }
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Pattern',
+      render,
+      deps: () => [width, height, shapes, background],
+    });
+  }
 </script>
 
-<defs>
-  <pattern {id} {width} {height} patternUnits="userSpaceOnUse" {...$$restProps}>
-    <slot />
-  </pattern>
-</defs>
+{#if renderCtx === 'canvas'}
+  {@render children?.({ id, pattern: asAny(canvasPattern) })}
+{:else if renderCtx === 'svg'}
+  <defs>
+    <pattern
+      {id}
+      {width}
+      {height}
+      patternUnits="userSpaceOnUse"
+      {...extractLayerProps(restProps, 'pattern')}
+    >
+      {#if patternContent}
+        {@render patternContent?.()}
+      {:else}
+        {#if background}
+          <rect {width} {height} fill={background} />
+        {/if}
+
+        {#each shapes.filter((shape) => shape.type === 'line') as line}
+          <path
+            d={line.path}
+            stroke={line.stroke}
+            stroke-width={line.strokeWidth}
+            fill="none"
+            opacity={line.opacity}
+          />
+        {/each}
+
+        {#each shapes.filter((shape) => shape.type === 'circle') as circle}
+          <circle
+            cx={circle.cx}
+            cy={circle.cy}
+            r={circle.r}
+            fill={circle.fill}
+            opacity={circle.opacity}
+          />
+        {/each}
+      {/if}
+    </pattern>
+  </defs>
+
+  {@render children?.({ id, pattern: `url(#${id})` })}
+{/if}

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

@@ -1,21 +1,105 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type Without } from '../utils/types.js';
+type PatternLineDef = {
+    /**
+     * The width of the line
+     * @default 1
+     */
+    width?: string;
+    /**
+     * The rotation of the line
+     * @default 0
+     */
+    rotate?: number;
+    /**
+     * The color of the line
+     * @default 'var(--color-surface-content)'
+     */
+    color?: string;
+    /**
+     * The opacity of the line
+     * @default 1
+     */
+    opacity?: number;
+};
+type PatternCircleDef = {
+    /**
+     * The radius of the circle
+     * @default 1
+     */
+    radius?: number;
+    /**
+     * Stagger the circle layout
+     * @default false
+     */
+    stagger?: boolean;
+    /**
+     * The color of the circle
+     * @default 'var(--color-surface-content)'
+     */
+    color?: string;
+    /**
+     * The opacity of the circle
+     * @default 1
+     */
+    opacity?: number;
+};
+export type PatternPropsWithoutHTML = {
+    /**
+     * The id of the pattern
+     */
+    id?: string;
+    /**
+     * The size of the pattern (sets `width` and `height` as same value).
+     */
+    size?: number;
+    /**
+     * The width of the pattern for custom patterns (set by `lines`, etc)
+     */
+    width?: number;
+    /**
+     * The height of the pattern for custom patterns (set by `lines`, etc)
+     */
+    height?: number;
+    /**
+     * The number of lines to render
+     */
+    lines?: boolean | PatternLineDef | PatternLineDef[];
+    /**
+     * The number of circles to render
+     */
+    circles?: boolean | PatternCircleDef | PatternCircleDef[];
+    /**
+     * The background color of the pattern
+     */
+    background?: string;
+    /**
+     * Render as a child of the pattern
+     */
+    patternContent?: Snippet;
+    children?: Snippet<[{
         id: string;
-        width: number;
-        height: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+        pattern: string;
+    }]>;
+};
+export type PatternProps = PatternPropsWithoutHTML & Without<SVGAttributes<SVGPatternElement>, PatternPropsWithoutHTML>;
+export type CircleShape = {
+    type: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill: string;
+    opacity: number;
+};
+export type LineShape = {
+    type: 'line';
+    path: string;
+    stroke: string;
+    strokeWidth: string | number;
+    opacity: number;
 };
-export type PatternProps = typeof __propDef.props;
-export type PatternEvents = typeof __propDef.events;
-export type PatternSlots = typeof __propDef.slots;
-export default class Pattern extends SvelteComponentTyped<PatternProps, PatternEvents, PatternSlots> {
-}
-export {};
+export type PatternShape = CircleShape | LineShape;
+declare const Pattern: import("svelte").Component<PatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

package/dist/components/Pie.svelte

@@ -1,13 +1,87 @@
+<script lang="ts" module>
+  import { pie as d3pie, type PieArcDatum } from 'd3-shape';
+
+  export type PiePropsWithoutHTML = {
+    data?: any[];
+
+    /**
+     * Range [min,max] in degrees.  See also startAngle/endAngle
+     *
+     * @default [0, 360]
+     */
+    range?: [number, number] | number[];
+
+    /**
+     * Start angle in radians
+     */
+    startAngle?: number;
+
+    /**
+     * End angle in radians
+     */
+    endAngle?: number;
+
+    /**
+     * Define innerRadius.
+     *   value >= 1: discrete value
+     *   value >  0: percent of `outerRadius`
+     *   value <  0: offset of `outerRadius`
+     *   default: yRange min
+     */
+    innerRadius?: number;
+
+    /**
+     * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+     */
+    outerRadius?: number;
+
+    /**
+     * Corner radius of the arc
+     *
+     * @default 0
+     */
+
+    cornerRadius?: number;
+
+    /**
+     * Angle between the arcs
+     *
+     * @default 0
+     */
+    padAngle?: number;
+
+    /**
+     * Offset all arcs from center
+     *
+     * @default 0
+     */
+    offset?: number;
+
+    /**
+     * Tooltip context to setup pointer events to show tooltip for related data
+     */
+    tooltipContext?: TooltipContextValue;
+
+    /**
+     * Sort function to sort the arcs
+     */
+    sort?: ((a: any, b: any) => number) | null;
+
+    children?: Snippet<[{ arcs: PieArcDatum<any>[] }]>;
+
+    motion?: MotionProp;
+  };
+</script>
+
 <script lang="ts">
-  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-  import { pie as d3pie } from 'd3-shape';
   import { min, max } from 'd3-array';
-
   import Arc from './Arc.svelte';
-  import { chartContext } from './ChartContext.svelte';
   import { degreesToRadians } from '../utils/math.js';
-  import { motionStore } from '../stores/motionStore.js';
+  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import { getChartContext } from './Chart.svelte';
+  import type { Snippet } from 'svelte';
+  import { layerClass } from '../utils/attributes.js';
 
   /*
     TODO:
@@ -17,84 +91,56 @@
     - [ ] Hover events / change innerRadius / outerRadius, etc
   */
 
-  export let data: any[] | undefined = undefined; // TODO: Update Type
-
-  /**
-   * Range [min,max] in degrees.  See also startAngle/endAngle
-   */
-  export let range = [0, 360]; // degrees
-
-  /**
-   * Start angle in radians
-   */
-  export let startAngle: number | undefined = undefined;
-
-  /**
-   * End angle in radians
-   */
-  export let endAngle: number | undefined = undefined;
-
-  /**
-   * Define innerRadius.
-   *   value >= 1: discrete value
-   *   value >  0: percent of `outerRadius`
-   *   value <  0: offset of `outerRadius`
-   *   default: yRange min
-   */
-  export let innerRadius: number | undefined = undefined;
-
-  /**
-   * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
-   */
-  export let outerRadius: number | undefined = undefined;
-
-  export let cornerRadius = 0;
-  export let padAngle = 0;
-
-  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-
-  /**
-   * Offset all arcs from center
-   */
-  export let offset = 0;
-
-  /**
-   * Tooltip context to setup pointer events to show tooltip for related data
-   */
-  export let tooltip: TooltipContextValue | undefined = undefined;
-
-  export let sort: ((a: any, b: any) => number) | null | undefined = undefined;
-
-  const { data: contextData, x, y, xRange, c, cScale, config } = chartContext();
-
-  // @ts-expect-error
-  $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
-  let tweened_endAngle = motionStore(0, { spring, tweened });
-  $: tweened_endAngle.set(resolved_endAngle);
-
-  let pie: ReturnType<typeof d3pie<any>>;
-  $: {
-    pie = d3pie<any>()
-      // @ts-expect-error
-      .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
-      .endAngle($tweened_endAngle)
+  let {
+    data,
+    range = [0, 360],
+    startAngle: startAngleProp,
+    endAngle: endAngleProp,
+    innerRadius,
+    outerRadius,
+    cornerRadius = 0,
+    padAngle = 0,
+    motion,
+    offset = 0,
+    tooltipContext,
+    sort,
+    children,
+  }: PiePropsWithoutHTML = $props();
+
+  const ctx = getChartContext();
+
+  const endAngle = $derived(
+    endAngleProp ?? degreesToRadians(ctx.config.xRange ? max(ctx.xRange) : max(range))
+  );
+
+  const motionEndAngle = createMotion(0, () => endAngle, motion);
+
+  const pie = $derived.by(() => {
+    let _pie = d3pie<any>()
+      .startAngle(
+        startAngleProp ?? degreesToRadians(ctx.config.xRange ? min(ctx.xRange) : min(range))
+      )
+      .endAngle(motionEndAngle.current)
       .padAngle(padAngle)
-      .value($x);
+      .value(ctx.x);
 
     if (sort === null) {
-      pie = pie.sort(null);
+      _pie = _pie.sort(null);
     } else if (sort) {
-      pie = pie.sort(sort);
+      _pie = _pie.sort(sort);
     }
-  }
+    return _pie;
+  });
 
-  $: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
+  const arcs = $derived(pie(data ?? (Array.isArray(ctx.data) ? ctx.data : [])));
 </script>
 
-<slot {arcs}>
+{#if children}
+  {@render children({ arcs })}
+{:else}
   {#each arcs as arc}
     <Arc
+      class={layerClass('pie-arc')}
       startAngle={arc.startAngle}
       endAngle={arc.endAngle}
       padAngle={arc.padAngle}
@@ -102,9 +148,9 @@
       {outerRadius}
       {cornerRadius}
       {offset}
-      fill={$config.c ? $cScale?.($c(arc.data)) : null}
+      fill={ctx.config.c ? ctx.cScale?.(ctx.c(arc.data)) : null}
       data={arc.data}
-      {tooltip}
+      {tooltipContext}
     />
   {/each}
-</slot>
+{/if}