layerchart 0.0.1 → 0.0.5

package/components/Points.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        r?: number;
+        offsetX?: number | ((value: number, context: any) => number);
+        offsetY?: number | ((value: number, context: any) => number);
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PointsProps = typeof __propDef.props;
+export declare type PointsEvents = typeof __propDef.events;
+export declare type PointsSlots = typeof __propDef.slots;
+export default class Points extends SvelteComponentTyped<PointsProps, PointsEvents, PointsSlots> {
+}
+export {};

package/components/Rect.svelte

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

package/components/Rect.svelte.d.ts

@@ -0,0 +1,25 @@
+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;
+    } & {
+        [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 {};

package/components/Text.svelte

@@ -0,0 +1,129 @@
+<script >import { getStringWidth } from '../utils/string';
+/*
+TODO:
+  - [ ] Handle styled text (use <slot /> to measure?)
+
+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;
+/** Maximum width to occupy (approximate as words are not split). */
+export let width = undefined;
+/** x position of the text. */
+export let x = 0;
+/** y position of the text. */
+export let y = 0;
+/** dx offset of the text. */
+export let dx = 0;
+/** dy offset of the text. */
+export let dy = 0;
+/** Desired "line height" of the text, implemented as y offsets. */
+export let lineHeight = '1em';
+/** Cap height of the text. */
+export let capHeight = '0.71em'; // Magic number from d3
+/** Whether to scale the fontSize to accommodate the specified width.  */
+export let scaleToFit = false;
+/** Horizontal text anchor. */
+export let textAnchor = 'start';
+/** Vertical text anchor. */
+export let verticalAnchor = 'end'; // default SVG behavior
+/** Rotational angle of the text. */
+export let rotate = undefined;
+let wordsByLines = [];
+let wordsWithWidth = [];
+let spaceWidth = 0;
+let style = undefined; // TODO: read from DOM?
+$: words = value ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
+$: wordsWithWidth = words.map((word) => ({
+    word,
+    width: getStringWidth(word, style) || 0
+}));
+$: spaceWidth = getStringWidth('\u00A0', style) || 0;
+$: wordsByLines = wordsWithWidth.reduce((result, item) => {
+    const currentLine = result[result.length - 1];
+    if (currentLine &&
+        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)) {
+        // Word can be added to an existing line
+        currentLine.words.push(item.word);
+        currentLine.width = currentLine.width || 0;
+        currentLine.width += item.width + spaceWidth;
+    }
+    else {
+        // Add first word to line or word is too long to scaleToFit on existing line
+        const newLine = { words: [item.word], width: item.width };
+        result.push(newLine);
+    }
+    return result;
+}, []);
+$: lines = wordsByLines.length;
+/**
+ * Convert css value to pixel value (ex. 0.71em => 11.36)
+ */
+function getPixelValue(cssValue) {
+    // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
+    // console.log(cssValue);
+    const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
+    // console.log({ value, units });
+    const number = Number(value);
+    switch (units) {
+        case 'px':
+            return number;
+        case 'em':
+        case 'rem':
+            return number * 16;
+        default:
+            return 0;
+    }
+}
+let startDy = 0;
+$: if (verticalAnchor === 'start') {
+    startDy = getPixelValue(capHeight);
+}
+else if (verticalAnchor === 'middle') {
+    startDy = ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+}
+else {
+    startDy = (lines - 1) * -getPixelValue(lineHeight);
+}
+let scaleTransform = '';
+$: if (scaleToFit &&
+    lines > 0 &&
+    typeof x == 'number' &&
+    typeof y == 'number' &&
+    typeof width == 'number') {
+    const lineWidth = wordsByLines[0].width || 1;
+    const sx = width / lineWidth;
+    const sy = sx;
+    const originX = x - sx * x;
+    const originY = y - sy * y;
+    scaleTransform = `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
+}
+else {
+    scaleTransform = '';
+}
+$: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
+$: transform = `${scaleTransform} ${rotateTransform}`;
+function isValidXOrY(xOrY) {
+    return (
+    // number that is not NaN or Infinity
+    (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
+        // for percentage
+        typeof xOrY === 'string');
+}
+</script>
+
+<svg x={dx} y={dy} style="overflow: visible">
+	{#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/components/Text.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | number;
+        width?: number;
+        x?: string | number;
+        y?: string | number;
+        dx?: string | number;
+        dy?: string | number;
+        lineHeight?: string;
+        capHeight?: string;
+        scaleToFit?: boolean;
+        textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+        verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+        rotate?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextProps = typeof __propDef.props;
+export declare type TextEvents = typeof __propDef.events;
+export declare type TextSlots = typeof __propDef.slots;
+export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+}
+export {};

package/components/Threshold.svelte

@@ -0,0 +1,86 @@
+<script >/*
+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';
+const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
+// Properties to override what is used from context
+export let data = undefined; // TODO: Update Type
+export let x = undefined; // TODO: Update Type
+export let y0 = undefined; // TODO: Update Type
+export let y1 = undefined; // TODO: Update Type
+export let curve = undefined;
+export let defined = undefined;
+export let id = Math.random().toString(16).slice(-4);
+$: areaPath = d3Area()
+    .x(x ?? $xGet)
+    .y0(y0 ?? ((d) => $yGet(d)[0]))
+    .y1(y1 ?? ((d) => $yGet(d)[1]));
+$: if (curve)
+    areaPath.curve(curve);
+$: if (defined)
+    areaPath.defined(defined);
+$: clipPathBelow = d3Area()
+    .x(x ?? $xGet)
+    .y0(y0 ?? ((d) => $yGet(d)[0]))
+    .y1(y1 ?? ((d) => $yRange[0]));
+$: if (curve)
+    clipPathBelow.curve(curve);
+$: if (defined)
+    clipPathBelow.defined(defined);
+$: clipPathAbove = d3Area()
+    .x(x ?? $xGet)
+    .y0(y0 ?? ((d) => $yRange[0]))
+    .y1(y1 ?? ((d) => $yGet(d)[1]));
+$: if (curve)
+    clipPathAbove.curve(curve);
+$: if (defined)
+    clipPathAbove.defined(defined);
+$: linePathAbove = d3Line()
+    .x(x ?? $xGet)
+    .y(y0 ?? ((d) => $yGet(d)[0]));
+$: if (curve)
+    linePathAbove.curve(curve);
+$: if (defined)
+    linePathAbove.defined(defined);
+$: linePathBelow = d3Line()
+    .x(x ?? $xGet)
+    .y(y1 ?? ((d) => $yGet(d)[1]));
+$: if (curve)
+    linePathBelow.curve(curve);
+$: if (defined)
+    linePathBelow.defined(defined);
+</script>
+
+<!-- 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>
+
+	<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)}
+	/>
+{/key}
+
+<!-- Fix `<Threshold> received an unexpected slot "default".` warning -->
+<slot />

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/components/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Area } from './Area.svelte';
+export { default as AreaStack } from './AreaStack.svelte';
+export { default as AxisX } from './AxisX.svelte';
+export { default as AxisY } from './AxisY.svelte';
+export { default as Bars } from './Bars.svelte';
+export { default as Baseline } from './Baseline.svelte';
+export { default as Chart } from './Chart.svelte';
+export { default as Circle } from './Circle.svelte';
+export { default as ClevelandDotPlot } from './ClevelandDotPlot.svelte';
+export { default as HighlightRect } from './HighlightRect.svelte';
+export { default as HighlightLine } from './HighlightLine.svelte';
+export { default as Labels } from './Labels.svelte';
+export { default as Line } from './Line.svelte';
+export { default as Path } from './Path.svelte';
+export { default as Rect } from './Rect.svelte';
+export { default as Scatter } from './Scatter.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Threshold } from './Threshold.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

package/components/index.js

@@ -0,0 +1,19 @@
+export { default as Area } from './Area.svelte';
+export { default as AreaStack } from './AreaStack.svelte';
+export { default as AxisX } from './AxisX.svelte';
+export { default as AxisY } from './AxisY.svelte';
+export { default as Bars } from './Bars.svelte';
+export { default as Baseline } from './Baseline.svelte';
+export { default as Chart } from './Chart.svelte';
+export { default as Circle } from './Circle.svelte';
+export { default as ClevelandDotPlot } from './ClevelandDotPlot.svelte';
+export { default as HighlightRect } from './HighlightRect.svelte';
+export { default as HighlightLine } from './HighlightLine.svelte';
+export { default as Labels } from './Labels.svelte';
+export { default as Line } from './Line.svelte';
+export { default as Path } from './Path.svelte';
+export { default as Rect } from './Rect.svelte';
+export { default as Scatter } from './Scatter.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Threshold } from './Threshold.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

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>