layerchart 0.0.4 → 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

@@ -1,5 +1,7 @@
 <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
@@ -9,28 +11,35 @@ 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;
-$: path = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? $yRange[0])
-    .y1(y1 ?? $yGet);
-$: if (curve)
-    path.curve(curve);
-$: if (defined)
-    path.defined(defined);
+$: 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} {...line} />
+	<Path {curve} {defined} {color} {tweened} {...line} />
 {/if}
 
 <path
 	class="path-area"
-	d={pathData ?? path(data ?? $contextData)}
+	d={$tweened_d}
 	clip-path={clipPath}
 	fill={color}
 	fill-opacity={opacity}

package/components/Area.svelte.d.ts

@@ -1,4 +1,6 @@
 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: {
@@ -9,8 +11,9 @@ declare const __propDef: {
         y1?: any;
         pathData?: string;
         clipPath?: string;
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
         curve?: CurveFactory;
-        defined?: (d: [number, number], index: number, data: [number, number][]) => boolean;
+        defined?: Parameters<Area<any>['defined']>[0];
         color?: string;
         opacity?: number;
         line?: boolean | any;

package/components/AxisX.svelte

@@ -22,7 +22,7 @@ $: tickVals = Array.isArray(ticks)
 	{#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" />
+				<line y1={$height * -1} y2="0" x1="0" x2="0" {...gridlines} />
 			{/if}
 			<Text
 				x={xTick || isBand ? $xScale.bandwidth() / 2 : 0}

package/components/AxisY.svelte

@@ -30,6 +30,7 @@ $: tickVals = Array.isArray(ticks)
 					x2={$width + $padding.left}
 					y1={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
 					y2={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
+					{...gridlines}
 				/>
 			{/if}
 			<!-- <circle
@@ -62,8 +63,4 @@ $: tickVals = Array.isArray(ticks)
 		stroke: #e0e0e0;
 		/* stroke-dasharray: 2; */
 	}
-
-	.tick.tick-0 line {
-		stroke-dasharray: 0;
-	}
 </style>

package/components/{Bar.svelte → Bars.svelte}

@@ -1,23 +1,32 @@
 <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');
+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
-  - https://layercake.graphics/example/Bar
-  - https://layercake.graphics/example/Column
-  - https://layercake.graphics/example/BarStacked
-  - https://layercake.graphics/example/ColumnStacked
+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 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;
@@ -26,17 +35,17 @@ $: 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);
+    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();
-    const yValue = $y(item);
+    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;
+        // Array contains both top and bottom values (stack, etc);
         yTop = max(yValue);
         yBottom = min(yValue);
     }
@@ -64,7 +73,7 @@ $: getDimensions = (item) => {
 };
 function getColor(item, index) {
     if (typeof color === 'function') {
-        return color({ value: $y(item), item, index });
+        return color({ value: _y(item), item, index });
     }
     else if ($config.r) {
         return $rGet(item);
@@ -86,7 +95,7 @@ function getColor(item, index) {
 			stroke-width={strokeWidth}
 			rx={radius}
 			{...getDimensions(item)}
-			{...getProps?.({ value: $y(item), item, index })}
+			{...getProps?.({ value: _y(item), item, index })}
 			{...$$restProps}
 		/>
 	{/each}

package/components/{Bar.svelte.d.ts → Bars.svelte.d.ts}

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        x?: any;
+        y?: any;
         color?: string | ((obj: {
             value: any;
             item: any;
@@ -17,6 +19,7 @@ declare const __propDef: {
             item: any;
             index: number;
         }) => any;
+        widthOffset?: number;
         groupBy?: string;
     };
     events: {
@@ -24,9 +27,9 @@ declare const __propDef: {
     };
     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 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/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/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/{Label.svelte.d.ts → Labels.svelte.d.ts}

@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     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 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/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

@@ -1,31 +1,35 @@
 <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 = 'var(--color-blue-500)';
+export let color = 'black';
 export let width = undefined;
-$: path = d3Line()
-    .x(x ?? $xGet)
-    .y(y ?? $yGet);
-$: if (curve)
-    path.curve(curve);
-$: if (defined)
-    path.defined(defined);
+$: 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={pathData ?? path(data ?? $contextData)}
-	stroke={color}
-	stroke-width={width}
-	{...$$restProps}
-/>
+<path class="path-line" d={$tweened_d} stroke={color} stroke-width={width} {...$$restProps} />
 
 <style >
 	.path-line {

package/components/Path.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+import type { tweened as tweenedStore } from 'svelte/motion';
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,8 +8,9 @@ declare const __propDef: {
         x?: any;
         y?: any;
         pathData?: string;
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
         curve?: CurveFactory | CurveFactoryLineOnly;
-        defined?: (d: [number, number], index: number, data: [number, number][]) => boolean;
+        defined?: Parameters<Line<any>['defined']>[0];
         color?: string;
         width?: any;
     };