layerchart 0.17.0 → 0.17.2

package/dist/components/Arc.svelte

@@ -46,6 +46,12 @@ export let innerRadius = undefined;
 /**
  * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
  */
+/**
+ * Define outerRadius. Defaults to yRange max (ie. chart height / 2)
+ *   • value >= 1: discrete value
+ *   • value < 1: percent of chart height / 2
+ *   • value < 0: offset of chart height / 2
+ */
 export let outerRadius = undefined;
 export let cornerRadius = 0;
 export let padAngle = 0;
@@ -53,15 +59,50 @@ export let padAngle = 0;
 export let track = false;
 const { yRange } = getContext('LayerCake');
 $: scale = scaleLinear().domain(domain).range(range);
-$: _outerRadius = outerRadius ?? max($yRange) / 2;
-$: _innerRadius =
-    (innerRadius > 1
-        ? innerRadius
-        : innerRadius > 0
-            ? _outerRadius * innerRadius
-            : innerRadius < 0
-                ? _outerRadius - innerRadius
-                : innerRadius) ?? min($yRange);
+function getOuterRadius(outerRadius, chartRadius) {
+    if (outerRadius == null) {
+        return chartRadius;
+    }
+    else if (outerRadius > 1) {
+        // discrete value
+        return outerRadius;
+    }
+    else if (outerRadius > 0) {
+        // percent of `chartRadius`
+        return chartRadius * outerRadius;
+    }
+    else if (outerRadius < 0) {
+        // offset of `chartRadius`
+        return chartRadius + outerRadius;
+    }
+    else {
+        // 0
+        return outerRadius;
+    }
+}
+$: _outerRadius = getOuterRadius(outerRadius, max($yRange) / 2);
+function getInnerRadius(innerRadius, outerRadius) {
+    if (innerRadius == null) {
+        return Math.min(...$yRange);
+    }
+    else if (innerRadius > 1) {
+        // discrete value
+        return innerRadius;
+    }
+    else if (innerRadius > 0) {
+        // percent of `outerRadius`
+        return outerRadius * innerRadius;
+    }
+    else if (innerRadius < 0) {
+        // offset of `outerRadius`
+        return outerRadius + innerRadius;
+    }
+    else {
+        // 0
+        return innerRadius;
+    }
+}
+$: _innerRadius = getInnerRadius(innerRadius, _outerRadius);
 $: arc = d3arc()
     .innerRadius(_innerRadius)
     .outerRadius(_outerRadius)

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

@@ -11,8 +11,8 @@ declare const __propDef: {
         range?: number[] | undefined;
         startAngle?: number | undefined;
         endAngle?: number | undefined;
-        innerRadius?: undefined;
-        outerRadius?: undefined;
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
         track?: boolean | SVGAttributes<SVGPathElement> | undefined;

package/dist/components/Axis.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { format as formatValue } from 'svelte-ux';
+import { format as formatValue, cls } from 'svelte-ux';
 import { max, min } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
@@ -79,14 +79,15 @@ function getDefaultLabelProps() {
     {@const tickCoords = getCoords(tick)}
     <g>
       {#if gridlines !== false}
+        {@const lineProps = typeof gridlines === 'object' ? gridlines : null}
         {#if orientation === 'horizontal'}
           <line
             x1={tickCoords.x}
             y1={min($yRange)}
             x2={tickCoords.x}
             y2={max($yRange)}
-            class="gridline stroke-gray-200"
-            {...gridlines}
+            {...lineProps}
+            class={cls('gridline stroke-gray-200', lineProps?.class)}
           />
         {:else if orientation === 'vertical'}
           <line
@@ -94,8 +95,8 @@ function getDefaultLabelProps() {
             y1={tickCoords.y}
             x2={$width}
             y2={tickCoords.y}
-            class="gridline stroke-gray-200"
-            {...gridlines}
+            {...lineProps}
+            class={cls('gridline stroke-gray-200', lineProps?.class)}
           />
         {/if}
       {/if}

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         yScale?: Function | undefined;
         xBaseline?: number | null | undefined;
         yBaseline?: number | null | undefined;
-        tooltip?: ComponentProps<TooltipContext> | undefined;
+        tooltip?: ComponentProps<TooltipContext> | boolean | undefined;
         geo?: ComponentProps<GeoContext> | undefined;
     };
     events: {

package/dist/components/HighlightLine.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
-import { get } from 'svelte/store';
 import { max } from 'd3-array';
+import { notNull } from 'svelte-ux';
 import { isScaleBand } from '../utils/scales';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
@@ -10,7 +10,7 @@ const tooltip = tooltipContext();
 export let color = undefined;
 export let axis = 'x';
 // TODO: Fix circle points being backwards for stack (see AreaStack)
-function getColor(item, index = undefined) {
+function getColor(item, index = -1) {
     if (color) {
         if (typeof color === 'function') {
             return color({ value: $y(item), item, index });
@@ -40,7 +40,7 @@ $: if ($tooltip.data) {
             // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
             lines = [
                 ...lines,
-                ...x.map((xItem, i) => ({
+                ...x.filter(notNull).map((xItem, i) => ({
                     x1: xItem + xOffset,
                     y1: 0,
                     x2: xItem + xOffset,
@@ -65,7 +65,7 @@ $: if ($tooltip.data) {
             // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
             lines = [
                 ...lines,
-                ...y.map((yItem, i) => ({
+                ...y.filter(notNull).map((yItem, i) => ({
                     x1: 0,
                     y1: yItem + yOffset,
                     x2: max($xRange),
@@ -87,7 +87,7 @@ $: if ($tooltip.data) {
     }
     if (Array.isArray(x)) {
         // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-        points = x.map((xItem, i) => ({
+        points = x.filter(notNull).map((xItem, i) => ({
             x: xItem + xOffset,
             y: $yGet($tooltip.data) + yOffset,
             color: getColor($tooltip.data) // TODO: improve

package/dist/components/LinearGradient.svelte

@@ -1,6 +1,6 @@
 <script>export let id;
 export let from;
-export let via; // TODO: Currently --tw-gradient-via is not the color but the full stops
+export let via = undefined; // TODO: Currently --tw-gradient-via is not the color but the full stops
 export let to;
 export let vertical = false;
 export let x1 = '0%';

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         id: string;
         from: string | boolean;
-        via: string;
+        via?: string | undefined;
         to: string | boolean;
         vertical?: boolean | undefined;
         x1?: string | undefined;

package/dist/components/Link.svelte

@@ -35,6 +35,8 @@ $: {
   fill="none"
   on:click
   on:mouseover
+  on:mousemove
   on:mouseout
+  on:mouseleave
   {...$$restProps}
 />

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

@@ -18,7 +18,9 @@ declare const __propDef: {
     events: {
         click: MouseEvent;
         mouseover: MouseEvent;
+        mousemove: MouseEvent;
         mouseout: MouseEvent;
+        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Points.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import Circle from './Circle.svelte';
 import { isScaleBand } from '../utils/scales';
+import { notNull } from 'svelte-ux';
 const context = getContext('LayerCake');
 const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
@@ -39,7 +40,9 @@ $: points = $data.flatMap((d) => {
                   x={["prop1" ,"prop2"]}
                   y="prop3"
               */
-        return $xGet(d).map((x) => {
+        return $xGet(d)
+            .filter(notNull)
+            .map((x) => {
             return {
                 x: x + getOffset(x, offsetX, $xScale),
                 y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
@@ -52,7 +55,9 @@ $: points = $data.flatMap((d) => {
                   x="prop1"
                   y={["prop2" ,"prop3"]}
               */
-        return $yGet(d).map((y) => {
+        return $yGet(d)
+            .filter(notNull)
+            .map((y) => {
             return {
                 x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
                 y: y + getOffset(y, offsetY, $yScale),

package/dist/components/Rect.svelte

@@ -24,5 +24,7 @@ $: tweened_height.set(height);
   {...$$restProps}
   on:click
   on:mouseover
+  on:mousemove
   on:mouseout
+  on:mouseleave
 />

package/dist/components/RectClipPath.svelte

@@ -16,6 +16,7 @@ export let tweened = undefined;
 </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>

package/dist/components/Tooltip.svelte

@@ -2,6 +2,7 @@
 import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
+import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
 export let topOffset = 10;
 export let leftOffset = 10;
@@ -15,8 +16,8 @@ let tooltipHeight = 0;
 let top = animate ? spring($tooltip.top) : writable($tooltip.top);
 $: if ($tooltip) {
     if (contained === 'container' && $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
-        // change side
-        $top = $tooltip.top - (topOffset + tooltipHeight);
+        // Change side.  Do not allow tooltip to go above the top
+        $top = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
     }
     else {
         $top = $tooltip.top + topOffset;
@@ -25,8 +26,8 @@ $: if ($tooltip) {
 let left = animate ? spring($tooltip.left) : writable($tooltip.left);
 $: if ($tooltip) {
     if (contained === 'container' && $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
-        // change side
-        $left = $tooltip.left - (leftOffset + tooltipWidth);
+        // Change side
+        $left = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
     }
     else {
         $left = $tooltip.left + leftOffset;
@@ -36,7 +37,7 @@ $: if ($tooltip) {
 
 {#if $tooltip.data}
   <div
-    class="absolute pointer-events-none z-50"
+    class={cls('absolute pointer-events-none z-50', $$props.class)}
     style:top="{$top}px"
     style:left="{$left}px"
     transition:fade={{ duration: 100 }}
@@ -44,11 +45,11 @@ $: 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"
+      class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1 h-full"
     >
       {#if header || $$slots.header}
         <div class="text-center font-semibold whitespace-nowrap">
-          <slot name="header">
+          <slot name="header" data={$tooltip.data}>
             {header($tooltip.data)}
           </slot>
         </div>

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         topOffset?: number | undefined;
         leftOffset?: number | undefined;
         contained?: false | "container" | undefined;
@@ -11,7 +12,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        header: {};
+        header: {
+            data: any;
+        };
         default: {
             data: any;
         };

package/dist/docs/RangeField.svelte

@@ -6,7 +6,7 @@ export let max = 100;
 export let step = 1;
 </script>
 
-<Field let:id {...$$restProps}>
+<Field let:id classes={{ input: 'mt-[6px] mb-1' }} {...$$restProps}>
   <Button
     icon={mdiChevronLeft}
     on:click={() => (value -= value > min ? step : 0)}

package/dist/docs/ViewSourceButton.svelte

@@ -11,10 +11,10 @@ export let icon;
   <Toggle let:on={open} let:toggle>
     <Button {icon} on:click={toggle} variant="fill-light" color="blue" size="sm">{label}</Button>
     <Dialog {open} on:close={toggle}>
-      <div class="grid grid-cols-[1fr,auto] gap-1 items-center p-4">
-        <div>
+      <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
+        <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
-          <div class="text-xs text-black/50">{href}</div>
+          <div class="text-xs text-black/50 truncate">{href}</div>
         </div>
 
         {#if href}
@@ -24,7 +24,7 @@ export let icon;
         {/if}
       </div>
 
-      <div class="max-h-[80vh] w-[70vw] overflow-auto">
+      <div class="max-h-[80vh] overflow-auto">
         <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
       </div>
 

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -18,8 +18,8 @@
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@sveltejs/adapter-vercel": "^3.0.1",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "^2.0.2",
+    "@sveltejs/kit": "^1.20.5",
+    "@sveltejs/package": "^2.1.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/d3-array": "^3.0.5",
     "@types/d3-delaunay": "^6.0.1",
@@ -36,7 +36,7 @@
     "@types/shapefile": "^0.6.1",
     "@types/topojson-client": "^3.1.1",
     "autoprefixer": "^10.4.14",
-    "mdsvex": "^0.10.6",
+    "mdsvex": "^0.11.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "prism-themes": "^1.9.0",
@@ -71,11 +71,11 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "date-fns": "^2.30.0",
-    "layercake": "^7.4.0",
+    "layercake": "^7.6.0",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.42.0",
+    "svelte-ux": "^0.43.3",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",