layerchart 0.0.1 → 0.0.5

package/components/Chart.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import { Svg, Html } from 'layercake';
+export { Svg, Html };
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any[];
+        x: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
+        y: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
+        xBaseline?: number | null;
+        yBaseline?: number | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ChartProps = typeof __propDef.props;
+export declare type ChartEvents = typeof __propDef.events;
+export declare type ChartSlots = typeof __propDef.slots;
+export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
+}

package/components/Circle.svelte

@@ -0,0 +1,15 @@
+<script >import { getMotionStore } from '../stores/motionStore';
+export let cx;
+export let cy;
+export let r;
+export let spring = undefined;
+export let tweened = undefined;
+let tweened_cx = getMotionStore(cx, { spring, tweened });
+let tweened_cy = getMotionStore(cy, { spring, tweened });
+let tweened_r = getMotionStore(r, { spring, tweened });
+$: tweened_cx.set(cx);
+$: tweened_cy.set(cy);
+$: tweened_r.set(r);
+</script>
+
+<circle cx={$tweened_cx} cy={$tweened_cy} r={$tweened_r} {...$$restProps} />

package/components/Circle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        cx: number;
+        cy: number;
+        r: number;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CircleProps = typeof __propDef.props;
+export declare type CircleEvents = typeof __propDef.events;
+export declare type CircleSlots = typeof __propDef.slots;
+export default class Circle extends SvelteComponentTyped<CircleProps, CircleEvents, CircleSlots> {
+}
+export {};

package/components/ConnectedPoints.svelte

@@ -0,0 +1,68 @@
+<script >/*
+    TODO:
+        - [ ] Consider becoming LinkLine using d3-path buider https://github.com/d3/d3-path
+          - https://github.com/airbnb/visx/blob/master/packages/visx-shape/src/shapes/link/line/LinkHorizontalLine.tsx
+*/
+import { getContext } from 'svelte';
+import { extent } from 'd3-array';
+import Line from './Line.svelte';
+const context = getContext('LayerCake');
+const { data, xGet, yGet, config } = context;
+export let offsetX = 0;
+export let offsetY = 0;
+function getOffset(value, offset) {
+    if (typeof offset === 'function') {
+        return offset(value, context);
+    }
+    else {
+        return offset;
+    }
+}
+$: points = $data.flatMap((d) => {
+    if (Array.isArray($config.x)) {
+        /*
+            x={["prop1" ,"prop2"]}
+            y="prop3"
+        */
+        const [xMin, xMax] = extent($xGet(d));
+        return {
+            x1: xMin + getOffset(xMin, offsetX),
+            y1: $yGet(d) + getOffset($yGet(d), offsetY),
+            x2: xMax + getOffset(xMax, offsetX),
+            y2: $yGet(d) + getOffset($yGet(d), offsetY)
+        };
+    }
+    else if (Array.isArray($config.y)) {
+        /*
+            x="prop1"
+            y={["prop2" ,"prop3"]}
+        */
+        const [yMin, yMax] = extent($yGet(d));
+        return {
+            x1: $xGet(d) + getOffset($xGet(d), offsetX),
+            y1: yMin + getOffset(yMin, offsetY),
+            x2: $xGet(d) + getOffset($xGet(d), offsetX),
+            y2: yMax + getOffset(yMax, offsetY)
+        };
+    }
+    else {
+        /*
+            x="prop1"
+            y="prop2"
+        */
+        // Not really supported (nothing to connect...)
+        return {
+            x1: $xGet(d) + getOffset($xGet(d), offsetX),
+            y1: $yGet(d) + getOffset($yGet(d), offsetY),
+            x2: $xGet(d) + getOffset($xGet(d), offsetX),
+            y2: $yGet(d) + getOffset($yGet(d), offsetY)
+        };
+    }
+});
+</script>
+
+<g class="connected-points">
+	{#each points as p}
+		<Line x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} {...$$restProps} />
+	{/each}
+</g>

package/components/ConnectedPoints.svelte.d.ts

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

package/components/Group.svelte

@@ -0,0 +1,26 @@
+<script >import { getContext } from 'svelte';
+/**
+ * Translate x
+ */
+export let x;
+/**
+ * Translate x
+ */
+export let y;
+/**
+ * Center within chart
+ */
+export let center;
+const { width, height } = getContext('LayerCake');
+let transform = undefined;
+$: if (x != null || y != null) {
+    transform = `translate(${x ?? 0}, ${y ?? 0})`;
+}
+$: if (center) {
+    transform = `translate(${$width / 2}, ${$height / 2})`;
+}
+</script>
+
+<g {transform} {...$$restProps}>
+	<slot />
+</g>

package/components/Group.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        x: number;
+        y: number;
+        center: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type GroupProps = typeof __propDef.props;
+export declare type GroupEvents = typeof __propDef.events;
+export declare type GroupSlots = typeof __propDef.slots;
+export default class Group extends SvelteComponentTyped<GroupProps, GroupEvents, GroupSlots> {
+}
+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/HighlightRect.svelte

@@ -0,0 +1,27 @@
+<script >import { getContext } from 'svelte';
+import { isScaleBand } from '../utils/scales';
+import Rect from './Rect.svelte';
+export let data;
+const { flatData, xScale, x, xGet, yRange, padding } = getContext('LayerCake');
+$: isBand = isScaleBand($xScale);
+let width = 0;
+$: if (isBand) {
+    width = $xScale.step();
+}
+else {
+    // Find width to next data point
+    let index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
+    let nextDataPoint = $x($flatData[index + 1]);
+    width = ($xScale(nextDataPoint) ?? 0) - ($xGet(data) ?? 0);
+}
+$: dimensions = {
+    x: $xGet(data) - (isBand ? ($xScale.padding() * $xScale.step()) / 2 : 0),
+    y: -$padding.top,
+    width,
+    height: $yRange[0]
+};
+</script>
+
+{#if Number.isFinite(dimensions.x)}
+	<Rect spring {...dimensions} fill="rgba(0,0,0,.1)" on:click />
+{/if}

package/components/HighlightRect.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 HighlightRectProps = typeof __propDef.props;
+export declare type HighlightRectEvents = typeof __propDef.events;
+export declare type HighlightRectSlots = typeof __propDef.slots;
+export default class HighlightRect extends SvelteComponentTyped<HighlightRectProps, HighlightRectEvents, HighlightRectSlots> {
+}
+export {};

package/components/Labels.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/Labels.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 LabelsProps = typeof __propDef.props;
+export declare type LabelsEvents = typeof __propDef.events;
+export declare type LabelsSlots = typeof __propDef.slots;
+export default class Labels extends SvelteComponentTyped<LabelsProps, LabelsEvents, LabelsSlots> {
+}
+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/LinearGradient.svelte

@@ -0,0 +1,27 @@
+<script >export let id;
+export let from;
+export let to;
+export let vertical = false;
+export let x1 = '0%';
+export let y1 = '0%';
+export let x2 = vertical ? '0%' : '100%';
+export let y2 = vertical ? '100%' : '0%';
+export let rotate = undefined;
+</script>
+
+<defs>
+	<linearGradient
+		{id}
+		{x1}
+		{y1}
+		{x2}
+		{y2}
+		gradientTransform={rotate ? `rotate(${rotate})` : ''}
+		{...$$restProps}
+	>
+		<slot>
+			<stop offset="0%" stop-color={from} />
+			<stop offset="100%" stop-color={to} />
+		</slot>
+	</linearGradient>
+</defs>

package/components/LinearGradient.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        from: string;
+        to: string;
+        vertical?: boolean;
+        x1?: string;
+        y1?: string;
+        x2?: string;
+        y2?: string;
+        rotate?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LinearGradientProps = typeof __propDef.props;
+export declare type LinearGradientEvents = typeof __propDef.events;
+export declare type LinearGradientSlots = typeof __propDef.slots;
+export default class LinearGradient extends SvelteComponentTyped<LinearGradientProps, LinearGradientEvents, LinearGradientSlots> {
+}
+export {};

package/components/Path.svelte

@@ -0,0 +1,40 @@
+<script >import { getContext } from 'svelte';
+import { line as d3Line } from 'd3-shape';
+// import { interpolateString } from 'd3-interpolate';
+import { interpolatePath } from 'd3-interpolate-path';
+import { getMotionStore } from '../stores/motionStore';
+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 tweened = undefined;
+export let curve = undefined;
+export let defined = undefined;
+export let color = 'black';
+export let width = undefined;
+$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+$: tweened_d = getMotionStore('', { tweened: tweenedOptions });
+$: {
+    const path = d3Line()
+        .x(x ?? $xGet)
+        .y(y ?? $yGet);
+    if (curve)
+        path.curve(curve);
+    if (defined)
+        path.defined(defined);
+    const d = pathData ?? path(data ?? $contextData);
+    tweened_d.set(d);
+}
+</script>
+
+<path class="path-line" d={$tweened_d} 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,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { tweened as tweenedStore } from 'svelte/motion';
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        x?: any;
+        y?: any;
+        pathData?: string;
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        curve?: CurveFactory | CurveFactoryLineOnly;
+        defined?: Parameters<Line<any>['defined']>[0];
+        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/Points.svelte

@@ -0,0 +1,58 @@
+<script >import { getContext } from 'svelte';
+import Circle from './Circle.svelte';
+const context = getContext('LayerCake');
+const { data, xGet, yGet, config } = context;
+export let r = 5;
+export let offsetX = 0;
+export let offsetY = 0;
+function getOffset(value, offset) {
+    if (typeof offset === 'function') {
+        return offset(value, context);
+    }
+    else {
+        return offset;
+    }
+}
+$: points = $data.flatMap((d) => {
+    if (Array.isArray($config.x)) {
+        /*
+            x={["prop1" ,"prop2"]}
+            y="prop3"
+        */
+        return $xGet(d).map((x) => {
+            return {
+                x: x + getOffset(x, offsetX),
+                y: $yGet(d) + getOffset($yGet(d), offsetY)
+            };
+        });
+    }
+    else if (Array.isArray($config.y)) {
+        /*
+            x="prop1"
+            y={["prop2" ,"prop3"]}
+        */
+        return $yGet(d).map((y) => {
+            return {
+                x: $xGet(d) + getOffset($xGet(d), offsetX),
+                y: y + getOffset(y, offsetY)
+            };
+        });
+    }
+    else {
+        /*
+            x="prop1"
+            y="prop2"
+        */
+        return {
+            x: $xGet(d) + getOffset($xGet(d), offsetX),
+            y: $yGet(d) + getOffset($yGet(d), offsetY)
+        };
+    }
+});
+</script>
+
+<g class="point-group">
+	{#each points as p}
+		<Circle cx={p.x} cy={p.y} {r} {...$$restProps} />
+	{/each}
+</g>