layerchart 0.13.4 → 0.14.0

package/{components → dist/components}/AxisX.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
-        formatTick?: FormatType;
+        formatTick?: any;
         ticks?: undefined;
         xTick?: undefined;
         yTick?: number | undefined;

package/{components → dist/components}/AxisY.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
         ticks?: number | Function | undefined;
-        formatTick?: FormatType;
+        formatTick?: any;
         xTick?: number | undefined;
         yTick?: number | undefined;
         dxTick?: number | undefined;

package/dist/components/Blur.svelte

@@ -0,0 +1,16 @@
+<script>import { uniqueId } from 'svelte-ux/utils/string';
+export let id = uniqueId('blur-');
+export let stdDeviation = 5;
+</script>
+
+<defs>
+	<filter {id}>
+		<feGaussianBlur in="SourceGraphic" {stdDeviation} />
+	</filter>
+</defs>
+
+{#if $$slots.default}
+	<g filter="url(#{id})">
+		<slot {id} />
+	</g>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        stdDeviation?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            id: string;
+        };
+    };
+};
+export type BlurProps = typeof __propDef.props;
+export type BlurEvents = typeof __propDef.events;
+export type BlurSlots = typeof __propDef.slots;
+export default class Blur extends SvelteComponentTyped<BlurProps, BlurEvents, BlurSlots> {
+}
+export {};

package/{components → dist/components}/Chart.svelte

@@ -2,15 +2,18 @@
 // export { Svg, Html };
 // TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
 // See: https://github.com/carbon-design-system/sveld/issues/104
-import { LayerCake, Svg as _Svg, Html as _Html } from 'layercake';
+import { LayerCake, Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL } from 'layercake';
 export const Svg = _Svg;
 export const Html = _Html;
+export const Canvas = _Canvas;
+export const WebGL = _WebGL;
 </script>
 
 <script>import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
 import { isScaleBand } from '../utils/scales';
 import TooltipContext from './TooltipContext.svelte';
+import GeoContext from './GeoContext.svelte';
 /**
  *  Resolve a value from data based on the accessor type
  */
@@ -57,6 +60,7 @@ $: if (yBaseline != null) {
  */
 $: yReverse = yScale ? !isScaleBand(yScale) : true;
 export let tooltip = undefined;
+export let geo = undefined;
 </script>
 
 <LayerCake
@@ -75,11 +79,30 @@ export let tooltip = undefined;
 	let:width
 	let:element
 >
-	{#if tooltip}
-		<TooltipContext {...tooltip} let:tooltip>
-			<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} {tooltip} />
-		</TooltipContext>
-	{:else}
-		<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} />
-	{/if}
+	<GeoContext {...geo} let:projection>
+		{#if tooltip}
+			<TooltipContext {...tooltip} let:tooltip>
+				<slot
+					{aspectRatio}
+					{containerHeight}
+					{containerWidth}
+					{height}
+					{width}
+					{element}
+					{projection}
+					{tooltip}
+				/>
+			</TooltipContext>
+		{:else}
+			<slot
+				{aspectRatio}
+				{containerHeight}
+				{containerWidth}
+				{height}
+				{width}
+				{element}
+				{projection}
+			/>
+		{/if}
+	</GeoContext>
 </LayerCake>

package/{components → dist/components}/Chart.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import { Svg as _Svg, Html as _Html } from 'layercake';
+import { Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL } from 'layercake';
 export declare const Svg: typeof _Svg;
 export declare const Html: typeof _Html;
+export declare const Canvas: typeof _Canvas;
+export declare const WebGL: typeof _WebGL;
 import type { ComponentProps } from 'svelte';
 import TooltipContext from './TooltipContext.svelte';
+import GeoContext from './GeoContext.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -14,6 +17,7 @@ declare const __propDef: {
         xBaseline?: number | null | undefined;
         yBaseline?: number | null | undefined;
         tooltip?: ComponentProps<TooltipContext> | undefined;
+        geo?: ComponentProps<GeoContext> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,6 +30,7 @@ declare const __propDef: {
             height: number;
             width: number;
             element: Element;
+            projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
         };
     };
 };

package/{components → dist/components}/ChartClipPath.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         click: MouseEvent;

package/dist/components/ClipPathUse.svelte

@@ -0,0 +1,17 @@
+<script>import { uniqueId } from 'svelte-ux/utils/string';
+import ClipPath from './ClipPath.svelte';
+/** Id of path or shape */
+export let refId;
+/** Unique id for clipPath */
+export let clipPathId = uniqueId('clipPath-');
+</script>
+
+<ClipPath id={clipPathId}>
+	<use href="#{refId}" />
+</ClipPath>
+
+{#if $$slots.default}
+	<g style="clip-path: url(#{clipPathId})" on:click on:mousemove on:mouseleave on:keydown>
+		<slot {refId} {clipPathId} />
+	</g>
+{/if}

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Id of path or shape */ refId: string;
+        /** Unique id for clipPath */ clipPathId?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            refId: string;
+            clipPathId: string;
+        };
+    };
+};
+export type ClipPathUseProps = typeof __propDef.props;
+export type ClipPathUseEvents = typeof __propDef.events;
+export type ClipPathUseSlots = typeof __propDef.slots;
+export default class ClipPathUse extends SvelteComponentTyped<ClipPathUseProps, ClipPathUseEvents, ClipPathUseSlots> {
+}
+export {};

package/dist/components/ColorRamp.svelte

@@ -0,0 +1,19 @@
+<script>export let interpolator;
+export let steps = 10;
+export let height = '20px';
+export let width = '100%';
+let href = '';
+$: {
+    const canvas = document.createElement('canvas');
+    canvas.width = steps;
+    canvas.height = 1;
+    const context = canvas.getContext('2d');
+    for (let i = 0; i < steps; ++i) {
+        context.fillStyle = interpolator(i / (steps - 1));
+        context.fillRect(i, 0, 1, 1);
+    }
+    href = canvas.toDataURL();
+}
+</script>
+
+<image {href} preserveAspectRatio="none" style:height style:width {...$$restProps} />

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        interpolator: (t: number) => string;
+        steps?: number | undefined;
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorRampProps = typeof __propDef.props;
+export type ColorRampEvents = typeof __propDef.events;
+export type ColorRampSlots = typeof __propDef.slots;
+export default class ColorRamp extends SvelteComponentTyped<ColorRampProps, ColorRampEvents, ColorRampSlots> {
+}
+export {};

package/dist/components/GeoContext.svelte

@@ -0,0 +1,55 @@
+<script context="module">import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { geoMercator } from 'd3-geo';
+export const geoContextKey = {};
+export function geoContext() {
+    return getContext(geoContextKey);
+}
+function setGeoContext(geo) {
+    setContext(geoContextKey, geo);
+}
+</script>
+
+<script>const { width, height } = getContext('LayerCake');
+/** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
+export let projection = geoMercator;
+export let fitGeojson;
+/** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
+export let fixedAspectRatio = undefined;
+export let clipAngle = undefined;
+export let clipExtent = undefined;
+export let rotate = undefined;
+export let scale = undefined;
+export let translate = undefined;
+export let center = undefined;
+const geo = writable(projection());
+setGeoContext(geo);
+$: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
+$: {
+    const _projection = projection();
+    if (fitGeojson && 'fitSize' in _projection) {
+        _projection.fitSize(fitSizeRange, fitGeojson);
+    }
+    if (scale && 'scale' in _projection) {
+        _projection.scale(scale);
+    }
+    if (rotate && 'rotate' in _projection) {
+        _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
+    }
+    if (translate && 'translate' in _projection) {
+        _projection.translate(translate);
+    }
+    if (center && 'center' in _projection) {
+        _projection.center(center);
+    }
+    if (clipAngle && 'clipAngle' in _projection) {
+        _projection.clipAngle(clipAngle);
+    }
+    if (clipExtent && 'clipExtent' in _projection) {
+        _projection.clipExtent(clipExtent);
+    }
+    geo.set(_projection);
+}
+</script>
+
+<slot projection={$geo} />

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

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
+export declare const geoContextKey: {};
+export type GeoContext = Writable<GeoProjection | GeoIdentityTransform>;
+export declare function geoContext(): GeoContext;
+declare const __propDef: {
+    props: {
+        /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection | GeoIdentityTransform) | undefined;
+        fitGeojson: GeoPermissibleObjects;
+        /** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */ fixedAspectRatio?: number | undefined;
+        clipAngle?: number | undefined;
+        clipExtent?: [[number, number], [number, number]] | undefined;
+        rotate?: {
+            /** Lambda (Center Meridian) */
+            yaw: number;
+            /** Phi */
+            pitch: number;
+            /** Gamma */
+            roll: number;
+        } | undefined;
+        scale?: number | undefined;
+        translate?: [number, number] | undefined;
+        center?: [number, number] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            projection: GeoProjection | GeoIdentityTransform;
+        };
+    };
+};
+export type GeoContextProps = typeof __propDef.props;
+export type GeoContextEvents = typeof __propDef.events;
+export type GeoContextSlots = typeof __propDef.slots;
+export default class GeoContext extends SvelteComponentTyped<GeoContextProps, GeoContextEvents, GeoContextSlots> {
+}
+export {};

package/dist/components/GeoPath.svelte

@@ -0,0 +1,56 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { geoPath as d3geoPath } from 'd3-geo';
+import { geoContext } from './GeoContext.svelte';
+import { scaleCanvas } from 'layercake';
+export let geojson;
+export let fill = undefined;
+export let fillScale = undefined;
+export let stroke = undefined;
+export let strokeWidth = undefined;
+/** Render to canvas */
+export let render = undefined;
+/**
+ * Tooltip context to setup mouse events to show tooltip for related data
+ */
+export let tooltip = undefined;
+const dispatch = createEventDispatcher();
+const { rGet, width, height } = getContext('LayerCake');
+const canvas = getContext('canvas');
+const geo = geoContext();
+$: geoPath = d3geoPath($geo);
+$: renderContext = canvas ? 'canvas' : 'svg';
+$: ctx = canvas?.ctx;
+$: if (renderContext === 'canvas' && $ctx) {
+    // console.count('render');
+    scaleCanvas($ctx, $width, $height);
+    $ctx.clearRect(0, 0, $width, $height);
+    if (render) {
+        render($ctx, { geoPath });
+    }
+    else {
+        $ctx.beginPath();
+        // Set the context here since setting it in `$: geoPath` is a circular reference
+        geoPath.context($ctx);
+        geoPath(geojson);
+        $ctx.fillStyle = fill || (fillScale && $rGet(fillScale)) || 'transparent';
+        $ctx.fill();
+        $ctx.lineWidth = strokeWidth;
+        $ctx.strokeStyle = stroke;
+        $ctx.stroke();
+    }
+}
+</script>
+
+{#if renderContext === 'svg'}
+	<slot {geoPath}>
+		<path
+			d={geoPath(geojson)}
+			fill={fill || (fillScale && $rGet(fillScale)) || 'transparent'}
+			stroke={stroke || 'black'}
+			on:mousemove={(e) => tooltip?.show(e, geojson)}
+			on:mouseleave={(e) => tooltip?.hide()}
+			on:click={(event) => dispatch('click', { geoPath, event })}
+			{...$$restProps}
+		/>
+	</slot>
+{/if}

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

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import { type GeoPath, type GeoPermissibleObjects } from 'd3-geo';
+import type { TooltipContextValue } from './TooltipContext.svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        geojson: GeoPermissibleObjects;
+        fill?: string | undefined;
+        fillScale?: Object | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | string | undefined;
+        render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }: {
+            geoPath: any;
+        }) => any) | undefined;
+        tooltip?: TooltipContextValue | undefined;
+    };
+    events: {
+        click: CustomEvent<{
+            geoPath: GeoPath;
+            event: MouseEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            geoPath: GeoPath<any, GeoPermissibleObjects>;
+        };
+    };
+};
+export type GeoPathProps = typeof __propDef.props;
+export type GeoPathEvents = typeof __propDef.events;
+export type GeoPathSlots = typeof __propDef.slots;
+export default class GeoPath extends SvelteComponentTyped<GeoPathProps, GeoPathEvents, GeoPathSlots> {
+}
+export {};

package/dist/components/GeoPoint.svelte

@@ -0,0 +1,28 @@
+<script>import { getContext } from 'svelte';
+import { scaleCanvas } from 'layercake';
+import { geoContext } from './GeoContext.svelte';
+/** Latitude */
+export let lat;
+/** Longitude */
+export let long;
+/** Render to canvas */
+export let render = () => { };
+const { width, height } = getContext('LayerCake');
+const canvas = getContext('canvas');
+const geo = geoContext();
+$: [x, y] = $geo([long, lat]) ?? [0, 0];
+$: renderContext = canvas ? 'canvas' : 'svg';
+$: ctx = canvas?.ctx;
+$: if (renderContext === 'canvas' && $ctx) {
+    // console.count('render');
+    scaleCanvas($ctx, $width, $height);
+    $ctx.clearRect(0, 0, $width, $height);
+    render($ctx, { x, y });
+}
+</script>
+
+{#if renderContext === 'svg'}
+	<g transform="translate({x},{y})">
+		<slot />
+	</g>
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Latitude */ lat: number;
+        /** Longitude */ long: number;
+        /** Render to canvas */ render?: ((ctx: CanvasRenderingContext2D, coords: {
+            x: number;
+            y: number;
+        }) => any) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GeoPointProps = typeof __propDef.props;
+export type GeoPointEvents = typeof __propDef.events;
+export type GeoPointSlots = typeof __propDef.slots;
+export default class GeoPoint extends SvelteComponentTyped<GeoPointProps, GeoPointEvents, GeoPointSlots> {
+}
+export {};

package/dist/components/GeoTile.svelte

@@ -0,0 +1,47 @@
+<script>import { getContext } from 'svelte';
+import { scaleCanvas } from 'layercake';
+import { tile as d3Tile } from 'd3-tile';
+import { geoContext } from './GeoContext.svelte';
+import TileImage from './TileImage.svelte';
+export let url;
+export let zoomDelta = 0;
+export let tileSize = 256;
+export let disableCache = false;
+export let debug = false;
+const { width, height } = getContext('LayerCake');
+const canvas = getContext('canvas');
+const geo = geoContext();
+$: tile = d3Tile()
+    .size([$width, $height])
+    .scale($geo.scale() * 2 * Math.PI)
+    .translate($geo([0, 0]))
+    .tileSize(tileSize)
+    .zoomDelta(zoomDelta);
+$: tiles = tile();
+$: ({
+    translate: [tx, ty],
+    scale: k
+} = tiles);
+$: renderContext = canvas ? 'canvas' : 'svg';
+$: ctx = canvas?.ctx;
+$: if (renderContext === 'canvas' && $ctx && url) {
+    // console.count('render');
+    scaleCanvas($ctx, $width, $height);
+    $ctx.clearRect(0, 0, $width, $height);
+    tiles.forEach(([x, y, z]) => {
+        const image = new Image();
+        image.onload = () => {
+            $ctx.drawImage(image, (x + tx) * k, (y + ty) * k, k, k);
+        };
+        image.src = url(x, y, z);
+    });
+}
+</script>
+
+{#if renderContext === 'svg' && url}
+	<slot {tiles}>
+		{#each tiles as [x, y, z] (url(x, y, z))}
+			<TileImage {url} {x} {y} {z} {tx} {ty} {k} {disableCache} {debug} />
+		{/each}
+	</slot>
+{/if}

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        url: (x: number, y: number, z: number) => string;
+        zoomDelta?: number | undefined;
+        tileSize?: number | undefined;
+        disableCache?: boolean | undefined;
+        debug?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            tiles: any;
+        };
+    };
+};
+export type GeoTileProps = typeof __propDef.props;
+export type GeoTileEvents = typeof __propDef.events;
+export type GeoTileSlots = typeof __propDef.slots;
+export default class GeoTile extends SvelteComponentTyped<GeoTileProps, GeoTileEvents, GeoTileSlots> {
+}
+export {};

package/dist/components/Graticule.svelte

@@ -0,0 +1,26 @@
+<script>import { geoGraticule } from 'd3-geo';
+import GeoPath from './GeoPath.svelte';
+// TODO: Support full api (stepMinor/Major, extent[Minor/Major], etc
+export let lines = undefined;
+export let outline = undefined;
+export let step = [10, 10];
+$: graticule = geoGraticule();
+$: graticule.step(step);
+</script>
+
+<g class="graticule">
+	<!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
+	{#if !lines && !outline}
+		<GeoPath geojson={graticule()} {...$$restProps} />
+	{/if}
+
+	{#if lines}
+		{#each graticule.lines() as line}
+			<GeoPath geojson={line} {...lines} />
+		{/each}
+	{/if}
+
+	{#if outline}
+		<GeoPath geojson={graticule.outline()} {...outline} />
+	{/if}
+</g>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from 'svelte';
+import GeoPath from './GeoPath.svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        lines?: Omit<ComponentProps<GeoPath>, 'geojson'> | boolean | undefined;
+        outline?: Omit<ComponentProps<GeoPath>, 'geojson'> | boolean | undefined;
+        step?: [number, number] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GraticuleProps = typeof __propDef.props;
+export type GraticuleEvents = typeof __propDef.events;
+export type GraticuleSlots = typeof __propDef.slots;
+export default class Graticule extends SvelteComponentTyped<GraticuleProps, GraticuleEvents, GraticuleSlots> {
+}
+export {};

package/{components → dist/components}/Labels.svelte.d.ts

@@ -1,13 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FormatNumberStyle } from 'svelte-ux/utils/number';
-import { type FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        orientation?: "outside" | "inside" | "auto" | undefined;
+        orientation?: "auto" | "outside" | "inside" | undefined;
         significantDigits?: number | undefined;
-        format?: FormatType;
-        formatStyle?: FormatNumberStyle;
+        format?: any;
+        formatStyle?: any;
         overlap?: boolean | undefined;
         groupBy?: string | undefined;
     };