layerchart 0.16.0 → 0.17.0

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

@@ -6,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/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
  */

package/package.json

@@ -1,92 +1,92 @@
 {
-	"name": "layerchart",
-	"author": "Sean Lynch <techniq35@gmail.com>",
-	"license": "MIT",
-	"repository": "techniq/layerchart",
-	"version": "0.16.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"package": "svelte-package",
-		"prepublishOnly": "svelte-package",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
-	},
-	"devDependencies": {
-		"@rollup/plugin-dsv": "^3.0.2",
-		"@sveltejs/adapter-vercel": "^3.0.1",
-		"@sveltejs/kit": "^1.20.2",
-		"@sveltejs/package": "^2.0.2",
-		"@tailwindcss/typography": "^0.5.9",
-		"@types/d3-array": "^3.0.5",
-		"@types/d3-delaunay": "^6.0.1",
-		"@types/d3-dsv": "^3.0.1",
-		"@types/d3-geo": "^3.0.3",
-		"@types/d3-hierarchy": "^3.1.2",
-		"@types/d3-interpolate": "^3.0.1",
-		"@types/d3-quadtree": "^3.0.2",
-		"@types/d3-random": "^3.0.1",
-		"@types/d3-sankey": "^0.12.1",
-		"@types/d3-scale": "^4.0.3",
-		"@types/d3-shape": "^3.1.1",
-		"@types/lodash-es": "^4.17.7",
-		"@types/shapefile": "^0.6.1",
-		"@types/topojson-client": "^3.1.1",
-		"autoprefixer": "^10.4.14",
-		"mdsvex": "^0.10.6",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1",
-		"prism-themes": "^1.9.0",
-		"rehype-slug": "^5.1.0",
-		"svelte-check": "^3.4.3",
-		"svelte-preprocess": "^5.0.4",
-		"svelte2tsx": "^0.6.15",
-		"tailwindcss": "^3.3.2",
-		"tslib": "^2.5.3",
-		"typescript": "^5.1.3",
-		"unist-util-visit": "^4.1.2",
-		"us-atlas": "^3.0.1",
-		"vite": "^4.3.9",
-		"vite-plugin-sveld": "^1.1.0"
-	},
-	"type": "module",
-	"dependencies": {
-		"@mdi/js": "^7.2.96",
-		"@vercel/analytics": "^1.0.1",
-		"d3-array": "^3.2.4",
-		"d3-delaunay": "^6.0.4",
-		"d3-dsv": "^3.0.1",
-		"d3-geo": "^3.1.0",
-		"d3-hierarchy": "^3.1.2",
-		"d3-interpolate": "^3.0.1",
-		"d3-interpolate-path": "^2.3.0",
-		"d3-quadtree": "^3.0.1",
-		"d3-random": "^3.0.1",
-		"d3-sankey": "^0.12.3",
-		"d3-scale": "^4.0.2",
-		"d3-scale-chromatic": "^3.0.0",
-		"d3-shape": "^3.2.0",
-		"d3-tile": "^1.0.0",
-		"date-fns": "^2.30.0",
-		"layercake": "^7.4.0",
-		"lodash-es": "^4.17.21",
-		"shapefile": "^0.6.6",
-		"svelte": "^3.59.1",
-		"svelte-ux": "^0.40.2",
-		"topojson-client": "^3.1.0"
-	},
-	"main": "./dist/index.js",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist"
-	],
-	"svelte": "./dist/index.js"
+  "name": "layerchart",
+  "author": "Sean Lynch <techniq35@gmail.com>",
+  "license": "MIT",
+  "repository": "techniq/layerchart",
+  "version": "0.17.0",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "package": "svelte-package",
+    "prepublishOnly": "svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
+    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+  },
+  "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@sveltejs/adapter-vercel": "^3.0.1",
+    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/package": "^2.0.2",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/d3-array": "^3.0.5",
+    "@types/d3-delaunay": "^6.0.1",
+    "@types/d3-dsv": "^3.0.1",
+    "@types/d3-geo": "^3.0.3",
+    "@types/d3-hierarchy": "^3.1.2",
+    "@types/d3-interpolate": "^3.0.1",
+    "@types/d3-quadtree": "^3.0.2",
+    "@types/d3-random": "^3.0.1",
+    "@types/d3-sankey": "^0.12.1",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-shape": "^3.1.1",
+    "@types/lodash-es": "^4.17.7",
+    "@types/shapefile": "^0.6.1",
+    "@types/topojson-client": "^3.1.1",
+    "autoprefixer": "^10.4.14",
+    "mdsvex": "^0.10.6",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
+    "prism-themes": "^1.9.0",
+    "rehype-slug": "^5.1.0",
+    "svelte-check": "^3.4.4",
+    "svelte-preprocess": "^5.0.4",
+    "svelte2tsx": "^0.6.16",
+    "tailwindcss": "^3.3.2",
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3",
+    "unist-util-visit": "^4.1.2",
+    "us-atlas": "^3.0.1",
+    "vite": "^4.3.9",
+    "vite-plugin-sveld": "^1.1.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@mdi/js": "^7.2.96",
+    "@vercel/analytics": "^1.0.1",
+    "d3-array": "^3.2.4",
+    "d3-delaunay": "^6.0.4",
+    "d3-dsv": "^3.0.1",
+    "d3-geo": "^3.1.0",
+    "d3-hierarchy": "^3.1.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-interpolate-path": "^2.3.0",
+    "d3-quadtree": "^3.0.1",
+    "d3-random": "^3.0.1",
+    "d3-sankey": "^0.12.3",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-tile": "^1.0.0",
+    "date-fns": "^2.30.0",
+    "layercake": "^7.4.0",
+    "lodash-es": "^4.17.21",
+    "shapefile": "^0.6.6",
+    "svelte": "^3.59.1",
+    "svelte-ux": "^0.42.0",
+    "topojson-client": "^3.1.0"
+  },
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "svelte": "./dist/index.js"
 }

package/dist/components/AxisX.svelte

@@ -1,43 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { format } from 'svelte-ux';
-import { max } from 'd3-array';
-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;
-export let labelProps = undefined;
-$: 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)},{max($yRange)})">
-			{#if gridlines !== false}
-				<line y1={$height * -1} y2="0" x1="0" x2="0" class="stroke-gray-200" {...gridlines} />
-			{/if}
-			<Text
-				x={xTick || isBand ? $xScale.bandwidth() / 2 : 0}
-				y={yTick}
-				dx={dxTick}
-				dy={dyTick}
-				rotate={315}
-				textAnchor="end"
-				verticalAnchor="middle"
-				class="text-[10px] stroke-white [stroke-width:2px] font-light"
-				value={format(tick, formatTick ?? $xScale.tickFormat?.())}
-				{...labelProps}
-			/>
-		</g>
-	{/each}
-</g>

package/dist/components/AxisX.svelte.d.ts

@@ -1,38 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from 'svelte-ux';
-declare const __propDef: {
-    props: {
-        gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
-        formatTick?: FormatType;
-        ticks?: undefined;
-        xTick?: undefined;
-        yTick?: number | undefined;
-        dxTick?: number | undefined;
-        dyTick?: number | undefined;
-        labelProps?: {
-            [x: string]: any;
-            value?: string | number | undefined;
-            width?: number | undefined;
-            x?: string | number | undefined;
-            y?: string | number | undefined;
-            dx?: string | number | undefined;
-            dy?: string | number | undefined;
-            lineHeight?: string | undefined;
-            capHeight?: string | undefined;
-            scaleToFit?: boolean | undefined;
-            textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
-            verticalAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
-            rotate?: number | undefined;
-        } | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AxisXProps = typeof __propDef.props;
-export type AxisXEvents = typeof __propDef.events;
-export type AxisXSlots = typeof __propDef.slots;
-export default class AxisX extends SvelteComponentTyped<AxisXProps, AxisXEvents, AxisXSlots> {
-}
-export {};