layerchart 0.25.1 → 0.26.0

package/README.md

@@ -1,11 +1,11 @@
 # LayerChart
 
-![](https://img.shields.io/github/license/techniq/svelte-ux?style=flat)
+![](https://img.shields.io/github/license/techniq/layerchart?style=flat)
 [![](https://img.shields.io/npm/v/layerchart?style=flat)](https://www.npmjs.com/package/layerchart)
 ![npm](https://img.shields.io/npm/dw/layerchart?style=flat&color=orange)
 
 ![](https://img.shields.io/github/license/layerchart?style=flat)
-[![](https://dcbadge.vercel.app/api/server/b94Kmm88?style=flat)](https://discord.gg/b94Kmm88)
+[![](https://dcbadge.vercel.app/api/server/697JhMPD3t?style=flat)](https://discord.gg/697JhMPD3t)
 
 A large collection of composable Svelte chart components to build a wide range of visualizations
 

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
         /** Length of the tick line */ tickSize?: number | undefined;
-        format?: FormatType;
+        format?: FormatType | undefined;
         labelProps?: ComponentProps<Text> | undefined;
     };
     events: {

package/dist/components/Bars.svelte

@@ -23,7 +23,7 @@ export let groupPaddingOuter = 0;
 </script>
 
 <g class="Bars">
-  <slot name="bars">
+  <slot>
     {#each $data as item}
       <Bar
         bar={item}

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

@@ -19,7 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        bars: {};
+        default: {};
     };
 };
 export type BarsProps = typeof __propDef.props;

package/dist/components/Chart.svelte

@@ -83,6 +83,8 @@ export let geo = undefined;
   let:zScale
   let:rScale
   let:padding
+  let:data
+  let:flatData
 >
   <GeoContext {...geo} let:projection>
     {#if tooltip}
@@ -101,6 +103,8 @@ export let geo = undefined;
           {zScale}
           {rScale}
           {padding}
+          {data}
+          {flatData}
         />
       </TooltipContext>
     {:else}
@@ -117,6 +121,8 @@ export let geo = undefined;
         {zScale}
         {rScale}
         {padding}
+        {data}
+        {flatData}
       />
     {/if}
   </GeoContext>

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

@@ -46,6 +46,8 @@ declare const __propDef: {
                 bottom?: number | undefined;
                 left?: number | undefined;
             };
+            data: Object | any[];
+            flatData: any[];
         };
     };
 };

package/dist/components/Labels.svelte

@@ -5,7 +5,6 @@
  */
 import { getContext } from 'svelte';
 import { format as formatValue } from 'svelte-ux';
-import { formatNumberAsStyle } from 'svelte-ux/utils/number';
 import { greatestAbs } from 'svelte-ux/utils/array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
@@ -14,7 +13,6 @@ const { flatData, yScale, x, y, custom } = getContext('LayerCake');
 // export let orientation: 'outside' | 'inside' | 'auto' = 'auto';
 export let significantDigits = 3;
 export let format = undefined;
-export let formatStyle = null;
 // export let overlap = false;
 $: yBaseline = $custom?.yBaseline ?? 0;
 export let groupBy = undefined;
@@ -43,10 +41,6 @@ $: getFormattedValue = (item) => {
             // Apply more versatile formatting first
             formattedValue = formatValue(labelValue, format ?? $yScale.tickFormat?.());
         }
-        else {
-            // Deprecated format
-            formattedValue = formatNumberAsStyle(labelValue, formatStyle, 0, significantDigits);
-        }
     }
     return formattedValue ?? '';
 };

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

@@ -4,8 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         significantDigits?: number | undefined;
-        format?: FormatType;
-        formatStyle?: any;
+        format?: FormatType | undefined;
         groupBy?: string | undefined;
         groupPaddingInner?: number | undefined;
         groupPaddingOuter?: number | undefined;

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         width?: number | undefined;
         height?: number | undefined;
         ticks?: number | undefined;
-        tickFormat?: FormatType;
+        tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickSize?: number | undefined;

package/dist/components/Tooltip.svelte

@@ -4,56 +4,105 @@ import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
 import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
-/** Use fixed `top` position instead of calculating based on data and mouse position */
-export let top = undefined;
-/** Use fixed `left` position instead of calculating based on data and mouse position */
-export let left = undefined;
-export let topOffset = top ? 0 : 10;
-export let leftOffset = left ? 0 : 10;
+/** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
+export let x = 'pointer';
+/** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
+export let y = 'pointer';
+/** Offset added to `x` position */
+export let xOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
+/** Offset added to `y` position */
+export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
+export let anchor = 'top-left';
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
 export let variant = 'dark';
 export let header = undefined;
 export let classes = {};
-const { containerWidth, containerHeight } = getContext('LayerCake');
+const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
-let topPos = animate ? spring($tooltip.top) : writable($tooltip.top);
-$: if ($tooltip) {
-    if (top != null) {
-        $topPos = top;
-    }
-    else if (contained === 'container' &&
-        $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
-        // Change side.  Do not allow tooltip to go above the top
-        $topPos = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
-    }
-    else {
-        $topPos = $tooltip.top + topOffset;
-    }
+const xPos = animate ? spring($tooltip.x) : writable($tooltip.x);
+const yPos = animate ? spring($tooltip.y) : writable($tooltip.y);
+function alignValue(value, align, tooltipSize) {
+    const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
+    return value + (align === 'end' ? -yOffset : yOffset) - alignOffset;
 }
-let leftPos = animate ? spring($tooltip.left) : writable($tooltip.left);
-$: if ($tooltip) {
-    if (left != null) {
-        $leftPos = left;
+$: if ($tooltip?.data) {
+    const xValue = typeof x === 'number' ? x : x === 'data' ? $xGet($tooltip.data) + $padding.left : $tooltip.x;
+    let xAlign = 'start';
+    switch (anchor) {
+        case 'top-left':
+        case 'left':
+        case 'bottom-left':
+            xAlign = 'start';
+            break;
+        case 'top':
+        case 'center':
+        case 'bottom':
+            xAlign = 'center';
+            break;
+        case 'top-right':
+        case 'right':
+        case 'bottom-right':
+            xAlign = 'end';
+            break;
     }
-    else if (contained === 'container' &&
-        $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
-        // Change side
-        $leftPos = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
+    const yValue = typeof y === 'number' ? y : y === 'data' ? $yGet($tooltip.data) + $padding.top : $tooltip.y;
+    let yAlign = 'start';
+    switch (anchor) {
+        case 'top-left':
+        case 'top':
+        case 'top-right':
+            yAlign = 'start';
+            break;
+        case 'left':
+        case 'center':
+        case 'right':
+            yAlign = 'center';
+            break;
+        case 'bottom-left':
+        case 'bottom':
+        case 'bottom-right':
+            yAlign = 'end';
+            break;
     }
-    else {
-        $leftPos = $tooltip.left + leftOffset;
+    const rect = {
+        top: alignValue(yValue, yAlign, tooltipHeight),
+        left: alignValue(xValue, xAlign, tooltipWidth),
+        // set below
+        bottom: 0,
+        right: 0,
+    };
+    rect.bottom = rect.top + tooltipHeight;
+    rect.right = rect.left + tooltipWidth;
+    // Check if outside of container and swap align side accordingly
+    if (contained === 'container') {
+        if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
+            rect.left = alignValue(xValue, 'end', tooltipWidth);
+        }
+        if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
+            rect.left = alignValue(xValue, 'start', tooltipWidth);
+        }
+        rect.right = rect.left + tooltipWidth;
+        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
+            rect.top = alignValue(yValue, 'end', tooltipHeight);
+        }
+        if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
+            rect.top = alignValue(yValue, 'start', tooltipHeight);
+        }
+        rect.bottom = rect.top + tooltipHeight;
     }
+    $yPos = rect.top;
+    $xPos = rect.left;
 }
 </script>
 
 {#if $tooltip.data}
   <div
     class={cls('absolute pointer-events-none z-50', classes.root)}
-    style:top="{$topPos}px"
-    style:left="{$leftPos}px"
+    style:top="{$yPos}px"
+    style:left="{$xPos}px"
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}

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

@@ -2,10 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        top?: number | undefined;
-        left?: number | undefined;
-        topOffset?: number | undefined;
-        leftOffset?: number | undefined;
+        x?: 'pointer' | 'data' | number | undefined;
+        y?: 'pointer' | 'data' | number | undefined;
+        xOffset?: number | undefined;
+        yOffset?: number | undefined;
+        anchor?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: false | "container" | undefined;
         animate?: boolean | undefined;
         variant?: "none" | "dark" | "light" | undefined;

package/dist/components/TooltipContext.svelte

@@ -1,8 +1,8 @@
 <script context="module">import { getContext, setContext } from 'svelte';
 export const tooltipContextKey = {};
 const defaultContext = writable({
-    top: 0,
-    left: 0,
+    x: 0,
+    y: 0,
     data: null,
     show: () => { },
     hide: () => { },
@@ -43,8 +43,6 @@ const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, heigh
  * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
  */
 export let mode = 'bisect-x';
-export let snapToDataX = false;
-export let snapToDataY = false;
 /**
  * @type {'closest' | 'left' | 'right'}
  */
@@ -57,7 +55,7 @@ export let raiseTarget = false;
 export let radius = Infinity;
 /** Enable debug view (show hit targets, etc) */
 export let debug = false;
-const tooltip = writable({ top: 0, left: 0, data: null, show: showTooltip, hide: hideTooltip });
+const tooltip = writable({ y: 0, x: 0, data: null, show: showTooltip, hide: hideTooltip });
 setTooltipContext(tooltip);
 let hideTimeoutId;
 $: bisectX = bisector((d) => {
@@ -174,8 +172,8 @@ function showTooltip(event, tooltipData) {
         }
         $tooltip = {
             ...$tooltip,
-            left: snapToDataX ? $xGet(tooltipData) + $padding.left : localX,
-            top: snapToDataY ? $yGet(tooltipData) + $padding.top : localY,
+            x: localX,
+            y: localY,
             data: tooltipData,
         };
     }

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { Readable } from 'svelte/store';
 export declare const tooltipContextKey: {};
 export type TooltipContextValue = {
-    top: number;
-    left: number;
+    x: number;
+    y: number;
     data: any;
     show(event: MouseEvent | TouchEvent, tooltipData?: any): any;
     hide(event?: MouseEvent | TouchEvent): any;
@@ -15,8 +15,6 @@ declare const __propDef: {
         /**
            * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
            */ mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual" | undefined;
-        snapToDataX?: boolean | undefined;
-        snapToDataY?: boolean | undefined;
         /**
            * @type {'closest' | 'left' | 'right'}
            */ findTooltipData?: "left" | "right" | "closest" | undefined;
@@ -36,8 +34,8 @@ declare const __propDef: {
     slots: {
         default: {
             tooltip: {
-                top: number;
-                left: number;
+                y: number;
+                x: number;
                 data: null;
                 show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
                 hide: () => void;

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: FormatType;
+        format?: FormatType | undefined;
         valueAlign?: "center" | "left" | "right" | undefined;
         classes?: {
             label?: string | undefined;

package/dist/docs/Code.svelte

@@ -1,7 +1,6 @@
 <script>import Prism from 'prismjs';
 import 'prism-svelte';
-import { mdiContentCopy } from '@mdi/js';
-import { Button, cls } from 'svelte-ux';
+import { CopyButton, cls } from 'svelte-ux';
 export let source = null;
 export let language = 'svelte';
 export let highlightedSource = source
@@ -17,14 +16,7 @@ export let highlightedSource = source
       </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(source ?? '')}
-        >
-          Copy
-        </Button>
+        <CopyButton value={source} class="text-white/70 hover:bg-white/20 py-1" size="sm" />
       </div>
     </div>
   {/if}

package/dist/docs/Json.svelte

@@ -0,0 +1,26 @@
+<script>import JsonTree from 'svelte-json-tree';
+import { cls } from 'svelte-ux';
+export let value;
+export let defaultExpandedPaths = ['$'];
+</script>
+
+<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', $$props.class)}>
+  <JsonTree
+    {value}
+    {defaultExpandedPaths}
+    shouldTreatIterableAsObject
+    --json-tree-property-color="#72a2d3"
+    --json-tree-string-color="#6cd1c7"
+    --json-tree-symbol-color="#6cd1c7"
+    --json-tree-boolean-color="#9681f7"
+    --json-tree-function-color="#e59b6f"
+    --json-tree-number-color="#9681f7"
+    --json-tree-label-color="#9ca0a5"
+    --json-tree-arrow-color="#e8eaed"
+    --json-tree-null-color="#81868a"
+    --json-tree-undefined-color="#81868a"
+    --json-tree-date-color="#9ca0a5"
+    --json-tree-operator-color="#e8eaed"
+    --json-tree-regex-color="#6cd1c7"
+  />
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: any;
+        defaultExpandedPaths?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JsonProps = typeof __propDef.props;
+export type JsonEvents = typeof __propDef.events;
+export type JsonSlots = typeof __propDef.slots;
+export default class Json extends SvelteComponentTyped<JsonProps, JsonEvents, JsonSlots> {
+}
+export {};

package/dist/docs/Preview.svelte

@@ -2,9 +2,9 @@
 // TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
 import Prism from 'prismjs';
 import 'prism-svelte';
-import { mdiCodeTags, mdiContentCopy, mdiTable } from '@mdi/js';
-import JsonTree from 'svelte-json-tree';
+import { mdiCodeTags, mdiTable } from '@mdi/js';
 import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
+import Json from './Json.svelte';
 export let code = undefined;
 export let data = undefined;
 export let language = 'svelte';
@@ -35,14 +35,7 @@ catch (e) {
       </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>
+        <CopyButton value={code} class="text-white/70 hover:bg-white/20 py-1" size="sm" />
       </div>
     </div>
   {/if}
@@ -74,26 +67,7 @@ catch (e) {
         {/if}
       </div>
 
-      <div class="overflow-auto px-4 py-2 bg-[#1e1e1e]">
-        <JsonTree
-          value={data}
-          defaultExpandedPaths={['$']}
-          shouldTreatIterableAsObject
-          --json-tree-property-color="#72a2d3"
-          --json-tree-string-color="#6cd1c7"
-          --json-tree-symbol-color="#6cd1c7"
-          --json-tree-boolean-color="#9681f7"
-          --json-tree-function-color="#e59b6f"
-          --json-tree-number-color="#9681f7"
-          --json-tree-label-color="#9ca0a5"
-          --json-tree-arrow-color="#e8eaed"
-          --json-tree-null-color="#81868a"
-          --json-tree-undefined-color="#81868a"
-          --json-tree-date-color="#9ca0a5"
-          --json-tree-operator-color="#e8eaed"
-          --json-tree-regex-color="#6cd1c7"
-        />
-      </div>
+      <Json value={data} />
 
       <div slot="actions">
         <Button variant="fill" color="accent">Close</Button>

package/dist/docs/ViewSourceButton.svelte

@@ -23,7 +23,7 @@ export let icon;
 
         {#if href}
           <Button icon={mdiGithub} variant="fill-light" color="accent" {href} target="_blank">
-            Edit on Github
+            View on Github
           </Button>
         {/if}
       </div>

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -18,45 +18,46 @@
     "changeset": "changeset",
     "version": "changeset version",
     "version-status": "changeset status -v",
-    "publish": "changeset publish"
+    "publish": "changeset publish",
+    "prepare": "svelte-kit sync"
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.4",
-    "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.27.2",
+    "@sveltejs/adapter-vercel": "^3.1.0",
+    "@sveltejs/kit": "^1.27.6",
     "@sveltejs/package": "^2.2.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/d3-array": "^3.0.9",
-    "@types/d3-delaunay": "^6.0.3",
-    "@types/d3-dsv": "^3.0.5",
-    "@types/d3-geo": "^3.0.6",
-    "@types/d3-hierarchy": "^3.1.5",
-    "@types/d3-interpolate": "^3.0.3",
-    "@types/d3-interpolate-path": "^2.0.2",
-    "@types/d3-quadtree": "^3.0.4",
-    "@types/d3-random": "^3.0.2",
-    "@types/d3-sankey": "^0.12.3",
-    "@types/d3-scale": "^4.0.6",
-    "@types/d3-scale-chromatic": "^3.0.1",
-    "@types/d3-shape": "^3.1.4",
-    "@types/lodash-es": "^4.17.10",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-delaunay": "^6.0.4",
+    "@types/d3-dsv": "^3.0.7",
+    "@types/d3-geo": "^3.1.0",
+    "@types/d3-hierarchy": "^3.1.6",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-interpolate-path": "^2.0.3",
+    "@types/d3-quadtree": "^3.0.5",
+    "@types/d3-random": "^3.0.3",
+    "@types/d3-sankey": "^0.12.4",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale-chromatic": "^3.0.2",
+    "@types/d3-shape": "^3.1.5",
+    "@types/lodash-es": "^4.17.11",
     "@types/marked": "^6.0.0",
-    "@types/shapefile": "^0.6.3",
-    "@types/topojson-client": "^3.1.3",
+    "@types/shapefile": "^0.6.4",
+    "@types/topojson-client": "^3.1.4",
     "autoprefixer": "^10.4.16",
     "execa": "^8.0.1",
-    "marked": "^9.1.3",
+    "marked": "^10.0.0",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.1.0",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^4.2.2",
-    "svelte-check": "^3.5.2",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
     "svelte-json-tree": "^2.2.0",
-    "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.23",
+    "svelte-preprocess": "^5.1.0",
+    "svelte2tsx": "^0.6.25",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
@@ -89,7 +90,7 @@
     "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.53.8",
+    "svelte-ux": "^0.56.0",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {

package/dist/utils/string.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="lodash" />
-declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number | null;
-export declare const getStringWidth: typeof _getStringWidth & import("lodash").MemoizedFunction;
-export {};