layerchart 0.17.1 → 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/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/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/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -71,11 +71,11 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "date-fns": "^2.30.0",
-    "layercake": "^7.5.0",
+    "layercake": "^7.6.0",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.43.2",
+    "svelte-ux": "^0.43.3",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",