layerchart 0.0.1 → 0.0.2

package/components/HighlightBar.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HighlightBarProps = typeof __propDef.props;
+export declare type HighlightBarEvents = typeof __propDef.events;
+export declare type HighlightBarSlots = typeof __propDef.slots;
+export default class HighlightBar extends SvelteComponentTyped<HighlightBarProps, HighlightBarEvents, HighlightBarSlots> {
+}
+export {};

package/components/HighlightLine.svelte

@@ -0,0 +1,52 @@
+<script >import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+import Circle from './Circle.svelte';
+import Line from './Line.svelte';
+export let data;
+export let color = undefined;
+const { xGet, yScale, yRange, yGet, zScale, padding } = getContext('LayerCake');
+// TODO: Fix circle points being backwards for stack (see AreaStack)
+$: x = $xGet(data);
+function getColor(index) {
+    return color ?? get(zScale)(index) ?? 'var(--color-blue-500)';
+}
+$: points = Array.isArray(data)
+    ? // Stack series
+        data.map((yValue, i) => ({
+            x,
+            y: $yScale(yValue),
+            color: getColor(i)
+        }))
+    : [
+        {
+            x,
+            y: $yGet(data) - $padding.top,
+            color: getColor(0)
+        }
+    ];
+</script>
+
+<Line
+	spring
+	x1={x}
+	y1={0}
+	x2={x}
+	y2={$yRange[0]}
+	stroke="rgba(0,0,0,.5)"
+	stroke-width={2}
+	style="pointerEvents: none"
+	stroke-dasharray="2,2"
+/>
+
+{#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}

package/components/HighlightLine.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data: any;
+        color?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HighlightLineProps = typeof __propDef.props;
+export declare type HighlightLineEvents = typeof __propDef.events;
+export declare type HighlightLineSlots = typeof __propDef.slots;
+export default class HighlightLine extends SvelteComponentTyped<HighlightLineProps, HighlightLineEvents, HighlightLineSlots> {
+}
+export {};

package/components/Label.svelte

@@ -0,0 +1,96 @@
+<script >/*
+ * TODO
+ *   - [ ] Support step curves (center like scaleBand())
+ *   - [ ] Support multiple values (threshold, stacks, etc)
+ */
+import { getContext } from 'svelte';
+import { scaleBand } from 'd3-scale';
+import { max, min } from 'd3-array';
+import Text from './Text.svelte';
+import { formatNumberAsStyle } from 'svelte-ux/utils/number';
+import { isScaleBand } from '../utils/scales';
+import { greatestAbs, unique } from 'svelte-ux/utils/array';
+const { data, flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
+export let orientation = 'auto';
+export let significantDigits = 3;
+export let formatStyle = null;
+export let overlap = false;
+$: yBaseline = $custom?.yBaseline ?? 0;
+export let groupBy = undefined;
+const x1Scale = scaleBand();
+$: if (isScaleBand($xScale) && groupBy) {
+    const groupKeys = unique($flatData.map((d) => d[groupBy]));
+    x1Scale.domain(groupKeys).range([0, $xScale.bandwidth()]).paddingInner(0.2);
+}
+$: getDimensions = (item) => {
+    // console.log({ item, y: $y(item) });
+    let x = $xGet(item);
+    let width = 0;
+    if (isScaleBand($xScale)) {
+        width = groupBy ? x1Scale.bandwidth() : $xScale.bandwidth();
+        x += (groupBy ? x1Scale(item[groupBy]) : 0) + width / 2;
+    }
+    const yValue = $y(item);
+    let yTop = 0;
+    let yBottom = 0;
+    if (Array.isArray(yValue)) {
+        // Array contains both top and bottom values;
+        yTop = max(yValue);
+        yBottom = min(yValue);
+    }
+    else if (yValue == null) {
+        // null/undefined value
+        yTop = 0;
+        yBottom = 0;
+    }
+    else if (yValue > 0) {
+        // Positive value
+        yTop = yValue;
+        yBottom = $yRange[1]; // or `0`?
+    }
+    else {
+        // Negative value
+        yTop = $yRange[1]; // or `0`?
+        yBottom = yValue;
+    }
+    if (yBottom < 0) {
+        // Show label below
+        return {
+            x,
+            y: $yScale(yBottom),
+            dy: '0.5em',
+            width
+        };
+    }
+    else {
+        // Show label above
+        return {
+            x,
+            y: $yScale(yTop),
+            dy: '-0.6em',
+            width
+        };
+    }
+};
+$: getValue = (item) => {
+    const value = $y(item);
+    const labelValue = Array.isArray(value) ? greatestAbs(value) : value;
+    return labelValue != null
+        ? formatNumberAsStyle(labelValue + yBaseline, formatStyle, 0, significantDigits) ?? ''
+        : '';
+};
+</script>
+
+<g class="label-group">
+	{#each $data as item, index}
+		<Text
+			class="group-rect"
+			textAnchor="middle"
+			verticalAnchor="middle"
+			value={getValue(item)}
+			style="font-size: 0.7em"
+			{...getDimensions(item)}
+			{...$$restProps}
+		/>
+	{/each}
+</g>

package/components/Label.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import { FormatNumberStyle } from 'svelte-ux/utils/number';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        orientation?: 'outside' | 'inside' | 'auto';
+        significantDigits?: number;
+        formatStyle?: FormatNumberStyle;
+        overlap?: boolean;
+        groupBy?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LabelProps = typeof __propDef.props;
+export declare type LabelEvents = typeof __propDef.events;
+export declare type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/components/Line.svelte

@@ -0,0 +1,18 @@
+<script >import { getMotionStore } from '../stores/motionStore';
+export let x1;
+export let y1;
+export let x2;
+export let y2;
+export let spring = undefined;
+export let tweened = undefined;
+let tweened_x1 = getMotionStore(x1, { spring, tweened });
+let tweened_y1 = getMotionStore(y1, { spring, tweened });
+let tweened_x2 = getMotionStore(x2, { spring, tweened });
+let tweened_y2 = getMotionStore(y2, { spring, tweened });
+$: tweened_x1.set(x1);
+$: tweened_y1.set(y1);
+$: tweened_x2.set(x2);
+$: tweened_y2.set(y2);
+</script>
+
+<line x1={$tweened_x1} y1={$tweened_y1} x2={$tweened_x2} y2={$tweened_y2} {...$$restProps} />

package/components/Line.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LineProps = typeof __propDef.props;
+export declare type LineEvents = typeof __propDef.events;
+export declare type LineSlots = typeof __propDef.slots;
+export default class Line extends SvelteComponentTyped<LineProps, LineEvents, LineSlots> {
+}
+export {};

package/components/Path.svelte

@@ -0,0 +1,36 @@
+<script >import { getContext } from 'svelte';
+import { line as d3Line } from 'd3-shape';
+const { data: contextData, xGet, yGet, zGet } = 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 y = undefined; // TODO: Update Type
+export let pathData = undefined;
+export let curve = undefined;
+export let defined = undefined;
+export let color = 'var(--color-blue-500)';
+export let width = undefined;
+$: path = d3Line()
+    .x(x ?? $xGet)
+    .y(y ?? $yGet);
+$: if (curve)
+    path.curve(curve);
+$: if (defined)
+    path.defined(defined);
+</script>
+
+<path
+	class="path-line"
+	d={pathData ?? path(data ?? $contextData)}
+	stroke={color}
+	stroke-width={width}
+	{...$$restProps}
+/>
+
+<style >
+	.path-line {
+		fill: none;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+</style>

package/components/Path.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        x?: any;
+        y?: any;
+        pathData?: string;
+        curve?: CurveFactory | CurveFactoryLineOnly;
+        defined?: (d: [number, number], index: number, data: [number, number][]) => boolean;
+        color?: string;
+        width?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PathProps = typeof __propDef.props;
+export declare type PathEvents = typeof __propDef.events;
+export declare type PathSlots = typeof __propDef.slots;
+export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
+}
+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/Scatter.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
+
+	export let r = 5;
+	export let fill = '#000';
+	export let stroke = '#0cf';
+	export let strokeWidth = 0;
+	export let dx = 0;
+	export let dy = 0;
+</script>
+
+<g class="scatter-group">
+	{#each $data as d}
+		<circle
+			cx={$xGet(d) + (typeof dx === 'function' ? dx($xScale) : dx)}
+			cy={$yGet(d) + (typeof dy === 'function' ? dy($yScale) : dy)}
+			{r}
+			{fill}
+			{stroke}
+			stroke-width={strokeWidth}
+		/>
+	{/each}
+</g>

package/components/Scatter.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ScatterProps */
+/** @typedef {typeof __propDef.events}  ScatterEvents */
+/** @typedef {typeof __propDef.slots}  ScatterSlots */
+export default class Scatter extends SvelteComponentTyped<{
+    dx?: number;
+    dy?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    r?: number;
+    fill?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ScatterProps = typeof __propDef.props;
+export type ScatterEvents = typeof __propDef.events;
+export type ScatterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        dx?: number;
+        dy?: number;
+        stroke?: string;
+        strokeWidth?: number;
+        r?: number;
+        fill?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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,83 @@
+<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>
+
+<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)}
+/>
+
+<!-- Fix `<Threshold> received an unexpected slot "default".` warning -->
+<slot />