layerchart 0.13.3 → 0.14.0

package/{components → dist/components}/index.d.ts

@@ -5,13 +5,21 @@ export { default as AxisX } from './AxisX.svelte';
 export { default as AxisY } from './AxisY.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
+export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
+export { default as ClipPathUse } from './ClipPathUse.svelte';
+export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
+export { default as GeoContext } from './GeoContext.svelte';
+export { default as GeoPath } from './GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoTile } from './GeoTile.svelte';
+export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
 export { default as HighlightLine } from './HighlightLine.svelte';
 export { default as HighlightRect } from './HighlightRect.svelte';
@@ -31,6 +39,7 @@ export { default as RectClipPath } from './RectClipPath.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
+export { default as TileImage } from './TileImage.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';

package/{components → dist/components}/index.js

@@ -5,13 +5,21 @@ export { default as AxisX } from './AxisX.svelte';
 export { default as AxisY } from './AxisY.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Baseline } from './Baseline.svelte';
+export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
+export { default as ClipPathUse } from './ClipPathUse.svelte';
+export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
+export { default as GeoContext } from './GeoContext.svelte';
+export { default as GeoPath } from './GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoTile } from './GeoTile.svelte';
+export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
 export { default as HighlightLine } from './HighlightLine.svelte';
 export { default as HighlightRect } from './HighlightRect.svelte';
@@ -31,6 +39,7 @@ export { default as RectClipPath } from './RectClipPath.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
+export { default as TileImage } from './TileImage.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';

package/dist/docs/GeoDebug.svelte

@@ -0,0 +1,43 @@
+<script>import { getContext } from 'svelte';
+import { format, Checkbox } from 'svelte-ux';
+import { cls } from 'svelte-ux/utils/styles';
+import { geoContext } from '../components/GeoContext.svelte';
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+let showCenter = false;
+</script>
+
+<div class={cls('bg-black/5 rounded m-1 backdrop-blur p-2', $$props.class)}>
+	<div class="grid gap-2 ml-2 text-xs">
+		<div><span class="text-black/50">scale:</span> {format.format($geo.scale(), 'decimal')}</div>
+
+		<div>
+			<span class="text-black/50">translate:</span>
+			{#each $geo.translate() as coord}
+				<div class="ml-2">{format.format(coord, 'decimal')}</div>
+			{/each}
+		</div>
+
+		<div>
+			<span class="text-black/50">rotate:</span>
+			{#each $geo.rotate() as angle}
+				<div class="ml-2">{format.format(angle, 'decimal')}</div>
+			{/each}
+		</div>
+
+		<div><span class="text-black/50">center:</span> {$geo.center?.()}</div>
+
+		<div>
+			<span class="text-black/50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
+			{#each $geo.invert?.([$width / 2, $height / 2]) as coord}
+				<div class="ml-2">{format.format(coord, 'decimal')}</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+{#if showCenter}
+	<div
+		class="absolute w-2 h-2 bg-red-500/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+	/>
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GeoDebugProps = typeof __propDef.props;
+export type GeoDebugEvents = typeof __propDef.events;
+export type GeoDebugSlots = typeof __propDef.slots;
+export default class GeoDebug extends SvelteComponentTyped<GeoDebugProps, GeoDebugEvents, GeoDebugSlots> {
+}
+export {};

package/{docs → dist/docs}/Header1.svelte.d.ts

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

package/{docs → dist/docs}/Layout.svelte.d.ts

@@ -16,9 +16,9 @@ export default class Layout extends SvelteComponentTyped<{
 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 h1 from "./Header1.svelte";
+import a from './Link.svelte';
+import blockquote from './Blockquote.svelte';
+import h1 from './Header1.svelte';
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {

package/{docs → dist/docs}/Link.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  LinkEvents */
 /** @typedef {typeof __propDef.slots}  LinkSlots */
 export default class Link extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type LinkSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{docs → dist/docs}/Preview.svelte

@@ -27,7 +27,6 @@ export let showCode = false;
 			<div class="absolute top-0 right-0 p-2">
 				<Button
 					icon={mdiContentCopy}
-					small
 					class=" text-white/70 hover:bg-white/20 py-1"
 					on:click={() => navigator.clipboard.writeText(code)}
 				>
@@ -39,12 +38,7 @@ export let showCode = false;
 </div>
 
 {#if code}
-	<Button
-		icon={mdiCodeTags}
-		small
-		class=" text-black/70 py-1"
-		on:click={() => (showCode = !showCode)}
-	>
+	<Button icon={mdiCodeTags} class=" text-black/70 py-1" on:click={() => (showCode = !showCode)}>
 		{showCode ? 'Hide' : 'Show'} Code
 	</Button>
 {/if}

package/dist/docs/RangeField.svelte

@@ -0,0 +1,18 @@
+<script>import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+import { Button, Field } from 'svelte-ux';
+export let value;
+export let min = 0;
+export let max = 100;
+export let step = 1;
+</script>
+
+<Field let:id {...$$restProps}>
+	<Button icon={mdiChevronLeft} on:click={() => (value -= value > min ? step : 0)} class="mr-2" />
+	<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" />
+</Field>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: number;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RangeFieldProps = typeof __propDef.props;
+export type RangeFieldEvents = typeof __propDef.events;
+export type RangeFieldSlots = typeof __propDef.slots;
+export default class RangeField extends SvelteComponentTyped<RangeFieldProps, RangeFieldEvents, RangeFieldSlots> {
+}
+export {};

package/dist/docs/TilesetField.svelte

@@ -0,0 +1,93 @@
+<script>import { Field, Switch } from 'svelte-ux';
+export let doubleScale = devicePixelRatio > 1;
+// TODO: Access via context, or possibly global state
+const ACCESS_TOKEN = 'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
+// https://docs.mapbox.com/api/maps/styles/
+$: mapboxv1 = (style) => (x, y, z) => {
+    return `https://api.mapbox.com/styles/v1/mapbox/${style}/tiles/${z}/${x}/${y}${doubleScale ? '@2x' : ''}?access_token=${ACCESS_TOKEN}`;
+};
+// https://docs.mapbox.com/api/maps/raster-tiles/
+// https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/
+$: mapboxv4 = (tileset) => (x, y, z) => {
+    return `https://${'abc'[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/${tileset}/${z}/${x}/${y}${doubleScale ? '@2x' : ''}.png?access_token=${ACCESS_TOKEN}`;
+};
+// https://apps.nationalmap.gov/services/
+const nationalmap = (tileset) => (x, y, z) => {
+    return `https://basemap.nationalmap.gov/arcgis/rest/services/${tileset}/MapServer/tile/${z}/${y}/${x}`;
+};
+// https://services.arcgisonline.com/arcgis/rest/services
+// https://www.arcgis.com/home/webmap/viewer.html?useExisting=1
+// https://www.arcgis.com/apps/mapviewer/index.html
+const arcgis = (tileset) => (x, y, z) => {
+    return `https://services.arcgisonline.com/ArcGIS/rest/services/${tileset}/MapServer/tile/${z}/${y}/${x}`;
+};
+const arcgisVector = (tileset) => (x, y, z) => {
+    return `https://basemaps.arcgis.com/arcgis/rest/services/${tileset}/VectorTileServer/tile/${z}/${y}/${x}.pbf`;
+    // https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/12/1572/1108.pbf
+};
+$: serviceOptions = {
+    'mapbox v1': {
+        'streets-v11': mapboxv1('streets-v11'),
+        'light-v10': mapboxv1('light-v10'),
+        'dark-v10': mapboxv1('dark-v10'),
+        'outdoors-v12': mapboxv1('outdoors-v12'),
+        'satelllite-v9': mapboxv1('satellite-v9'),
+        'satelllite-streets-v12': mapboxv1('satellite-streets-v12'),
+        'navigation-day-v1': mapboxv1('navigation-day-v1'),
+        'navigation-night-v1': mapboxv1('navigation-night-v1')
+    },
+    'mapbox v4': {
+        'natural-earth-2': mapboxv4('mapbox.natural-earth-2'),
+        satellite: mapboxv4('mapbox.satellite'),
+        streets: mapboxv4('mapbox.mapbox-streets-v8'),
+        terrain: mapboxv4('mapbox.mapbox-terrain-v2'),
+        'terrain-dem': mapboxv4('mapbox.mapbox-terrain-dem-v1'),
+        traffic: mapboxv4('mapbox.mapbox-traffic-v1')
+        // 'transit (mapbox v4)': mapboxv4('mapbox.transit-v2'),
+    },
+    'National Map Services': {
+        Hydrography: nationalmap('USGSHydroCached'),
+        'USGS Imagery Topo Base Map': nationalmap('USGSImageryTopo'),
+        'USGS Imagery Only Base Map': nationalmap('USGSImageryOnly'),
+        'USGS Shaded Relief': nationalmap('USGSShadedReliefOnly'),
+        'USGS Topo Base Map': nationalmap('USGSTopo')
+    },
+    ArcGIS: {
+        'USA Topo Map': arcgis('USA_Topo_Maps'),
+        'National Geographic World Map': arcgis('NatGeo_World_Map'),
+        'World Imagery': arcgis('World_Imagery'),
+        'World Physicial Map': arcgis('World_Physical_Map'),
+        'World Shaded Relief': arcgis('World_Shaded_Relief'),
+        'World Street Map': arcgis('World_Street_Map'),
+        'World Terrain Base': arcgis('World_Terrain_Base'),
+        'World Topo Map': arcgis('World_Topo_Map')
+    }
+    // 'ArcGIS Vector': {
+    // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
+    // }
+};
+$: defaultServiceUrl = serviceOptions['mapbox v1']['streets-v11'];
+export let serviceUrl = defaultServiceUrl;
+$: getServiceUrl = (option) => {
+    const [selectedService, selectedTileset] = selected.split(':');
+    return serviceOptions[selectedService][selectedTileset];
+};
+let selected = 'mapbox v1:streets-v11';
+$: 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>
+</Field>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        doubleScale?: boolean | undefined;
+        serviceUrl?: ((x: number, y: number, z: number) => string) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TilesetFieldProps = typeof __propDef.props;
+export type TilesetFieldEvents = typeof __propDef.events;
+export type TilesetFieldSlots = typeof __propDef.slots;
+export default class TilesetField extends SvelteComponentTyped<TilesetFieldProps, TilesetFieldEvents, TilesetFieldSlots> {
+}
+export {};

package/dist/docs/ZoomControls.svelte

@@ -0,0 +1,50 @@
+<script>import { Button, Tooltip } from 'svelte-ux';
+import { cls } from 'svelte-ux/utils/styles';
+import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus } from '@mdi/js';
+export let zoom;
+export let placement = 'top-right';
+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]
+	)}
+>
+	<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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ZoomControlsProps = typeof __propDef.props;
+export type ZoomControlsEvents = typeof __propDef.events;
+export type ZoomControlsSlots = typeof __propDef.slots;
+export default class ZoomControls extends SvelteComponentTyped<ZoomControlsProps, ZoomControlsEvents, ZoomControlsSlots> {
+}
+export {};

package/{utils → dist/utils}/event.js

@@ -1,4 +1,4 @@
-import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux/types/typeGuards';
+import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux';
 // See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
 // TODO: Matches event.layerX/Y, but are deprecated (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/layerX).
 //       Similar and could be replaced by event.offsetX/Y (but not identical)

package/{utils → dist/utils}/ticks.d.ts

@@ -1,3 +1,3 @@
-export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;
-export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
-export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;
+export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null | undefined;
+export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): any;
+export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null | undefined;