layerchart 0.0.1 → 0.0.5

package/README.md

@@ -1,38 +1,3 @@
-# create-svelte
+# layerchart
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm init svelte@next
-
-# create a new project in my-app
-npm init svelte@next my-app
-```
-
-> Note: the `@next` is temporary
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
-
-```bash
-npm run build
-```
-
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+WIP

package/components/Arc.svelte

@@ -0,0 +1,77 @@
+<script >/*
+    TODO:
+    - [ ] Chart usage
+    - [x] Track on/off and pass props
+    - [x] Text configuration / slot?
+    - [ ] Pie usage (second dimension?)
+    - [x] style / class (gradient, etc)
+    - [ ] Allow spring/tweened to be reactive (but ignore value)
+*/
+// https://caniuse.com/#feat=css-conic-gradients
+// https://css-tricks.com/snippets/css/css-conic-gradient/
+// https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient
+import { arc as d3arc } from 'd3-shape';
+import { scaleLinear } from 'd3-scale';
+import { getMotionStore } from '../stores/motionStore';
+import { degreesToRadians } from '../utils/math';
+export let spring = undefined;
+export let tweened = undefined;
+export let value = 0;
+let tweened_value = getMotionStore(value, { spring, tweened });
+$: tweened_value.set(value);
+export let domain = [0, 100];
+export let range = [0, 360]; // degrees
+export let innerRadius = 50;
+export let outerRadius = 60;
+export let cornerRadius = 10;
+export let padAngle = 0;
+export let padRadius = 0;
+export let track = false;
+$: scale = scaleLinear().domain(domain).range(range);
+$: startAngle = degreesToRadians(range[0]);
+$: endAngle = degreesToRadians(range[1]);
+$: valueAngle = degreesToRadians(scale($tweened_value));
+$: arc = d3arc()
+    .innerRadius(innerRadius)
+    .outerRadius(outerRadius)
+    .startAngle(startAngle)
+    .endAngle(valueAngle)
+    .cornerRadius(cornerRadius)
+    .padAngle(padAngle);
+// .padRadius(padRadius);
+$: trackArc = d3arc()
+    .innerRadius(innerRadius)
+    .outerRadius(outerRadius)
+    .startAngle(startAngle)
+    .endAngle(endAngle)
+    .cornerRadius(cornerRadius)
+    .padAngle(padAngle);
+// .padRadius(padRadius);
+$: trackArcCentroid = trackArc.centroid();
+// $: console.log(trackArcCentroid)
+let trackArcEl;
+$: boundingBox = trackArc && trackArcEl ? trackArcEl.getBBox() : {};
+// $: console.log(boundingBox)
+$: labelArcCenterOffset = {
+    x: outerRadius - boundingBox.width / 2,
+    // x: 0,
+    y: (outerRadius - boundingBox.height / 2) * -1
+};
+// $: console.log(labelArcCenterOffset)
+$: labelArcBottomOffset = {
+    // x: outerRadius - boundingBox.width / 2,
+    x: outerRadius - boundingBox.width / 2,
+    // x: 0,
+    // y: (outerRadius - boundingBox.height) * -1
+    y: (outerRadius - boundingBox.height) * -1
+};
+// $: console.log(labelArcBottomOffset)
+</script>
+
+{#if track}
+	<path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
+{/if}
+
+<path d={arc()} {...$$restProps} />
+
+<slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

package/components/Arc.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        value?: number;
+        domain?: number[];
+        range?: number[];
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        padAngle?: number;
+        padRadius?: number;
+        track?: boolean | svelte.JSX.SVGProps<SVGPathElement>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            value: any;
+            centroid: [number, number];
+            boundingBox: any;
+        };
+    };
+};
+export declare type ArcProps = typeof __propDef.props;
+export declare type ArcEvents = typeof __propDef.events;
+export declare type ArcSlots = typeof __propDef.slots;
+export default class Arc extends SvelteComponentTyped<ArcProps, ArcEvents, ArcSlots> {
+}
+export {};

package/components/Area.svelte

@@ -0,0 +1,47 @@
+<script >import { getContext } from 'svelte';
+import { area as d3Area } from 'd3-shape';
+import { interpolatePath } from 'd3-interpolate-path';
+import { getMotionStore } from '../stores/motionStore';
+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 tweened = 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;
+$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+$: tweened_d = getMotionStore('', { tweened: tweenedOptions });
+$: {
+    const path = d3Area()
+        .x(x ?? $xGet)
+        .y0(y0 ?? $yRange[0])
+        .y1(y1 ?? $yGet);
+    if (curve)
+        path.curve(curve);
+    if (defined)
+        path.defined(defined);
+    const d = pathData ?? path(data ?? $contextData);
+    tweened_d.set(d);
+}
+</script>
+
+{#if line}
+	<Path {curve} {defined} {color} {tweened} {...line} />
+{/if}
+
+<path
+	class="path-area"
+	d={$tweened_d}
+	clip-path={clipPath}
+	fill={color}
+	fill-opacity={opacity}
+	{...$$restProps}
+/>

package/components/Area.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+import type { tweened as tweenedStore } from 'svelte/motion';
+import { Area } from 'd3-shape';
+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;
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        curve?: CurveFactory;
+        defined?: Parameters<Area<any>['defined']>[0];
+        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" {...gridlines} />
+			{/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,66 @@
+<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)}
+					{...gridlines}
+				/>
+			{/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; */
+	}
+</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/Bars.svelte

@@ -0,0 +1,102 @@
+<script >import { getContext } from 'svelte';
+import { scaleBand } from 'd3-scale';
+import { max, min } from 'd3-array';
+import { unique } from 'svelte-ux/utils/array';
+import Rect from './Rect.svelte';
+const { data, flatData, xGet, yRange, xScale, yScale, x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+/**
+ * Override `x` from context.  Useful for multiple Bar instances
+ */
+export let x = $xContext;
+// Convert x to function
+$: _x = x ? (typeof x === 'string' ? (d) => d[x] : x) : $xContext;
+/**
+ * Override `y` from context.  Useful for multiple Bar instances
+ */
+export let y = $yContext;
+$: _y = y ? (typeof y === 'string' ? (d) => d[y] : y) : $yContext;
+/*
+TODO:
+      - [ ] Support vertical/horizontal layout (Bar/Column)
+*/
+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;
+export let widthOffset = 0;
+// 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) - widthOffset / 2;
+    // 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()) + widthOffset;
+    const yValue = _y(item);
+    let yTop = 0;
+    let yBottom = 0;
+    if (Array.isArray(yValue)) {
+        // Array contains both top and bottom values (stack, etc);
+        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/Bars.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        x?: any;
+        y?: 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;
+        widthOffset?: number;
+        groupBy?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BarsProps = typeof __propDef.props;
+export declare type BarsEvents = typeof __propDef.events;
+export declare type BarsSlots = typeof __propDef.slots;
+export default class Bars extends SvelteComponentTyped<BarsProps, BarsEvents, BarsSlots> {
+}
+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>