layerchart 0.7.2 → 0.7.5

package/components/Arc.svelte

@@ -37,15 +37,14 @@ export let startAngle = undefined;
  */
 export let endAngle = undefined;
 /**
- * Define innerRadius.
- *   value >= 1: discrete value
- *   value >  0: percent of `outerRadius`
- *   value <  0: offset of `outerRadius`
- *   default: yRange min
+ * Define innerRadius. Defaults to yRange min
+ *   • value >= 1: discrete value
+ *   • value < 1: percent of `outerRadius`
+ *   • value < 0: offset of `outerRadius`
  */
 export let innerRadius = undefined;
 /**
- * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+ * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
  */
 export let outerRadius = undefined;
 export let cornerRadius = 0;

package/components/Baseline.svelte

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

package/components/Chart.svelte

@@ -9,7 +9,6 @@ import { isScaleBand } from '../utils/scales';
  *  Resolve a value from data based on the accessor type
  */
 function getValue(accessor, d) {
-    console.log({ accessor });
     if (Array.isArray(accessor)) {
         return accessor.map((a) => getValue(a, d));
     }

package/components/Rect.svelte

@@ -1,14 +1,14 @@
-<script>import { motionStore } from '../stores/motionStore';
+<script>import { motionStore, resolveOptions } from '../stores/motionStore';
 export let x = 0;
 export let y = 0;
 export let width;
 export let height;
 export let spring = undefined;
 export let tweened = undefined;
-let tweened_x = motionStore(x, { spring, tweened });
-let tweened_y = motionStore(y, { spring, tweened });
-let tweened_width = motionStore(width, { spring, tweened });
-let tweened_height = motionStore(height, { spring, tweened });
+let tweened_x = motionStore(x, resolveOptions('x', { spring, tweened }));
+let tweened_y = motionStore(y, resolveOptions('y', { spring, tweened }));
+let tweened_width = motionStore(width, resolveOptions('width', { spring, tweened }));
+let tweened_height = motionStore(height, resolveOptions('height', { spring, tweened }));
 $: tweened_x.set(x);
 $: tweened_y.set(y);
 $: tweened_width.set(width);

package/components/Tooltip.svelte

@@ -107,9 +107,10 @@ function findData(previousValue, currentValue, valueAtPoint, accessor) {
     }
 }
 function handleTooltip(event, tooltipData) {
-    const point = localPoint(event.target, event);
-    const localX = point?.x ?? 0;
-    const localY = point?.y ?? 0;
+    const referenceNode = event.target.closest('.layercake-container');
+    const point = localPoint(referenceNode, event);
+    const localX = point?.x - $padding.left ?? 0;
+    const localY = point?.y - $padding.top ?? 0;
     // If tooltipData not provided already (voronoi, etc), attempt to find it
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {

package/docs/Layout.svelte

@@ -26,7 +26,7 @@
 				<Button
 					class="text-black/50"
 					icon={mdiCodeTags}
-					href="https://github.com/techniq/svelte-ux/blob/master/src/lib/components/{component}.svelte"
+					href="https://github.com/techniq/layerchart/blob/master/src/lib/components/{component}.svelte"
 					target="_blank"
 				/>
 			</Tooltip>
@@ -37,7 +37,7 @@
 				<Button
 					class="text-black/50"
 					icon={mdiFileDocumentEditOutline}
-					href="https://github.com/techniq/svelte-ux/blob/master/{filename}"
+					href="https://github.com/techniq/layerchart/blob/master/{filename}"
 					target="_blank"
 				/>
 			</Tooltip>
@@ -46,9 +46,16 @@
 {/if}
 
 {#if description}
-	{description}
+	<div class="text-sm text-black/50">
+		{description}
+	</div>
 {/if}
 
-<slot name="toc" />
+{#if $$slots.toc}
+	<div class="text-xs uppercase text-black/50 leading-8 tracking-widest mt-4">Contents</div>
+	<div class="border border-black/20 rounded bg-white">
+		<slot name="toc" />
+	</div>
+{/if}
 
 <slot />

package/docs/Preview.svelte

@@ -1,9 +1,13 @@
-<script>import Prism from 'prismjs';
+<script>// TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
+import Prism from 'prismjs';
 import 'prism-svelte';
+import { mdiCodeTags, mdiContentCopy } from '@mdi/js';
+import { slide } from 'svelte/transition';
+import { Button } from 'svelte-ux';
 export let code = null;
 export let language = 'svelte';
-export let highlight = false;
-$: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svelte') : code;
+export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
+export let showCode = false;
 </script>
 
 <div class="border border-black/20 rounded bg-white">
@@ -11,9 +15,36 @@ $: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svel
 		<slot />
 	</div>
 
-	{#if displayCode}
-		<pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
-			<code class="language-{language}">{@html displayCode}</code>
-		</pre>
+	{#if code && showCode}
+		<div class="relative">
+			<pre
+				class="language-{language} rounded"
+				style="margin: 0; white-space: normal;"
+				transition:slide|local>
+          <code class="language-{language}">{@html highlightedCode}</code>
+      </pre>
+
+			<div class="absolute top-0 right-0 p-2">
+				<Button
+					icon={mdiContentCopy}
+					small
+					class=" text-white/70 hover:bg-white/20 py-1"
+					on:click={() => navigator.clipboard.writeText(code)}
+				>
+					Copy
+				</Button>
+			</div>
+		</div>
 	{/if}
 </div>
+
+{#if code}
+	<Button
+		icon={mdiCodeTags}
+		small
+		class=" text-black/70 py-1"
+		on:click={() => (showCode = !showCode)}
+	>
+		{showCode ? 'Hide' : 'Show'} Code
+	</Button>
+{/if}

package/docs/Preview.svelte.d.ts

@@ -4,7 +4,8 @@ declare const __propDef: {
     props: {
         code?: any;
         language?: string;
-        highlight?: boolean;
+        highlightedCode?: any;
+        showCode?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.7.2",
+  "version": "0.7.5",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.59",
@@ -49,7 +49,7 @@
     "date-fns": "^2.28.0",
     "layercake": "^6.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.6.5"
+    "svelte-ux": "^0.6.10"
   },
   "exports": {
     "./package.json": "./package.json",

package/stores/motionStore.d.ts

@@ -1,9 +1,26 @@
 import { spring, tweened } from 'svelte/motion';
+export declare type SpringOptions = Parameters<typeof spring>[1];
+export declare type TweenedOptions = Parameters<typeof tweened>[1];
 export declare type MotionOptions = {
-    spring?: boolean | Parameters<typeof spring>[1];
-    tweened?: boolean | Parameters<typeof tweened>[1];
+    spring?: boolean | SpringOptions;
+    tweened?: boolean | TweenedOptions;
+};
+export declare type PropMotionOptions = {
+    spring?: boolean | SpringOptions | {
+        [prop: string]: SpringOptions;
+    };
+    tweened?: boolean | TweenedOptions | {
+        [prop: string]: TweenedOptions;
+    };
 };
 /**
  * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
 export declare function motionStore(value: any, options: MotionOptions): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;
+/**
+ * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
+ */
+export declare function resolveOptions(prop: string, options: PropMotionOptions): {
+    spring: any;
+    tweened: any;
+};

package/stores/motionStore.js

@@ -14,3 +14,20 @@ export function motionStore(value, options) {
         return writable(value);
     }
 }
+/**
+ * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
+ */
+export function resolveOptions(prop, options) {
+    return {
+        spring: typeof options.spring === 'boolean' || options.spring == null
+            ? options.spring
+            : prop in options.spring
+                ? options.spring[prop]
+                : options.spring,
+        tweened: typeof options.tweened === 'boolean' || options.tweened == null
+            ? options.tweened
+            : prop in options.tweened
+                ? options.tweened[prop]
+                : options.tweened
+    };
+}

package/utils/scales.js

@@ -1,6 +1,5 @@
 import { derived } from 'svelte/store';
 import { tweened, spring } from 'svelte/motion';
-import { min } from 'd3-array';
 import { motionStore } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
@@ -14,8 +13,8 @@ import { motionStore } from '../stores/motionStore';
  */
 export function scaleBandInvert(scale) {
     const domain = scale.domain();
-    const paddingOuter = scale(min(domain));
     const eachBand = scale.step();
+    const paddingOuter = eachBand * (scale.paddingOuter?.() ?? scale.padding()); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
     return function (value) {
         // TODO: Should this use Math.round to better select? https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales/50846323#comment104743795_50846323
         const index = Math.floor((value - paddingOuter) / eachBand);

package/utils/stack.js

@@ -1,4 +1,4 @@
-import { flatGroup, max, sum } from 'd3-array';
+import { flatGroup, max, rollup, sum } from 'd3-array';
 import { stack } from 'd3-shape';
 import { pivotWider } from './pivot';
 export function createStackData(data, options) {
@@ -42,8 +42,13 @@ export function createStackData(data, options) {
         return result;
     }
     else {
-        // TODO: Do anything if no group or stack? Convert to { ...d, keys: [...}, values: [...] ]}?
-        return data;
+        // No grouping or stacking.  Aggregate based on `xKey`
+        return Array.from(rollup(data, (items) => {
+            return {
+                keys: [items[0][options.xKey]],
+                values: [0, sum(items, (d) => d.value)]
+            };
+        }, (d) => d[options.xKey]).values());
     }
 }
 /**

package/components/Rect.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        x?: number;
-        y?: number;
-        width: number;
-        height: number;
-        spring?: boolean | Parameters<typeof springStore>[1];
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
-    };
-    events: {
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type RectProps = typeof __propDef.props;
-export declare type RectEvents = typeof __propDef.events;
-export declare type RectSlots = typeof __propDef.slots;
-export default class Rect extends SvelteComponentTyped<RectProps, RectEvents, RectSlots> {
-}
-export {};