layerchart 0.42.0 → 0.43.0

package/dist/components/Arc.svelte

@@ -12,10 +12,11 @@
 // https://github.com/mnsht/gradient-path
 // https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
 // https://codepen.io/simeydotme/pen/rrOEmO/
-import { getContext, tick } from 'svelte';
+import { tick } from 'svelte';
 import { arc as d3arc } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
 import { min, max } from 'd3-array';
+import { chartContext } from './ChartContext.svelte';
 import { motionStore } from '../stores/motionStore.js';
 import { degreesToRadians } from '../utils/math.js';
 export let spring = undefined;
@@ -60,7 +61,7 @@ export let cornerRadius = 0;
 export let padAngle = 0;
 // export let padRadius = 0;
 export let track = false;
-const { yRange } = getContext('LayerCake');
+const { yRange } = chartContext();
 $: scale = scaleLinear().domain(domain).range(range);
 function getOuterRadius(outerRadius, chartRadius) {
     if (outerRadius == null) {
@@ -83,7 +84,7 @@ function getOuterRadius(outerRadius, chartRadius) {
         return outerRadius;
     }
 }
-$: _outerRadius = getOuterRadius(outerRadius, max($yRange) / 2);
+$: _outerRadius = getOuterRadius(outerRadius, (max($yRange) ?? 0) / 2);
 function getInnerRadius(innerRadius, outerRadius) {
     if (innerRadius == null) {
         return Math.min(...$yRange);
@@ -122,38 +123,44 @@ $: trackArc = d3arc()
     .cornerRadius(cornerRadius)
     .padAngle(padAngle);
 // .padRadius(padRadius);
+// @ts-expect-error
 $: trackArcCentroid = trackArc.centroid();
 // $: console.log(trackArcCentroid)
-let trackArcEl;
-$: boundingBox = trackArc && trackArcEl ? trackArcEl.getBBox() : {};
-// $: console.log(boundingBox)
-$: labelArcCenterOffset = {
-    x: outerRadius - boundingBox.width / 2,
-    // x: 0,
-    y: (outerRadius - boundingBox.height / 2) * -1,
-};
+let trackArcEl = undefined;
+$: boundingBox = trackArcEl ? trackArcEl.getBBox() : {};
+// $: labelArcCenterOffset = {
+//   x: outerRadius - boundingBox.width / 2,
+//   // x: 0,
+//   y: (outerRadius - boundingBox.height / 2) * -1,
+// };
 // $: console.log(labelArcCenterOffset)
-$: labelArcBottomOffset = {
-    // x: outerRadius - boundingBox.width / 2,
-    x: outerRadius - boundingBox.width / 2,
-    // x: 0,
-    // y: (outerRadius - boundingBox.height) * -1
-    y: (outerRadius - boundingBox.height) * -1,
-};
+// $: labelArcBottomOffset = {
+//   // x: outerRadius - boundingBox.width / 2,
+//   x: outerRadius - boundingBox.width / 2,
+//   // x: 0,
+//   // y: (outerRadius - boundingBox.height) * -1
+//   y: (outerRadius - boundingBox.height) * -1,
+// };
 // $: console.log(labelArcBottomOffset)
 /**
  * Offset arc from center
  */
 export let offset = 0;
-$: angle = (startAngle + endAngle) / 2;
+$: angle = ((startAngle ?? 0) + (endAngle ?? 0)) / 2;
 $: xOffset = Math.sin(angle) * offset;
 $: yOffset = -Math.cos(angle) * offset;
 </script>
 
 {#if track}
-  <path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
+  <path
+    d={trackArc()}
+    class="track"
+    bind:this={trackArcEl}
+    {...typeof track === 'object' ? track : null}
+  />
 {/if}
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <path
   d={arc()}
   transform="translate({xOffset}, {yOffset})"

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

@@ -31,8 +31,8 @@ declare const __propDef: {
     slots: {
         default: {
             value: number;
-            centroid: [number, number];
-            boundingBox: any;
+            centroid: any;
+            boundingBox: DOMRect;
         };
     };
 };

package/dist/components/Area.svelte

@@ -1,11 +1,12 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
 import { area as d3Area, areaRadial } from 'd3-shape';
 import { max } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore.js';
+import { chartContext } from './ChartContext.svelte';
 import Spline from './Spline.svelte';
-const { data: contextData, xScale, yScale, xGet, yGet, yRange } = getContext('LayerCake');
+const { data: contextData, xScale, yScale, xGet, yGet, yRange } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
@@ -13,11 +14,11 @@ export let pathData = undefined;
 /** Use radial instead of cartesian area generator, mapping `x` to `angle` and `y0`/`y1 to `innerRadius`/`outerRadius.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
 export let radial = false;
 /** Override x accessor */
-export let x = undefined; // TODO: Update Type
+export let x = undefined;
 /** Override y0 accessor.  Defaults to max($yRange) */
-export let y0 = undefined; // TODO: Update Type
+export let y0 = undefined;
 /** Override y1 accessor.  Defaults to y accessor */
-export let y1 = undefined; // TODO: Update Type
+export let y1 = undefined;
 /** Interpolate path data using d3-interpolate-path */
 export let tweened = undefined;
 export let clipPath = undefined;
@@ -25,7 +26,9 @@ export let curve = undefined;
 export let defined = undefined;
 /** Enable showing line */
 export let line = false;
-$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+$: tweenedOptions = tweened
+    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
+    : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
@@ -42,7 +45,7 @@ $: {
     if (defined)
         path.defined(defined);
     const d = pathData ?? path(data ?? $contextData);
-    tweened_d.set(d);
+    tweened_d.set(d ?? '');
 }
 </script>
 
@@ -50,6 +53,7 @@ $: {
   <Spline {data} y={y1} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
 {/if}
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <path
   d={$tweened_d}
   clip-path={clipPath}

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

@@ -9,9 +9,9 @@ declare const __propDef: {
         data?: any;
         pathData?: string | undefined | null;
         radial?: boolean;
-        x?: any;
-        y0?: any;
-        y1?: any;
+        x?: ((d: any) => any) | undefined;
+        y0?: ((d: any) => any) | undefined;
+        y1?: ((d: any) => any) | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         clipPath?: string | undefined;
         curve?: CurveFactory | undefined;

package/dist/components/AreaStack.svelte

@@ -1,7 +1,8 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import Area from './Area.svelte';
 import Spline from './Spline.svelte';
-const { data, rGet } = getContext('LayerCake');
+const { data, rGet } = chartContext();
 export let curve = undefined;
 export let defined = undefined;
 export let opacity = 0.3;

package/dist/components/Axis.svelte

@@ -1,14 +1,15 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
 import { fade } from 'svelte/transition';
 import { cubicIn } from 'svelte/easing';
 import { extent } from 'd3-array';
 import { pointRadial } from 'd3-shape';
 import { format as formatValue, cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
-const { xScale, yScale, xRange, yRange, width, height, padding } = getContext('LayerCake');
+const { xScale, yScale, xRange, yRange, width, height, padding } = chartContext();
 /** Location of axis */
 export let placement;
 /** Axis label */
@@ -31,7 +32,11 @@ export let format = undefined;
 export let tickLabelProps = undefined;
 export let spring = undefined;
 export let tweened = undefined;
-export let transitionIn = tweened ? fade : () => { };
+export let transitionIn = tweened
+    ? fade
+    : () => {
+        return {};
+    };
 export let transitionInParams = { easing: cubicIn };
 $: orientation =
     placement === 'angle'
@@ -133,6 +138,35 @@ function getDefaultTickLabelProps(tick) {
             };
     }
 }
+$: resolvedLabelProps = {
+    value: label,
+    x: placement === 'left' || (orientation === 'horizontal' && labelPlacement === 'start')
+        ? -$padding.left
+        : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
+            ? $width + $padding.right
+            : $width / 2,
+    y: placement === 'top' || (orientation === 'vertical' && labelPlacement === 'start')
+        ? -$padding.top
+        : orientation === 'vertical' && labelPlacement === 'middle'
+            ? $height / 2
+            : placement === 'bottom' || labelPlacement === 'end'
+                ? $height + $padding.bottom
+                : 0,
+    textAnchor: labelPlacement === 'middle'
+        ? 'middle'
+        : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
+            ? 'end'
+            : 'start',
+    verticalAnchor: placement === 'top' ||
+        (orientation === 'vertical' && labelPlacement === 'start') ||
+        (placement === 'left' && labelPlacement === 'middle')
+        ? 'start'
+        : 'end',
+    rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
+    capHeight: '.5rem', // text-[10px]
+    ...labelProps,
+    class: cls('label text-[10px] stroke-surface-100 [stroke-width:2px] font-light', labelProps?.class),
+};
 </script>
 
 <g class="Axis placement-{placement}">
@@ -178,44 +212,7 @@ function getDefaultTickLabelProps(tick) {
   {/if}
 
   {#if label}
-    {@const resolvedLabelProps = {
-      value: label,
-      x:
-        placement === 'left' || (orientation === 'horizontal' && labelPlacement === 'start')
-          ? -$padding.left
-          : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
-            ? $width + $padding.right
-            : $width / 2,
-      y:
-        placement === 'top' || (orientation === 'vertical' && labelPlacement === 'start')
-          ? -$padding.top
-          : orientation === 'vertical' && labelPlacement === 'middle'
-            ? $height / 2
-            : placement === 'bottom' || labelPlacement === 'end'
-              ? $height + $padding.bottom
-              : 0,
-      textAnchor:
-        labelPlacement === 'middle'
-          ? 'middle'
-          : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
-            ? 'end'
-            : 'start',
-      verticalAnchor:
-        placement === 'top' ||
-        (orientation === 'vertical' && labelPlacement === 'start') ||
-        (placement === 'left' && labelPlacement === 'middle')
-          ? 'start'
-          : 'end',
-      rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
-      capHeight: '.5rem', // text-[10px]
-      ...labelProps,
-      class: cls(
-        'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-        labelProps?.class
-      ),
-    }}
-
-    <Text value={label} {...resolvedLabelProps} />
+    <Text {...resolvedLabelProps} />
   {/if}
 
   {#each tickVals as tick, index (tick)}

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

@@ -5,21 +5,22 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 import { type FormatType, type TransitionParams } from 'svelte-ux';
 import Text from './Text.svelte';
+import { type AnyScale } from '../utils/scales.js';
 declare const __propDef: {
     props: {
         /** Location of axis */ placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
         /** Axis label */ label?: string;
         /** Location of axis label */ labelPlacement?: "start" | "middle" | "end";
         /** Props applied label Text */ labelProps?: Partial<ComponentProps<Text>> | undefined;
-        /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement>;
-        /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement>;
-        /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
+        /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">;
+        /** Draw a grid lines */ grid?: boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">;
+        /** Control the number of ticks*/ ticks?: number | any[] | ((scale: AnyScale) => any) | null | undefined;
         /** Length of the tick line */ tickLength?: number;
         /** Format tick labels */ format?: FormatType | undefined;
         /** Props to apply to each tick label */ tickLabelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        transitionIn?: typeof fade | (() => void);
+        transitionIn?: typeof fade | (() => {});
         transitionInParams?: TransitionParams;
         scale?: any;
     };

package/dist/components/Bar.svelte

@@ -1,8 +1,9 @@
-<script>import { getContext } from 'svelte';
-import { createDimensionGetter } from '../utils/rect.js';
+<script>import {} from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import Rect from './Rect.svelte';
 import Spline from './Spline.svelte';
-const { x: xContext, y: yContext } = getContext('LayerCake');
+import { createDimensionGetter } from '../utils/rect.js';
+const { x: xContext, y: yContext } = chartContext();
 export let bar;
 /**
  * Override `x` from context.  Useful for multiple Bar instances
@@ -26,7 +27,7 @@ export let spring = undefined;
 export let tweened = undefined;
 $: if (stroke === null || stroke === undefined)
     stroke = 'black';
-$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+$: getDimensions = createDimensionGetter(chartContext(), {
     x,
     y,
     groupBy,
@@ -36,7 +37,7 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
         outer: groupPaddingOuter,
     },
 });
-$: dimensions = $getDimensions(bar);
+$: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
 $: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
 $: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
 $: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);

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

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Rect from './Rect.svelte';
+import type { Accessor } from '../index.js/utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         bar: Object;
-        x?: any;
-        y?: any;
+        x?: Accessor;
+        y?: Accessor;
         fill?: string | undefined;
         stroke?: string;
         strokeWidth?: number;

package/dist/components/Bars.svelte

@@ -1,15 +1,16 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
-const { data, rGet, config } = getContext('LayerCake');
+const { data, rGet, config } = chartContext();
 /**
  * Override `x` from context.  Useful for multiple Bar instances
  */
-export let x = undefined; // TODO: Update Type
+export let x = undefined;
 /**
  * Override `y` from context.  Useful for multiple Bar instances
  */
-export let y = undefined; // TODO: Update Type
+export let y = undefined;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;

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

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Rect from './Rect.svelte';
+import type { Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        x?: any;
-        y?: any;
+        x?: Accessor;
+        y?: Accessor;
         stroke?: string;
         strokeWidth?: number;
         radius?: number;

package/dist/components/Bounds.svelte

@@ -1,15 +1,17 @@
-<script>import { getContext } from 'svelte';
-import { scaleLinear } from 'd3-scale';
+<script>import { scaleLinear } from 'd3-scale';
+import { chartContext } from './ChartContext.svelte';
 import { motionScale } from '../utils/scales.js';
-const { width, height } = getContext('LayerCake');
-export let domain;
-export let range;
+const { width, height } = chartContext();
+export let domain = undefined;
+export let range = undefined;
 export let spring = undefined;
 export let tweened = undefined;
 function getExtents(extents, axis, fallback) {
     const resolvedExtents = typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
     return [
+        // @ts-expect-error
         resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
+        // @ts-expect-error
         resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
     ];
 }

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

@@ -2,34 +2,34 @@ import { SvelteComponentTyped } from "svelte";
 import { motionScale } from '../utils/scales.js';
 declare const __propDef: {
     props: {
-        domain: {
+        domain?: Partial<{
             x0: number;
             y0: number;
             x1: number;
             y1: number;
-        } | ((dimensions: {
+        }> | ((dimensions: {
             width: number;
             height: number;
-        }) => {
+        }) => Partial<{
             x0: number;
             y0: number;
             x1: number;
             y1: number;
-        });
-        range: {
+        }>) | null | undefined;
+        range?: Partial<{
             x0: number;
             y0: number;
             x1: number;
             y1: number;
-        } | ((dimensions: {
+        }> | ((dimensions: {
             width: number;
             height: number;
-        }) => {
+        }) => Partial<{
             x0: number;
             y0: number;
             x1: number;
             y1: number;
-        });
+        }>) | null | undefined;
         spring?: boolean | Parameters<typeof motionScale>[1]["spring"];
         tweened?: boolean | Parameters<typeof motionScale>[1]["tweened"];
     };

package/dist/components/Brush.svelte

@@ -1,10 +1,11 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { extent } from 'd3-array';
 import { clamp, cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import Frame from './Frame.svelte';
 import { localPoint } from '../utils/event.js';
 import Group from './Group.svelte';
-const { xScale, yScale, width, height, padding } = getContext('LayerCake');
+const { xScale, yScale, width, height, padding } = chartContext();
 const dispatch = createEventDispatcher();
 /** Axis to apply brushing */
 export let axis = 'x';
@@ -31,15 +32,15 @@ function handler(fn) {
             xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
             yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
             value: {
-                x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
-                y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+                x: $xScale.invert?.(localPoint(frameEl, e)?.x ?? 0 - $padding.left),
+                y: $yScale.invert?.(localPoint(frameEl, e)?.y ?? 0 - $padding.top),
             },
         };
         dispatch('brushStart', { xDomain, yDomain });
         const onPointerMove = (e) => {
             fn(start, {
-                x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
-                y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+                x: $xScale.invert?.(localPoint(frameEl, e)?.x ?? 0 - $padding.left),
+                y: $yScale.invert?.(localPoint(frameEl, e)?.y ?? 0 - $padding.top),
             });
             // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
             //   // Ignore?
@@ -139,6 +140,7 @@ $: isActive =
   />
 
   {#if isActive}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <Group x={rangeLeft} y={rangeTop} class="range">
       <slot name="range" {rangeWidth} {rangeHeight}>
         <rect

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

@@ -6,8 +6,8 @@ declare const __propDef: {
         axis?: "x" | "y" | "both";
         handleSize?: number;
         resetOnEnd?: boolean;
-        xDomain?: [number | null, number | null];
-        yDomain?: [number | null, number | null];
+        xDomain?: [number | Date | null, number | Date | null];
+        yDomain?: [number | Date | null, number | Date | null];
         range?: SVGAttributes<SVGRectElement> | undefined;
         handle?: SVGAttributes<SVGRectElement> | undefined;
         classes?: {

package/dist/components/Calendar.svelte

@@ -1,7 +1,8 @@
-<script>import { getContext } from 'svelte';
-import { timeDays, timeMonths, timeWeek, timeYear, utcYear } from 'd3-time';
+<script>import {} from 'svelte';
+import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
 import { index } from 'd3-array';
 import { format } from 'date-fns';
+import { chartContext } from './ChartContext.svelte';
 import Rect from './Rect.svelte';
 import MonthPath from './MonthPath.svelte';
 import Text from './Text.svelte';
@@ -17,7 +18,7 @@ export let monthPath = false;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { width, height, x, rGet, data, config } = getContext('LayerCake');
+const { width, height, x, rGet, data, config } = chartContext();
 $: yearDays = timeDays(start, end);
 $: yearMonths = timeMonths(start, end);
 $: yearWeeks = timeWeek.count(start, end);