layerchart 0.16.0 → 0.17.1

package/dist/components/LinearGradient.svelte

@@ -11,28 +11,28 @@ export let rotate = undefined;
 </script>
 
 <defs>
-	<linearGradient
-		{id}
-		{x1}
-		{y1}
-		{x2}
-		{y2}
-		gradientTransform={rotate ? `rotate(${rotate})` : ''}
-		{...$$restProps}
-	>
-		<slot>
-			{#if from}
-				<stop offset="0%" stop-color={from === true ? 'var(--tw-gradient-from)' : from} />
-			{/if}
+  <linearGradient
+    {id}
+    {x1}
+    {y1}
+    {x2}
+    {y2}
+    gradientTransform={rotate ? `rotate(${rotate})` : ''}
+    {...$$restProps}
+  >
+    <slot>
+      {#if from}
+        <stop offset="0%" stop-color={from === true ? 'var(--tw-gradient-from)' : from} />
+      {/if}
 
-			{#if via}
-				<!-- <stop offset="50%" stop-color={via === true ? 'var(--tw-gradient-via)' : via} /> -->
-				<stop offset="50%" stop-color={via} />
-			{/if}
+      {#if via}
+        <!-- <stop offset="50%" stop-color={via === true ? 'var(--tw-gradient-via)' : via} /> -->
+        <stop offset="50%" stop-color={via} />
+      {/if}
 
-			{#if to}
-				<stop offset="100%" stop-color={to === true ? 'var(--tw-gradient-to)' : to} />
-			{/if}
-		</slot>
-	</linearGradient>
+      {#if to}
+        <stop offset="100%" stop-color={to === true ? 'var(--tw-gradient-to)' : to} />
+      {/if}
+    </slot>
+  </linearGradient>
 </defs>

package/dist/components/Link.svelte

@@ -28,13 +28,13 @@ $: {
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <path
-	class="path-link"
-	d={$tweened_d}
-	stroke={color}
-	stroke-width={width}
-	fill="none"
-	on:click
-	on:mouseover
-	on:mouseout
-	{...$$restProps}
+  class="path-link"
+  d={$tweened_d}
+  stroke={color}
+  stroke-width={width}
+  fill="none"
+  on:click
+  on:mouseover
+  on:mouseout
+  {...$$restProps}
 />

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
-        orientation?: "vertical" | "horizontal" | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
         sankey?: boolean | undefined;
         source?: ((d: any) => any) | undefined;
         target?: ((d: any) => any) | undefined;

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

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         size?: [number, number] | undefined;
         /**
-             * see: https://github.com/d3/d3-hierarchy#pack_padding
-             */ padding?: number | undefined;
+           * see: https://github.com/d3/d3-hierarchy#pack_padding
+           */ padding?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        orientation?: "vertical" | "horizontal" | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
         size?: [number, number] | undefined;
         /**
-             * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-             */ padding?: number | undefined;
+           * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+           */ padding?: number | undefined;
         /**
-             * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-             */ round?: boolean | undefined;
+           * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+           */ round?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Path.svelte

@@ -1,7 +1,7 @@
 <script>/*
-    TODO:
-    - [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
-*/
+      TODO:
+      - [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
+  */
 import { getContext } from 'svelte';
 import { line as d3Line } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
@@ -34,20 +34,20 @@ $: {
 </script>
 
 <path
-	class="path-line"
-	d={$tweened_d}
-	stroke={color}
-	stroke-width={width}
-	{...$$restProps}
-	on:click
-	on:mousemove
-	on:mouseleave
+  class="path-line"
+  d={$tweened_d}
+  stroke={color}
+  stroke-width={width}
+  {...$$restProps}
+  on:click
+  on:mousemove
+  on:mouseleave
 />
 
 <style>
-	.path-line {
-		fill: none;
-		stroke-linejoin: round;
-		stroke-linecap: round;
-	}
+  .path-line {
+    fill: none;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
 </style>

package/dist/components/Pattern.svelte

@@ -7,7 +7,7 @@ export let height;
 </script>
 
 <defs>
-	<pattern {id} {width} {height} patternUnits="userSpaceOnUse" {...$$restProps}>
-		<slot />
-	</pattern>
+  <pattern {id} {width} {height} patternUnits="userSpaceOnUse" {...$$restProps}>
+    <slot />
+  </pattern>
 </defs>

package/dist/components/Pie.svelte

@@ -6,11 +6,11 @@ import Group from './Group.svelte';
 import { degreesToRadians } from '../utils/math';
 import { motionStore } from '../stores/motionStore';
 /*
-TODO:
-- [ ] Offset (always, on hover)
-- [ ] Labels
-- [ ] Multiple nested circles (zScale, or take in data to override context data).  See Path/Area/Threshold
-- [ ] Hover events / change innerRadius / outerRadius, etc
+  TODO:
+  - [ ] Offset (always, on hover)
+  - [ ] Labels
+  - [ ] Multiple nested circles (zScale, or take in data to override context data).  See Path/Area/Threshold
+  - [ ] Hover events / change innerRadius / outerRadius, etc
 */
 export let data = undefined; // TODO: Update Type
 /**
@@ -76,20 +76,20 @@ function getColor(item, index) {
 </script>
 
 <Group center>
-	<slot {arcs}>
-		{#each arcs as arc, index}
-			<Arc
-				startAngle={arc.startAngle}
-				endAngle={arc.endAngle}
-				padAngle={arc.padAngle}
-				{innerRadius}
-				{outerRadius}
-				{cornerRadius}
-				{offset}
-				fill={getColor(arc.data, index)}
-				on:mousemove={(e) => tooltip?.show(e, arc.data)}
-				on:mouseleave={(e) => tooltip?.hide()}
-			/>
-		{/each}
-	</slot>
+  <slot {arcs}>
+    {#each arcs as arc, index}
+      <Arc
+        startAngle={arc.startAngle}
+        endAngle={arc.endAngle}
+        padAngle={arc.padAngle}
+        {innerRadius}
+        {outerRadius}
+        {cornerRadius}
+        {offset}
+        fill={getColor(arc.data, index)}
+        on:mousemove={(e) => tooltip?.show(e, arc.data)}
+        on:mouseleave={(e) => tooltip?.hide()}
+      />
+    {/each}
+  </slot>
 </Group>

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

@@ -5,24 +5,24 @@ declare const __propDef: {
     props: {
         data?: any;
         /**
-             * Range [min,max] in degrees.  See also startAngle/endAngle
-             */ range?: number[] | undefined;
+           * Range [min,max] in degrees.  See also startAngle/endAngle
+           */ range?: number[] | undefined;
         /**
-             * Start angle in radians
-             */ startAngle?: number | undefined;
+           * Start angle in radians
+           */ startAngle?: number | undefined;
         /**
-             * End angle in radians
-             */ endAngle?: number | undefined;
+           * End angle in radians
+           */ endAngle?: number | undefined;
         /**
-             * Define innerRadius.
-             *   value >= 1: discrete value
-             *   value >  0: percent of `outerRadius`
-             *   value <  0: offset of `outerRadius`
-             *   default: yRange min
-             */ innerRadius?: undefined;
+           * Define innerRadius.
+           *   value >= 1: discrete value
+           *   value >  0: percent of `outerRadius`
+           *   value <  0: offset of `outerRadius`
+           *   default: yRange min
+           */ innerRadius?: undefined;
         /**
-             * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
-             */ outerRadius?: undefined;
+           * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+           */ outerRadius?: undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
         color?: string | ((obj: {
@@ -33,11 +33,11 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         /**
-             * Offset all arcs from center
-             */ offset?: number | undefined;
+           * Offset all arcs from center
+           */ offset?: number | undefined;
         /**
-             * Tooltip context to setup mouse events to show tooltip for related data
-             */ tooltip?: TooltipContextValue | undefined;
+           * Tooltip context to setup mouse events to show tooltip for related data
+           */ tooltip?: TooltipContextValue | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Points.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import Circle from './Circle.svelte';
 import { isScaleBand } from '../utils/scales';
+import { notNull } from 'svelte-ux';
 const context = getContext('LayerCake');
 const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
@@ -36,10 +37,12 @@ function getColor(item, index) {
 $: points = $data.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
-            x={["prop1" ,"prop2"]}
-            y="prop3"
-        */
-        return $xGet(d).map((x) => {
+                  x={["prop1" ,"prop2"]}
+                  y="prop3"
+              */
+        return $xGet(d)
+            .filter(notNull)
+            .map((x) => {
             return {
                 x: x + getOffset(x, offsetX, $xScale),
                 y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
@@ -49,10 +52,12 @@ $: points = $data.flatMap((d) => {
     }
     else if (Array.isArray($config.y)) {
         /*
-            x="prop1"
-            y={["prop2" ,"prop3"]}
-        */
-        return $yGet(d).map((y) => {
+                  x="prop1"
+                  y={["prop2" ,"prop3"]}
+              */
+        return $yGet(d)
+            .filter(notNull)
+            .map((y) => {
             return {
                 x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
                 y: y + getOffset(y, offsetY, $yScale),
@@ -62,9 +67,9 @@ $: points = $data.flatMap((d) => {
     }
     else {
         /*
-            x="prop1"
-            y="prop2"
-        */
+                  x="prop1"
+                  y="prop2"
+              */
         return {
             x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
             y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
@@ -75,9 +80,9 @@ $: points = $data.flatMap((d) => {
 </script>
 
 <slot {points}>
-	<g class="point-group">
-		{#each points as point, index}
-			<Circle cx={point.x} cy={point.y} {r} fill={getColor(point.data, index)} {...$$restProps} />
-		{/each}
-	</g>
+  <g class="point-group">
+    {#each points as point, index}
+      <Circle cx={point.x} cy={point.y} {r} fill={getColor(point.data, index)} {...$$restProps} />
+    {/each}
+  </g>
 </slot>

package/dist/components/Rect.svelte

@@ -17,12 +17,12 @@ $: tweened_height.set(height);
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <rect
-	x={$tweened_x}
-	y={$tweened_y}
-	width={$tweened_width}
-	height={$tweened_height}
-	{...$$restProps}
-	on:click
-	on:mouseover
-	on:mouseout
+  x={$tweened_x}
+  y={$tweened_y}
+  width={$tweened_width}
+  height={$tweened_height}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseout
 />

package/dist/components/RectClipPath.svelte

@@ -12,11 +12,11 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-	<Rect {x} {y} {width} {height} {spring} {tweened} />
+  <Rect {x} {y} {width} {height} {spring} {tweened} />
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-		<slot {id} />
-	</g>
+  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
+    <slot {id} />
+  </g>
 {/if}

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

@@ -5,8 +5,8 @@ declare const __propDef: {
         nodes?: ((d: any) => any) | undefined;
         nodeId?: ((d: any) => any) | undefined;
         /**
-             * see: https://github.com/d3/d3-sankey#alignments
-             */ nodeAlign?: "left" | "right" | "center" | "justify" | ((node: SankeyNode<any, any>, n: number) => number) | undefined;
+           * see: https://github.com/d3/d3-sankey#alignments
+           */ nodeAlign?: "left" | "right" | "center" | "justify" | ((node: SankeyNode<any, any>, n: number) => number) | undefined;
         nodeWidth?: number | undefined;
         nodePadding?: number | undefined;
         nodeSort?: undefined;

package/dist/components/Text.svelte

@@ -1,16 +1,16 @@
 <script>import { getStringWidth } from '../utils/string';
 /*
-TODO:
-  - [ ] Handle styled text (use <slot /> to measure?)
-        - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-          - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-            - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
+  TODO:
+    - [ ] Handle styled text (use <slot /> to measure?)
+          - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
+            - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
+              - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
 
-Reference:
-- https://bl.ocks.org/mbostock/7555321
-- https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-  - https://airbnb.io/visx/text
-  - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
+  Reference:
+  - https://bl.ocks.org/mbostock/7555321
+  - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
+    - https://airbnb.io/visx/text
+    - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
 */
 /** text value */
 export let value = 0;
@@ -119,16 +119,16 @@ function isValidXOrY(xOrY) {
 }
 </script>
 
-<!-- overflow: visible;   allow contents to be shown outside element -->
-<!-- paint-order: stroke; support stroke outlining text  -->
+<!-- `overflow: visible` allow contents to be shown outside element -->
+<!-- `paint-order: stroke` supports stroke outlining text  -->
 <svg x={dx} y={dy} style="overflow: visible; paint-order: stroke;">
-	{#if isValidXOrY(x) && isValidXOrY(y)}
-		<text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
-			{#each wordsByLines as line, index}
-				<tspan {x} dy={index === 0 ? startDy : lineHeight}>
-					{line.words.join(' ')}
-				</tspan>
-			{/each}
-		</text>
-	{/if}
+  {#if isValidXOrY(x) && isValidXOrY(y)}
+    <text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
+      {#each wordsByLines as line, index}
+        <tspan {x} dy={index === 0 ? startDy : lineHeight}>
+          {line.words.join(' ')}
+        </tspan>
+      {/each}
+    </text>
+  {/if}
 </svg>

package/dist/components/Threshold.svelte

@@ -1,7 +1,7 @@
 <script>/*
-See also:
-  - https://observablehq.com/@d3/difference-chart
-  - https://github.com/airbnb/visx/issues/245
+  See also:
+    - https://observablehq.com/@d3/difference-chart
+    - https://github.com/airbnb/visx/issues/245
 */
 import { getContext } from 'svelte';
 import { area as d3Area, line as d3Line } from 'd3-shape';
@@ -57,30 +57,30 @@ $: if (defined)
 
 <!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->
 {#key curve}
-	<g class="clip-paths">
-		<defs>
-			<clipPath id="threshold-clip-below-{id}">
-				<path d={clipPathBelow(data ?? $contextData)} />
-			</clipPath>
-			<clipPath id="threshold-clip-above-{id}">
-				<path d={clipPathAbove(data ?? $contextData)} />
-			</clipPath>
-		</defs>
-	</g>
+  <g class="clip-paths">
+    <defs>
+      <clipPath id="threshold-clip-below-{id}">
+        <path d={clipPathBelow(data ?? $contextData)} />
+      </clipPath>
+      <clipPath id="threshold-clip-above-{id}">
+        <path d={clipPathAbove(data ?? $contextData)} />
+      </clipPath>
+    </defs>
+  </g>
 
-	<slot
-		name="pathAbove"
-		areaPathData={areaPath(data ?? $contextData)}
-		clipPath="url(#threshold-clip-below-{id})"
-		linePathData={linePathAbove(data ?? $contextData)}
-	/>
+  <slot
+    name="pathAbove"
+    areaPathData={areaPath(data ?? $contextData)}
+    clipPath="url(#threshold-clip-below-{id})"
+    linePathData={linePathAbove(data ?? $contextData)}
+  />
 
-	<slot
-		name="pathBelow"
-		areaPathData={areaPath(data ?? $contextData)}
-		clipPath="url(#threshold-clip-above-{id})"
-		linePathData={linePathBelow(data ?? $contextData)}
-	/>
+  <slot
+    name="pathBelow"
+    areaPathData={areaPath(data ?? $contextData)}
+    clipPath="url(#threshold-clip-above-{id})"
+    linePathData={linePathBelow(data ?? $contextData)}
+  />
 {/key}
 
 <!-- Fix `<Threshold> received an unexpected slot "default".` warning -->

package/dist/components/TileImage.svelte

@@ -57,28 +57,28 @@ $: if (!disableCache) {
 
 <!-- To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel -->
 <image
-	xlink:href={href}
-	x={(x + tx) * k - 0.5}
-	y={(y + ty) * k - 0.5}
-	width={k + 1}
-	height={k + 1}
+  xlink:href={href}
+  x={(x + tx) * k - 0.5}
+  y={(y + ty) * k - 0.5}
+  width={k + 1}
+  height={k + 1}
 />
 <image xlink:href={href} x={(x + tx) * k} y={(y + ty) * k} width={k} height={k} />
 {#if debug}
-	<rect
-		x={(x + tx) * k}
-		y={(y + ty) * k}
-		width={k}
-		height={k}
-		class="stroke-red-500/50 fill-none"
-	/>
-	<Text
-		x={(x + tx) * k}
-		y={(y + ty) * k}
-		verticalAnchor="start"
-		dx={2}
-		dy={-2}
-		value="{x}-{y}-{z}"
-		class="text-[8px] fill-black/50"
-	/>
+  <rect
+    x={(x + tx) * k}
+    y={(y + ty) * k}
+    width={k}
+    height={k}
+    class="stroke-red-500/50 fill-none"
+  />
+  <Text
+    x={(x + tx) * k}
+    y={(y + ty) * k}
+    verticalAnchor="start"
+    dx={2}
+    dy={-2}
+    value="{x}-{y}-{z}"
+    class="text-[8px] fill-black/50"
+  />
 {/if}

package/dist/components/Tooltip.svelte

@@ -35,30 +35,30 @@ $: if ($tooltip) {
 </script>
 
 {#if $tooltip.data}
-	<div
-		class="absolute pointer-events-none z-50"
-		style:top="{$top}px"
-		style:left="{$left}px"
-		transition:fade={{ duration: 100 }}
-		bind:clientWidth={tooltipWidth}
-		bind:clientHeight={tooltipHeight}
-	>
-		<div
-			class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
-		>
-			{#if header || $$slots.header}
-				<div class="text-center font-semibold whitespace-nowrap">
-					<slot name="header">
-						{header($tooltip.data)}
-					</slot>
-				</div>
-			{/if}
+  <div
+    class="absolute pointer-events-none z-50"
+    style:top="{$top}px"
+    style:left="{$left}px"
+    transition:fade={{ duration: 100 }}
+    bind:clientWidth={tooltipWidth}
+    bind:clientHeight={tooltipHeight}
+  >
+    <div
+      class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
+    >
+      {#if header || $$slots.header}
+        <div class="text-center font-semibold whitespace-nowrap">
+          <slot name="header">
+            {header($tooltip.data)}
+          </slot>
+        </div>
+      {/if}
 
-			{#if $$slots.default}
-				<div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1">
-					<slot data={$tooltip.data} />
-				</div>
-			{/if}
-		</div>
-	</div>
+      {#if $$slots.default}
+        <div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1">
+          <slot data={$tooltip.data} />
+        </div>
+      {/if}
+    </div>
+  </div>
 {/if}