layerchart 0.18.1 → 0.19.0

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { tweened as tweenedStore } from 'svelte/motion';
+import { type Area } from 'd3-shape';
 import type { CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: {
@@ -12,7 +13,7 @@ declare const __propDef: {
         clipPath?: string | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         curve?: CurveFactory | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: Parameters<Area<any>['defined']>[0] | undefined;
         color?: string | undefined;
         opacity?: number | undefined;
         line?: boolean | any;

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

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import type { tweened as tweenedStore } from 'svelte/motion';
 import type { CurveFactory } from 'd3-shape';
+import Path from './Path.svelte';
 declare const __propDef: {
     props: {
         curve?: CurveFactory | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: ComponentProps<Path>['defined'] | undefined;
         opacity?: number | undefined;
         line?: boolean | any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
     };
     events: {
-        click: MouseEvent;
+        click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/CircleClipPath.svelte

@@ -11,11 +11,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Circle {cx} {cy} {r} {spring} {tweened} />
+  <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} />
+  <slot {id} />
 </ClipPath>
-
-{#if $$slots.default}
-  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-    <slot {id} />
-  </g>
-{/if}

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

@@ -10,10 +10,6 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/ClipPath.svelte

@@ -1,10 +1,22 @@
 <script>import { uniqueId } from 'svelte-ux';
 /** Unique id for clipPath */
 export let id = uniqueId('clipPath-');
+/** Use existing path or shape (by id) for clipPath */
+export let useId = undefined;
 </script>
 
 <defs>
   <clipPath {id} {...$$restProps}>
-    <slot {id} />
+    <slot name="clip" {id} />
+
+    {#if useId}
+      <use href="#{useId}" />
+    {/if}
   </clipPath>
 </defs>
+
+{#if $$slots.default}
+  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+    <slot {id} {useId} />
+  </g>
+{/if}

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

@@ -3,13 +3,23 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string | undefined;
+        useId?: string | undefined;
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        clip: {
+            id: string;
+        };
         default: {
             id: string;
+            useId: string | undefined;
         };
     };
 };

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { tweened as tweenedStore } from 'svelte/motion';
-import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -10,7 +10,7 @@ declare const __propDef: {
         pathData?: string | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: Parameters<Line<any>['defined']>[0] | undefined;
         color?: string | undefined;
         width?: undefined;
     };

package/dist/components/Point.svelte

@@ -0,0 +1,10 @@
+<script>import { getContext } from 'svelte';
+const context = getContext('LayerCake');
+const { xGet, yGet } = context;
+/** Single data point to translate to x/y */
+export let d;
+$: x = $xGet(d);
+$: y = $yGet(d);
+</script>
+
+<slot {x} {y} />

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Single data point to translate to x/y */ d: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            x: any;
+            y: any;
+        };
+    };
+};
+export type PointProps = typeof __propDef.props;
+export type PointEvents = typeof __propDef.events;
+export type PointSlots = typeof __propDef.slots;
+export default class Point extends SvelteComponentTyped<PointProps, PointEvents, PointSlots> {
+}
+export {};

package/dist/components/RectClipPath.svelte

@@ -12,12 +12,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Rect {x} {y} {width} {height} {spring} {tweened} />
+  <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} />
+  <slot {id} />
 </ClipPath>
-
-{#if $$slots.default}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-    <slot {id} />
-  </g>
-{/if}

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

@@ -11,10 +11,6 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/Tooltip.svelte

@@ -9,6 +9,7 @@ export let leftOffset = 10;
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
 export let header = undefined;
+export let classes = {};
 const { containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
@@ -37,7 +38,7 @@ $: if ($tooltip) {
 
 {#if $tooltip.data}
   <div
-    class={cls('absolute pointer-events-none z-50', $$props.class)}
+    class={cls('absolute pointer-events-none z-50', classes.root)}
     style:top="{$top}px"
     style:left="{$left}px"
     transition:fade={{ duration: 100 }}
@@ -45,18 +46,27 @@ $: if ($tooltip) {
     bind:clientHeight={tooltipHeight}
   >
     <div
-      class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1 h-full"
+      class={cls(
+        'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1 h-full',
+        classes.container,
+        $$props.class
+      )}
     >
       {#if header || $$slots.header}
-        <div class="text-center font-semibold whitespace-nowrap">
+        <div class={cls('text-center font-semibold whitespace-nowrap', classes.header)}>
           <slot name="header" data={$tooltip.data}>
-            {header($tooltip.data)}
+            {header?.($tooltip.data)}
           </slot>
         </div>
       {/if}
 
       {#if $$slots.default}
-        <div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1">
+        <div
+          class={cls(
+            'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
+            classes.content
+          )}
+        >
           <slot data={$tooltip.data} />
         </div>
       {/if}

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

@@ -7,6 +7,12 @@ declare const __propDef: {
         contained?: false | "container" | undefined;
         animate?: boolean | undefined;
         header?: ((data: any) => any) | undefined;
+        classes?: {
+            root?: string | undefined;
+            container?: string | undefined;
+            header?: string | undefined;
+            content?: string | undefined;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TooltipItem.svelte

@@ -1,11 +1,13 @@
 <script>import { cls, format as formatUtil } from 'svelte-ux';
 export let label;
-export let value = undefined; // Can be pass as slot
+/** Value to be formatted and displayed.  Can also be passed as default slot */
+export let value = undefined;
 export let format = undefined;
 export let valueAlign = 'left';
+export let classes = {};
 </script>
 
-<div class="text-xs text-white/75 text-right whitespace-nowrap">
+<div class={cls('text-xs text-white/75 text-right whitespace-nowrap', classes.label)}>
   <slot name="label">{label}:</slot>
 </div>
 
@@ -16,6 +18,7 @@ export let valueAlign = 'left';
       'text-right': valueAlign === 'right',
       'text-center': valueAlign === 'center'
     },
+    classes.value,
     $$props.class
   )}
 >

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

@@ -7,6 +7,10 @@ declare const __propDef: {
         value?: any;
         format?: FormatType;
         valueAlign?: "left" | "right" | "center" | undefined;
+        classes?: {
+            label?: string | undefined;
+            value?: string | undefined;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TooltipSeparator.svelte

@@ -1 +1,4 @@
-<div class="rounded bg-white/50 my-1 col-span-full h-px" />
+<script>import { cls } from 'svelte-ux';
+</script>
+
+<div class={cls('rounded bg-white/50 my-1 col-span-full h-px', $$props.class)} />

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

@@ -1,23 +1,16 @@
-/** @typedef {typeof __propDef.props}  TooltipSeparatorProps */
-/** @typedef {typeof __propDef.events}  TooltipSeparatorEvents */
-/** @typedef {typeof __propDef.slots}  TooltipSeparatorSlots */
-export default class TooltipSeparator extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TooltipSeparatorProps = typeof __propDef.props;
-export type TooltipSeparatorEvents = typeof __propDef.events;
-export type TooltipSeparatorSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type TooltipSeparatorProps = typeof __propDef.props;
+export type TooltipSeparatorEvents = typeof __propDef.events;
+export type TooltipSeparatorSlots = typeof __propDef.slots;
+export default class TooltipSeparator extends SvelteComponentTyped<TooltipSeparatorProps, TooltipSeparatorEvents, TooltipSeparatorSlots> {
+}
 export {};

package/dist/components/index.d.ts

@@ -10,7 +10,6 @@ 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 Frame } from './Frame.svelte';
@@ -32,6 +31,7 @@ export { default as Partition } from './Partition.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';

package/dist/components/index.js

@@ -10,7 +10,6 @@ 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 Frame } from './Frame.svelte';
@@ -32,6 +31,7 @@ export { default as Partition } from './Partition.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -36,9 +36,11 @@
     "@types/d3-scale": "^4.0.3",
     "@types/d3-shape": "^3.1.1",
     "@types/lodash-es": "^4.17.7",
+    "@types/marked": "^5.0.0",
     "@types/shapefile": "^0.6.1",
     "@types/topojson-client": "^3.1.1",
     "autoprefixer": "^10.4.14",
+    "marked": "^5.1.0",
     "mdsvex": "^0.11.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",

package/dist/components/ClipPathUse.svelte

@@ -1,17 +0,0 @@
-<script>import { uniqueId } from 'svelte-ux';
-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

@@ -1,27 +0,0 @@
-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 {};