layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/graph/Ribbon.svelte

@@ -0,0 +1,141 @@
+<script lang="ts" module>
+  import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
+
+  import Path, { type PathPropsWithoutHTML } from '../Path.svelte';
+  import type { MotionProp } from '../../utils/motion.svelte.js';
+  import type { CommonStyleProps, Without } from '../../utils/types.js';
+
+  export type RibbonPropsWithoutHTML = {
+    /**
+     * A single chord object from the d3-chord layout, containing `source` and `target`
+     * sub-objects each with `startAngle`, `endAngle`, `value`, and `index`.
+     */
+    chord: import('d3-chord').Chord;
+
+    /**
+     * The radius of the ribbon.
+     */
+    radius?: number;
+
+    /**
+     * When true, uses `ribbonArrow()` instead of `ribbon()` to render
+     * directed ribbons with arrowheads.
+     *
+     * @default false
+     */
+    directed?: boolean;
+
+    /**
+     * The radius of the arrowhead when `directed` is true.
+     * Only applies when `directed` is true.
+     */
+    headRadius?: number;
+
+    /**
+     * Setup pointer events to show tooltip for related data.
+     *
+     * **Must set `data` prop as well**
+     */
+    tooltip?: boolean;
+
+    /**
+     * Data to set when showing tooltip
+     */
+    data?: any;
+
+    /**
+     * Animation/transition configuration for the ribbon path.
+     */
+    motion?: MotionProp;
+
+    onpointerenter?: PointerEventHandler<SVGPathElement>;
+    onpointermove?: PointerEventHandler<SVGPathElement>;
+    onpointerleave?: PointerEventHandler<SVGPathElement>;
+    ontouchmove?: (e: TouchEvent & { currentTarget: SVGPathElement }) => void;
+  } & CommonStyleProps;
+
+  export type RibbonProps = RibbonPropsWithoutHTML &
+    Without<SVGAttributes<SVGPathElement>, RibbonPropsWithoutHTML & PathPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { ribbon as d3ribbon, ribbonArrow as d3ribbonArrow } from 'd3-chord';
+
+  import { getChartContext } from '../../contexts/chart.js';
+  import { cls } from '@layerstack/tailwind';
+
+  let {
+    chord,
+    radius,
+    directed = false,
+    headRadius,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    data,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    ontouchmove,
+    tooltip,
+    motion,
+    class: className,
+    ...restProps
+  }: RibbonProps = $props();
+
+  const ctx = getChartContext();
+
+  const ribbonGenerator = $derived.by(() => {
+    if (directed) {
+      const gen = d3ribbonArrow();
+      if (radius != null) gen.radius(radius);
+      if (headRadius != null) gen.headRadius(headRadius);
+      return gen;
+    } else {
+      const gen = d3ribbon();
+      if (radius != null) gen.radius(radius);
+      return gen;
+    }
+  });
+
+  // @ts-expect-error - Chord type is compatible with Ribbon at runtime; radius is set on the generator
+  const pathData = $derived(ribbonGenerator(chord) ?? undefined);
+
+  const onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) ctx.tooltip.hide();
+  };
+</script>
+
+<Path
+  {pathData}
+  {fill}
+  {fillOpacity}
+  {stroke}
+  {strokeWidth}
+  {opacity}
+  {motion}
+  {...restProps}
+  class={cls('lc-ribbon', className)}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  ontouchmove={(e) => {
+    ontouchmove?.(e);
+    if (tooltip) {
+      e.preventDefault();
+    }
+  }}
+/>

package/dist/components/graph/Ribbon.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
+import { type PathPropsWithoutHTML } from '../Path.svelte';
+import type { MotionProp } from '../../utils/motion.svelte.js';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+export type RibbonPropsWithoutHTML = {
+    /**
+     * A single chord object from the d3-chord layout, containing `source` and `target`
+     * sub-objects each with `startAngle`, `endAngle`, `value`, and `index`.
+     */
+    chord: import('d3-chord').Chord;
+    /**
+     * The radius of the ribbon.
+     */
+    radius?: number;
+    /**
+     * When true, uses `ribbonArrow()` instead of `ribbon()` to render
+     * directed ribbons with arrowheads.
+     *
+     * @default false
+     */
+    directed?: boolean;
+    /**
+     * The radius of the arrowhead when `directed` is true.
+     * Only applies when `directed` is true.
+     */
+    headRadius?: number;
+    /**
+     * Setup pointer events to show tooltip for related data.
+     *
+     * **Must set `data` prop as well**
+     */
+    tooltip?: boolean;
+    /**
+     * Data to set when showing tooltip
+     */
+    data?: any;
+    /**
+     * Animation/transition configuration for the ribbon path.
+     */
+    motion?: MotionProp;
+    onpointerenter?: PointerEventHandler<SVGPathElement>;
+    onpointermove?: PointerEventHandler<SVGPathElement>;
+    onpointerleave?: PointerEventHandler<SVGPathElement>;
+    ontouchmove?: (e: TouchEvent & {
+        currentTarget: SVGPathElement;
+    }) => void;
+} & CommonStyleProps;
+export type RibbonProps = RibbonPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, RibbonPropsWithoutHTML & PathPropsWithoutHTML>;
+declare const Ribbon: import("svelte").Component<RibbonProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/{Sankey.svelte → graph/Sankey.svelte}

@@ -89,7 +89,7 @@
     type SankeyGraph,
   } from 'd3-sankey';
 
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let {
     nodes: nodesProp = (d: any) => d.nodes,
@@ -107,8 +107,6 @@
   const ctx = getChartContext();
 
   const sankeyData = $derived.by(() => {
-    if (typeof document === 'undefined') return { nodes: [], links: [] };
-
     return (
       d3Sankey()
         .size([ctx.width, ctx.height])

package/dist/components/graph/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Chord } from './Chord.svelte';
+export * from './Chord.svelte';
+export { default as Dagre } from './Dagre.svelte';
+export * from './Dagre.svelte';
+export { default as Ribbon } from './Ribbon.svelte';
+export * from './Ribbon.svelte';
+export { default as Sankey } from './Sankey.svelte';
+export * from './Sankey.svelte';

package/dist/components/graph/index.js

@@ -0,0 +1,8 @@
+export { default as Chord } from './Chord.svelte';
+export * from './Chord.svelte';
+export { default as Dagre } from './Dagre.svelte';
+export * from './Dagre.svelte';
+export { default as Ribbon } from './Ribbon.svelte';
+export * from './Ribbon.svelte';
+export { default as Sankey } from './Sankey.svelte';
+export * from './Sankey.svelte';

package/dist/components/{Pack.svelte → hierarchy/Pack.svelte}

@@ -3,6 +3,9 @@
   import type { Snippet } from 'svelte';
 
   export type PackProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * The size of the pack layout.
      */
@@ -15,11 +18,6 @@
      */
     padding?: number;
 
-    /**
-     * The hierarchy data to be packed.
-     */
-    hierarchy: HierarchyNode<T>;
-
     /**
      * A bindable reference to the computed packed nodes.
      *
@@ -32,7 +30,7 @@
 </script>
 
 <script lang="ts" generics="T">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
 
   const ctx = getChartContext();
 

package/dist/components/{Pack.svelte.d.ts → hierarchy/Pack.svelte.d.ts}

@@ -1,6 +1,8 @@
 import { type HierarchyCircularNode, type HierarchyNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
 export type PackProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * The size of the pack layout.
      */
@@ -11,10 +13,6 @@ export type PackProps<T> = {
      * @see https://github.com/d3/d3-hierarchy#pack_padding
      */
     padding?: number;
-    /**
-     * The hierarchy data to be packed.
-     */
-    hierarchy: HierarchyNode<T>;
     /**
      * A bindable reference to the computed packed nodes.
      *
@@ -25,10 +23,17 @@ export type PackProps<T> = {
         nodes: HierarchyCircularNode<T>[];
     }]>;
 };
+declare function $$render<T>(): {
+    props: PackProps<T>;
+    exports: {};
+    bindings: "nodes";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): PackProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "nodes";
     exports(): {};
 }

package/dist/components/{Partition.svelte → hierarchy/Partition.svelte}

@@ -7,6 +7,9 @@
   import type { Snippet } from 'svelte';
 
   export type PartitionProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * The orientation of the partition layout.
      *
@@ -31,8 +34,6 @@
      */
     round?: boolean;
 
-    hierarchy: HierarchyNode<T>;
-
     /**
      * A bindable reference to the descendants of the partition layout.
      *
@@ -45,7 +46,7 @@
 </script>
 
 <script lang="ts" generics="T">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let {
     size,

package/dist/components/{Partition.svelte.d.ts → hierarchy/Partition.svelte.d.ts}

@@ -1,6 +1,8 @@
 import { type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
 export type PartitionProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * The orientation of the partition layout.
      *
@@ -21,7 +23,6 @@ export type PartitionProps<T> = {
      * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
      */
     round?: boolean;
-    hierarchy: HierarchyNode<T>;
     /**
      * A bindable reference to the descendants of the partition layout.
      *
@@ -32,10 +33,17 @@ export type PartitionProps<T> = {
         nodes: HierarchyRectangularNode<T>[];
     }]>;
 };
+declare function $$render<T>(): {
+    props: PartitionProps<T>;
+    exports: {};
+    bindings: "nodes";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): PartitionProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "nodes";
     exports(): {};
 }

package/dist/components/{Tree.svelte → hierarchy/Tree.svelte}

@@ -1,5 +1,8 @@
 <script lang="ts" module>
   export type TreeProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
      * If unset, layout size is used instead.  When a node size is specified, the root node is always
@@ -14,8 +17,6 @@
      */
     separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
 
-    hierarchy?: HierarchyNode<T>;
-
     /**
      * Orientation of the tree layout.
      *
@@ -35,7 +36,7 @@
     type HierarchyNode,
   } from 'd3-hierarchy';
   import type { Snippet } from 'svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let {
     nodeSize,
@@ -48,9 +49,13 @@
   const ctx = getChartContext();
 
   const treeData = $derived.by(() => {
-    const _tree = d3Tree<T>().size(
-      orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
-    );
+    const _tree = ctx.radial
+      ? d3Tree<T>()
+          .size([2 * Math.PI, Math.min(ctx.width, ctx.height) / 2])
+          .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)
+      : d3Tree<T>().size(
+          orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
+        );
 
     if (nodeSize) {
       _tree.nodeSize(nodeSize);

package/dist/components/{Tree.svelte.d.ts → hierarchy/Tree.svelte.d.ts}

@@ -1,4 +1,6 @@
 export type TreeProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
      * If unset, layout size is used instead.  When a node size is specified, the root node is always
@@ -11,7 +13,6 @@ export type TreeProps<T> = {
      * see: https://github.com/d3/d3-hierarchy#tree_separation
      */
     separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
-    hierarchy?: HierarchyNode<T>;
     /**
      * Orientation of the tree layout.
      *
@@ -25,10 +26,17 @@ export type TreeProps<T> = {
 };
 import { type HierarchyPointNode, type HierarchyPointLink, type HierarchyNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: TreeProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): TreeProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/hierarchy/Treemap.svelte

@@ -0,0 +1,203 @@
+<script lang="ts" module>
+  export type TreemapProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
+    /**
+     * The tile function to use for the treemap layout.
+     *
+     * @default treemapSquarify
+     */
+    tile?:
+      | typeof treemapSquarify
+      | 'binary'
+      | 'squarify'
+      | 'resquarify'
+      | 'dice'
+      | 'slice'
+      | 'sliceDice';
+    /**
+     * The padding between nodes.
+     *
+     * @default 0
+     */
+    padding?: number | ((node: HierarchyRectangularNode<T>) => number);
+
+    /**
+     * The inner padding between nodes.
+     *
+     * @default 0
+     */
+    paddingInner?: number | ((node: HierarchyRectangularNode<T>) => number);
+
+    /**
+     * The outer padding between nodes.
+     *
+     * @default 0
+     */
+    paddingOuter?: number | ((node: HierarchyRectangularNode<T>) => number);
+
+    /**
+     * The top padding between nodes.
+     *
+     * @default 0
+     */
+    paddingTop?: number | ((node: HierarchyRectangularNode<T>) => number);
+
+    /**
+     * The bottom padding between nodes.
+     *
+     * @default 0
+     */
+    paddingBottom?: number | ((node: HierarchyRectangularNode<T>) => number);
+    /**
+     * The left padding between nodes.
+     *
+     */
+    paddingLeft?: number | ((node: HierarchyRectangularNode<T>) => number);
+
+    /**
+     * The right padding between nodes.
+     *
+     */
+    paddingRight?: number | ((node: HierarchyRectangularNode<T>) => number);
+
+    /**
+     * Modify tiling function for approapriate aspect ratio when treemap is zoomed in
+     *
+     * @default false
+     */
+    maintainAspectRatio?: boolean;
+
+    children?: Snippet<[{ nodes: HierarchyRectangularNode<T>[] }]>;
+  };
+</script>
+
+<script lang="ts" generics="T">
+  import {
+    treemap as d3treemap,
+    treemapBinary,
+    treemapDice,
+    treemapResquarify,
+    treemapSlice,
+    treemapSliceDice,
+    treemapSquarify,
+    type HierarchyNode,
+    type HierarchyRectangularNode,
+  } from 'd3-hierarchy';
+
+  import { aspectTile } from '../../utils/treemap.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    hierarchy,
+    tile = treemapSquarify,
+    padding = 0,
+    paddingInner = 0,
+    paddingOuter = 0,
+    paddingTop = 0,
+    paddingBottom = 0,
+    paddingLeft,
+    paddingRight,
+    maintainAspectRatio = false,
+    children,
+  }: TreemapProps<T> = $props();
+
+  const ctx = getChartContext();
+
+  const tileFunc = $derived(
+    tile === 'squarify'
+      ? treemapSquarify
+      : tile === 'resquarify'
+        ? treemapResquarify
+        : tile === 'binary'
+          ? treemapBinary
+          : tile === 'dice'
+            ? treemapDice
+            : tile === 'slice'
+              ? treemapSlice
+              : tile === 'sliceDice'
+                ? treemapSliceDice
+                : tile
+  );
+
+  const treemapData = $derived.by(() => {
+    const _treemap = d3treemap<T>()
+      .size([ctx.width, ctx.height])
+      .tile(maintainAspectRatio ? aspectTile(tileFunc, ctx.width, ctx.height) : tileFunc);
+
+    if (padding) {
+      // Make Typescript happy to pick the correct overload
+      // TODO: Better way to do this?
+      if (typeof padding === 'number') {
+        _treemap.padding(padding);
+      } else {
+        _treemap.padding(padding);
+      }
+    }
+
+    if (paddingInner) {
+      if (typeof paddingInner === 'number') {
+        _treemap.paddingInner(typeof paddingInner === 'number' ? paddingInner : paddingInner);
+      } else {
+        _treemap.paddingInner(paddingInner);
+      }
+    }
+
+    if (paddingOuter) {
+      if (typeof paddingOuter === 'number') {
+        _treemap.paddingOuter(paddingOuter);
+      } else {
+        _treemap.paddingOuter(paddingOuter);
+      }
+    }
+
+    if (paddingTop) {
+      if (typeof paddingTop === 'number') {
+        _treemap.paddingTop(paddingTop);
+      } else {
+        _treemap.paddingTop(paddingTop);
+      }
+    }
+
+    if (paddingBottom) {
+      if (typeof paddingBottom === 'number') {
+        _treemap.paddingBottom(paddingBottom);
+      } else {
+        _treemap.paddingBottom(paddingBottom);
+      }
+    }
+
+    if (paddingLeft) {
+      if (typeof paddingLeft === 'number') {
+        _treemap.paddingLeft(paddingLeft);
+      } else {
+        _treemap.paddingLeft(paddingLeft);
+      }
+    }
+    if (paddingRight) {
+      if (typeof paddingRight === 'number') {
+        _treemap.paddingRight(paddingRight);
+      } else {
+        _treemap.paddingRight(paddingRight);
+      }
+    }
+
+    if (hierarchy) {
+      const h = hierarchy.copy();
+      const treemapData = _treemap(h);
+      return {
+        links: treemapData.links(),
+        nodes: treemapData.descendants(),
+      };
+    }
+
+    return {
+      links: [],
+      nodes: [],
+    };
+  });
+</script>
+
+{@render children?.({ nodes: treemapData.nodes })}