layerchart 0.18.0 → 0.18.2

package/dist/components/Axis.svelte

@@ -12,6 +12,7 @@ export let rule = false;
 export let grid = false;
 /** Control the number of ticks*/
 export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined;
+/** Length of the tick line */
 export let tickSize = 4;
 export let format = undefined;
 export let labelProps = undefined;

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right';
         /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
-        /** Control the number of ticks*/ ticks?: number | Function | undefined;
-        tickSize?: number | undefined;
+        /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
+        /** Length of the tick line */ tickSize?: number | undefined;
         format?: FormatType;
         labelProps?: ComponentProps<Text> | undefined;
     };

package/dist/components/HighlightRect.svelte

@@ -3,6 +3,7 @@ import { max, min } from 'd3-array';
 import { isScaleBand } from '../utils/scales';
 import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
+import { firstValue } from '../utils/rect';
 const { flatData, x, xScale, xDomain, xRange, xGet, yScale, yDomain, yRange, yGet } = getContext('LayerCake');
 const tooltip = tooltipContext();
 export let axis = isScaleBand($yScale) ? 'y' : 'x';
@@ -14,8 +15,8 @@ let dimensions = {
 };
 $: {
     if ($tooltip.data) {
-        let xCoord = $xGet($tooltip.data);
-        let yCoord = $yGet($tooltip.data);
+        let xCoord = firstValue($xGet($tooltip.data));
+        let yCoord = firstValue($yGet($tooltip.data));
         if (axis === 'x' || axis === 'both') {
             if (isScaleBand($xScale)) {
                 dimensions.width = $xScale.step();

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/TooltipContext.svelte

@@ -27,6 +27,7 @@ import { localPoint } from '../utils/event';
 import { isScaleBand, scaleInvert } from '../utils/scales';
 import { quadtreeRects } from '../utils/quadtree';
 import { createPropertySortFunc, createSortFunc } from 'svelte-ux/utils/sort';
+import { firstValue } from '../utils/rect';
 const dispatch = createEventDispatcher();
 const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
 /*
@@ -237,8 +238,8 @@ let rects = [];
 $: if (mode === 'bounds' || mode === 'band') {
     rects = $flatData
         .map((d) => {
-        const xValue = $xGet(d);
-        const yValue = $yGet(d);
+        const xValue = firstValue($xGet(d));
+        const yValue = firstValue($yGet(d));
         const x = Array.isArray(xValue) ? min(xValue) : xValue;
         const y = Array.isArray(yValue) ? max(yValue) : yValue;
         const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;

package/dist/components/TooltipItem.svelte

@@ -3,9 +3,10 @@ export let label;
 export let value = undefined; // Can be pass as slot
 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 +17,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/utils/rect.d.ts

@@ -12,8 +12,18 @@ type DimensionGetterOptions = {
 };
 export declare function createDimensionGetter(context: any, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
     x: any;
+    y: number;
+    width: number;
+    height: number;
+} | {
+    x: number;
     y: any;
     width: number;
     height: number;
 }>;
+/**
+ * If value is an array, returns first item, else returns original value
+ * Useful when x/y getters for band scale are an array (such as for histograms)
+ */
+export declare function firstValue(value: number | number[]): number;
 export {};

package/dist/utils/rect.js

@@ -13,7 +13,7 @@ export function createDimensionGetter(context, options) {
                 const y1Scale = groupBy
                     ? groupScaleBand($yScale, $flatData, groupBy, options?.groupPadding)
                     : null;
-                const y = $yGet(item) + (y1Scale ? y1Scale(item[groupBy]) : 0) + padding / 2;
+                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 _x = options?.x
                     ? typeof options.x === 'string'
@@ -55,7 +55,7 @@ export function createDimensionGetter(context, options) {
                 const x1Scale = groupBy
                     ? groupScaleBand($xScale, $flatData, groupBy, options?.groupPadding)
                     : null;
-                const x = $xGet(item) + (x1Scale ? x1Scale(item[groupBy]) : 0) + padding / 2;
+                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 _y = options?.y
                     ? typeof options.y === 'string'
@@ -95,3 +95,10 @@ export function createDimensionGetter(context, options) {
         };
     });
 }
+/**
+ * If value is an array, returns first item, else returns original value
+ * Useful when x/y getters for band scale are an array (such as for histograms)
+ */
+export function firstValue(value) {
+    return Array.isArray(value) ? value[0] : value;
+}

package/dist/utils/threshold.d.ts

@@ -0,0 +1,11 @@
+import { type ThresholdNumberArrayGenerator } from 'd3-array';
+/**
+ * Useful threshold function when using Dates
+ * https://observablehq.com/@d3/d3-bin-time-thresholds
+ */
+export declare function thresholdTime(n: number): ThresholdNumberArrayGenerator<number>;
+/**
+ * Explicit threshold chunks without nicing (not recommended)
+ * see: https://observablehq.com/@d3/d3-bin#bin26
+ */
+export declare function thresholdChunks(chunks: number): (data: number[], min: number, max: number) => number[];

package/dist/utils/threshold.js

@@ -0,0 +1,19 @@
+import { range } from 'd3-array';
+import { scaleTime } from 'd3-scale';
+/**
+ * Useful threshold function when using Dates
+ * https://observablehq.com/@d3/d3-bin-time-thresholds
+ */
+export function thresholdTime(n) {
+    // TODO: Unable to satifiy `ThresholdNumberArrayGenerator<Value extends number>` with `Date`
+    return (data, min, max) => {
+        return scaleTime().domain([min, max]).ticks(n);
+    };
+}
+/**
+ * Explicit threshold chunks without nicing (not recommended)
+ * see: https://observablehq.com/@d3/d3-bin#bin26
+ */
+export function thresholdChunks(chunks) {
+    return (data, min, max) => range(chunks).map((t) => min + (t / chunks) * (max - min));
+}

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -15,12 +15,12 @@
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
     "changeset": "changeset",
-    "version-package": "changeset version"
+    "version": "changeset version"
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@sveltejs/adapter-vercel": "^3.0.1",
-    "@sveltejs/kit": "^1.20.5",
+    "@sveltejs/kit": "^1.22.0",
     "@sveltejs/package": "^2.1.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.9",
@@ -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",
@@ -48,8 +50,8 @@
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.16",
     "tailwindcss": "^3.3.2",
-    "tslib": "^2.5.3",
-    "typescript": "^5.1.3",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
     "unist-util-visit": "^4.1.2",
     "us-atlas": "^3.0.1",
     "vite": "^4.3.9",
@@ -79,7 +81,7 @@
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.43.3",
+    "svelte-ux": "^0.43.5",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",