layerchart 0.17.1 → 0.18.0

package/dist/components/Arc.svelte

@@ -46,6 +46,12 @@ export let innerRadius = undefined;
 /**
  * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
  */
+/**
+ * Define outerRadius. Defaults to yRange max (ie. chart height / 2)
+ *   • value >= 1: discrete value
+ *   • value < 1: percent of chart height / 2
+ *   • value < 0: offset of chart height / 2
+ */
 export let outerRadius = undefined;
 export let cornerRadius = 0;
 export let padAngle = 0;
@@ -53,15 +59,50 @@ export let padAngle = 0;
 export let track = false;
 const { yRange } = getContext('LayerCake');
 $: scale = scaleLinear().domain(domain).range(range);
-$: _outerRadius = outerRadius ?? max($yRange) / 2;
-$: _innerRadius =
-    (innerRadius > 1
-        ? innerRadius
-        : innerRadius > 0
-            ? _outerRadius * innerRadius
-            : innerRadius < 0
-                ? _outerRadius - innerRadius
-                : innerRadius) ?? min($yRange);
+function getOuterRadius(outerRadius, chartRadius) {
+    if (outerRadius == null) {
+        return chartRadius;
+    }
+    else if (outerRadius > 1) {
+        // discrete value
+        return outerRadius;
+    }
+    else if (outerRadius > 0) {
+        // percent of `chartRadius`
+        return chartRadius * outerRadius;
+    }
+    else if (outerRadius < 0) {
+        // offset of `chartRadius`
+        return chartRadius + outerRadius;
+    }
+    else {
+        // 0
+        return outerRadius;
+    }
+}
+$: _outerRadius = getOuterRadius(outerRadius, max($yRange) / 2);
+function getInnerRadius(innerRadius, outerRadius) {
+    if (innerRadius == null) {
+        return Math.min(...$yRange);
+    }
+    else if (innerRadius > 1) {
+        // discrete value
+        return innerRadius;
+    }
+    else if (innerRadius > 0) {
+        // percent of `outerRadius`
+        return outerRadius * innerRadius;
+    }
+    else if (innerRadius < 0) {
+        // offset of `outerRadius`
+        return outerRadius + innerRadius;
+    }
+    else {
+        // 0
+        return innerRadius;
+    }
+}
+$: _innerRadius = getInnerRadius(innerRadius, _outerRadius);
 $: arc = d3arc()
     .innerRadius(_innerRadius)
     .outerRadius(_outerRadius)

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

@@ -11,8 +11,8 @@ declare const __propDef: {
         range?: number[] | undefined;
         startAngle?: number | undefined;
         endAngle?: number | undefined;
-        innerRadius?: undefined;
-        outerRadius?: undefined;
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
         track?: boolean | SVGAttributes<SVGPathElement> | undefined;

package/dist/components/Axis.svelte

@@ -1,18 +1,24 @@
 <script>import { getContext } from 'svelte';
-import { format as formatValue } from 'svelte-ux';
-import { max, min } from 'd3-array';
+import { format as formatValue, cls } from 'svelte-ux';
+import { extent } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
+/** Location of axis */
 export let placement;
+/** Draw a rule line.  Use Rule component for greater rendering order control */
+export let rule = false;
+/** Draw a grid lines */
+export let grid = false;
 /** Control the number of ticks*/
 export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined;
-export let gridlines = false;
 export let tickSize = 4;
 export let format = undefined;
 export let labelProps = undefined;
 $: orientation = ['top', 'bottom'].includes(placement) ? 'horizontal' : 'vertical';
 $: scale = orientation === 'horizontal' ? $xScale : $yScale;
+$: [xRangeMin, xRangeMax] = extent($xRange);
+$: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
     ? ticks
     : isScaleBand(scale)
@@ -23,21 +29,21 @@ function getCoords(tick) {
         case 'top':
             return {
                 x: $xScale(tick) + (isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0),
-                y: min($yRange)
+                y: xRangeMin
             };
         case 'bottom':
             return {
                 x: $xScale(tick) + (isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0),
-                y: max($yRange)
+                y: yRangeMax
             };
         case 'left':
             return {
-                x: min($xRange),
+                x: xRangeMin,
                 y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0)
             };
         case 'right':
             return {
-                x: max($xRange),
+                x: xRangeMax,
                 y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0)
             };
     }
@@ -75,18 +81,44 @@ function getDefaultLabelProps() {
 </script>
 
 <g class="Axis placement-{placement}">
+  {#if rule !== false}
+    {@const lineProps = typeof rule === 'object' ? rule : null}
+    {#if orientation === 'vertical'}
+      <line
+        x1={placement === 'right' ? xRangeMax : xRangeMin}
+        x2={placement === 'right' ? xRangeMax : xRangeMin}
+        y1={$yRange[0] || 0}
+        y2={$yRange[1] || 0}
+        {...lineProps}
+        class={cls('rule stroke-gray-400', lineProps?.class)}
+      />
+    {/if}
+
+    {#if orientation === 'horizontal'}
+      <line
+        x1={$xRange[0] || 0}
+        x2={$xRange[1] || 0}
+        y1={placement === 'top' ? yRangeMin : yRangeMax}
+        y2={placement === 'top' ? yRangeMin : yRangeMax}
+        {...lineProps}
+        class={cls('rule stroke-gray-400', lineProps?.class)}
+      />
+    {/if}
+  {/if}
+
   {#each tickVals as tick, i}
     {@const tickCoords = getCoords(tick)}
     <g>
-      {#if gridlines !== false}
+      {#if grid !== false}
+        {@const lineProps = typeof grid === 'object' ? grid : null}
         {#if orientation === 'horizontal'}
           <line
             x1={tickCoords.x}
-            y1={min($yRange)}
+            y1={yRangeMin}
             x2={tickCoords.x}
-            y2={max($yRange)}
-            class="gridline stroke-gray-200"
-            {...gridlines}
+            y2={yRangeMax}
+            {...lineProps}
+            class={cls('grid stroke-gray-200', lineProps?.class)}
           />
         {:else if orientation === 'vertical'}
           <line
@@ -94,12 +126,13 @@ function getDefaultLabelProps() {
             y1={tickCoords.y}
             x2={$width}
             y2={tickCoords.y}
-            class="gridline stroke-gray-200"
-            {...gridlines}
+            {...lineProps}
+            class={cls('grid stroke-gray-200', lineProps?.class)}
           />
         {/if}
       {/if}
 
+      <!-- Tick marks -->
       {#if orientation === 'horizontal'}
         <line
           x1={tickCoords.x}

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

@@ -5,9 +5,10 @@ import { type FormatType } from 'svelte-ux';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
-        placement: 'top' | 'bottom' | 'left' | 'right';
+        /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right';
+        /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
+        /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | Function | undefined;
-        gridlines?: boolean | SVGAttributes<SVGLineElement> | undefined;
         tickSize?: number | undefined;
         format?: FormatType;
         labelProps?: ComponentProps<Text> | undefined;

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         yScale?: Function | undefined;
         xBaseline?: number | null | undefined;
         yBaseline?: number | null | undefined;
-        tooltip?: ComponentProps<TooltipContext> | undefined;
+        tooltip?: ComponentProps<TooltipContext> | boolean | undefined;
         geo?: ComponentProps<GeoContext> | undefined;
     };
     events: {

package/dist/components/Frame.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from 'svelte';
+const { width, height, padding } = getContext('LayerCake');
+/** Include padding area */
+export let full = false;
+</script>
+
+<rect
+  x={full ? -$padding.left : 0}
+  y={full ? -$padding.top : 0}
+  width={$width + (full ? $padding.left + $padding.right : 0)}
+  height={$height + (full ? $padding.top + $padding.bottom : 0)}
+  on:click
+  {...$$restProps}
+/>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        full?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FrameProps = typeof __propDef.props;
+export type FrameEvents = typeof __propDef.events;
+export type FrameSlots = typeof __propDef.slots;
+export default class Frame extends SvelteComponentTyped<FrameProps, FrameEvents, FrameSlots> {
+}
+export {};

package/dist/components/Legend.svelte

@@ -103,17 +103,20 @@ else {
 <div
   class={cls(
     'inline-block',
-    {
-      'top-left': 'absolute top-0 left-0',
-      top: 'absolute top-0 left-1/2 -translate-x-1/2',
-      'top-right': 'absolute top-0 right-0',
-      left: 'absolute top-1/2 left-0 -translate-y-1/2',
-      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-      right: 'absolute top-1/2 right-0 -translate-y-1/2',
-      'bottom-left': 'absolute bottom-0 left-0',
-      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-      'bottom-right': 'absolute bottom-0 right-0'
-    }[placement],
+    placement && [
+      'absolute',
+      {
+        'top-left': 'top-0 left-0',
+        top: 'top-0 left-1/2 -translate-x-1/2',
+        'top-right': 'top-0 right-0',
+        left: 'top-1/2 left-0 -translate-y-1/2',
+        center: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+        right: 'top-1/2 right-0 -translate-y-1/2',
+        'bottom-left': 'bottom-0 left-0',
+        bottom: 'bottom-0 left-1/2 -translate-x-1/2',
+        'bottom-right': 'bottom-0 right-0'
+      }[placement]
+    ],
     classes.root
   )}
   {...$$restProps}

package/dist/components/LinearGradient.svelte

@@ -1,6 +1,6 @@
 <script>export let id;
 export let from;
-export let via; // TODO: Currently --tw-gradient-via is not the color but the full stops
+export let via = undefined; // TODO: Currently --tw-gradient-via is not the color but the full stops
 export let to;
 export let vertical = false;
 export let x1 = '0%';

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         id: string;
         from: string | boolean;
-        via: string;
+        via?: string | undefined;
         to: string | boolean;
         vertical?: boolean | undefined;
         x1?: string | undefined;

package/dist/components/Link.svelte

@@ -35,6 +35,8 @@ $: {
   fill="none"
   on:click
   on:mouseover
+  on:mousemove
   on:mouseout
+  on:mouseleave
   {...$$restProps}
 />

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

@@ -18,7 +18,9 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         mouseover: MouseEvent;
+        mousemove: MouseEvent;
         mouseout: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Rect.svelte

@@ -24,5 +24,7 @@ $: tweened_height.set(height);
   {...$$restProps}
   on:click
   on:mouseover
+  on:mousemove
   on:mouseout
+  on:mouseleave
 />

package/dist/components/RectClipPath.svelte

@@ -16,6 +16,7 @@ export let tweened = undefined;
 </ClipPath>
 
 {#if $$slots.default}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
     <slot {id} />
   </g>

package/dist/components/Rule.svelte

@@ -0,0 +1,48 @@
+<script>import { getContext } from 'svelte';
+import { cls } from 'svelte-ux';
+import { extent } from 'd3-array';
+import Line from './Line.svelte';
+const { xScale, yScale, xRange, yRange } = getContext('LayerCake');
+$: [xRangeMin, xRangeMax] = extent($xRange);
+$: [yRangeMin, yRangeMax] = extent($yRange);
+/**
+ * Create a vertical `x` line
+ * - If true or 'left', will draw at chart left (xRange[0])
+ * - If 'right', will draw at chart right (xRange[1])
+ * - Use `0` for baseline (yScale(0))
+ * - Use number | Date value for annotation (yScale(value))
+ */
+export let x = false;
+/**
+ * Create a horizontal `y` line
+ * - If true or 'bottom', will draw at chart bottom (yRange[0])
+ * - If 'top', will draw at chart top (yRange[1])
+ * - Use `0` for baseline (xScale(0))
+ * - Use number | Date value for annotation (xScale(value))
+ */
+export let y = false;
+</script>
+
+<g class="rule">
+  {#if x !== false}
+    <Line
+      x1={x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x)}
+      x2={x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x)}
+      y1={$yRange[0] || 0}
+      y2={$yRange[1] || 0}
+      {...$$restProps}
+      class={cls('stroke-gray-400', $$props.class)}
+    />
+  {/if}
+
+  {#if y !== false}
+    <Line
+      x1={$xRange[0] || 0}
+      x2={$xRange[1] || 0}
+      y1={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+      y2={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+      {...$$restProps}
+      class={cls('stroke-gray-400', $$props.class)}
+    />
+  {/if}
+</g>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        x?: number | boolean | "left" | "right" | Date | undefined;
+        y?: number | boolean | "top" | "bottom" | Date | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RuleProps = typeof __propDef.props;
+export type RuleEvents = typeof __propDef.events;
+export type RuleSlots = typeof __propDef.slots;
+export default class Rule extends SvelteComponentTyped<RuleProps, RuleEvents, RuleSlots> {
+}
+export {};

package/dist/components/Tooltip.svelte

@@ -2,6 +2,7 @@
 import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
+import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
 export let topOffset = 10;
 export let leftOffset = 10;
@@ -15,8 +16,8 @@ let tooltipHeight = 0;
 let top = animate ? spring($tooltip.top) : writable($tooltip.top);
 $: if ($tooltip) {
     if (contained === 'container' && $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
-        // change side
-        $top = $tooltip.top - (topOffset + tooltipHeight);
+        // Change side.  Do not allow tooltip to go above the top
+        $top = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
     }
     else {
         $top = $tooltip.top + topOffset;
@@ -25,8 +26,8 @@ $: if ($tooltip) {
 let left = animate ? spring($tooltip.left) : writable($tooltip.left);
 $: if ($tooltip) {
     if (contained === 'container' && $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
-        // change side
-        $left = $tooltip.left - (leftOffset + tooltipWidth);
+        // Change side
+        $left = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
     }
     else {
         $left = $tooltip.left + leftOffset;
@@ -36,7 +37,7 @@ $: if ($tooltip) {
 
 {#if $tooltip.data}
   <div
-    class="absolute pointer-events-none z-50"
+    class={cls('absolute pointer-events-none z-50', $$props.class)}
     style:top="{$top}px"
     style:left="{$left}px"
     transition:fade={{ duration: 100 }}
@@ -44,11 +45,11 @@ $: if ($tooltip) {
     bind:clientHeight={tooltipHeight}
   >
     <div
-      class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
+      class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1 h-full"
     >
       {#if header || $$slots.header}
         <div class="text-center font-semibold whitespace-nowrap">
-          <slot name="header">
+          <slot name="header" data={$tooltip.data}>
             {header($tooltip.data)}
           </slot>
         </div>

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         topOffset?: number | undefined;
         leftOffset?: number | undefined;
         contained?: false | "container" | undefined;
@@ -11,7 +12,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        header: {};
+        header: {
+            data: any;
+        };
         default: {
             data: any;
         };

package/dist/components/index.d.ts

@@ -3,7 +3,6 @@ export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
 export { default as Bars } from './Bars.svelte';
-export { default as Baseline } from './Baseline.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Chart } from './Chart.svelte';
@@ -14,6 +13,7 @@ export { default as ClipPath } from './ClipPath.svelte';
 export { default as ClipPathUse } from './ClipPathUse.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
+export { default as Frame } from './Frame.svelte';
 export { default as GeoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
@@ -35,6 +35,7 @@ export { default as Pie } from './Pie.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
+export { default as Rule } from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';

package/dist/components/index.js

@@ -3,7 +3,6 @@ export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
 export { default as Bars } from './Bars.svelte';
-export { default as Baseline } from './Baseline.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Chart } from './Chart.svelte';
@@ -14,6 +13,7 @@ export { default as ClipPath } from './ClipPath.svelte';
 export { default as ClipPathUse } from './ClipPathUse.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
+export { default as Frame } from './Frame.svelte';
 export { default as GeoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
@@ -35,6 +35,7 @@ export { default as Pie } from './Pie.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
+export { default as Rule } from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';

package/dist/docs/RangeField.svelte

@@ -6,7 +6,7 @@ export let max = 100;
 export let step = 1;
 </script>
 
-<Field let:id {...$$restProps}>
+<Field let:id classes={{ input: 'mt-[6px] mb-1' }} {...$$restProps}>
   <Button
     icon={mdiChevronLeft}
     on:click={() => (value -= value > min ? step : 0)}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { Svg, Html } from 'layercake';
-export * from './components/index.js';
-export * from './utils/index.js';
+export * from './components';
+export * from './utils';

package/dist/index.js

@@ -1,3 +1,3 @@
 export { Svg, Html } from 'layercake';
-export * from './components/index.js';
-export * from './utils/index.js';
+export * from './components';
+export * from './utils';

package/dist/utils/genData.d.ts

@@ -8,6 +8,15 @@ export declare function getRandomNumber(min: number, max: number): number;
  *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
  */
 export declare function getRandomInteger(min: number, max: number, includeMax?: boolean): number;
+export declare function createSeries(options: {
+    count?: number;
+    min: number;
+    max: number;
+    keys?: Array<string>;
+    value?: 'number' | 'integer';
+}): {
+    x: number;
+}[];
 export declare function createDateSeries(options: {
     count?: number;
     min: number;

package/dist/utils/genData.js

@@ -16,6 +16,23 @@ export function getRandomInteger(min, max, includeMax = true) {
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
+export function createSeries(options) {
+    const count = options.count ?? 10;
+    const min = options.min;
+    const max = options.max;
+    const keys = options.keys ?? ['y'];
+    return Array.from({ length: count }).map((_, i) => {
+        return {
+            x: options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+            ...Object.fromEntries(keys.map((key) => {
+                return [
+                    key,
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                ];
+            }))
+        };
+    });
+}
 export function createDateSeries(options) {
     const now = startOfToday();
     const count = options.count ?? 10;

package/dist/utils/graph.d.ts

@@ -1,4 +1,4 @@
-import type { SankeyGraph, SankeyNodeMinimal } from 'd3-sankey';
+import type { SankeyExtraProperties, SankeyGraph, SankeyLink, SankeyNodeMinimal } from 'd3-sankey';
 import type { hierarchy as d3Hierarchy } from 'd3-hierarchy';
 /**
  * Convert CSV rows in format: 'source,target,value' to SankeyGraph
@@ -22,3 +22,7 @@ export declare function graphFromNode(node: SankeyNodeMinimal<any, any>): {
     nodes: SankeyNodeMinimal<any, any>[];
     links: 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[];

package/dist/utils/graph.js

@@ -12,16 +12,7 @@ export function graphFromCsv(csv) {
             // color: linkColor,
         }
         : null);
-    const nodeByName = new Map();
-    for (const link of links) {
-        if (!nodeByName.has(link.source)) {
-            nodeByName.set(link.source, { name: link.source });
-        }
-        if (!nodeByName.has(link.target)) {
-            nodeByName.set(link.target, { name: link.target });
-        }
-    }
-    return { nodes: Array.from(nodeByName.values()), links };
+    return { nodes: nodesFromLinks(links), links };
 }
 /**
  * Convert d3-hierarchy to graph (nodes/links)
@@ -58,3 +49,18 @@ export function graphFromNode(node) {
     });
     return { nodes, links };
 }
+/**
+ * Get distinct nodes from link.source and link.target
+ */
+export function nodesFromLinks(links) {
+    const nodesByName = new Map();
+    for (const link of links) {
+        if (!nodesByName.has(link.source)) {
+            nodesByName.set(link.source, { name: link.source });
+        }
+        if (!nodesByName.has(link.target)) {
+            nodesByName.set(link.target, { name: link.target });
+        }
+    }
+    return Array.from(nodesByName.values());
+}

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
-export { graphFromCsv, graphFromHierarchy, graphFromNode } from './graph';
-export { findAncestor } from './hierarchy';
-export { degreesToRadians, radiansToDegrees } from './math';
-export { createStackData, stackOffsetSeparated } from './stack';
-export { getMajorTicks, getMinorTicks } from './ticks';
+export * from './graph';
+export * from './hierarchy';
+export * from './math';
+export * from './stack';
+export * from './ticks';

package/dist/utils/index.js

@@ -1,5 +1,5 @@
-export { graphFromCsv, graphFromHierarchy, graphFromNode } from './graph';
-export { findAncestor } from './hierarchy';
-export { degreesToRadians, radiansToDegrees } from './math';
-export { createStackData, stackOffsetSeparated } from './stack';
-export { getMajorTicks, getMinorTicks } from './ticks';
+export * from './graph';
+export * from './hierarchy';
+export * from './math';
+export * from './stack';
+export * from './ticks';

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -13,13 +13,16 @@
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+    "changeset": "changeset",
+    "version-package": "changeset version"
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@sveltejs/adapter-vercel": "^3.0.1",
     "@sveltejs/kit": "^1.20.5",
     "@sveltejs/package": "^2.1.0",
+    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/d3-array": "^3.0.5",
     "@types/d3-delaunay": "^6.0.1",
@@ -54,6 +57,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@changesets/cli": "^2.26.2",
     "@mdi/js": "^7.2.96",
     "@vercel/analytics": "^1.0.1",
     "d3-array": "^3.2.4",
@@ -71,11 +75,11 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "date-fns": "^2.30.0",
-    "layercake": "^7.5.0",
+    "layercake": "^7.6.0",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.43.2",
+    "svelte-ux": "^0.43.3",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",

package/dist/components/Baseline.svelte

@@ -1,30 +0,0 @@
-<script>import { min, max } from 'd3-array';
-import { getContext } from 'svelte';
-import { cls } from 'svelte-ux';
-import { isScaleBand } from '../utils/scales';
-const { xScale, yScale, xRange, yRange } = getContext('LayerCake');
-export let x = false;
-export let y = false;
-</script>
-
-<g class="baseline">
-  {#if x}
-    <line
-      x1={0}
-      x2={max($xRange) || 0}
-      y1={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
-      y2={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
-      class={cls('stroke-gray-400', $$props.class)}
-    />
-  {/if}
-
-  {#if y}
-    <line
-      x1={isScaleBand($xScale) ? min($xRange) : $xScale(0) || 0}
-      x2={isScaleBand($xScale) ? min($xRange) : $xScale(0) || 0}
-      y1={min($yRange) || 0}
-      y2={max($yRange) || 0}
-      class={cls('stroke-gray-400', $$props.class)}
-    />
-  {/if}
-</g>

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

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        x?: boolean | undefined;
-        y?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaselineProps = typeof __propDef.props;
-export type BaselineEvents = typeof __propDef.events;
-export type BaselineSlots = typeof __propDef.slots;
-export default class Baseline extends SvelteComponentTyped<BaselineProps, BaselineEvents, BaselineSlots> {
-}
-export {};