layerchart 0.0.8 → 0.2.0

package/components/Arc.svelte

@@ -1,15 +1,18 @@
 <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
+// https://stackoverflow.com/questions/2465405/svg-angular-gradient
+// https://stackoverflow.com/questions/18206361/svg-multiple-color-on-circle-stroke
+// https://bl.ocks.org/mbostock/4163057
+// https://github.com/d3/d3/issues/2427#issuecomment-100759055
+// https://github.com/mnsht/gradient-path
+// https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
+// https://codepen.io/simeydotme/pen/rrOEmO/
+import { getContext } from 'svelte';
 import { arc as d3arc } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
 import { getMotionStore } from '../stores/motionStore';
@@ -20,30 +23,58 @@ export let value = 0;
 let tweened_value = getMotionStore(value, { spring, tweened });
 $: tweened_value.set(value);
 export let domain = [0, 100];
+/**
+ * Range [min,max] in degrees.  See also startAngle/endAngle
+ */
 export let range = [0, 360]; // degrees
-export let innerRadius = 50;
-export let outerRadius = 60;
-export let cornerRadius = 10;
+/**
+ * Start angle in radians
+ */
+export let startAngle = undefined;
+/**
+ * End angle in radians
+ */
+export let endAngle = undefined;
+/**
+ * Define innerRadius.
+ *   value >= 1: discrete value
+ *   value >  0: percent of `outerRadius`
+ *   value <  0: offset of `outerRadius`
+ *   default: yRange min
+ */
+export let innerRadius = undefined;
+/**
+ * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+ */
+export let outerRadius = undefined;
+export let cornerRadius = 0;
 export let padAngle = 0;
-export let padRadius = 0;
+// export let padRadius = 0;
 export let track = false;
+const { yRange } = getContext('LayerCake');
 $: scale = scaleLinear().domain(domain).range(range);
-$: startAngle = degreesToRadians(range[0]);
-$: endAngle = degreesToRadians(range[1]);
-$: valueAngle = degreesToRadians(scale($tweened_value));
+$: _outerRadius = outerRadius ?? $yRange[0] / 2;
+$: _innerRadius =
+    (innerRadius > 1
+        ? innerRadius
+        : innerRadius > 0
+            ? _outerRadius * innerRadius
+            : innerRadius < 0
+                ? _outerRadius - innerRadius
+                : innerRadius) ?? $yRange[1];
 $: arc = d3arc()
-    .innerRadius(innerRadius)
-    .outerRadius(outerRadius)
-    .startAngle(startAngle)
-    .endAngle(valueAngle)
+    .innerRadius(_innerRadius)
+    .outerRadius(_outerRadius)
+    .startAngle(startAngle ?? degreesToRadians(range[0]))
+    .endAngle(endAngle ?? degreesToRadians(scale($tweened_value)))
     .cornerRadius(cornerRadius)
     .padAngle(padAngle);
 // .padRadius(padRadius);
 $: trackArc = d3arc()
-    .innerRadius(innerRadius)
-    .outerRadius(outerRadius)
-    .startAngle(startAngle)
-    .endAngle(endAngle)
+    .innerRadius(_innerRadius)
+    .outerRadius(_outerRadius)
+    .startAngle(startAngle ?? degreesToRadians(range[0]))
+    .endAngle(endAngle ?? degreesToRadians(range[1]))
     .cornerRadius(cornerRadius)
     .padAngle(padAngle);
 // .padRadius(padRadius);
@@ -66,12 +97,19 @@ $: labelArcBottomOffset = {
     y: (outerRadius - boundingBox.height) * -1
 };
 // $: console.log(labelArcBottomOffset)
+/**
+ * Offset arc from center
+ */
+export let offset = 0;
+$: angle = (startAngle + endAngle) / 2;
+$: xOffset = Math.sin(angle) * offset;
+$: yOffset = -Math.cos(angle) * offset;
 </script>
 
 {#if track}
 	<path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
 {/if}
 
-<path d={arc()} {...$$restProps} />
+<path d={arc()} transform="translate({xOffset}, {yOffset})" {...$$restProps} />
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

package/components/Arc.svelte.d.ts

@@ -8,12 +8,14 @@ declare const __propDef: {
         value?: number;
         domain?: number[];
         range?: number[];
-        innerRadius?: number;
-        outerRadius?: number;
+        startAngle?: number;
+        endAngle?: number;
+        innerRadius?: any;
+        outerRadius?: any;
         cornerRadius?: number;
         padAngle?: number;
-        padRadius?: number;
         track?: boolean | svelte.JSX.SVGProps<SVGPathElement>;
+        offset?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Group.svelte

@@ -2,15 +2,15 @@
 /**
  * Translate x
  */
-export let x;
+export let x = undefined;
 /**
  * Translate x
  */
-export let y;
+export let y = undefined;
 /**
  * Center within chart
  */
-export let center;
+export let center = false;
 const { width, height } = getContext('LayerCake');
 let transform = undefined;
 $: if (x != null || y != null) {

package/components/Group.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        x: number;
-        y: number;
-        center: boolean;
+        x?: number;
+        y?: number;
+        center?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/LinearGradient.svelte

@@ -1,5 +1,6 @@
 <script >export let id;
 export let from;
+export let via; // TODO: Currently --tw-gradient-via is not the color but the full stops
 export let to;
 export let vertical = false;
 export let x1 = '0%';
@@ -20,8 +21,18 @@ export let rotate = undefined;
 		{...$$restProps}
 	>
 		<slot>
-			<stop offset="0%" stop-color={from} />
-			<stop offset="100%" stop-color={to} />
+			{#if from}
+				<stop offset="0%" stop-color={from === true ? 'var(--tw-gradient-from)' : from} />
+			{/if}
+
+			{#if via}
+				<!-- <stop offset="50%" stop-color={via === true ? 'var(--tw-gradient-via)' : via} /> -->
+				<stop offset="50%" stop-color={via} />
+			{/if}
+
+			{#if to}
+				<stop offset="100%" stop-color={to === true ? 'var(--tw-gradient-to)' : to} />
+			{/if}
 		</slot>
 	</linearGradient>
 </defs>

package/components/LinearGradient.svelte.d.ts

@@ -3,8 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id: string;
-        from: string;
-        to: string;
+        from: string | boolean;
+        via: string;
+        to: string | boolean;
         vertical?: boolean;
         x1?: string;
         y1?: string;

package/components/Path.svelte

@@ -1,4 +1,8 @@
-<script >import { getContext } from 'svelte';
+<script >/*
+    TODO:
+    - [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
+*/
+import { getContext } from 'svelte';
 import { line as d3Line } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';

package/components/Pattern.svelte

@@ -0,0 +1,13 @@
+<script >// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
+// https://airbnb.io/visx/patterns
+// https://github.com/airbnb/visx/tree/master/packages/visx-pattern/src/patterns
+export let id;
+export let width;
+export let height;
+</script>
+
+<defs>
+	<pattern {id} {width} {height} patternUnits="userSpaceOnUse" {...$$restProps}>
+		<slot />
+	</pattern>
+</defs>

package/components/Pattern.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        width: number;
+        height: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PatternProps = typeof __propDef.props;
+export declare type PatternEvents = typeof __propDef.events;
+export declare type PatternSlots = typeof __propDef.slots;
+export default class Pattern extends SvelteComponentTyped<PatternProps, PatternEvents, PatternSlots> {
+}
+export {};

package/components/Pie.svelte

@@ -0,0 +1,88 @@
+<script >import { getContext } from 'svelte';
+import { pie as d3pie } from 'd3-shape';
+import Arc from './Arc.svelte';
+import Group from './Group.svelte';
+import { degreesToRadians } from '../utils/math';
+import { getMotionStore } from '../stores/motionStore';
+/*
+TODO:
+- [ ] Offset (always, on hover)
+- [ ] Labels
+- [ ] Multiple nested circles (zScale, or take in data to override context data).  See Path/Area/Threshold
+- [ ] Hover events / change innerRadius / outerRadius, etc
+*/
+export let data = undefined; // TODO: Update Type
+/**
+ * Range [min,max] in degrees.  See also startAngle/endAngle
+ */
+export let range = [0, 360]; // degrees
+/**
+ * Start angle in radians
+ */
+export let startAngle = undefined;
+/**
+ * End angle in radians
+ */
+export let endAngle = undefined;
+/**
+ * Define innerRadius.
+ *   value >= 1: discrete value
+ *   value >  0: percent of `outerRadius`
+ *   value <  0: offset of `outerRadius`
+ *   default: yRange min
+ */
+export let innerRadius = undefined;
+/**
+ * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+ */
+export let outerRadius = undefined;
+export let cornerRadius = 0;
+export let padAngle = 0;
+// export let padRadius = 0;
+export let color = 'black';
+export let spring = undefined;
+export let tweened = undefined;
+/**
+ * Offset all arcs from center
+ */
+export let offset = 0;
+const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
+$: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? $xRange[1] : range[1]);
+let tweened_endAngle = getMotionStore(0, { spring, tweened });
+$: tweened_endAngle.set(resolved_endAngle);
+$: pie = d3pie()
+    .startAngle(startAngle ?? degreesToRadians($config.xRange ? $xRange[0] : range[0]))
+    .endAngle($tweened_endAngle)
+    .padAngle(padAngle)
+    .value($x);
+$: arcs = pie(data ?? $contextData);
+// $: console.log({ arcs, $yRange });
+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>
+
+<Group center>
+	<slot {arcs}>
+		{#each arcs as arc, index}
+			<Arc
+				startAngle={arc.startAngle}
+				endAngle={arc.endAngle}
+				padAngle={arc.padAngle}
+				{innerRadius}
+				{outerRadius}
+				{cornerRadius}
+				{offset}
+				fill={getColor(arc.data, index)}
+			/>
+		{/each}
+	</slot>
+</Group>

package/components/Pie.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        data?: any;
+        /**
+             * Range [min,max] in degrees.  See also startAngle/endAngle
+             */ range?: number[];
+        /**
+             * Start angle in radians
+             */ startAngle?: number;
+        /**
+             * End angle in radians
+             */ endAngle?: number;
+        /**
+             * Define innerRadius.
+             *   value >= 1: discrete value
+             *   value >  0: percent of `outerRadius`
+             *   value <  0: offset of `outerRadius`
+             *   default: yRange min
+             */ innerRadius?: any;
+        /**
+             * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+             */ outerRadius?: any;
+        cornerRadius?: number;
+        padAngle?: number;
+        color?: string | ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => string);
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        /**
+             * Offset all arcs from center
+             */ offset?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            arcs: import("d3-shape").PieArcDatum<number | {
+                valueOf(): number;
+            }>[];
+        };
+    };
+};
+export declare type PieProps = typeof __propDef.props;
+export declare type PieEvents = typeof __propDef.events;
+export declare type PieSlots = typeof __propDef.slots;
+export default class Pie extends SvelteComponentTyped<PieProps, PieEvents, PieSlots> {
+}
+export {};

package/components/Text.svelte

@@ -2,6 +2,9 @@
 /*
 TODO:
   - [ ] Handle styled text (use <slot /> to measure?)
+        - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
+          - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
+            - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
 
 Reference:
 - https://bl.ocks.org/mbostock/7555321

package/docs/Header1.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { SectionDivider } from 'svelte-ux';
+</script>
+
+<!--
+  TODO:
+    - [ ] Set id based on slot value
+      - Needed for #examples, #api, etc
+      - Maybe possible to set/get props from markdown/mdsvex
+        - Example: `#API { id: 'api' }
+-->
+<SectionDivider {...$$restProps}>
+	<slot />
+</SectionDivider>

package/docs/Header1.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  Header1Props */
+/** @typedef {typeof __propDef.events}  Header1Events */
+/** @typedef {typeof __propDef.slots}  Header1Slots */
+export default class Header1 extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type Header1Props = typeof __propDef.props;
+export type Header1Events = typeof __propDef.events;
+export type Header1Slots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/docs/Layout.svelte

@@ -2,19 +2,53 @@
 	// Custom components: https://mdsvex.com/docs#custom-components
 	import blockquote from './Blockquote.svelte';
 	import a from './Link.svelte';
+	import h1 from './Header1.svelte';
 
-	export { a, blockquote };
+	// Used by injected info via svelte preprocessor
+	import { mdiCodeTags, mdiFileDocumentEditOutline } from '@mdi/js';
+	import { Button, Tooltip } from 'svelte-ux';
+
+	export { a, blockquote, h1 };
 </script>
 
 <script>
-	import { AppBar } from 'svelte-ux';
-
 	// frontmatter: https://mdsvex.com/docs#frontmatter-1
-	export let title;
+	export let component;
+	export let filename;
+	export let description;
 </script>
 
-<AppBar {title} />
+{#if component}
+	<div class="flex items-center gap-2">
+		<span class="text-2xl font-bold">{component}</span>
+		{#if component}
+			<Tooltip title="View source">
+				<Button
+					class="text-black/50"
+					icon={mdiCodeTags}
+					href="https://github.com/techniq/svelte-ux/blob/master/src/lib/components/{component}.svelte"
+					target="_blank"
+				/>
+			</Tooltip>
+		{/if}
+
+		{#if filename}
+			<Tooltip title="Edit this page">
+				<Button
+					class="text-black/50"
+					icon={mdiFileDocumentEditOutline}
+					href="https://github.com/techniq/svelte-ux/blob/master/{filename}"
+					target="_blank"
+				/>
+			</Tooltip>
+		{/if}
+	</div>
+{/if}
+
+{#if description}
+	{description}
+{/if}
+
+<slot name="toc" />
 
-<main class="p-2">
-	<slot />
-</main>
+<slot />

package/docs/Layout.svelte.d.ts

@@ -2,10 +2,13 @@
 /** @typedef {typeof __propDef.events}  LayoutEvents */
 /** @typedef {typeof __propDef.slots}  LayoutSlots */
 export default class Layout extends SvelteComponentTyped<{
-    title: any;
+    component: any;
+    filename: any;
+    description: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
+    toc: {};
     default: {};
 }> {
 }
@@ -14,16 +17,20 @@ export type LayoutEvents = typeof __propDef.events;
 export type LayoutSlots = typeof __propDef.slots;
 import a from "./Link.svelte";
 import blockquote from "./Blockquote.svelte";
+import h1 from "./Header1.svelte";
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title: any;
+        component: any;
+        filename: any;
+        description: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        toc: {};
         default: {};
     };
 };
-export { a, blockquote };
+export { a, blockquote, h1 };

package/docs/Preview.svelte

@@ -12,12 +12,8 @@ $: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svel
 	</div>
 
 	{#if displayCode}
-		<pre
-			class="language-{language} rounded"
-			style="margin: 0">
-		<code class="language-{language}">
-			{@html displayCode}
-		</code>
-	</pre>
+		<pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
+			<code class="language-{language}">{@html displayCode}</code>
+		</pre>
 	{/if}
 </div>

package/package.json

@@ -3,40 +3,42 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.0.8",
+  "version": "0.2.0",
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.21",
-    "@sveltejs/kit": "^1.0.0-next.201",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
+    "@sveltejs/kit": "^1.0.0-next.303",
+    "@tailwindcss/typography": "^0.5.2",
     "@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.5.0",
-    "prettier-plugin-svelte": "^2.5.0",
+    "@types/lodash-es": "^4.17.6",
+    "autoprefixer": "^10.4.4",
+    "mdsvex": "^0.10.5",
+    "prettier": "^2.6.1",
+    "prettier-plugin-svelte": "^2.6.0",
     "prism-themes": "^1.9.0",
-    "svelte": "^3.44.2",
-    "svelte-check": "^2.2.10",
-    "svelte-preprocess": "^4.9.4",
-    "svelte2tsx": "^0.4.10",
-    "tailwindcss": "^2.2.19",
+    "svelte": "^3.46.6",
+    "svelte-check": "^2.4.6",
+    "svelte-preprocess": "^4.10.4",
+    "svelte2tsx": "^0.5.6",
+    "tailwindcss": "^3.0.23",
     "tailwindcss-elevation": "^1.0.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.2",
-    "unist-util-visit": "^4.1.0"
+    "typescript": "^4.6.3",
+    "unist-util-visit": "^4.1.0",
+    "vite-plugin-sveld": "^1.0.3"
   },
   "type": "module",
   "dependencies": {
-    "@mdi/js": "^6.5.95",
+    "@mdi/js": "^6.6.96",
     "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.1",
+    "d3-shape": "^3.1.0",
+    "date-fns": "^2.28.0",
+    "layercake": "^6.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.0.105"
+    "svelte-ux": "^0.3.2"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -57,6 +59,8 @@
     "./components/Line.svelte": "./components/Line.svelte",
     "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
     "./components/Path.svelte": "./components/Path.svelte",
+    "./components/Pattern.svelte": "./components/Pattern.svelte",
+    "./components/Pie.svelte": "./components/Pie.svelte",
     "./components/Points.svelte": "./components/Points.svelte",
     "./components/Rect.svelte": "./components/Rect.svelte",
     "./components/Text.svelte": "./components/Text.svelte",
@@ -65,6 +69,7 @@
     "./components": "./components/index.js",
     "./docs/Blockquote.svelte": "./docs/Blockquote.svelte",
     "./docs/Code.svelte": "./docs/Code.svelte",
+    "./docs/Header1.svelte": "./docs/Header1.svelte",
     "./docs/Layout.svelte": "./docs/Layout.svelte",
     "./docs/Link.svelte": "./docs/Link.svelte",
     "./docs/Preview.svelte": "./docs/Preview.svelte",