layerchart 0.15.6 → 0.17.0

package/dist/docs/Header1.svelte.d.ts

@@ -1,17 +1,3 @@
-/** @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: {
@@ -24,4 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type Header1Props = typeof __propDef.props;
+export type Header1Events = typeof __propDef.events;
+export type Header1Slots = typeof __propDef.slots;
+export default class Header1 extends SvelteComponentTyped<Header1Props, Header1Events, Header1Slots> {
+}
 export {};

package/dist/docs/Layout.svelte

@@ -1,18 +1,18 @@
 <script context="module">
-	// Custom components: https://mdsvex.com/docs#custom-components
-	import blockquote from './Blockquote.svelte';
-	import a from './Link.svelte';
-	import h1 from './Header1.svelte';
+  // 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 };
+  export { a, blockquote };
 </script>
 
-<script>
-	// frontmatter: https://mdsvex.com/docs#frontmatter-1
-	// export let name = undefined;
-	// export let sourceUrl = undefined;
-	// export let docUrl = undefined;
-	// export let description = undefined;
+<script>"use strict";
+// frontmatter: https://mdsvex.com/docs#frontmatter-1
+// export let name = undefined;
+// export let sourceUrl = undefined;
+// export let docUrl = undefined;
+// export let description = undefined;
 </script>
 
 <slot />

package/dist/docs/Layout.svelte.d.ts

@@ -1,24 +1,9 @@
-/** @typedef {typeof __propDef.props}  LayoutProps */
-/** @typedef {typeof __propDef.events}  LayoutEvents */
-/** @typedef {typeof __propDef.slots}  LayoutSlots */
-export default class Layout extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type LayoutProps = typeof __propDef.props;
-export type LayoutEvents = typeof __propDef.events;
-export type LayoutSlots = typeof __propDef.slots;
-import a from './Link.svelte';
-import blockquote from './Blockquote.svelte';
 import { SvelteComponentTyped } from "svelte";
+import blockquote from './Blockquote.svelte';
+import a from './Link.svelte';
+export { a, blockquote };
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -26,4 +11,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export { a, blockquote };
+export type LayoutProps = typeof __propDef.props;
+export type LayoutEvents = typeof __propDef.events;
+export type LayoutSlots = typeof __propDef.slots;
+export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
+}

package/dist/docs/Link.svelte

@@ -1,5 +1,5 @@
-<script>
-  // console.log($$props, $$slots);
+<script>"use strict";
+// console.log($$props, $$slots);
 </script>
 
 <a class="text-blue-500 font-medium" {...$$restProps}>

package/dist/docs/Link.svelte.d.ts

@@ -1,17 +1,3 @@
-/** @typedef {typeof __propDef.props}  LinkProps */
-/** @typedef {typeof __propDef.events}  LinkEvents */
-/** @typedef {typeof __propDef.slots}  LinkSlots */
-export default class Link extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -24,4 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+}
 export {};

package/dist/docs/Preview.svelte

@@ -4,42 +4,42 @@ import 'prism-svelte';
 import { mdiCodeTags, mdiContentCopy } from '@mdi/js';
 import { slide } from 'svelte/transition';
 import { Button } from 'svelte-ux';
-export let code = null;
+export let code = undefined;
 export let language = 'svelte';
 export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
 export let showCode = false;
 </script>
 
 <div class="border border-black/20 rounded bg-white">
-	<div class="p-4">
-		<slot />
-	</div>
+  <div class="p-4">
+    <slot />
+  </div>
 
-	{#if code && showCode}
-		<div class="relative">
-			<pre
-				class="language-{language} rounded"
-				style="margin: 0; white-space: normal;"
-				transition:slide|local>
+  {#if code && showCode}
+    <div class="relative">
+      <pre
+        class="language-{language} rounded"
+        style="margin: 0; white-space: normal;"
+        transition:slide|local>
           <code class="language-{language}">{@html highlightedCode}</code>
       </pre>
 
-			<div class="absolute top-0 right-0 p-2">
-				<Button
-					icon={mdiContentCopy}
-					class=" text-white/70 hover:bg-white/20 py-1"
-					size="sm"
-					on:click={() => navigator.clipboard.writeText(code)}
-				>
-					Copy
-				</Button>
-			</div>
-		</div>
-	{/if}
+      <div class="absolute top-0 right-0 p-2">
+        <Button
+          icon={mdiContentCopy}
+          class=" text-white/70 hover:bg-white/20 py-1"
+          size="sm"
+          on:click={() => navigator.clipboard.writeText(code)}
+        >
+          Copy
+        </Button>
+      </div>
+    </div>
+  {/if}
 </div>
 
 {#if code}
-	<Button icon={mdiCodeTags} class=" text-black/70 py-1" on:click={() => (showCode = !showCode)}>
-		{showCode ? 'Hide' : 'Show'} Code
-	</Button>
+  <Button icon={mdiCodeTags} class=" text-black/70 py-1" on:click={() => (showCode = !showCode)}>
+    {showCode ? 'Hide' : 'Show'} Code
+  </Button>
 {/if}

package/dist/docs/Preview.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import 'prism-svelte';
 declare const __propDef: {
     props: {
-        code?: null | undefined;
+        code?: string | undefined;
         language?: string | undefined;
         highlightedCode?: any;
         showCode?: boolean | undefined;

package/dist/docs/RangeField.svelte

@@ -7,22 +7,22 @@ export let step = 1;
 </script>
 
 <Field let:id {...$$restProps}>
-	<Button
-		icon={mdiChevronLeft}
-		on:click={() => (value -= value > min ? step : 0)}
-		class="mr-2"
-		size="sm"
-	/>
-	<input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
-	<span class="ml-2 text-sm text-black/50 tabular-nums text-right inline-grid">
-		<span class="col-span-full row-span-full invisible">{min}</span>
-		<span class="col-span-full row-span-full">{value}</span>
-		<span class="col-span-full row-span-full invisible">{max}</span>
-	</span>
-	<Button
-		icon={mdiChevronRight}
-		on:click={() => (value += value < max ? step : 0)}
-		class="ml-2"
-		size="sm"
-	/>
+  <Button
+    icon={mdiChevronLeft}
+    on:click={() => (value -= value > min ? step : 0)}
+    class="mr-2"
+    size="sm"
+  />
+  <input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
+  <span class="ml-2 text-sm text-black/50 tabular-nums text-right inline-grid">
+    <span class="col-span-full row-span-full invisible">{min}</span>
+    <span class="col-span-full row-span-full">{value}</span>
+    <span class="col-span-full row-span-full invisible">{max}</span>
+  </span>
+  <Button
+    icon={mdiChevronRight}
+    on:click={() => (value += value < max ? step : 0)}
+    class="ml-2"
+    size="sm"
+  />
 </Field>

package/dist/docs/TilesetField.svelte

@@ -77,17 +77,17 @@ $: serviceUrl = getServiceUrl(selected);
 </script>
 
 <Field label="Tileset" let:id>
-	<select bind:value={selected} class="w-full outline-none appearance-none text-sm" {id}>
-		{#each Object.entries(serviceOptions) as [group, options]}
-			<optgroup label={group}>
-				{#each Object.keys(options) as option}
-					<option value="{group}:{option}">{option}</option>
-				{/each}
-			</optgroup>
-		{/each}
-	</select>
-	<div slot="append">
-		<div class="text-[10px] text-black/50 text-center">2x</div>
-		<Switch bind:checked={doubleScale} size="md" />
-	</div>
+  <select bind:value={selected} class="w-full outline-none appearance-none text-sm" {id}>
+    {#each Object.entries(serviceOptions) as [group, options]}
+      <optgroup label={group}>
+        {#each Object.keys(options) as option}
+          <option value="{group}:{option}">{option}</option>
+        {/each}
+      </optgroup>
+    {/each}
+  </select>
+  <div slot="append">
+    <div class="text-[10px] text-black/50 text-center">2x</div>
+    <Switch bind:checked={doubleScale} size="md" />
+  </div>
 </Field>

package/dist/docs/ViewSourceButton.svelte

@@ -0,0 +1,42 @@
+<script>import { mdiGithub } from '@mdi/js';
+import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
+import Code from './Code.svelte';
+export let label;
+export let source;
+export let href;
+export let icon;
+</script>
+
+{#if source}
+  <Toggle let:on={open} let:toggle>
+    <Button {icon} on:click={toggle} variant="fill-light" color="blue" size="sm">{label}</Button>
+    <Dialog {open} on:close={toggle}>
+      <div class="grid grid-cols-[1fr,auto] gap-1 items-center p-4">
+        <div>
+          <div class="text-lg font-semibold">{label}</div>
+          <div class="text-xs text-black/50">{href}</div>
+        </div>
+
+        {#if href}
+          <Button icon={mdiGithub} variant="fill-light" color="accent" {href} target="_blank">
+            Edit on Github
+          </Button>
+        {/if}
+      </div>
+
+      <div class="max-h-[80vh] w-[70vw] overflow-auto">
+        <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
+      </div>
+
+      <div slot="actions">
+        <Button variant="fill" color="blue">Close</Button>
+      </div>
+    </Dialog>
+  </Toggle>
+{:else if href}
+  <Tooltip title="Edit this page">
+    <Button {icon} {href} target="_blank" variant="fill-light" color="blue" size="sm">
+      {label}
+    </Button>
+  </Tooltip>
+{/if}

package/dist/docs/ViewSourceButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        source: string;
+        href: string;
+        icon: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ViewSourceButtonProps = typeof __propDef.props;
+export type ViewSourceButtonEvents = typeof __propDef.events;
+export type ViewSourceButtonSlots = typeof __propDef.slots;
+export default class ViewSourceButton extends SvelteComponentTyped<ViewSourceButtonProps, ViewSourceButtonEvents, ViewSourceButtonSlots> {
+}
+export {};

package/dist/docs/ZoomControls.svelte

@@ -1,5 +1,4 @@
-<script>import { Button, Tooltip } from 'svelte-ux';
-import { cls } from 'svelte-ux/utils/styles';
+<script>import { Button, Tooltip, cls } from 'svelte-ux';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus } from '@mdi/js';
 export let zoom;
 export let placement = 'top-right';
@@ -7,44 +6,44 @@ export let orientation = 'vertical';
 </script>
 
 <div
-	class={cls(
-		'bg-black/5 rounded-full m-1 backdrop-blur z-10 flex',
-		orientation === 'vertical' && 'flex-col',
-		{
-			'top-left': 'absolute top-0 left-0',
-			top: 'absolute top-0 left-1/2 -translate-x-1/2',
-			'top-right': 'absolute top-0 right-0',
-			left: 'absolute top-1/2 left-0 -translate-y-1/2',
-			center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-			right: 'absolute top-1/2 right-0 -translate-y-1/2',
-			'bottom-left': 'absolute bottom-0 left-0',
-			bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-			'bottom-right': 'absolute bottom-0 right-0'
-		}[placement]
-	)}
+  class={cls(
+    'bg-black/5 rounded-full m-1 backdrop-blur z-10 flex',
+    orientation === 'vertical' && 'flex-col',
+    {
+      'top-left': 'absolute top-0 left-0',
+      top: 'absolute top-0 left-1/2 -translate-x-1/2',
+      'top-right': 'absolute top-0 right-0',
+      left: 'absolute top-1/2 left-0 -translate-y-1/2',
+      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
+      right: 'absolute top-1/2 right-0 -translate-y-1/2',
+      'bottom-left': 'absolute bottom-0 left-0',
+      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
+      'bottom-right': 'absolute bottom-0 right-0'
+    }[placement]
+  )}
 >
-	<Tooltip title="Zoom in">
-		<Button
-			icon={mdiMagnifyPlusOutline}
-			on:click={() => zoom.increase()}
-			class="text-black/50 p-2"
-		/>
-	</Tooltip>
-	<Tooltip title="Zoom out">
-		<Button
-			icon={mdiMagnifyMinusOutline}
-			on:click={() => zoom.decrease()}
-			class="text-black/50 p-2"
-		/>
-	</Tooltip>
-	<Tooltip title="Center">
-		<Button
-			icon={mdiImageFilterCenterFocus}
-			on:click={() => zoom.translateCenter()}
-			class="text-black/50 p-2"
-		/>
-	</Tooltip>
-	<Tooltip title="Reset">
-		<Button icon={mdiArrowULeftTop} on:click={() => zoom.reset()} class="text-black/50 p-2" />
-	</Tooltip>
+  <Tooltip title="Zoom in">
+    <Button
+      icon={mdiMagnifyPlusOutline}
+      on:click={() => zoom.increase()}
+      class="text-black/50 p-2"
+    />
+  </Tooltip>
+  <Tooltip title="Zoom out">
+    <Button
+      icon={mdiMagnifyMinusOutline}
+      on:click={() => zoom.decrease()}
+      class="text-black/50 p-2"
+    />
+  </Tooltip>
+  <Tooltip title="Center">
+    <Button
+      icon={mdiImageFilterCenterFocus}
+      on:click={() => zoom.translateCenter()}
+      class="text-black/50 p-2"
+    />
+  </Tooltip>
+  <Tooltip title="Reset">
+    <Button icon={mdiArrowULeftTop} on:click={() => zoom.reset()} class="text-black/50 p-2" />
+  </Tooltip>
 </div>

package/dist/docs/ZoomControls.svelte.d.ts

@@ -3,8 +3,8 @@ import type Zoom from '../components/Zoom.svelte';
 declare const __propDef: {
     props: {
         zoom: Zoom;
-        placement?: ("left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom" | "bottom-right") | undefined;
-        orientation?: "vertical" | "horizontal" | undefined;
+        placement?: ("top" | "bottom" | "left" | "right" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/utils/genData.d.ts

@@ -12,8 +12,8 @@ export declare function createDateSeries(options: {
     count?: number;
     min: number;
     max: number;
-    keys: Array<string>;
-    value: 'number' | 'integer';
+    keys?: Array<string>;
+    value?: 'number' | 'integer';
 }): {
     date: Date;
 }[];

package/dist/utils/quadtree.d.ts

@@ -1,4 +1,12 @@
+import type { Quadtree } from 'd3-quadtree';
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 /**
- * Transverse guadtree and generate rect dimensions
+ * Transverse quadtree and generate rect dimensions
  */
-export declare function quadtreeRects(quadtree: any, showLeaves?: boolean): any[];
+export declare function quadtreeRects<T>(quadtree: Quadtree<T>, showLeaves?: boolean): Rect[];
+export {};

package/dist/utils/quadtree.js

@@ -1,5 +1,5 @@
 /**
- * Transverse guadtree and generate rect dimensions
+ * Transverse quadtree and generate rect dimensions
  */
 export function quadtreeRects(quadtree, showLeaves = true) {
     const rects = [];

package/dist/utils/rect.d.ts

@@ -0,0 +1,19 @@
+type DimensionGetterOptions = {
+    /** Override `x` accessor from context */
+    x?: (item: any) => any;
+    /** Override `y` accessor from context */
+    y?: (item: any) => any;
+    groupBy?: string;
+    padding?: number;
+    groupPadding?: {
+        inner?: number;
+        outer?: number;
+    };
+};
+export declare function createDimensionGetter(context: any, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
+    x: any;
+    y: any;
+    width: number;
+    height: number;
+}>;
+export {};

package/dist/utils/rect.js

@@ -0,0 +1,97 @@
+import { derived } from 'svelte/store';
+import { max, min } from 'd3-array';
+import { groupScaleBand, isScaleBand } from './scales';
+// TOOD: Pass in overrides for `x` and `y` accessors
+export function createDimensionGetter(context, options) {
+    const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor } = context;
+    const groupBy = options?.groupBy;
+    const padding = options?.padding ?? 0;
+    return derived([flatData, xGet, yGet, xRange, yRange, xScale, yScale, xAccessor, yAccessor], ([$flatData, $xGet, $yGet, $xRange, $yRange, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+        return function getter(item) {
+            if (isScaleBand($yScale)) {
+                // Horizontal band
+                const y1Scale = groupBy
+                    ? groupScaleBand($yScale, $flatData, groupBy, options?.groupPadding)
+                    : null;
+                const y = $yGet(item) + (y1Scale ? y1Scale(item[groupBy]) : 0) + padding / 2;
+                const height = Math.max(0, $yScale.bandwidth ? (y1Scale ? y1Scale.bandwidth() : $yScale.bandwidth()) - padding : 0);
+                const _x = options?.x
+                    ? typeof options.x === 'string'
+                        ? (d) => d[options.x]
+                        : options?.x
+                    : $xAccessor;
+                const xValue = _x(item);
+                let left = 0;
+                let right = 0;
+                if (Array.isArray(xValue)) {
+                    // Array contains both top and bottom values (stack, etc);
+                    left = min(xValue);
+                    right = max(xValue);
+                }
+                else if (xValue == null) {
+                    // null/undefined value
+                    left = 0;
+                    right = 0;
+                }
+                else if (xValue > 0) {
+                    // Positive value
+                    left = min($xRange); // or `0`?
+                    right = xValue;
+                }
+                else {
+                    // Negative value
+                    left = xValue;
+                    right = min($xRange); // or `0`?
+                }
+                return {
+                    x: $xScale(left),
+                    y,
+                    width: $xScale(right) - $xScale(left),
+                    height
+                };
+            }
+            else {
+                // Vertical band or linear
+                const x1Scale = groupBy
+                    ? groupScaleBand($xScale, $flatData, groupBy, options?.groupPadding)
+                    : null;
+                const x = $xGet(item) + (x1Scale ? x1Scale(item[groupBy]) : 0) + padding / 2;
+                const width = Math.max(0, $xScale.bandwidth ? (x1Scale ? x1Scale.bandwidth() : $xScale.bandwidth()) - padding : 0);
+                const _y = options?.y
+                    ? typeof options.y === 'string'
+                        ? (d) => d[options.y]
+                        : options?.y
+                    : $yAccessor;
+                const yValue = _y(item);
+                let top = 0;
+                let bottom = 0;
+                if (Array.isArray(yValue)) {
+                    // Array contains both top and bottom values (stack, etc);
+                    top = max(yValue);
+                    bottom = min(yValue);
+                }
+                else if (yValue == null) {
+                    // null/undefined value
+                    top = 0;
+                    bottom = 0;
+                }
+                else if (yValue > 0) {
+                    // Positive value
+                    top = yValue;
+                    bottom = min($yRange); // or `0`?
+                }
+                else {
+                    // Negative value
+                    top = min($yRange); // or `0`?
+                    bottom = yValue;
+                }
+                return {
+                    x,
+                    y: $yScale(top),
+                    width,
+                    height: $yScale(bottom) - $yScale(top)
+                };
+            }
+        };
+    });
+}

package/dist/utils/scales.d.ts

@@ -1,5 +1,6 @@
 import { tweened, spring } from 'svelte/motion';
 import { type MotionOptions } from '../stores/motionStore';
+import { type ScaleBand } from 'd3-scale';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -17,6 +18,13 @@ export declare function isScaleBand(scale: any): boolean;
  *  Useful to map mouse event location (x,y) to domain value
  */
 export declare function scaleInvert(scale: any, value: number): any;
+/** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
+export declare function groupScaleBand<Domain extends {
+    toString(): string;
+}>(scale: ScaleBand<Domain>, flatData: any[], groupBy: string, padding?: {
+    inner?: number;
+    outer?: number;
+}): ScaleBand<string>;
 /**
  * Animate d3-scale as domain and/or range are updated using tweened store
  */

package/dist/utils/scales.js

@@ -1,6 +1,8 @@
 import { derived } from 'svelte/store';
 import { tweened, spring } from 'svelte/motion';
 import { motionStore } from '../stores/motionStore';
+import { scaleBand } from 'd3-scale';
+import { unique } from 'svelte-ux/utils/array';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
@@ -36,6 +38,21 @@ export function scaleInvert(scale, value) {
         return scale.invert(value);
     }
 }
+/** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
+export function groupScaleBand(scale, flatData, groupBy, padding) {
+    //
+    const groupKeys = unique(flatData.map((d) => d[groupBy]));
+    let newScale = scaleBand().domain(groupKeys).range([0, scale.bandwidth()]);
+    if (padding) {
+        if (padding.inner) {
+            newScale = newScale.paddingInner(padding.inner);
+        }
+        if (padding.outer) {
+            newScale = newScale.paddingOuter(padding.outer);
+        }
+    }
+    return newScale;
+}
 /**
  * Animate d3-scale as domain and/or range are updated using tweened store
  */