layerchart 0.0.1 → 0.0.2

package/components/Threshold.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        data?: any;
+        x?: any;
+        y0?: any;
+        y1?: any;
+        curve?: CurveFactory;
+        defined?: (d: [number, number], index: number, data: [number, number][]) => boolean;
+        id?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        pathAbove: {
+            areaPathData: string;
+            clipPath: string;
+            linePathData: string;
+        };
+        pathBelow: {
+            areaPathData: string;
+            clipPath: string;
+            linePathData: string;
+        };
+        default: {};
+    };
+};
+export declare type ThresholdProps = typeof __propDef.props;
+export declare type ThresholdEvents = typeof __propDef.events;
+export declare type ThresholdSlots = typeof __propDef.slots;
+export default class Threshold extends SvelteComponentTyped<ThresholdProps, ThresholdEvents, ThresholdSlots> {
+}
+export {};

package/components/Tooltip.svelte

@@ -0,0 +1,120 @@
+<script >import { getContext, createEventDispatcher } from 'svelte';
+import { spring } from 'svelte/motion';
+import { fade } from 'svelte/transition';
+import { writable } from 'svelte/store';
+import { bisector } from 'd3-array';
+import { Svg, Html } from './Chart.svelte';
+import { localPoint } from '../utils/event';
+import { isScaleBand, scaleBandInvert } from '../utils/scales';
+const dispatch = createEventDispatcher();
+const { flatData, x, xScale, xGet, yScale, yGet, width, height, padding } = getContext('LayerCake');
+export let snapToDataX = false;
+export let snapToDataY = false;
+export let findTooltipData = 'closest';
+export let topOffset = 10;
+export let leftOffset = 10;
+export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
+export let animate = true;
+let tooltip = null;
+let tooltipWidth = 0;
+let tooltipHeight = 0;
+let top = animate ? spring(0) : writable(0);
+$: if (tooltip) {
+    const containerHeight = $height + $padding.bottom;
+    if (contained === 'container' && tooltip.top + topOffset + tooltipHeight > containerHeight) {
+        // change side
+        $top = tooltip.top - (topOffset + tooltipHeight);
+    }
+    else {
+        $top = tooltip.top + topOffset;
+    }
+}
+let left = animate ? spring(0) : writable(0);
+$: if (tooltip) {
+    const containerWidth = $width + $padding.right;
+    if (contained === 'container' && tooltip.left + leftOffset + tooltipWidth > containerWidth) {
+        // change side
+        $left = tooltip.left - (leftOffset + tooltipWidth);
+    }
+    else {
+        $left = tooltip.left + leftOffset;
+    }
+}
+function handleTooltip(event) {
+    const point = localPoint(event.target, event);
+    const localX = point?.x ?? 0;
+    const localY = point?.y ?? 0;
+    let tooltipData;
+    if (isScaleBand($xScale)) {
+        // `x` value at mouse coordinate
+        const xValue = scaleBandInvert($xScale)(localX);
+        tooltipData = $flatData.find((d) => $x(d) === xValue);
+    }
+    else {
+        // `x` value at mouse coordinate
+        const xValue = $xScale.invert(localX);
+        const bisectX = bisector($x).left;
+        const index = bisectX($flatData, xValue, 1);
+        const data0 = $flatData[index - 1];
+        const data1 = $flatData[index];
+        switch (findTooltipData) {
+            case 'closest':
+                tooltipData =
+                    Number(xValue) - Number($x(data0)) > Number($x(data1)) - Number(xValue) ? data1 : data0;
+                break;
+            case 'left':
+                tooltipData = data0;
+                break;
+            case 'right':
+            default:
+                tooltipData = data1;
+        }
+    }
+    if (tooltipData) {
+        tooltip = {
+            left: snapToDataX ? $xGet(tooltipData) : localX,
+            top: snapToDataY ? $yGet(tooltipData) : localY,
+            data: tooltipData
+        };
+    }
+}
+function hideTooltip(event) {
+    tooltip = null;
+}
+</script>
+
+<Html>
+	<div
+		class="absolute"
+		style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
+		on:touchstart={handleTooltip}
+		on:touchmove={handleTooltip}
+		on:mousemove={handleTooltip}
+		on:mouseleave={hideTooltip}
+		on:click={(e) => {
+			dispatch('click', { data: tooltip?.data });
+		}}
+	/>
+</Html>
+
+{#if tooltip}
+	<Html>
+		<div
+			class="absolute pointer-events-none z-50"
+			style="
+      top: {$top}px;
+      left: {$left}px;
+      max-width: {$width / 2}px;
+    "
+			transition:fade={{ duration: 100 }}
+			bind:clientWidth={tooltipWidth}
+			bind:clientHeight={tooltipHeight}
+		>
+			<slot data={tooltip?.data} />
+		</div>
+	</Html>
+
+	<Svg>
+		<slot name="highlight" data={tooltip?.data} />
+	</Svg>
+{/if}

package/components/Tooltip.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        snapToDataX?: boolean;
+        snapToDataY?: boolean;
+        findTooltipData?: 'closest' | 'left' | 'right';
+        topOffset?: number;
+        leftOffset?: number;
+        contained?: 'container' | false;
+        animate?: boolean;
+    };
+    events: {
+        click: CustomEvent<{
+            data: any;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            data: any;
+        };
+        highlight: {
+            data: any;
+        };
+    };
+};
+export declare type TooltipProps = typeof __propDef.props;
+export declare type TooltipEvents = typeof __propDef.events;
+export declare type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/docs/Blockquote.svelte

@@ -0,0 +1,7 @@
+<script>
+  // console.log($$props, $$slots);
+</script>
+
+<div class="bg-black/5 border-l-4 border-blue-500 p-4 my-4 rounded">
+  <slot />
+</div>

package/docs/Blockquote.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  BlockquoteProps */
+/** @typedef {typeof __propDef.events}  BlockquoteEvents */
+/** @typedef {typeof __propDef.slots}  BlockquoteSlots */
+export default class Blockquote extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type BlockquoteProps = typeof __propDef.props;
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/docs/Code.svelte

@@ -0,0 +1,6 @@
+<script>
+  // TODO: Improve code highlighting, add quick copy buttons, support REPL, etc
+  // console.log($$props, $$slots);
+</script>
+
+<slot />

package/docs/Code.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CodeProps */
+/** @typedef {typeof __propDef.events}  CodeEvents */
+/** @typedef {typeof __propDef.slots}  CodeSlots */
+export default class Code extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/docs/Layout.svelte

@@ -0,0 +1,20 @@
+<script context="module">
+	// Custom components: https://mdsvex.com/docs#custom-components
+	import blockquote from './Blockquote.svelte';
+	import a from './Link.svelte';
+
+	export { a, blockquote };
+</script>
+
+<script>
+	import { AppBar } from 'svelte-ux';
+
+	// frontmatter: https://mdsvex.com/docs#frontmatter-1
+	export let title;
+</script>
+
+<AppBar {title} />
+
+<main class="p-2">
+	<slot />
+</main>

package/docs/Layout.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  LayoutProps */
+/** @typedef {typeof __propDef.events}  LayoutEvents */
+/** @typedef {typeof __propDef.slots}  LayoutSlots */
+export default class Layout extends SvelteComponentTyped<{
+    title: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LayoutProps = typeof __propDef.props;
+export type LayoutEvents = typeof __propDef.events;
+export type LayoutSlots = typeof __propDef.slots;
+import a from "./Link.svelte";
+import blockquote from "./Blockquote.svelte";
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export { a, blockquote };

package/docs/Link.svelte

@@ -0,0 +1,7 @@
+<script>
+  // console.log($$props, $$slots);
+</script>
+
+<a class="text-blue-500 font-medium" {...$$restProps}>
+  <slot />
+</a>

package/docs/Link.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  LinkProps */
+/** @typedef {typeof __propDef.events}  LinkEvents */
+/** @typedef {typeof __propDef.slots}  LinkSlots */
+export default class Link extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/docs/Preview.svelte

@@ -0,0 +1,19 @@
+<script >export let code = null;
+export let language = 'svelte';
+</script>
+
+<div class="border border-black/20 rounded bg-white">
+	<div class="p-4">
+		<slot />
+	</div>
+
+	{#if code}
+		<pre
+			class="language-{language} rounded"
+			style="margin: 0">
+		<code class="language-{language}">
+			{@html code}
+		</code>
+	</pre>
+	{/if}
+</div>

package/docs/Preview.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        code?: any;
+        language?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PreviewProps = typeof __propDef.props;
+export declare type PreviewEvents = typeof __propDef.events;
+export declare type PreviewSlots = typeof __propDef.slots;
+export default class Preview extends SvelteComponentTyped<PreviewProps, PreviewEvents, PreviewSlots> {
+}
+export {};

package/package.json

@@ -1,27 +1,74 @@
 {
-	"name": "layerchart",
-	"author": "Sean Lynch <techniq35@gmail.com>",
-	"license": "MIT",
-	"repository": "techniq/layerchart",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "svelte-kit dev",
-		"build": "svelte-kit build",
-		"preview": "svelte-kit preview",
-		"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=. ."
-	},
-	"devDependencies": {
-		"@sveltejs/kit": "next",
-		"prettier": "~2.2.1",
-		"prettier-plugin-svelte": "^2.2.0",
-		"svelte": "^3.34.0",
-		"svelte-check": "^2.0.0",
-		"svelte-preprocess": "^4.0.0",
-		"tslib": "^2.0.0",
-		"typescript": "^4.0.0"
-	},
-	"type": "module"
-}
+  "name": "layerchart",
+  "author": "Sean Lynch <techniq35@gmail.com>",
+  "license": "MIT",
+  "repository": "techniq/layerchart",
+  "version": "0.0.2",
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^1.0.0-next.21",
+    "@sveltejs/kit": "1.0.0-next.196",
+    "@types/d3-array": "^3.0.2",
+    "@types/d3-scale": "^4.0.2",
+    "@types/d3-shape": "^3.0.2",
+    "@types/lodash-es": "^4.17.5",
+    "autoprefixer": "^10.4.0",
+    "mdsvex": "^0.9.8",
+    "prettier": "^2.4.1",
+    "prettier-plugin-svelte": "^2.5.0",
+    "prism-themes": "^1.9.0",
+    "svelte": "^3.44.2",
+    "svelte-check": "^2.2.10",
+    "svelte-preprocess": "^4.9.4",
+    "svelte2tsx": "^0.4.10",
+    "tailwindcss": "^2.2.19",
+    "tailwindcss-elevation": "^1.0.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2",
+    "unist-util-visit": "^4.1.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@mdi/js": "^6.5.95",
+    "d3-array": "^3.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.0.1",
+    "date-fns": "^2.26.0",
+    "layercake": "^5.0.0",
+    "lodash-es": "^4.17.21",
+    "svelte-ux": "^0.0.102"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./components/Area.svelte": "./components/Area.svelte",
+    "./components/AreaStack.svelte": "./components/AreaStack.svelte",
+    "./components/AxisX.svelte": "./components/AxisX.svelte",
+    "./components/AxisY.svelte": "./components/AxisY.svelte",
+    "./components/Bar.svelte": "./components/Bar.svelte",
+    "./components/Baseline.svelte": "./components/Baseline.svelte",
+    "./components/Chart.svelte": "./components/Chart.svelte",
+    "./components/Circle.svelte": "./components/Circle.svelte",
+    "./components/ClevelandDotPlot.svelte": "./components/ClevelandDotPlot.svelte",
+    "./components/HighlightBar.svelte": "./components/HighlightBar.svelte",
+    "./components/HighlightLine.svelte": "./components/HighlightLine.svelte",
+    "./components/Label.svelte": "./components/Label.svelte",
+    "./components/Line.svelte": "./components/Line.svelte",
+    "./components/Path.svelte": "./components/Path.svelte",
+    "./components/Rect.svelte": "./components/Rect.svelte",
+    "./components/Scatter.svelte": "./components/Scatter.svelte",
+    "./components/Text.svelte": "./components/Text.svelte",
+    "./components/Threshold.svelte": "./components/Threshold.svelte",
+    "./components/Tooltip.svelte": "./components/Tooltip.svelte",
+    "./docs/Blockquote.svelte": "./docs/Blockquote.svelte",
+    "./docs/Code.svelte": "./docs/Code.svelte",
+    "./docs/Layout.svelte": "./docs/Layout.svelte",
+    "./docs/Link.svelte": "./docs/Link.svelte",
+    "./docs/Preview.svelte": "./docs/Preview.svelte",
+    "./stores/motionStore": "./stores/motionStore.js",
+    "./utils/event": "./utils/event.js",
+    "./utils/genData": "./utils/genData.js",
+    "./utils/pivot": "./utils/pivot.js",
+    "./utils/scales": "./utils/scales.js",
+    "./utils/string": "./utils/string.js",
+    "./utils/ticks": "./utils/ticks.js"
+  }
+}

package/stores/motionStore.d.ts

@@ -0,0 +1,8 @@
+import { spring, tweened } from 'svelte/motion';
+/**
+ * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
+ */
+export declare function getMotionStore(value: any, options: {
+    spring: boolean | Parameters<typeof spring>[1];
+    tweened: boolean | Parameters<typeof tweened>[1];
+}): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;

package/stores/motionStore.js

@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+import { spring, tweened } from 'svelte/motion';
+/**
+ * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
+ */
+export function getMotionStore(value, options) {
+    if (options.spring) {
+        return spring(value, options.spring === true ? undefined : options.spring);
+    }
+    else if (options.tweened) {
+        return tweened(value, options.tweened === true ? undefined : options.tweened);
+    }
+    else {
+        return writable(value);
+    }
+}

package/utils/event.d.ts

@@ -0,0 +1,4 @@
+export declare function localPoint(node: Element, event: MouseEvent | TouchEvent): {
+    x: number;
+    y: number;
+};

package/utils/event.js

@@ -0,0 +1,42 @@
+import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux/types/typeGuards';
+// See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
+export function localPoint(node, event) {
+    if (!node || !event)
+        return null;
+    const coords = getPointFromEvent(event);
+    // find top-most SVG
+    const svg = isSVGElement(node) ? node.ownerSVGElement : node;
+    const screenCTM = isSVGGraphicsElement(svg) ? svg.getScreenCTM() : null;
+    if (isSVGSVGElement(svg) && screenCTM) {
+        let point = svg.createSVGPoint();
+        point.x = coords.x;
+        point.y = coords.y;
+        point = point.matrixTransform(screenCTM.inverse());
+        return {
+            x: point.x,
+            y: point.y
+        };
+    }
+    // fall back to bounding box
+    const rect = node.getBoundingClientRect();
+    return {
+        x: coords.x - rect.left - node.clientLeft,
+        y: coords.y - rect.top - node.clientTop
+    };
+}
+function getPointFromEvent(event) {
+    if (!event)
+        return { x: 0, y: 0 };
+    if (isTouchEvent(event)) {
+        return event.changedTouches.length > 0
+            ? {
+                x: event.changedTouches[0].clientX,
+                y: event.changedTouches[0].clientY
+            }
+            : { x: 0, y: 0 };
+    }
+    return {
+        x: event.clientX,
+        y: event.clientY
+    };
+}

package/utils/genData.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Get random number between min (inclusive) and max (exclusive)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_number_between_0_inclusive_and_1_exclusive
+ */
+export declare function getRandomNumber(min: number, max: number): number;
+/**
+ * Get random integer between min (inclusive) and max (inclusive by default)
+ *   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 createDateSeries(options: {
+    count?: number;
+    min: number;
+    max: number;
+    keys: Array<string>;
+    value: 'number' | 'integer';
+}): {
+    date: Date;
+}[];

package/utils/genData.js

@@ -0,0 +1,35 @@
+import { subDays } from 'date-fns';
+/**
+ * Get random number between min (inclusive) and max (exclusive)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_number_between_0_inclusive_and_1_exclusive
+ */
+export function getRandomNumber(min, max) {
+    return Math.random() * (max - min) + min;
+}
+/**
+ * Get random integer between min (inclusive) and max (inclusive by default)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
+ */
+export function getRandomInteger(min, max, includeMax = true) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
+}
+export function createDateSeries(options) {
+    const now = new Date();
+    const count = options.count ?? 10;
+    const min = options.min;
+    const max = options.max;
+    const keys = options.keys ?? ['value'];
+    return Array.from({ length: count }).map((_, i) => {
+        return {
+            date: subDays(now, count - i - 1),
+            ...Object.fromEntries(keys.map((key) => {
+                return [
+                    key,
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                ];
+            }))
+        };
+    });
+}

package/utils/pivot.d.ts

@@ -0,0 +1,14 @@
+export declare function getAccessor(key: any): any;
+/**
+ * Pivot longer (columns to rows)
+ *  - see: https://observablehq.com/d/3ea8d446f5ba96fe
+ *  - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator
+ */
+export declare function pivotLonger(data: any, columns: any, name: any, value: any): any;
+/**
+ * Pivot wider (rows to columns)
+ *  - see: https://github.com/d3/d3-array/issues/142#issuecomment-761861983
+ */
+export declare function pivotWider(data: any, column: any, name: any, value: any): any[];
+export declare function first(items: any): any;
+export declare function last(items: any): any;