layerchart 0.24.2 → 0.24.4

package/dist/components/Bar.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import { createDimensionGetter } from '../utils/rect';
+import Rect from './Rect.svelte';
+const { x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+export let bar;
+/**
+ * Override `x` from context.  Useful for multiple Bar instances
+ */
+export let x = $xContext;
+/**
+ * Override `y` from context.  Useful for multiple Bar instances
+ */
+export let y = $yContext;
+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 groupBy = undefined;
+export let groupPaddingInner = 0.2;
+export let groupPaddingOuter = 0;
+export let spring = undefined;
+export let tweened = undefined;
+$: if (stroke === null || stroke === undefined)
+    stroke = 'black';
+$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+    x,
+    y,
+    groupBy,
+    padding,
+    groupPadding: {
+        inner: groupPaddingInner,
+        outer: groupPaddingOuter,
+    },
+});
+</script>
+
+<Rect
+  {fill}
+  {spring}
+  {tweened}
+  {stroke}
+  stroke-width={strokeWidth}
+  rx={radius}
+  {...$getDimensions(bar)}
+  {...$$restProps}
+  on:click
+/>

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

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        bar: Object;
+        x?: any;
+        y?: any;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        getProps?: ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => any) | undefined;
+        padding?: number | undefined;
+        groupBy?: string | undefined;
+        groupPaddingInner?: number | undefined;
+        groupPaddingOuter?: number | undefined;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarProps = typeof __propDef.props;
+export type BarEvents = typeof __propDef.events;
+export type BarSlots = typeof __propDef.slots;
+export default class Bar extends SvelteComponentTyped<BarProps, BarEvents, BarSlots> {
+}
+export {};

package/dist/components/Bars.svelte

@@ -1,22 +1,17 @@
 <script>import { getContext } from 'svelte';
-import Rect from './Rect.svelte';
-import { createDimensionGetter } from '../utils/rect';
-const { data, xScale, x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+import Bar from './Bar.svelte';
+const { data, rGet, config } = getContext('LayerCake');
 /**
  * Override `x` from context.  Useful for multiple Bar instances
  */
-export let x = $xContext;
-// Convert x to function
-$: _x = x ? (typeof x === 'string' ? (d) => d[x] : x) : $xContext;
+export let x = undefined; // TODO: Update Type
 /**
  * Override `y` from context.  Useful for multiple Bar instances
  */
-export let y = $yContext;
-$: _y = y ? (typeof y === 'string' ? (d) => d[y] : y) : $yContext;
+export let y = undefined; // TODO: Update Type
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
-export let getKey = (item) => $xScale.bandwidth ? _x(item) : _y(item);
 export let getProps = undefined;
 /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
 export let padding = 0;
@@ -26,31 +21,27 @@ export let tweened = undefined;
 export let groupBy = undefined;
 export let groupPaddingInner = 0.2;
 export let groupPaddingOuter = 0;
-$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
-    x,
-    y,
-    groupBy,
-    padding,
-    groupPadding: {
-        inner: groupPaddingInner,
-        outer: groupPaddingOuter,
-    },
-});
 </script>
 
 <g class="Bars">
-  {#each $data as item, index (getKey(item, index))}
-    <Rect
-      data-id={index}
-      fill={$config.r ? $rGet(item) : null}
-      {stroke}
-      stroke-width={strokeWidth}
-      rx={radius}
-      {spring}
-      {tweened}
-      {...$getDimensions(item)}
-      {...getProps?.({ value: _y(item), item, index })}
-      {...$$restProps}
-    />
-  {/each}
+  <slot name="bars">
+    {#each $data as item, index}
+      <Bar
+        bar={item}
+        {x}
+        {y}
+        fill={$config.r ? $rGet(item) : null}
+        {stroke}
+        {strokeWidth}
+        {radius}
+        {spring}
+        {tweened}
+        {groupBy}
+        {padding}
+        {groupPaddingInner}
+        {groupPaddingOuter}
+        {...$$restProps}
+      />
+    {/each}
+  </slot>
 </g>

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
-        getKey?: ((item: any, index: number) => any) | undefined;
         getProps?: ((obj: {
             value: any;
             item: any;
@@ -24,7 +23,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        bars: {};
+    };
 };
 export type BarsProps = typeof __propDef.props;
 export type BarsEvents = typeof __propDef.events;

package/dist/components/Highlight.svelte

@@ -4,6 +4,7 @@ import { cls, notNull } from 'svelte-ux';
 import { isScaleBand } from '../utils/scales';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
+import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = getContext('LayerCake');
@@ -15,6 +16,8 @@ export let points = false;
 export let lines = false;
 /** Show area and pass props to Rect */
 export let area = false;
+/** Show bar and pass props to Rect */
+export let bar = false;
 // TODO: Fix circle points being backwards for stack (see AreaStack)
 let _points = [];
 let _lines = [];
@@ -170,6 +173,24 @@ $: if ($tooltip.data) {
     </slot>
   {/if}
 
+  {#if bar}
+    <slot name="bar" 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}
+        stroke={typeof bar === 'object' ? bar.stroke : null}
+        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
+        radius={typeof bar === 'object' ? bar.radius : null}
+        bar={$tooltip.data}
+        class={cls(!bar.fill && 'fill-accent-500', typeof bar === 'object' ? bar.class : null)}
+        on:click
+      />
+    </slot>
+  {/if}
+
+
   {#if lines}
     <slot name="lines" lines={_lines}>
       {#each _lines as line}

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

@@ -43,6 +43,23 @@ declare const __propDef: {
                 [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
             } | undefined;
         } | undefined;
+        /** Show bar and pass props to Rect */ bar?: boolean | {
+            [x: string]: any;
+            x?: number | undefined;
+            initialX?: number | undefined;
+            y?: number | undefined;
+            initialY?: number | undefined;
+            width: number;
+            initialWidth?: number | undefined;
+            height: number;
+            initialHeight?: number | undefined;
+            spring?: boolean | import("svelte/motion").SpringOpts | {
+                [prop: string]: import("svelte/motion").SpringOpts | undefined;
+            } | undefined;
+            tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
+                [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
+            } | undefined;
+        } | undefined;
     };
     events: {
         click: MouseEvent;
@@ -58,6 +75,25 @@ declare const __propDef: {
                 height: number;
             };
         };
+        bar: {
+            bar: boolean | {
+                [x: string]: any;
+                x?: number | undefined;
+                initialX?: number | undefined;
+                y?: number | undefined;
+                initialY?: number | undefined;
+                width: number;
+                initialWidth?: number | undefined;
+                height: number;
+                initialHeight?: number | undefined;
+                spring?: boolean | import("svelte/motion").SpringOpts | {
+                    [prop: string]: import("svelte/motion").SpringOpts | undefined;
+                } | undefined;
+                tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
+                    [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
+                } | undefined;
+            };
+        };
         lines: {
             lines: any[];
         };

package/dist/components/Spline.svelte

@@ -58,9 +58,9 @@ $: endPoint = motionStore(undefined, {
                     const point = pathEl.getPointAtLength(totalLength * t);
                     return point;
                 };
-            }
+            },
         }
-        : false
+        : false,
 });
 $: {
     if ($$slots.start || $$slots.end) {
@@ -82,7 +82,7 @@ $: {
     d={$tweened_d}
     {...$$restProps}
     class={cls('path-line fill-none', !$$props.stroke && 'stroke-black', $$props.class)}
-    in:drawTransition={typeof draw === 'object' ? draw : undefined}
+    in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
     on:mousemove
     on:mouseleave

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

@@ -140,7 +140,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 +149,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.left);
                 const index = bisectY($flatData, yValueAtPoint, 1);
                 const previousValue = $flatData[index - 1];
                 const currentValue = $flatData[index];
@@ -280,7 +280,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/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

@@ -1,13 +1,23 @@
-<script>// TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
+<script>import { slide } from 'svelte/transition';
+// 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 } from '@mdi/js';
-import { slide } from 'svelte/transition';
-import { Button } from 'svelte-ux';
+import { mdiCodeTags, mdiContentCopy, mdiTable } from '@mdi/js';
+import JsonTree from 'svelte-json-tree';
+import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
 export let code = undefined;
+export let data = undefined;
 export let language = 'svelte';
 export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
 export let showCode = false;
+let copyValue = null;
+try {
+    // TODO: Improve handling of circular structures
+    copyValue = JSON.stringify(data, null, 2);
+}
+catch (e) {
+    console.error('Error capturing value to copy', e);
+}
 </script>
 
 <div class="border border-black/20 rounded bg-white">
@@ -39,7 +49,55 @@ export let showCode = false;
 </div>
 
 {#if code}
-  <Button icon={mdiCodeTags} class=" text-black/70 py-1" on:click={() => (showCode = !showCode)}>
-    {showCode ? 'Hide' : 'Show'} Code
+  <Button icon={mdiCodeTags} class=" text-black/60 py-1" on:click={() => (showCode = !showCode)}>
+    {showCode ? 'Hide' : 'Show'} code
   </Button>
 {/if}
+
+{#if data}
+  <Toggle let:on={open} let:toggle>
+    <Button icon={mdiTable} class=" text-black/60 py-1" on:click={toggle}>View data</Button>
+    <Dialog
+      {open}
+      on:close={toggle}
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+    >
+      <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
+        <div class="overflow-auto">
+          <div class="text-lg font-semibold">Chart data</div>
+        </div>
+
+        {#if copyValue}
+          <Tooltip title="Copy">
+            <CopyButton value={copyValue} variant="fill-light" color="accent" />
+          </Tooltip>
+        {/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>
+
+      <div slot="actions">
+        <Button variant="fill" color="accent">Close</Button>
+      </div>
+    </Dialog>
+  </Toggle>
+{/if}

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

@@ -3,6 +3,7 @@ import 'prism-svelte';
 declare const __propDef: {
     props: {
         code?: string | undefined;
+        data?: any | undefined;
         language?: string | undefined;
         highlightedCode?: any;
         showCode?: boolean | undefined;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.24.2",
+  "version": "0.24.4",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -46,7 +46,7 @@
     "@types/topojson-client": "^3.1.2",
     "autoprefixer": "^10.4.16",
     "execa": "^8.0.1",
-    "marked": "^9.1.1",
+    "marked": "^9.1.2",
     "mdsvex": "^0.11.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
@@ -54,6 +54,7 @@
     "rehype-slug": "^6.0.0",
     "svelte": "^4.2.1",
     "svelte-check": "^3.5.2",
+    "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.23",
     "tailwindcss": "^3.3.3",
@@ -85,7 +86,7 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "date-fns": "^2.30.0",
-    "layercake": "^8.0.0",
+    "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte-ux": "^0.53.0",