layerchart 0.24.3 → 0.25.0

package/README.md

@@ -1,4 +1,11 @@
-# layerchart
+# LayerChart
+
+![](https://img.shields.io/github/license/techniq/svelte-ux?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)
 
 A large collection of composable Svelte chart components to build a wide range of visualizations
 

package/dist/components/Bar.svelte

@@ -15,8 +15,7 @@ export let fill = undefined;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
-export let getProps = undefined;
-export let padding = 0;
+export let inset = 0;
 export let groupBy = undefined;
 export let groupPaddingInner = 0.2;
 export let groupPaddingOuter = 0;
@@ -28,7 +27,7 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
     x,
     y,
     groupBy,
-    padding,
+    inset,
     groupPadding: {
         inner: groupPaddingInner,
         outer: groupPaddingOuter,
@@ -46,4 +45,4 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
   {...$getDimensions(bar)}
   {...$$restProps}
   on:click
-/>
+/>

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

@@ -10,12 +10,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
-        getProps?: ((obj: {
-            value: any;
-            item: any;
-            index: number;
-        }) => any) | undefined;
-        padding?: number | undefined;
+        inset?: number | undefined;
         groupBy?: string | undefined;
         groupPaddingInner?: number | undefined;
         groupPaddingOuter?: number | undefined;

package/dist/components/Bars.svelte

@@ -12,9 +12,8 @@ export let y = undefined; // TODO: Update Type
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
-export let getProps = undefined;
 /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
-export let padding = 0;
+export let inset = 0;
 export let spring = undefined;
 export let tweened = undefined;
 // See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
@@ -25,7 +24,7 @@ export let groupPaddingOuter = 0;
 
 <g class="Bars">
   <slot name="bars">
-    {#each $data as item, index}
+    {#each $data as item}
       <Bar
         bar={item}
         {x}
@@ -37,7 +36,7 @@ export let groupPaddingOuter = 0;
         {spring}
         {tweened}
         {groupBy}
-        {padding}
+        {inset}
         {groupPaddingInner}
         {groupPaddingOuter}
         {...$$restProps}

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

@@ -8,12 +8,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
-        getProps?: ((obj: {
-            value: any;
-            item: any;
-            index: number;
-        }) => any) | undefined;
-        padding?: number | undefined;
+        inset?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         groupBy?: string | undefined;

package/dist/components/Highlight.svelte

@@ -174,12 +174,12 @@ $: if ($tooltip.data) {
   {/if}
 
   {#if bar}
-    <slot name="bar" bar={bar}>
+    <slot name="bar" {bar}>
       <Bar
         spring
         x={typeof bar === 'object' ? bar.x : null}
         y={typeof bar === 'object' ? bar.y : null}
-        padding={typeof bar === 'object' ? bar.padding : null}
+        inset={typeof bar === 'object' ? bar.inset : null}
         stroke={typeof bar === 'object' ? bar.stroke : null}
         strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
         radius={typeof bar === 'object' ? bar.radius : null}
@@ -190,7 +190,6 @@ $: if ($tooltip.data) {
     </slot>
   {/if}
 
-
   {#if lines}
     <slot name="lines" lines={_lines}>
       {#each _lines as line}

package/dist/components/Tooltip.svelte

@@ -12,6 +12,7 @@ export let topOffset = top ? 0 : 10;
 export let leftOffset = left ? 0 : 10;
 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');
@@ -59,13 +60,30 @@ $: if ($tooltip) {
   >
     <div
       class={cls(
-        'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1 h-full',
+        variant !== 'none' && [
+          'px-2 py-1 h-full rounded elevation-1',
+          '[&_.label]:text-xs [&_.label]:text-right [&_.label]:whitespace-nowrap',
+          ['[&_.value]:text-sm [&_.value]:tabular-nums'],
+        ],
+        {
+          dark: [
+            'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white',
+            '[&_.label]:text-white/75',
+          ],
+          light: ['bg-white text-gray-800 border border-gray-500', '[&_.label]:text-black/50'],
+          none: '',
+        }[variant],
         classes.container,
         $$props.class
       )}
     >
       {#if header || $$slots.header}
-        <div class={cls('text-center font-semibold whitespace-nowrap', classes.header)}>
+        <div
+          class={cls(
+            variant !== 'none' && 'text-center font-semibold whitespace-nowrap',
+            classes.header
+          )}
+        >
           <slot name="header" data={$tooltip.data}>
             {header?.($tooltip.data)}
           </slot>
@@ -75,7 +93,7 @@ $: if ($tooltip) {
       {#if $$slots.default}
         <div
           class={cls(
-            'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
+            variant !== 'none' && 'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
             classes.content
           )}
         >

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         leftOffset?: number | undefined;
         contained?: false | "container" | undefined;
         animate?: boolean | undefined;
+        variant?: "none" | "dark" | "light" | undefined;
         header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string | undefined;

package/dist/components/TooltipContext.svelte

@@ -39,13 +39,23 @@ const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, heigh
       - scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
       - scaleLinear, scaleLinear: voronoi (or quadtree)
   */
+/**
+ * @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'}
+ */
 export let findTooltipData = 'closest';
 /** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */
 export let raiseTarget = false;
+/** quadtree search radius
+ * @type {number}
+ */
 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 });
 setTooltipContext(tooltip);
@@ -140,7 +150,7 @@ function showTooltip(event, tooltipData) {
             }
             case 'bisect-x': {
                 // `x` value at mouse/touch coordinate
-                const xValueAtPoint = scaleInvert($xScale, localX);
+                const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
                 const index = bisectX($flatData, xValueAtPoint, 1);
                 const previousValue = $flatData[index - 1];
                 const currentValue = $flatData[index];
@@ -149,7 +159,7 @@ function showTooltip(event, tooltipData) {
             }
             case 'bisect-y': {
                 // `y` value at mouse/touch coordinate
-                const yValueAtPoint = scaleInvert($yScale, localY);
+                const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
                 const index = bisectY($flatData, yValueAtPoint, 1);
                 const previousValue = $flatData[index - 1];
                 const currentValue = $flatData[index];
@@ -280,7 +290,7 @@ $: if (mode === 'bounds' || mode === 'band') {
 {#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
   <Html>
     <div
-      class="absolute"
+      class="tooltip-trigger absolute"
       style:width="{$width}px"
       style:height="{$height}px"
       style:background={debug ? 'rgba(255 0 0 / .1)' : undefined}

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

@@ -12,13 +12,19 @@ export type TooltipContext = Readable<TooltipContextValue>;
 export declare function tooltipContext(): TooltipContext;
 declare const __propDef: {
     props: {
-        mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual" | undefined;
+        /**
+           * @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;
-        findTooltipData?: "left" | "right" | "closest" | undefined;
+        /**
+           * @type {'closest' | 'left' | 'right'}
+           */ findTooltipData?: "left" | "right" | "closest" | undefined;
         /** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean | undefined;
-        radius?: number | undefined;
-        debug?: boolean | undefined;
+        /** quadtree search radius
+           * @type {number}
+           */ radius?: number | undefined;
+        /** Enable debug view (show hit targets, etc) */ debug?: boolean | undefined;
     };
     events: {
         click: CustomEvent<{

package/dist/components/TooltipItem.svelte

@@ -7,16 +7,16 @@ export let valueAlign = 'left';
 export let classes = {};
 </script>
 
-<div class={cls('text-xs text-white/75 text-right whitespace-nowrap', classes.label)}>
+<div class={cls('label', classes.label)}>
   <slot name="label">{label}:</slot>
 </div>
 
 <div
   class={cls(
-    'text-sm tabular-nums',
+    'value',
     {
       'text-right': valueAlign === 'right',
-      'text-center': valueAlign === 'center'
+      'text-center': valueAlign === 'center',
     },
     classes.value,
     $$props.class

package/dist/docs/Preview.svelte

@@ -78,6 +78,7 @@ catch (e) {
         <JsonTree
           value={data}
           defaultExpandedPaths={['$']}
+          shouldTreatIterableAsObject
           --json-tree-property-color="#72a2d3"
           --json-tree-string-color="#6cd1c7"
           --json-tree-symbol-color="#6cd1c7"

package/dist/utils/rect.d.ts

@@ -5,7 +5,7 @@ type DimensionGetterOptions = {
     /** Override `y` accessor from context */
     y?: (item: any) => any;
     groupBy?: string;
-    padding?: number;
+    inset?: number;
     groupPadding?: {
         inner?: number;
         outer?: number;

package/dist/utils/rect.js

@@ -5,7 +5,7 @@ import { groupScaleBand, isScaleBand } from './scales';
 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;
+    const inset = options?.inset ?? 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)) {
@@ -13,8 +13,8 @@ export function createDimensionGetter(context, options) {
                 const y1Scale = groupBy
                     ? groupScaleBand($yScale, $flatData, groupBy, options?.groupPadding)
                     : null;
-                const y = firstValue($yGet(item)) + (y1Scale ? y1Scale(item[groupBy]) : 0) + padding / 2;
-                const height = Math.max(0, $yScale.bandwidth ? (y1Scale ? y1Scale.bandwidth() : $yScale.bandwidth()) - padding : 0);
+                const y = firstValue($yGet(item)) + (y1Scale ? y1Scale(item[groupBy]) : 0) + inset / 2;
+                const height = Math.max(0, $yScale.bandwidth ? (y1Scale ? y1Scale.bandwidth() : $yScale.bandwidth()) - inset : 0);
                 const _x = options?.x
                     ? typeof options.x === 'string'
                         ? (d) => d[options.x]
@@ -55,8 +55,8 @@ export function createDimensionGetter(context, options) {
                 const x1Scale = groupBy
                     ? groupScaleBand($xScale, $flatData, groupBy, options?.groupPadding)
                     : null;
-                const x = firstValue($xGet(item)) + (x1Scale ? x1Scale(item[groupBy]) : 0) + padding / 2;
-                const width = Math.max(0, $xScale.bandwidth ? (x1Scale ? x1Scale.bandwidth() : $xScale.bandwidth()) - padding : 0);
+                const x = firstValue($xGet(item)) + (x1Scale ? x1Scale(item[groupBy]) : 0) + inset / 2;
+                const width = Math.max(0, $xScale.bandwidth ? (x1Scale ? x1Scale.bandwidth() : $xScale.bandwidth()) - inset : 0);
                 const _y = options?.y
                     ? typeof options.y === 'string'
                         ? (d) => d[options.y]

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.24.3",
+  "version": "0.25.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -23,52 +23,52 @@
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.4",
     "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.25.2",
+    "@sveltejs/kit": "^1.27.2",
     "@sveltejs/package": "^2.2.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/d3-array": "^3.0.8",
-    "@types/d3-delaunay": "^6.0.2",
-    "@types/d3-dsv": "^3.0.4",
-    "@types/d3-geo": "^3.0.5",
-    "@types/d3-hierarchy": "^3.1.4",
-    "@types/d3-interpolate": "^3.0.2",
-    "@types/d3-interpolate-path": "^2.0.1",
-    "@types/d3-quadtree": "^3.0.3",
-    "@types/d3-random": "^3.0.1",
-    "@types/d3-sankey": "^0.12.2",
-    "@types/d3-scale": "^4.0.5",
-    "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/d3-shape": "^3.1.3",
-    "@types/lodash-es": "^4.17.9",
+    "@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/marked": "^6.0.0",
-    "@types/shapefile": "^0.6.2",
-    "@types/topojson-client": "^3.1.2",
+    "@types/shapefile": "^0.6.3",
+    "@types/topojson-client": "^3.1.3",
     "autoprefixer": "^10.4.16",
     "execa": "^8.0.1",
-    "marked": "^9.1.2",
+    "marked": "^9.1.3",
     "mdsvex": "^0.11.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^4.2.1",
+    "svelte": "^4.2.2",
     "svelte-check": "^3.5.2",
-    "svelte-json-tree": "^2.1.0",
+    "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.23",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "type": "module",
   "dependencies": {
     "@changesets/cli": "^2.26.2",
     "@mdi/js": "^7.3.67",
-    "@types/d3-time": "^3.0.1",
+    "@types/d3-time": "^3.0.2",
     "@vercel/analytics": "^1.1.1",
     "d3-array": "^3.2.4",
     "d3-delaunay": "^6.0.4",
@@ -89,7 +89,7 @@
     "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.53.0",
+    "svelte-ux": "^0.53.6",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {

package/dist/docs/RangeField.svelte

@@ -1,34 +0,0 @@
-<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 classes={{ input: 'mt-2 mb-1' }} {...$$restProps}>
-  <span slot="prepend">
-    <Button
-      icon={mdiChevronLeft}
-      on:click={() => (value -= value > min ? step : 0)}
-      class="mr-2"
-      size="sm"
-    />
-  </span>
-
-  <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>
-
-  <span slot="append">
-    <Button
-      icon={mdiChevronRight}
-      on:click={() => (value += value < max ? step : 0)}
-      class="ml-2"
-      size="sm"
-    />
-  </span>
-</Field>

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

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