layerchart 0.0.1 → 0.0.2

package/components/Area.svelte

@@ -0,0 +1,38 @@
+<script >import { getContext } from 'svelte';
+import { area as d3Area } from 'd3-shape';
+import Path from './Path.svelte';
+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 pathData = undefined;
+export let clipPath = undefined;
+export let curve = undefined;
+export let defined = undefined;
+export let color = 'var(--color-blue-500)';
+export let opacity = 0.3;
+export let line = false;
+$: path = d3Area()
+    .x(x ?? $xGet)
+    .y0(y0 ?? $yRange[0])
+    .y1(y1 ?? $yGet);
+$: if (curve)
+    path.curve(curve);
+$: if (defined)
+    path.defined(defined);
+</script>
+
+{#if line}
+	<Path {curve} {defined} {color} {...line} />
+{/if}
+
+<path
+	class="path-area"
+	d={pathData ?? path(data ?? $contextData)}
+	clip-path={clipPath}
+	fill={color}
+	fill-opacity={opacity}
+	{...$$restProps}
+/>

package/components/Area.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        x?: any;
+        y0?: any;
+        y1?: any;
+        pathData?: string;
+        clipPath?: string;
+        curve?: CurveFactory;
+        defined?: (d: [number, number], index: number, data: [number, number][]) => boolean;
+        color?: string;
+        opacity?: number;
+        line?: boolean | any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AreaProps = typeof __propDef.props;
+export declare type AreaEvents = typeof __propDef.events;
+export declare type AreaSlots = typeof __propDef.slots;
+export default class Area extends SvelteComponentTyped<AreaProps, AreaEvents, AreaSlots> {
+}
+export {};

package/components/AreaStack.svelte

@@ -0,0 +1,40 @@
+<script >import { getContext } from 'svelte';
+import Area from './Area.svelte';
+import Path from './Path.svelte';
+const { data, yScale, zGet } = getContext('LayerCake');
+export let curve = undefined;
+export let defined = undefined;
+export let opacity = 0.3;
+export let line = false;
+// Render in reverse order so bottom stacks are rendered last (and stack above the upper stacks).  Fixes when upper stack has 0 value
+$: lineData = [...$data].reverse();
+</script>
+
+{#if line}
+	<g class="line-group">
+		{#each lineData as seriesData}
+			<Path
+				data={seriesData}
+				y={(d) => $yScale(d[1])}
+				color={$zGet(seriesData)}
+				{curve}
+				{defined}
+				{...line}
+			/>
+		{/each}
+	</g>
+{/if}
+
+<g class="area-group">
+	{#each $data as seriesData}
+		<Area
+			data={seriesData}
+			y0={(d) => $yScale(d[0])}
+			y1={(d) => $yScale(d[1])}
+			color={$zGet(seriesData)}
+			{curve}
+			{defined}
+			{opacity}
+		/>
+	{/each}
+</g>

package/components/AreaStack.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        curve?: CurveFactory;
+        defined?: (d: any, index: number, data: any[]) => boolean;
+        opacity?: number;
+        line?: boolean | any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AreaStackProps = typeof __propDef.props;
+export declare type AreaStackEvents = typeof __propDef.events;
+export declare type AreaStackSlots = typeof __propDef.slots;
+export default class AreaStack extends SvelteComponentTyped<AreaStackProps, AreaStackEvents, AreaStackSlots> {
+}
+export {};

package/components/AxisX.svelte

@@ -0,0 +1,52 @@
+<script >import { getContext } from 'svelte';
+import { format } from 'svelte-ux/utils/format';
+import Text from './Text.svelte';
+import { isScaleBand } from '../utils/scales';
+const { height, xScale, yRange } = getContext('LayerCake');
+export let gridlines = false;
+export let formatTick = undefined;
+export let ticks = undefined;
+export let xTick = undefined;
+export let yTick = 8;
+export let dxTick = 0;
+export let dyTick = 0;
+$: isBand = isScaleBand($xScale);
+$: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBand
+        ? $xScale.domain()
+        : $xScale.ticks(typeof ticks === 'function' ? ticks($xScale) : ticks);
+</script>
+
+<g class="axis x-axis">
+	{#each tickVals as tick, i}
+		<g class="tick tick-{tick}" transform="translate({$xScale(tick)},{$yRange[0]})">
+			{#if gridlines !== false}
+				<line y1={$height * -1} y2="0" x1="0" x2="0" />
+			{/if}
+			<Text
+				x={xTick || isBand ? $xScale.bandwidth() / 2 : 0}
+				y={yTick}
+				dx={dxTick}
+				dy={dyTick}
+				rotate={315}
+				textAnchor="end"
+				verticalAnchor="middle"
+				style="font-size: 10px;"
+				value={format(tick, formatTick ?? $xScale.tickFormat?.())}
+			/>
+		</g>
+	{/each}
+</g>
+
+<style >
+	.tick {
+		font-size: 0.725em;
+		font-weight: 200;
+	}
+
+	line,
+	.tick line {
+		stroke: #e0e0e0;
+	}
+</style>

package/components/AxisX.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FormatType } from 'svelte-ux/utils/format';
+declare const __propDef: {
+    props: {
+        gridlines?: boolean;
+        formatTick?: FormatType;
+        ticks?: any;
+        xTick?: any;
+        yTick?: number;
+        dxTick?: number;
+        dyTick?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AxisXProps = typeof __propDef.props;
+export declare type AxisXEvents = typeof __propDef.events;
+export declare type AxisXSlots = typeof __propDef.slots;
+export default class AxisX extends SvelteComponentTyped<AxisXProps, AxisXEvents, AxisXSlots> {
+}
+export {};

package/components/AxisY.svelte

@@ -0,0 +1,69 @@
+<script >import { getContext } from 'svelte';
+import { format } from 'svelte-ux/utils/format';
+import Text from './Text.svelte';
+import { isScaleBand } from '../utils/scales';
+const { padding, xRange, yScale, width } = getContext('LayerCake');
+export let gridlines = false;
+export let ticks = 4;
+export let formatTick = undefined;
+export let xTick = 0;
+export let yTick = 0;
+export let dxTick = 0;
+export let dyTick = -3; // TODO: Maualliy tweak based on font-size until <Text /> handles custom styles
+$: isBand = isScaleBand($yScale);
+$: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBand
+        ? $yScale.domain()
+        : $yScale.ticks(typeof ticks === 'function' ? ticks($yScale) : ticks);
+</script>
+
+<g class="axis y-axis" transform="translate({-$padding.left}, 0)">
+	{#each tickVals as tick, i}
+		<g
+			class="tick tick-{tick}"
+			transform="translate({$xRange[0] + (isBand ? $padding.left : 0)}, {$yScale(tick)})"
+		>
+			{#if gridlines !== false}
+				<line
+					x1={$padding.left}
+					x2={$width + $padding.left}
+					y1={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
+					y2={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
+				/>
+			{/if}
+			<!-- <circle
+        cx={$padding.left - 4}
+        cy={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
+        r="2"
+        fill="red"
+      /> -->
+			<Text
+				x={$padding.left - 4}
+				y={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
+				dx={dxTick}
+				dy={dyTick}
+				textAnchor="end"
+				verticalAnchor="middle"
+				style="font-size: 10px;"
+				value={format(tick, formatTick ?? $yScale.tickFormat?.())}
+			/>
+		</g>
+	{/each}
+</g>
+
+<style >
+	.tick {
+		font-size: 0.725em;
+		font-weight: 200;
+	}
+
+	.tick line {
+		stroke: #e0e0e0;
+		/* stroke-dasharray: 2; */
+	}
+
+	.tick.tick-0 line {
+		stroke-dasharray: 0;
+	}
+</style>

package/components/AxisY.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FormatType } from 'svelte-ux/utils/format';
+declare const __propDef: {
+    props: {
+        gridlines?: boolean;
+        ticks?: number | Function;
+        formatTick?: FormatType;
+        xTick?: number;
+        yTick?: number;
+        dxTick?: number;
+        dyTick?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AxisYProps = typeof __propDef.props;
+export declare type AxisYEvents = typeof __propDef.events;
+export declare type AxisYSlots = typeof __propDef.slots;
+export default class AxisY extends SvelteComponentTyped<AxisYProps, AxisYEvents, AxisYSlots> {
+}
+export {};

package/components/Bar.svelte

@@ -0,0 +1,93 @@
+<script >import { getContext } from 'svelte';
+import { scaleBand } from 'd3-scale';
+import { max, min } from 'd3-array';
+import Rect from './Rect.svelte';
+import { unique } from 'svelte-ux/utils/array';
+const { data, flatData, xGet, yRange, xScale, yScale, x, y, rGet, config } = getContext('LayerCake');
+/*
+TODO: Support vertical/horizontal layout
+  - https://layercake.graphics/example/Bar
+  - https://layercake.graphics/example/Column
+  - https://layercake.graphics/example/BarStacked
+  - https://layercake.graphics/example/ColumnStacked
+*/
+export let color = 'var(--color-blue-500)';
+export let opacity = 1;
+export let stroke = 'black';
+export let strokeWidth = 0;
+export let radius = 0;
+export let getKey = (item) => $x(item);
+export let getProps = undefined;
+// See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
+export let groupBy = undefined;
+// export let delay = 300;
+// 	$: console.log({ $data, $flatData, groupBy, stackBy })
+$: groupKeys = unique($flatData.map((d) => d[groupBy]));
+$: x1Scale = scaleBand().domain(groupKeys).range([0, $xScale.bandwidth()]).paddingInner(0.2);
+$: getDimensions = (item) => {
+    // console.log({ item, y: $y(item) });
+    const x = $xGet(item) + (groupBy ? x1Scale(item[groupBy]) : 0);
+    // TODO: Do we need to support the non-bandwidth scale?
+    //   const width = $xScale.bandwidth
+    //     ? $xScale.bandwidth()
+    //     : Math.max(0, $xGet(d)[1] - $xGet(d)[0]);
+    const width = groupBy ? x1Scale.bandwidth() : $xScale.bandwidth();
+    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;
+    }
+    return {
+        x,
+        y: $yScale(yTop),
+        width,
+        height: $yScale(yBottom) - $yScale(yTop)
+    };
+};
+function getColor(item, index) {
+    if (typeof color === 'function') {
+        return color({ value: $y(item), item, index });
+    }
+    else if ($config.r) {
+        return $rGet(item);
+    }
+    else {
+        return color;
+    }
+}
+</script>
+
+<g class="column-group">
+	{#each $data as item, index (getKey(item, index))}
+		<Rect
+			class="group-rect"
+			data-id={index}
+			fill={getColor(item, index)}
+			fill-opacity={opacity}
+			{stroke}
+			stroke-width={strokeWidth}
+			rx={radius}
+			{...getDimensions(item)}
+			{...getProps?.({ value: $y(item), item, index })}
+			{...$$restProps}
+		/>
+	{/each}
+</g>

package/components/Bar.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => string);
+        opacity?: number;
+        stroke?: string;
+        strokeWidth?: number;
+        radius?: number;
+        getKey?: (item: any, index: number) => any;
+        getProps?: (obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => any;
+        groupBy?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BarProps = typeof __propDef.props;
+export declare type BarEvents = typeof __propDef.events;
+export declare type BarSlots = typeof __propDef.slots;
+export default class Bar extends SvelteComponentTyped<BarProps, BarEvents, BarSlots> {
+}
+export {};

package/components/Baseline.svelte

@@ -0,0 +1,21 @@
+<script >import { getContext } from 'svelte';
+const { xRange, yScale, yRange } = getContext('LayerCake');
+export let x = false;
+export let y = false;
+</script>
+
+<g class="baseline">
+	{#if x}
+		<line x1={0} x2={$xRange[1] || 0} y1={$yScale(0) || 0} y2={$yScale(0) || 0} class="baseline" />
+	{/if}
+
+	{#if y}
+		<line x1={0} x2={0} y1={$yRange[0] || 0} y2={$yRange[1] || 0} class="baseline" />
+	{/if}
+</g>
+
+<style >
+	.baseline {
+		stroke: #777;
+	}
+</style>

package/components/Baseline.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        x?: boolean;
+        y?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BaselineProps = typeof __propDef.props;
+export declare type BaselineEvents = typeof __propDef.events;
+export declare type BaselineSlots = typeof __propDef.slots;
+export default class Baseline extends SvelteComponentTyped<BaselineProps, BaselineEvents, BaselineSlots> {
+}
+export {};

package/components/Chart.svelte

@@ -0,0 +1,50 @@
+<script context="module" >import { LayerCake, Svg, Html } from 'layercake';
+export { Svg, Html };
+</script>
+
+<script >import { max, min } from 'd3-array';
+import { get } from 'lodash-es';
+/**
+ *  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));
+    }
+    else if (typeof accessor === 'function') {
+        return accessor(d) || 0;
+    }
+    else if (typeof accessor === 'string') {
+        return get(d, accessor);
+    }
+    else {
+        throw new Error('Unexpected accessor: ' + accessor);
+    }
+}
+export let data = [];
+export let x;
+export let y;
+/**
+ * xBaseline guaranteed to be visible in xDomain
+ */
+export let xBaseline = null;
+let xDomain = undefined;
+$: if (xBaseline != null) {
+    const xValues = data.flatMap((d) => getValue(x, d));
+    xDomain = [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
+}
+/**
+ * yBaseline guaranteed to be visible in yDomain
+ */
+export let yBaseline = null;
+let yDomain = undefined;
+$: if (yBaseline != null) {
+    const yValues = data.flatMap((d) => getValue(y, d));
+    yDomain = [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
+}
+</script>
+
+<LayerCake {data} {y} {yDomain} {x} {xDomain} {...$$restProps}>
+	<slot />
+</LayerCake>

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/ClevelandDotPlot.svelte

@@ -0,0 +1,44 @@
+<script >import { getContext } from 'svelte';
+const { data, xGet, yGet, y, yScale, rGet, config } = getContext('LayerCake');
+export let color = 'var(--color-blue-500)';
+export let radius = 5;
+$: midHeight = $yScale.bandwidth() / 2;
+function getColor(item, index) {
+    if (typeof color == 'function') {
+        return color({ value: $y(item), item, index });
+    }
+    else if ($config.r) {
+        return $rGet(item);
+    }
+    else {
+        return color;
+    }
+}
+</script>
+
+<g class="dot-plot">
+	{#each $data as row}
+		<g class="dot-row">
+			<line
+				x1={Math.min(...$xGet(row))}
+				y1={$yGet(row) + midHeight}
+				x2={Math.max(...$xGet(row))}
+				y2={$yGet(row) + midHeight}
+			/>
+			{#each $xGet(row) as circleX, i}
+				<circle cx={circleX} cy={$yGet(row) + midHeight} r={radius} fill={getColor(row, i)} />
+			{/each}
+		</g>
+	{/each}
+</g>
+
+<style >
+	line {
+		stroke-width: 1px;
+		stroke: #000;
+	}
+	circle {
+		stroke: #000;
+		stroke-width: 1px;
+	}
+</style>

package/components/ClevelandDotPlot.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => string);
+        radius?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ClevelandDotPlotProps = typeof __propDef.props;
+export declare type ClevelandDotPlotEvents = typeof __propDef.events;
+export declare type ClevelandDotPlotSlots = typeof __propDef.slots;
+export default class ClevelandDotPlot extends SvelteComponentTyped<ClevelandDotPlotProps, ClevelandDotPlotEvents, ClevelandDotPlotSlots> {
+}
+export {};

package/components/HighlightBar.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}