layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/components/Pattern/Pattern.html.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" module>
+  export type {
+    PatternProps,
+    PatternPropsWithoutHTML,
+  } from './Pattern.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import type { PatternProps } from './Pattern.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('pattern-', uid),
+    size = 4,
+    width = size,
+    height = size,
+    lines: linesProp,
+    circles: circlesProp,
+    background,
+    children,
+  }: PatternProps = $props();
+
+  function withOpacity(color: string, opacity: number) {
+    return opacity === 1 ? color : `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`;
+  }
+
+  function createCSSPattern(): string {
+    const layers: string[] = [];
+
+    if (linesProp) {
+      const lineDefs = Array.isArray(linesProp)
+        ? linesProp
+        : linesProp === true
+          ? [{}]
+          : [linesProp];
+      for (const line of lineDefs) {
+        const color = withOpacity(
+          line.color ?? 'var(--color-surface-content, currentColor)',
+          line.opacity ?? 1
+        );
+        const sw = line.width ?? 1;
+
+        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;
+
+        let angle: number;
+        let period: number;
+        if (rotate === 0) {
+          angle = 0;
+          period = height;
+        } else if (rotate === 90) {
+          angle = 90;
+          period = width;
+        } else if (rotate > 0) {
+          angle = 45;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        } else {
+          angle = 135;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        }
+
+        layers.push(
+          `repeating-linear-gradient(${angle}deg, ${color} 0 ${sw}px, transparent ${sw}px ${period}px)`
+        );
+      }
+    }
+
+    if (circlesProp) {
+      const circleDefs = Array.isArray(circlesProp)
+        ? circlesProp
+        : circlesProp === true
+          ? [{}]
+          : [circlesProp];
+      for (const circle of circleDefs) {
+        const color = withOpacity(
+          circle.color ?? 'var(--color-surface-content, currentColor)',
+          circle.opacity ?? 1
+        );
+        const r = circle.radius ?? 1;
+
+        if (circle.stagger) {
+          layers.push(
+            `radial-gradient(circle at 25% 25%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`,
+            `radial-gradient(circle at 75% 75%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        } else {
+          layers.push(
+            `radial-gradient(circle at center, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        }
+      }
+    }
+
+    const isImage = background != null && /gradient\(|url\(/i.test(background);
+    if (isImage) layers.push(`${background} 0 0 / ${width}px ${height}px`);
+
+    if (layers.length === 0) return background ?? 'transparent';
+    return !isImage && background ? `${layers.join(', ')}, ${background}` : layers.join(', ');
+  }
+</script>
+
+{@render children?.({ id, pattern: createCSSPattern() })}

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

@@ -0,0 +1,5 @@
+export type { PatternProps, PatternPropsWithoutHTML, } from './Pattern.shared.svelte.js';
+import type { PatternProps } from './Pattern.shared.svelte.js';
+declare const Pattern: import("svelte").Component<PatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

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

@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+export 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;
+};
+export 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. Note: only supported on the `<Svg>` layer. */
+    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;
+/**
+ * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
+ * Pure function — no reactivity.
+ */
+export declare function buildPatternShapes(linesProp: PatternPropsWithoutHTML['lines'], circlesProp: PatternPropsWithoutHTML['circles'], size: number, width: number, height: number): PatternShape[];

package/dist/components/Pattern/Pattern.shared.svelte.js

@@ -0,0 +1,71 @@
+/**
+ * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
+ * Pure function — no reactivity.
+ */
+export function buildPatternShapes(linesProp, circlesProp, size, width, height) {
+    const shapes = [];
+    if (linesProp) {
+        const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
+        for (const line of lineDefs) {
+            const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
+            const strokeWidth = line.width ?? 1;
+            const opacity = line.opacity ?? 1;
+            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;
+            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) {
+            const fill = circle.color ?? 'var(--color-surface-content, currentColor)';
+            const opacity = circle.opacity ?? 1;
+            const r = circle.radius ?? 1;
+            if (circle.stagger) {
+                shapes.push({ type: 'circle', cx: size / 4, cy: size / 4, r, fill, opacity }, { type: 'circle', cx: (size * 3) / 4, cy: (size * 3) / 4, r, fill, opacity });
+            }
+            else {
+                shapes.push({ type: 'circle', cx: size / 2, cy: size / 2, r, fill, opacity });
+            }
+        }
+    }
+    return shapes;
+}

package/dist/components/Pattern/Pattern.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  export type {
+    PatternProps,
+    PatternPropsWithoutHTML,
+    PatternShape,
+    CircleShape,
+    LineShape,
+  } from './Pattern.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import PatternSvg from './Pattern.svg.svelte';
+  import PatternCanvas from './Pattern.canvas.svelte';
+  import PatternHtml from './Pattern.html.svelte';
+  import type { PatternProps } from './Pattern.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: PatternProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <PatternSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <PatternCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <PatternHtml {...props} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { PatternProps, PatternPropsWithoutHTML, PatternShape, CircleShape, LineShape, } from './Pattern.shared.svelte.js';
+import type { PatternProps } from './Pattern.shared.svelte.js';
+declare const Pattern: import("svelte").Component<PatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

package/dist/components/Pattern/Pattern.svg.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  export type {
+    PatternProps,
+    PatternPropsWithoutHTML,
+  } from './Pattern.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { createId } from '../../utils/createId.js';
+  import { buildPatternShapes, type PatternProps } from './Pattern.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('pattern-', uid),
+    size = 4,
+    width = size,
+    height = size,
+    lines: linesProp,
+    circles: circlesProp,
+    background,
+    patternContent,
+    children,
+    ...rest
+  }: PatternProps = $props();
+
+  const shapes = $derived(buildPatternShapes(linesProp, circlesProp, size, width, height));
+</script>
+
+<defs>
+  <pattern
+    {id}
+    {width}
+    {height}
+    patternUnits="userSpaceOnUse"
+    {...extractLayerProps(rest, 'lc-pattern')}
+  >
+    {#if patternContent}
+      {@render patternContent?.()}
+    {:else}
+      {#if background}
+        <rect {width} {height} fill={background} />
+      {/if}
+
+      {#each shapes.filter((s) => s.type === 'line') as line}
+        <path
+          d={line.path}
+          stroke={line.stroke}
+          stroke-width={line.strokeWidth}
+          fill="none"
+          opacity={line.opacity}
+        />
+      {/each}
+
+      {#each shapes.filter((s) => s.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})` })}

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

@@ -0,0 +1,5 @@
+export type { PatternProps, PatternPropsWithoutHTML, } from './Pattern.shared.svelte.js';
+import { type PatternProps } from './Pattern.shared.svelte.js';
+declare const Pattern: import("svelte").Component<PatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

package/dist/components/Pie/Pie.base.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { PieProps } from './Pie.shared.svelte.js';
+
+  export type PieBaseLayerComponents = {
+    Arc: Component<any>;
+  };
+
+  export type PieBaseProps = PieProps & PieBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { PieState } from './Pie.shared.svelte.js';
+
+  let {
+    Arc,
+    data,
+    range,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius = 0,
+    padAngle = 0,
+    motion,
+    offset = 0,
+    tooltip,
+    sort,
+    children,
+  }: PieBaseProps = $props();
+
+  const c = new PieState(
+    () =>
+      ({
+        data,
+        range,
+        startAngle,
+        endAngle,
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        padAngle,
+        motion,
+        offset,
+        tooltip,
+        sort,
+      }) as PieProps
+  );
+</script>
+
+{#if children}
+  {@render children({ arcs: c.arcs })}
+{:else}
+  {#each c.arcs as arc}
+    <Arc
+      class="lc-pie-arc"
+      startAngle={arc.startAngle}
+      endAngle={arc.endAngle}
+      padAngle={arc.padAngle}
+      {innerRadius}
+      {outerRadius}
+      {cornerRadius}
+      {offset}
+      fill={c.ctx.config.c ? c.ctx.cScale?.(c.ctx.c(arc.data)) : null}
+      data={arc.data}
+      {tooltip}
+    />
+  {/each}
+{/if}

package/dist/components/Pie/Pie.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { PieProps } from './Pie.shared.svelte.js';
+export type PieBaseLayerComponents = {
+    Arc: Component<any>;
+};
+export type PieBaseProps = PieProps & PieBaseLayerComponents;
+declare const Pie: Component<PieBaseProps, {}, "">;
+type Pie = ReturnType<typeof Pie>;
+export default Pie;

package/dist/components/Pie/Pie.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { PieProps, PiePropsWithoutHTML } from './Pie.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import PieBase from './Pie.base.svelte';
+  import Arc from '../Arc/Arc.canvas.svelte';
+
+  import type { PieProps } from './Pie.shared.svelte.js';
+
+  let props: PieProps = $props();
+</script>
+
+<PieBase {Arc} {...props} />

package/dist/components/Pie/Pie.canvas.svelte.d.ts

@@ -0,0 +1,4 @@
+export type { PieProps, PiePropsWithoutHTML } from './Pie.shared.svelte.js';
+declare const Pie: import("svelte").Component<import("./Pie.shared.svelte.js").PiePropsWithoutHTML, {}, "">;
+type Pie = ReturnType<typeof Pie>;
+export default Pie;

package/dist/components/Pie/Pie.shared.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+import { type PieArcDatum } from 'd3-shape';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+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;
+    /** @default 0 */
+    cornerRadius?: number;
+    /** @default 0 */
+    padAngle?: number;
+    /** @default 0 */
+    offset?: number;
+    /** Setup pointer events to show tooltip for related data */
+    tooltip?: boolean;
+    /** Sort function to sort the arcs */
+    sort?: ((a: any, b: any) => number) | null;
+    children?: Snippet<[{
+        arcs: PieArcDatum<any>[];
+    }]>;
+    motion?: MotionProp;
+};
+export type PieProps = PiePropsWithoutHTML;
+/**
+ * Reactive state shared by every per-layer Pie variant. Builds the
+ * d3-pie generator and resolved `arcs` array.
+ */
+export declare class PieState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => PieProps);
+    range: number[];
+    endAngle: number;
+    pie: import("d3-shape").Pie<any, any>;
+    arcs: PieArcDatum<any>[];
+}

package/dist/components/Pie/Pie.shared.svelte.js

@@ -0,0 +1,41 @@
+import { pie as d3pie } from 'd3-shape';
+import { min, max } from 'd3-array';
+import { degreesToRadians } from '../../utils/math.js';
+import { createMotion } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Pie variant. Builds the
+ * d3-pie generator and resolved `arcs` array.
+ */
+export class PieState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    #motionEndAngle;
+    constructor(getProps) {
+        this.#getProps = getProps;
+        this.#motionEndAngle = createMotion(0, () => this.endAngle, getProps().motion);
+    }
+    range = $derived(this.#getProps().range ?? [0, 360]);
+    endAngle = $derived.by(() => {
+        const props = this.#getProps();
+        return (props.endAngle ??
+            degreesToRadians((this.ctx.config.xRange ? max(this.ctx.config.xRange) : max(this.range))));
+    });
+    pie = $derived.by(() => {
+        const props = this.#getProps();
+        let _pie = d3pie()
+            .startAngle(props.startAngle ??
+            degreesToRadians((this.ctx.config.xRange ? min(this.ctx.config.xRange) : min(this.range))))
+            .endAngle(this.#motionEndAngle.current)
+            .padAngle(props.padAngle ?? 0)
+            .value(this.ctx.x);
+        if (props.sort === null) {
+            _pie = _pie.sort(null);
+        }
+        else if (props.sort) {
+            _pie = _pie.sort(props.sort);
+        }
+        return _pie;
+    });
+    arcs = $derived(this.pie(this.#getProps().data ?? (Array.isArray(this.ctx.data) ? this.ctx.data : [])));
+}

package/dist/components/Pie/Pie.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { PieProps, PiePropsWithoutHTML } from './Pie.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import PieSvg from './Pie.svg.svelte';
+  import PieCanvas from './Pie.canvas.svelte';
+  import type { PieProps } from './Pie.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: PieProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <PieSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <PieCanvas {...props} />
+{/if}

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

@@ -0,0 +1,4 @@
+export type { PieProps, PiePropsWithoutHTML } from './Pie.shared.svelte.js';
+declare const Pie: import("svelte").Component<import("./Pie.shared.svelte.js").PiePropsWithoutHTML, {}, "">;
+type Pie = ReturnType<typeof Pie>;
+export default Pie;

package/dist/components/Pie/Pie.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { PieProps, PiePropsWithoutHTML } from './Pie.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import PieBase from './Pie.base.svelte';
+  import Arc from '../Arc/Arc.svg.svelte';
+
+  import type { PieProps } from './Pie.shared.svelte.js';
+
+  let props: PieProps = $props();
+</script>
+
+<PieBase {Arc} {...props} />

package/dist/components/Pie/Pie.svg.svelte.d.ts

@@ -0,0 +1,4 @@
+export type { PieProps, PiePropsWithoutHTML } from './Pie.shared.svelte.js';
+declare const Pie: import("svelte").Component<import("./Pie.shared.svelte.js").PiePropsWithoutHTML, {}, "">;
+type Pie = ReturnType<typeof Pie>;
+export default Pie;

package/dist/components/Point.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   let { d, children }: PointProps = $props();