layerchart 0.59.5 → 0.60.0

package/dist/components/Dagre.svelte

@@ -0,0 +1,151 @@
+<script module>
+  export type DagreGraphData = {
+    nodes: Array<{ id: string; parent?: string; label?: string | dagre.Label }>;
+    edges: Array<{ source: string; target: string; label?: string }>;
+  };
+
+  export const RankDir = {
+    'top-bottom': 'TB',
+    'bottom-top': 'BT',
+    'left-right': 'LR',
+    'right-left': 'RL',
+  };
+
+  export const Align = {
+    none: undefined,
+    'up-left': 'UL',
+    'up-right': 'UR',
+    'down-left': 'DL',
+    'down-right': 'DR',
+  };
+
+  export const EdgeLabelPosition = {
+    left: 'l',
+    center: 'c',
+    right: 'r',
+  };
+</script>
+
+<script lang="ts">
+  import dagre, { type Edge, type EdgeConfig, type GraphEdge } from '@dagrejs/dagre';
+
+  /** Data of nodes and edges to build graph */
+  export let data: DagreGraphData;
+
+  export let nodes = (d: any) => d.nodes;
+  export let nodeId = (d: any) => d.id;
+  export let edges = (d: any) => d.edges;
+
+  /** Set graph as directed (true, default) or undirected (false), which does not treat the order of nodes in an edge as significant. */
+  export let directed = true;
+
+  /** Allow a graph to have multiple edges between the same pair of nodes */
+  export let multigraph = false;
+
+  /** Allow a graph to have compound nodes - nodes which can be the `parent` of other nodes */
+  export let compound = false;
+
+  /** Type of algorithm to assigns a rank to each node in the input graph */
+  export let ranker: 'network-simplex' | 'tight-tree' | 'longest-path' = 'network-simplex';
+
+  /** Direction for rank nodes */
+  export let direction: keyof typeof RankDir = 'top-bottom';
+
+  /** Alignment for rank nodes */
+  export let align: keyof typeof Align | undefined = undefined;
+
+  /** Number of pixels between each rank in the layout */
+  export let rankSeparation = 50;
+
+  /** Number of pixels that separate nodes horizontally in the layout */
+  export let nodeSeparation = 50;
+
+  /** Number of pixels that separate edges horizontally in the layout */
+  export let edgeSeparation = 10;
+
+  /** Default node width if not defined on node */
+  export let nodeWidth = 100;
+
+  /** Default node height if not defined on node */
+  export let nodeHeight = 50;
+
+  /** Default link label width if not defined on edge */
+  export let edgeLabelWidth = 100;
+
+  /** Default edge label height if not defined on edge */
+  export let edgeLabelHeight = 20;
+
+  /** Default edge label height if not defined on edge */
+  export let edgeLabelPosition: keyof typeof EdgeLabelPosition = 'center';
+
+  /** Default pixels to move the label away from the edge if not defined on edge. Applies only when labelpos is l or r.*/
+  export let edgeLabelOffset = 10;
+
+  /** Filter nodes */
+  export let filterNodes: (nodeId: string, graph: dagre.graphlib.Graph) => boolean = () => true;
+
+  let graph: dagre.graphlib.Graph;
+  $: {
+    let g = new dagre.graphlib.Graph({ directed, multigraph, compound });
+
+    g.setGraph({
+      ranker: ranker,
+      rankdir: RankDir[direction],
+      align: align ? Align[align] : undefined,
+      ranksep: rankSeparation,
+      nodesep: nodeSeparation,
+      edgesep: edgeSeparation,
+    });
+
+    g.setDefaultEdgeLabel(() => {
+      return {};
+    });
+
+    nodes(data).forEach((n: any) => {
+      const id = nodeId(n);
+
+      g.setNode(nodeId(n), {
+        id,
+        label: typeof n.label === 'string' ? n.label : id,
+        width: nodeWidth,
+        height: nodeHeight,
+        ...(typeof n.label === 'object' ? n.label : null),
+      });
+
+      if (n.parent) {
+        g.setParent(id, n.parent);
+      }
+    });
+
+    edges(data).forEach((e: any) => {
+      const { source, target, label, ...rest } = e;
+      g.setEdge(
+        e.source,
+        e.target,
+        label
+          ? {
+              label: label,
+              labelpos: EdgeLabelPosition[edgeLabelPosition],
+              labeloffset: edgeLabelOffset,
+              width: edgeLabelWidth,
+              height: edgeLabelHeight,
+              ...rest,
+            }
+          : {}
+      );
+    });
+
+    g = filterNodes ? g.filterNodes((nodeId) => filterNodes(nodeId, graph)) : graph;
+
+    dagre.layout(g);
+
+    graph = g;
+  }
+
+  $: graphNodes = graph.nodes().map((id) => graph.node(id));
+  $: graphEdges = graph.edges().map((edge) => ({ ...edge, ...graph.edge(edge) })) as Array<
+    Edge & EdgeConfig & GraphEdge // `EdgeConfig` is excluded when inferred from usage
+  >;
+</script>
+
+<slot nodes={graphNodes} edges={graphEdges} />

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

@@ -0,0 +1,85 @@
+import { SvelteComponentTyped } from "svelte";
+export type DagreGraphData = {
+    nodes: Array<{
+        id: string;
+        parent?: string;
+        label?: string | dagre.Label;
+    }>;
+    edges: Array<{
+        source: string;
+        target: string;
+        label?: string;
+    }>;
+};
+export declare const RankDir: {
+    'top-bottom': string;
+    'bottom-top': string;
+    'left-right': string;
+    'right-left': string;
+};
+export declare const Align: {
+    none: undefined;
+    'up-left': string;
+    'up-right': string;
+    'down-left': string;
+    'down-right': string;
+};
+export declare const EdgeLabelPosition: {
+    left: string;
+    center: string;
+    right: string;
+};
+import dagre from '@dagrejs/dagre';
+declare const __propDef: {
+    props: {
+        /** Data of nodes and edges to build graph */ data: DagreGraphData;
+        nodes?: (d: any) => any;
+        nodeId?: (d: any) => any;
+        edges?: (d: any) => any;
+        /** Set graph as directed (true, default) or undirected (false), which does not treat the order of nodes in an edge as significant. */ directed?: boolean;
+        /** Allow a graph to have multiple edges between the same pair of nodes */ multigraph?: boolean;
+        /** Allow a graph to have compound nodes - nodes which can be the `parent` of other nodes */ compound?: boolean;
+        /** Type of algorithm to assigns a rank to each node in the input graph */ ranker?: "network-simplex" | "tight-tree" | "longest-path";
+        /** Direction for rank nodes */ direction?: keyof typeof RankDir;
+        /** Alignment for rank nodes */ align?: keyof typeof Align | undefined;
+        /** Number of pixels between each rank in the layout */ rankSeparation?: number;
+        /** Number of pixels that separate nodes horizontally in the layout */ nodeSeparation?: number;
+        /** Number of pixels that separate edges horizontally in the layout */ edgeSeparation?: number;
+        /** Default node width if not defined on node */ nodeWidth?: number;
+        /** Default node height if not defined on node */ nodeHeight?: number;
+        /** Default link label width if not defined on edge */ edgeLabelWidth?: number;
+        /** Default edge label height if not defined on edge */ edgeLabelHeight?: number;
+        /** Default edge label height if not defined on edge */ edgeLabelPosition?: keyof typeof EdgeLabelPosition;
+        /** Default pixels to move the label away from the edge if not defined on edge. Applies only when labelpos is l or r.*/ edgeLabelOffset?: number;
+        /** Filter nodes */ filterNodes?: (nodeId: string, graph: dagre.graphlib.Graph) => boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nodes: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                class?: string | undefined;
+                label?: string | undefined;
+                padding?: number | undefined;
+                paddingX?: number | undefined;
+                paddingY?: number | undefined;
+                rank?: number | undefined;
+                rx?: number | undefined;
+                ry?: number | undefined;
+                shape?: string | undefined;
+            }[];
+            edges: (dagre.Edge & dagre.EdgeConfig & dagre.GraphEdge)[];
+        };
+    };
+};
+export type DagreProps = typeof __propDef.props;
+export type DagreEvents = typeof __propDef.events;
+export type DagreSlots = typeof __propDef.slots;
+export default class Dagre extends SvelteComponentTyped<DagreProps, DagreEvents, DagreSlots> {
+}
+export {};

package/dist/components/Legend.svelte

@@ -49,10 +49,7 @@
     swatch?: string;
   } = {};
 
-  $: if (scale == null && cScale) {
-    // Read scale from chart context
-    scale = $cScale;
-  }
+  $: _scale = scale ?? (cScale ? $cScale : null);
 
   let xScale: AnyScale;
   let interpolator: ((t: number) => string) | undefined;
@@ -60,47 +57,47 @@
   let tickLabelOffset = 0;
   let tickLine = true;
 
-  $: if (!scale) {
+  $: if (!_scale) {
     // do nothing
-  } else if (scale.interpolate) {
+  } else if (_scale.interpolate) {
     // Continuous
-    const n = Math.min(scale.domain().length, scale.range().length);
-    xScale = scale.copy().rangeRound(quantize(interpolate(0, width), n));
-    interpolator = scale.copy().domain(quantize(interpolate(0, 1), n));
+    const n = Math.min(_scale.domain().length, _scale.range().length);
+    xScale = _scale.copy().rangeRound(quantize(interpolate(0, width), n));
+    interpolator = _scale.copy().domain(quantize(interpolate(0, 1), n));
     tickFormat = tickFormat ?? xScale.tickFormat?.();
-  } else if (scale.interpolator) {
+  } else if (_scale.interpolator) {
     // Sequential
-    xScale = Object.assign(scale.copy().interpolator(interpolateRound(0, width)), {
+    xScale = Object.assign(_scale.copy().interpolator(interpolateRound(0, width)), {
       range() {
         return [0, width];
       },
     });
-    interpolator = scale.interpolator();
+    interpolator = _scale.interpolator();
 
     // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
     if (!xScale.ticks) {
       if (tickValues === undefined) {
         const n = Math.round(ticks + 1);
-        tickValues = range(n).map((i) => quantile(scale.domain(), i / (n - 1)));
+        tickValues = range(n).map((i) => quantile(_scale.domain(), i / (n - 1)));
       }
       // if (typeof tickFormat !== "function") {
       //   tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);
       // }
     }
     tickFormat = tickFormat ?? xScale.tickFormat?.();
-  } else if (scale.invertExtent) {
+  } else if (_scale.invertExtent) {
     // Threshold
-    const thresholds = scale.thresholds
-      ? scale.thresholds() // scaleQuantize
-      : scale.quantiles
-        ? scale.quantiles() // scaleQuantile
-        : scale.domain(); // scaleThreshold
+    const thresholds = _scale.thresholds
+      ? _scale.thresholds() // scaleQuantize
+      : _scale.quantiles
+        ? _scale.quantiles() // scaleQuantile
+        : _scale.domain(); // scaleThreshold
 
     xScale = scaleLinear()
-      .domain([-1, scale.range().length - 1])
+      .domain([-1, _scale.range().length - 1])
       .rangeRound([0, width]);
 
-    swatches = scale.range().map((d: any, i: number) => {
+    swatches = _scale.range().map((d: any, i: number) => {
       return {
         x: xScale(i - 1),
         y: 0,
@@ -117,19 +114,19 @@
     };
   } else {
     // Ordinal
-    xScale = scaleBand().domain(scale.domain()).rangeRound([0, width]);
+    xScale = scaleBand().domain(_scale.domain()).rangeRound([0, width]);
 
-    swatches = scale.domain().map((d: any) => {
+    swatches = _scale.domain().map((d: any) => {
       return {
         x: xScale(d),
         y: 0,
         width: Math.max(0, xScale.bandwidth() - 1),
         height,
-        fill: scale(d),
+        fill: _scale(d),
       };
     });
 
-    tickValues = scale.domain();
+    tickValues = _scale.domain();
     tickLabelOffset = xScale.bandwidth() / 2;
     tickLine = false;
     tickLength = 0;
@@ -159,7 +156,7 @@
   )}
 >
   <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
-  <slot values={tickValues ?? []} {scale}>
+  <slot values={tickValues ?? []} scale={_scale}>
     {#if variant === 'ramp'}
       <svg
         {width}
@@ -210,7 +207,7 @@
         )}
       >
         {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick}
-          {@const color = scale(tick)}
+          {@const color = _scale(tick)}
           <button
             class={cls('flex gap-1', !onClick && 'cursor-auto')}
             on:click={() => onClick?.({ tick, color })}

package/dist/components/Spline.svelte

@@ -120,8 +120,6 @@
       if (curve) path.curve(curve);
 
       return path(data ?? $contextData);
-    } else {
-      return '';
     }
   }
 

package/dist/components/TransformControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
@@ -28,6 +29,7 @@
 
   export let placement: Placement = 'top-right';
   export let orientation: 'horizontal' | 'vertical' = 'vertical';
+  export let size: ComponentProps<Button>['size'] = 'md';
 
   type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
   export let show: Actions[] = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
@@ -64,7 +66,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls(
-    'bg-surface-300/50 rounded-full m-1 backdrop-blur z-10 flex',
+    'bg-surface-300/50 border rounded-full m-1 backdrop-blur z-10 flex',
     orientation === 'vertical' && 'flex-col',
     {
       'top-left': 'absolute top-0 left-0',
@@ -89,6 +91,7 @@
       <Button
         icon={mdiMagnifyPlusOutline}
         on:click={() => transform.zoomIn()}
+        {size}
         class="text-surface-content p-2"
       />
     </Tooltip>
@@ -99,6 +102,7 @@
       <Button
         icon={mdiMagnifyMinusOutline}
         on:click={() => transform.zoomOut()}
+        {size}
         class="text-surface-content p-2"
       />
     </Tooltip>
@@ -109,6 +113,7 @@
       <Button
         icon={mdiImageFilterCenterFocus}
         on:click={() => transform.translateCenter()}
+        {size}
         class="text-surface-content p-2"
       />
     </Tooltip>
@@ -119,6 +124,7 @@
       <Button
         icon={mdiArrowULeftTop}
         on:click={() => transform.reset()}
+        {size}
         class="text-surface-content p-2"
       />
     </Tooltip>
@@ -135,6 +141,7 @@
         ]}
         menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
         menuIcon={null}
+        {size}
         value={$scrollMode}
         on:change={(e) => transform.setScrollMode(e.detail.value)}
         class="text-surface-content"

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

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import { Button } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
         placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
+        size?: ComponentProps<Button>["size"];
         show?: ("reset" | "scrollMode" | "zoomIn" | "zoomOut" | "center")[] | undefined;
     };
     events: {

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
+export { default as Dagre } from './Dagre.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';

package/dist/components/index.js

@@ -17,6 +17,7 @@ export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
+export { default as Dagre } from './Dagre.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';

package/dist/docs/CurveMenuField.svelte

@@ -23,4 +23,11 @@
     });
 </script>
 
-<MenuField label="Curve" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />
+<MenuField
+  label="Curve"
+  {options}
+  bind:value
+  stepper
+  classes={{ menuIcon: 'hidden' }}
+  {...$$restProps}
+/>

package/dist/docs/CurveMenuField.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: any | undefined;
-        showOpenClosed?: boolean;
+        showOpenClosed?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/utils/graph.d.ts

@@ -1,5 +1,6 @@
 import type { SankeyExtraProperties, SankeyGraph, SankeyLink, SankeyNodeMinimal } from 'd3-sankey';
 import type { hierarchy as d3Hierarchy } from 'd3-hierarchy';
+import dagre from '@dagrejs/dagre';
 /**
  * Convert CSV rows in format: 'source,target,value' to SankeyGraph
  */
@@ -26,3 +27,11 @@ export declare function graphFromNode(node: SankeyNodeMinimal<any, any>): {
  * Get distinct nodes from link.source and link.target
  */
 export declare function nodesFromLinks<N extends SankeyExtraProperties, L extends SankeyExtraProperties>(links: Array<SankeyLink<N, L>>): any[];
+/**
+ * Get all upstream predecessors for dagre nodeId
+ */
+export declare function ancestors(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): dagre.Node[];
+/**
+ * Get all downstream descendants for dagre nodeId
+ */
+export declare function descendants(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): dagre.Node[];

package/dist/utils/graph.js

@@ -1,4 +1,5 @@
 import { csvParseRows } from 'd3-dsv';
+import dagre from '@dagrejs/dagre';
 /**
  * Convert CSV rows in format: 'source,target,value' to SankeyGraph
  */
@@ -64,3 +65,31 @@ export function nodesFromLinks(links) {
     }
     return Array.from(nodesByName.values());
 }
+/**
+ * Get all upstream predecessors for dagre nodeId
+ */
+export function ancestors(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
+    if (currentDepth === maxDepth) {
+        return [];
+    }
+    const predecessors = graph.predecessors(nodeId) ?? [];
+    return [
+        ...predecessors,
+        // @ts-expect-error: Types from dagre appear incorrect
+        ...predecessors.flatMap((pId) => ancestors(graph, pId, maxDepth, currentDepth + 1)),
+    ];
+}
+/**
+ * Get all downstream descendants for dagre nodeId
+ */
+export function descendants(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
+    if (currentDepth === maxDepth) {
+        return [];
+    }
+    const predecessors = graph.successors(nodeId) ?? [];
+    return [
+        ...predecessors,
+        // @ts-expect-error: Types from dagre appear incorrect
+        ...predecessors.flatMap((pId) => descendants(graph, pId, maxDepth, currentDepth + 1)),
+    ];
+}

package/dist/utils/graph.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/graph.test.js

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import dagre from '@dagrejs/dagre';
+import { ancestors, descendants } from './graph.js';
+const exampleGraph = {
+    nodes: [
+        { id: 'A' },
+        { id: 'B' },
+        { id: 'C' },
+        { id: 'D' },
+        { id: 'E' },
+        { id: 'F' },
+        { id: 'G' },
+        { id: 'H' },
+        { id: 'I' },
+    ],
+    edges: [
+        { source: 'A', target: 'B' },
+        { source: 'C', target: 'B' },
+        { source: 'B', target: 'E' },
+        { source: 'B', target: 'F' },
+        { source: 'D', target: 'E' },
+        { source: 'D', target: 'F' },
+        { source: 'E', target: 'H' },
+        { source: 'G', target: 'H' },
+        { source: 'H', target: 'I' },
+    ],
+};
+function buildGraph(data) {
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({});
+    data.nodes.forEach((n) => {
+        g.setNode(n.id, {
+            label: n.id,
+        });
+    });
+    data.edges.forEach((e) => {
+        g.setEdge(e.source, e.target);
+    });
+    return g;
+}
+describe('accessors', () => {
+    it('start of graph ', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = ancestors(graph, 'A');
+        expect(actual).length(0);
+    });
+    it('middle of graph ', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = ancestors(graph, 'E');
+        expect(actual).to.have.members(['A', 'B', 'C', 'D']);
+    });
+    it('end of graph ', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = ancestors(graph, 'I');
+        expect(actual).to.have.members(['A', 'B', 'C', 'D', 'E', 'G', 'H']);
+    });
+    it('max depth', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = ancestors(graph, 'H', 2);
+        expect(actual).to.have.members(['B', 'D', 'E', 'G']);
+    });
+});
+describe('descendants', () => {
+    it('start of graph ', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = descendants(graph, 'A');
+        expect(actual).to.have.members(['B', 'E', 'F', 'H', 'I']);
+    });
+    it('middle of graph ', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = descendants(graph, 'E');
+        expect(actual).to.have.members(['H', 'I']);
+    });
+    it('end of graph ', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = descendants(graph, 'I');
+        expect(actual).length(0);
+    });
+    it('max depth', () => {
+        const graph = buildGraph(exampleGraph);
+        const actual = descendants(graph, 'B', 2);
+        expect(actual).to.have.members(['E', 'F', 'H']);
+    });
+});

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.59.5",
+  "version": "0.60.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",
@@ -67,6 +67,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.4",
     "@layerstack/svelte-actions": "^0.0.9",
     "@layerstack/svelte-stores": "^0.0.9",
     "@layerstack/tailwind": "^0.0.11",