layerchart 0.12.1 → 0.13.1

package/components/Arc.svelte

@@ -110,6 +110,13 @@ $: yOffset = -Math.cos(angle) * offset;
 	<path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
 {/if}
 
-<path d={arc()} transform="translate({xOffset}, {yOffset})" {...$$restProps} on:click />
+<path
+	d={arc()}
+	transform="translate({xOffset}, {yOffset})"
+	{...$$restProps}
+	on:click
+	on:mousemove
+	on:mouseleave
+/>
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

package/components/Arc.svelte.d.ts

@@ -19,6 +19,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/Area.svelte

@@ -45,4 +45,7 @@ $: {
 	fill={color}
 	fill-opacity={opacity}
 	{...$$restProps}
+	on:click
+	on:mousemove
+	on:mouseleave
 />

package/components/Area.svelte.d.ts

@@ -19,6 +19,10 @@ declare const __propDef: {
         line?: boolean | any;
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/AreaStack.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import Area from './Area.svelte';
 import Path from './Path.svelte';
-const { data, yScale, zGet } = getContext('LayerCake');
+const { data, yScale, rGet } = getContext('LayerCake');
 export let curve = undefined;
 export let defined = undefined;
 export let opacity = 0.3;
@@ -17,7 +17,7 @@ $: lineData = [...$data].reverse();
 			<Path
 				data={seriesData}
 				y={(d) => $yScale(d[1])}
-				color={$zGet(seriesData)}
+				color={$rGet(seriesData)}
 				{curve}
 				{defined}
 				{tweened}
@@ -33,7 +33,7 @@ $: lineData = [...$data].reverse();
 			data={seriesData}
 			y0={(d) => $yScale(d[0])}
 			y1={(d) => $yScale(d[1])}
-			color={$zGet(seriesData)}
+			color={$rGet(seriesData)}
 			{curve}
 			{defined}
 			{opacity}

package/components/Baseline.svelte

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

package/components/Baseline.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         x?: boolean;
         y?: boolean;
     };

package/components/Chart.svelte

@@ -10,6 +10,7 @@ export const Html = _Html;
 <script>import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
 import { isScaleBand } from '../utils/scales';
+import TooltipContext from './TooltipContext.svelte';
 /**
  *  Resolve a value from data based on the accessor type
  */
@@ -55,6 +56,7 @@ $: if (yBaseline != null) {
  * see: https://github.com/mhkeller/layercake/issues/83
  */
 $: yReverse = yScale ? !isScaleBand(yScale) : true;
+export let tooltip = undefined;
 </script>
 
 <LayerCake
@@ -73,5 +75,11 @@ $: yReverse = yScale ? !isScaleBand(yScale) : true;
 	let:width
 	let:element
 >
-	<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} />
+	{#if tooltip}
+		<TooltipContext {...tooltip} let:tooltip>
+			<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} {tooltip} />
+		</TooltipContext>
+	{:else}
+		<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} />
+	{/if}
 </LayerCake>

package/components/Chart.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import { Svg as _Svg, Html as _Html } from 'layercake';
 export declare const Svg: typeof _Svg;
 export declare const Html: typeof _Html;
+import type { ComponentProps } from 'svelte';
+import TooltipContext from './TooltipContext.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +13,7 @@ declare const __propDef: {
         yScale?: Function;
         xBaseline?: number | null;
         yBaseline?: number | null;
+        tooltip?: ComponentProps<TooltipContext> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Circle.svelte

@@ -12,4 +12,12 @@ $: tweened_cy.set(cy);
 $: tweened_r.set(r);
 </script>
 
-<circle cx={$tweened_cx} cy={$tweened_cy} r={$tweened_r} {...$$restProps} />
+<circle
+	cx={$tweened_cx}
+	cy={$tweened_cy}
+	r={$tweened_r}
+	{...$$restProps}
+	on:click
+	on:mousemove
+	on:mouseleave
+/>

package/components/Circle.svelte.d.ts

@@ -10,6 +10,10 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/CircleClipPath.svelte

@@ -15,7 +15,7 @@ export let tweened = undefined;
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})" on:click>
+	<g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
 		<slot {id} />
 	</g>
 {/if}

package/components/CircleClipPath.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/Group.svelte

@@ -28,6 +28,6 @@ $: if (center) {
 }
 </script>
 
-<g {transform} {...$$restProps} on:click>
+<g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>
 	<slot />
 </g>

package/components/Group.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/HighlightLine.svelte

@@ -1,23 +1,39 @@
 <script>import { getContext } from 'svelte';
-import { get } from 'svelte/store';
+import 'svelte/store';
 import { max } from 'd3-array';
 import { isScaleBand } from '../utils/scales';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
-const { xScale, xRange, xGet, yScale, yRange, yGet, zScale } = getContext('LayerCake');
-export let data;
+import { tooltipContext } from './TooltipContext.svelte';
+const { xScale, xRange, xGet, yScale, yRange, yGet, rGet, y, config } = getContext('LayerCake');
+const tooltip = tooltipContext();
 export let color = undefined;
 export let axis = 'x';
 // TODO: Fix circle points being backwards for stack (see AreaStack)
-$: x = $xGet(data);
-$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-$: y = $yGet(data);
-$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
-function getColor(index) {
-    return color ?? get(zScale)(index) ?? 'var(--color-blue-500)';
+function getColor(item, index = undefined) {
+    if (color) {
+        if (typeof color === 'function') {
+            return color({ value: $y(item), item, index });
+        }
+        else {
+            return color;
+        }
+    }
+    else if ($config.r) {
+        return $rGet(item);
+    }
+    else {
+        return 'var(--color-blue-500)';
+    }
 }
 let lines = [];
-$: {
+let points = [];
+$: if ($tooltip.data) {
+    let x = $xGet($tooltip.data);
+    let xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+    let y = $yGet($tooltip.data);
+    let yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+    // Reset lines
     lines = [];
     if (axis === 'x' || axis === 'both') {
         if (Array.isArray(x)) {
@@ -69,58 +85,60 @@ $: {
             ];
         }
     }
-}
-let points = [];
-$: if (Array.isArray(x)) {
-    // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-    points = x.map((xItem, i) => ({
-        x: xItem + xOffset,
-        y: $yGet(data) + yOffset,
-        color: getColor(i)
-    }));
-}
-else if (Array.isArray(data)) {
-    // Stack series
-    points = data.map((yValue, i) => ({
-        x: x + xOffset,
-        y: $yScale(yValue) + yOffset,
-        color: getColor(i)
-    }));
-}
-else {
-    points = [
-        {
+    if (Array.isArray(x)) {
+        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+        points = x.map((xItem, i) => ({
+            x: xItem + xOffset,
+            y: $yGet($tooltip.data) + yOffset,
+            color: getColor($tooltip.data) // TODO: improve
+        }));
+    }
+    else if (Array.isArray($tooltip.data)) {
+        // Stack series
+        points = $tooltip.data.map((yValue, i) => ({
             x: x + xOffset,
-            y: $yGet(data) + yOffset,
-            color: getColor(0)
-        }
-    ];
+            y: $yScale(yValue) + yOffset,
+            color: getColor($tooltip.data) // TODO: improve
+        }));
+    }
+    else {
+        points = [
+            {
+                x: x + xOffset,
+                y: $yGet($tooltip.data) + yOffset,
+                // color: $rGet($tooltip.data) //getColor($tooltip.data)
+                color: getColor($tooltip.data)
+            }
+        ];
+    }
 }
 </script>
 
-{#each lines as line}
-	<Line
-		spring
-		x1={line.x1}
-		y1={line.y1}
-		x2={line.x2}
-		y2={line.y2}
-		stroke="rgba(0,0,0,.5)"
-		stroke-width={2}
-		style="pointerEvents: none"
-		stroke-dasharray="2,2"
-	/>
-{/each}
+{#if $tooltip.data}
+	{#each lines as line}
+		<Line
+			spring
+			x1={line.x1}
+			y1={line.y1}
+			x2={line.x2}
+			y2={line.y2}
+			stroke="rgba(0,0,0,.5)"
+			stroke-width={2}
+			style="pointerEvents: none"
+			stroke-dasharray="2,2"
+		/>
+	{/each}
 
-{#each points as point}
-	<Circle
-		spring
-		cx={point.x}
-		cy={point.y}
-		r={7}
-		fill="rgba(255,255,255,.9)"
-		stroke={point.color}
-		stroke-width={2}
-	/>
-	<Circle spring cx={point.x} cy={point.y} r={3} fill={point.color} />
-{/each}
+	{#each points as point}
+		<Circle
+			spring
+			cx={point.x}
+			cy={point.y}
+			r={7}
+			fill="rgba(255,255,255,.9)"
+			stroke={point.color}
+			stroke-width={2}
+		/>
+		<Circle spring cx={point.x} cy={point.y} r={3} fill={point.color} />
+	{/each}
+{/if}

package/components/HighlightLine.svelte.d.ts

@@ -1,8 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        data: any;
-        color?: any;
+        color?: string | ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => string);
         axis?: 'x' | 'y' | 'both' | 'none';
     };
     events: {

package/components/HighlightRect.svelte

@@ -2,11 +2,10 @@
 import { max, min } from 'd3-array';
 import { isScaleBand } from '../utils/scales';
 import Rect from './Rect.svelte';
+import { tooltipContext } from './TooltipContext.svelte';
 const { flatData, x, xScale, xDomain, xRange, xGet, yScale, yDomain, yRange, yGet } = getContext('LayerCake');
-export let data;
+const tooltip = tooltipContext();
 export let axis = isScaleBand($yScale) ? 'y' : 'x';
-$: xCoord = $xGet(data);
-$: yCoord = $yGet(data);
 let dimensions = {
     x: 0,
     y: 0,
@@ -14,53 +13,59 @@ let dimensions = {
     height: 0
 };
 $: {
-    if (axis === 'x' || axis === 'both') {
-        if (isScaleBand($xScale)) {
-            dimensions.width = $xScale.step();
+    if ($tooltip.data) {
+        let xCoord = $xGet($tooltip.data);
+        let yCoord = $yGet($tooltip.data);
+        if (axis === 'x' || axis === 'both') {
+            if (isScaleBand($xScale)) {
+                dimensions.width = $xScale.step();
+            }
+            else if (Array.isArray(xCoord)) {
+                // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+                // Use first/last values for width
+                dimensions.width = max(xCoord) - min(xCoord);
+                xCoord = min(xCoord); // Use left-most value for top left of rect
+            }
+            else {
+                // Find width to next data point
+                const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
+                const isLastPoint = index + 1 === $flatData.length;
+                const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
+                dimensions.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
+            }
+            dimensions.x =
+                xCoord - (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
+            if (axis === 'x') {
+                dimensions.height = max($yRange);
+            }
         }
-        else if (Array.isArray(xCoord)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            // Use first/last values for width
-            dimensions.width = max(xCoord) - min(xCoord);
-            xCoord = min(xCoord); // Use left-most value for top left of rect
-        }
-        else {
-            // Find width to next data point
-            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
-            const isLastPoint = index + 1 === $flatData.length;
-            const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
-            dimensions.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
-        }
-        dimensions.x = xCoord - (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
-        if (axis === 'x') {
-            dimensions.height = max($yRange);
-        }
-    }
-    if (axis === 'y' || axis === 'both') {
-        if (isScaleBand($yScale)) {
-            dimensions.height = $yScale.step();
-        }
-        else if (Array.isArray(xCoord)) {
-            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
-            // Use first/last values for width
-            dimensions.height = max(yCoord) - min(yCoord);
-            yCoord = min(yCoord); // Use left-most value for top left of rect
-        }
-        else {
-            // Find width to next data point
-            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
-            const isLastPoint = index + 1 === $flatData.length;
-            const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
-            dimensions.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
-        }
-        dimensions.y = yCoord - (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
-        if (axis === 'y') {
-            dimensions.width = max($xRange);
+        if (axis === 'y' || axis === 'both') {
+            if (isScaleBand($yScale)) {
+                dimensions.height = $yScale.step();
+            }
+            else if (Array.isArray(xCoord)) {
+                // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
+                // Use first/last values for width
+                dimensions.height = max(yCoord) - min(yCoord);
+                yCoord = min(yCoord); // Use left-most value for top left of rect
+            }
+            else {
+                // Find width to next data point
+                const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
+                const isLastPoint = index + 1 === $flatData.length;
+                const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
+                dimensions.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
+            }
+            dimensions.y =
+                yCoord - (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
+            if (axis === 'y') {
+                dimensions.width = max($xRange);
+            }
         }
     }
 }
 </script>
 
-{#if Number.isFinite(dimensions.x)}
+{#if $tooltip.data}
 	<Rect spring {...dimensions} fill="rgba(0,0,0,.1)" on:click />
 {/if}

package/components/HighlightRect.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        data: any;
         axis?: 'x' | 'y' | 'both';
     };
     events: {

package/components/Line.svelte

@@ -15,4 +15,13 @@ $: tweened_x2.set(x2);
 $: tweened_y2.set(y2);
 </script>
 
-<line x1={$tweened_x1} y1={$tweened_y1} x2={$tweened_x2} y2={$tweened_y2} {...$$restProps} />
+<line
+	x1={$tweened_x1}
+	y1={$tweened_y1}
+	x2={$tweened_x2}
+	y2={$tweened_y2}
+	{...$$restProps}
+	on:click
+	on:mousemove
+	on:mouseleave
+/>

package/components/Line.svelte.d.ts

@@ -11,6 +11,10 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/Path.svelte

@@ -33,7 +33,16 @@ $: {
 }
 </script>
 
-<path class="path-line" d={$tweened_d} stroke={color} stroke-width={width} {...$$restProps} />
+<path
+	class="path-line"
+	d={$tweened_d}
+	stroke={color}
+	stroke-width={width}
+	{...$$restProps}
+	on:click
+	on:mousemove
+	on:mouseleave
+/>
 
 <style>
 	.path-line {

package/components/Path.svelte.d.ts

@@ -15,6 +15,10 @@ declare const __propDef: {
         width?: any;
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/Pie.svelte

@@ -47,6 +47,10 @@ export let tweened = undefined;
  * Offset all arcs from center
  */
 export let offset = 0;
+/**
+ * Tooltip context to setup mouse events to show tooltip for related data
+ */
+export let tooltip = undefined;
 const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
 $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
 let tweened_endAngle = motionStore(0, { spring, tweened });
@@ -83,6 +87,8 @@ function getColor(item, index) {
 				{cornerRadius}
 				{offset}
 				fill={getColor(arc.data, index)}
+				on:mousemove={(e) => tooltip?.show(e, arc.data)}
+				on:mouseleave={(e) => tooltip?.hide()}
 			/>
 		{/each}
 	</slot>

package/components/Pie.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import type { TooltipContextValue } from './TooltipContext.svelte';
 declare const __propDef: {
     props: {
         data?: any;
@@ -34,6 +35,9 @@ declare const __propDef: {
         /**
              * Offset all arcs from center
              */ offset?: number;
+        /**
+             * Tooltip context to setup mouse events to show tooltip for related data
+             */ tooltip?: TooltipContextValue | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/RectClipPath.svelte

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

package/components/RectClipPath.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/Sankey.svelte.d.ts

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