layerchart 0.0.4 → 0.0.5

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>

package/components/Points.svelte.d.ts

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

package/components/Threshold.svelte

@@ -54,30 +54,33 @@ $: 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>
+<!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->
+{#key curve}
+	<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="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)}
-/>
+	<slot
+		name="pathBelow"
+		areaPathData={areaPath(data ?? $contextData)}
+		clipPath="url(#threshold-clip-above-{id})"
+		linePathData={linePathBelow(data ?? $contextData)}
+	/>
+{/key}
 
 <!-- Fix `<Threshold> received an unexpected slot "default".` warning -->
 <slot />

package/components/index.d.ts

@@ -2,14 +2,14 @@ export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
 export { default as AxisX } from './AxisX.svelte';
 export { default as AxisY } from './AxisY.svelte';
-export { default as Bar } from './Bar.svelte';
+export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as ClevelandDotPlot } from './ClevelandDotPlot.svelte';
-export { default as HighlightBar } from './HighlightBar.svelte';
+export { default as HighlightRect } from './HighlightRect.svelte';
 export { default as HighlightLine } from './HighlightLine.svelte';
-export { default as Label } from './Label.svelte';
+export { default as Labels } from './Labels.svelte';
 export { default as Line } from './Line.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Rect } from './Rect.svelte';

package/components/index.js

@@ -2,14 +2,14 @@ export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
 export { default as AxisX } from './AxisX.svelte';
 export { default as AxisY } from './AxisY.svelte';
-export { default as Bar } from './Bar.svelte';
+export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as ClevelandDotPlot } from './ClevelandDotPlot.svelte';
-export { default as HighlightBar } from './HighlightBar.svelte';
+export { default as HighlightRect } from './HighlightRect.svelte';
 export { default as HighlightLine } from './HighlightLine.svelte';
-export { default as Label } from './Label.svelte';
+export { default as Labels } from './Labels.svelte';
 export { default as Line } from './Line.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Rect } from './Rect.svelte';

package/docs/Preview.svelte

@@ -1,5 +1,9 @@
-<script >export let code = null;
+<script >import Prism from 'prismjs';
+import 'prism-svelte';
+export let code = null;
 export let language = 'svelte';
+export let highlight = false;
+$: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svelte') : code;
 </script>
 
 <div class="border border-black/20 rounded bg-white">
@@ -7,12 +11,12 @@ export let language = 'svelte';
 		<slot />
 	</div>
 
-	{#if code}
+	{#if displayCode}
 		<pre
 			class="language-{language} rounded"
 			style="margin: 0">
 		<code class="language-{language}">
-			{@html code}
+			{@html displayCode}
 		</code>
 	</pre>
 	{/if}

package/docs/Preview.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import 'prism-svelte';
 declare const __propDef: {
     props: {
         code?: any;
         language?: string;
+        highlight?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -3,17 +3,17 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.21",
-    "@sveltejs/kit": "1.0.0-next.196",
+    "@sveltejs/kit": "^1.0.0-next.201",
     "@types/d3-array": "^3.0.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.0.2",
     "@types/lodash-es": "^4.17.5",
     "autoprefixer": "^10.4.0",
     "mdsvex": "^0.9.8",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.0",
     "prettier-plugin-svelte": "^2.5.0",
     "prism-themes": "^1.9.0",
     "svelte": "^3.44.2",
@@ -30,31 +30,35 @@
   "dependencies": {
     "@mdi/js": "^6.5.95",
     "d3-array": "^3.1.1",
+    "d3-interpolate-path": "^2.2.3",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.0.1",
     "date-fns": "^2.26.0",
-    "layercake": "^5.0.0",
+    "layercake": "^5.0.1",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.0.102"
+    "svelte-ux": "^0.0.105"
   },
   "exports": {
     "./package.json": "./package.json",
+    "./components/Arc.svelte": "./components/Arc.svelte",
     "./components/Area.svelte": "./components/Area.svelte",
     "./components/AreaStack.svelte": "./components/AreaStack.svelte",
     "./components/AxisX.svelte": "./components/AxisX.svelte",
     "./components/AxisY.svelte": "./components/AxisY.svelte",
-    "./components/Bar.svelte": "./components/Bar.svelte",
+    "./components/Bars.svelte": "./components/Bars.svelte",
     "./components/Baseline.svelte": "./components/Baseline.svelte",
     "./components/Chart.svelte": "./components/Chart.svelte",
     "./components/Circle.svelte": "./components/Circle.svelte",
-    "./components/ClevelandDotPlot.svelte": "./components/ClevelandDotPlot.svelte",
-    "./components/HighlightBar.svelte": "./components/HighlightBar.svelte",
+    "./components/ConnectedPoints.svelte": "./components/ConnectedPoints.svelte",
+    "./components/Group.svelte": "./components/Group.svelte",
     "./components/HighlightLine.svelte": "./components/HighlightLine.svelte",
-    "./components/Label.svelte": "./components/Label.svelte",
+    "./components/HighlightRect.svelte": "./components/HighlightRect.svelte",
+    "./components/Labels.svelte": "./components/Labels.svelte",
     "./components/Line.svelte": "./components/Line.svelte",
+    "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
     "./components/Path.svelte": "./components/Path.svelte",
+    "./components/Points.svelte": "./components/Points.svelte",
     "./components/Rect.svelte": "./components/Rect.svelte",
-    "./components/Scatter.svelte": "./components/Scatter.svelte",
     "./components/Text.svelte": "./components/Text.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
@@ -69,8 +73,11 @@
     "./utils/event": "./utils/event.js",
     "./utils/genData": "./utils/genData.js",
     "./utils": "./utils/index.js",
+    "./utils/math": "./utils/math.js",
+    "./utils/path": "./utils/path.js",
     "./utils/pivot": "./utils/pivot.js",
     "./utils/scales": "./utils/scales.js",
+    "./utils/stack": "./utils/stack.js",
     "./utils/string": "./utils/string.js",
     "./utils/ticks": "./utils/ticks.js"
   },

package/stores/motionStore.d.ts

@@ -3,6 +3,6 @@ import { spring, tweened } from 'svelte/motion';
  * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
  */
 export declare function getMotionStore(value: any, options: {
-    spring: boolean | Parameters<typeof spring>[1];
-    tweened: boolean | Parameters<typeof tweened>[1];
+    spring?: boolean | Parameters<typeof spring>[1];
+    tweened?: boolean | Parameters<typeof tweened>[1];
 }): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;

package/utils/genData.d.ts

@@ -17,3 +17,16 @@ export declare function createDateSeries(options: {
 }): {
     date: Date;
 }[];
+export declare const wideData: {
+    year: string;
+    apples: number;
+    bananas: number;
+    cherries: number;
+    dates: number;
+}[];
+export declare const longData: {
+    year: string;
+    basket: number;
+    fruit: string;
+    value: number;
+}[];

package/utils/genData.js

@@ -33,3 +33,27 @@ export function createDateSeries(options) {
         };
     });
 }
+export const wideData = [
+    { year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
+    { year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+    { year: '2017', apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+    { year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 }
+];
+export const longData = [
+    { year: '2019', basket: 1, fruit: 'apples', value: 3840 },
+    { year: '2019', basket: 1, fruit: 'bananas', value: 1920 },
+    { year: '2019', basket: 2, fruit: 'cherries', value: 960 },
+    { year: '2019', basket: 2, fruit: 'dates', value: 400 },
+    { year: '2018', basket: 1, fruit: 'apples', value: 1600 },
+    { year: '2018', basket: 1, fruit: 'bananas', value: 1440 },
+    { year: '2018', basket: 2, fruit: 'cherries', value: 960 },
+    { year: '2018', basket: 2, fruit: 'dates', value: 400 },
+    { year: '2017', basket: 1, fruit: 'apples', value: 820 },
+    { year: '2017', basket: 1, fruit: 'bananas', value: 1000 },
+    { year: '2017', basket: 2, fruit: 'cherries', value: 640 },
+    { year: '2017', basket: 2, fruit: 'dates', value: 400 },
+    { year: '2016', basket: 1, fruit: 'apples', value: 820 },
+    { year: '2016', basket: 1, fruit: 'bananas', value: 560 },
+    { year: '2016', basket: 2, fruit: 'cherries', value: 720 },
+    { year: '2016', basket: 2, fruit: 'dates', value: 400 }
+];

package/utils/math.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Convert degrees to radians
+ */
+export declare function degreesToRadians(degrees: number): number;

package/utils/math.js

@@ -0,0 +1,6 @@
+/**
+ * Convert degrees to radians
+ */
+export function degreesToRadians(degrees) {
+    return (degrees * Math.PI) / 180;
+}

package/utils/path.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Convert easing into path data with number of points
+ * see: https://svelte.dev/examples#easing
+ */
+export declare function getEasingPath(easing: (t: number) => number, count?: number): string;

package/utils/path.js

@@ -0,0 +1,14 @@
+/**
+ * Convert easing into path data with number of points
+ * see: https://svelte.dev/examples#easing
+ */
+export function getEasingPath(easing, count = 1000) {
+    let pathData = `M0 ${count}`;
+    for (let i = 1; i <= count; i++) {
+        pathData += `
+			L${(i / count) * count}
+			${count - easing(i / count) * count}
+		`;
+    }
+    return pathData;
+}

package/utils/pivot.js

@@ -13,7 +13,7 @@ export function getAccessor(key) {
  *  - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator
  */
 export function pivotLonger(data, columns, name, value) {
-    const keep = data.columns.filter((c) => !columns.includes(c));
+    const keep = Object.keys(data[0]).filter((c) => !columns.includes(c));
     return data.flatMap((d) => {
         const base = keep.map((k) => [k, d[k]]);
         return columns.map((column) => {

package/utils/stack.d.ts

@@ -0,0 +1,14 @@
+import { stackOffsetNone } from 'd3-shape';
+declare type OffsetType = typeof stackOffsetNone;
+export declare function createStackData(data: any[], options: {
+    xKey: string;
+    groupBy?: string;
+    stackBy?: string;
+    offset?: OffsetType;
+}): any[];
+/**
+ * Function to offset each layer by the maximum of the previous layer
+ *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
+ */
+export declare function stackOffsetSeparated(series: any, order: any): void;
+export {};

package/utils/stack.js

@@ -0,0 +1,69 @@
+import { flatGroup, max, sum } from 'd3-array';
+import { stack } from 'd3-shape';
+import { pivotWider } from './pivot';
+export function createStackData(data, options) {
+    if (options.groupBy) {
+        // Group then Stack (if needed)
+        const groupedData = flatGroup(data, (d) => d[options.xKey], (d) => d[options.groupBy]);
+        const result = groupedData.flatMap((d, i) => {
+            const groupKeys = d.slice(0, -1); // all but last item
+            const itemData = d.slice(-1)[0]; // last item
+            const pivotData = pivotWider(itemData, options.xKey, options.stackBy, 'value');
+            const stackKeys = [...new Set(itemData.map((d) => d[options.stackBy]))];
+            const stackData = stack().keys(stackKeys).offset(options.offset)(pivotData);
+            //console.log({ pivotData, stackData })
+            return stackData.flatMap((series) => {
+                //console.log({ series })
+                return series.flatMap((s) => {
+                    return {
+                        ...itemData[0],
+                        keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
+                        values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)]
+                    };
+                });
+            });
+        });
+        return result;
+    }
+    else if (options.stackBy) {
+        // Stack only
+        const pivotData = pivotWider(data, options.xKey, options.stackBy, 'value');
+        const stackKeys = [...new Set(data.map((d) => d[options.stackBy]))];
+        const stackData = stack().keys(stackKeys).offset(options.offset)(pivotData);
+        const result = stackData.flatMap((series) => {
+            return series.flatMap((s) => {
+                return {
+                    ...s.data,
+                    keys: [s.data[options.xKey], series.key],
+                    values: [s[0], s[1]]
+                };
+            });
+        });
+        return result;
+    }
+    else {
+        // TODO: Do anything if no group or stack? Convert to { ...d, keys: [...}, values: [...] ]}?
+        return data;
+    }
+}
+/**
+ * Function to offset each layer by the maximum of the previous layer
+ *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
+ */
+// TODO: Try to find way to support separated with createStackData() (which has isolated stacked per group)
+export function stackOffsetSeparated(series, order) {
+    const gap = 200; // TODO: Determine way to pass in as option (curry?)
+    if (!((n = series.length) > 1))
+        return;
+    // Standard series
+    for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
+        (s0 = s1), (s1 = series[order[i]]);
+        let base = max(s0, (d) => d[1]) + gap; // here is where you calculate the maximum of the previous layer
+        for (var j = 0; j < m; ++j) {
+            // Set the height based on the data values, shifted up by the previous layer
+            let diff = s1[j][1] - s1[j][0];
+            s1[j][0] = base;
+            s1[j][1] = base + diff;
+        }
+    }
+}

package/components/ClevelandDotPlot.svelte

@@ -1,44 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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.d.ts

@@ -1,18 +0,0 @@
-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/Scatter.svelte

@@ -1,25 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-/** @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 {};