layerchart 0.53.0 → 0.54.0

package/dist/components/Axis.svelte

@@ -6,8 +6,8 @@ import { pointRadial } from 'd3-shape';
 import { format as formatValue } from '@layerstack/utils';
 import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
-import Circle from './Circle.svelte';
 import Line from './Line.svelte';
+import Rule from './Rule.svelte';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
 const { xScale, yScale, xRange, yRange, width, height, padding } = chartContext();
@@ -101,35 +101,41 @@ function getDefaultTickLabelProps(tick) {
             return {
                 textAnchor: 'middle',
                 verticalAnchor: 'end',
-                dy: -6, // manually adjusted until Text supports custom styles
+                dy: -tickLength - 2, // manually adjusted until Text supports custom styles
             };
         case 'bottom':
             return {
                 textAnchor: 'middle',
                 verticalAnchor: 'start',
-                dy: 4, // manually adjusted until Text supports custom styles
+                dy: tickLength, // manually adjusted until Text supports custom styles
             };
         case 'left':
             return {
                 textAnchor: 'end',
                 verticalAnchor: 'middle',
-                dx: -4,
+                dx: -tickLength,
                 dy: -2, // manually adjusted until Text supports custom styles
             };
         case 'right':
             return {
                 textAnchor: 'start',
                 verticalAnchor: 'middle',
-                dx: 4,
+                dx: tickLength,
                 dy: -2, // manually adjusted until Text supports custom styles
             };
         case 'angle':
-            const xValue = _scale(tick);
+            const xValue = _scale(tick); // angle in radians
             return {
-                textAnchor: xValue === 0 || xValue === Math.PI ? 'middle' : xValue > Math.PI ? 'end' : 'start',
+                textAnchor: xValue === 0 ||
+                    Math.abs(xValue - Math.PI) < 0.01 || // ~180deg
+                    Math.abs(xValue - Math.PI * 2) < 0.01 // ~360deg
+                    ? 'middle'
+                    : xValue > Math.PI
+                        ? 'end'
+                        : 'start',
                 verticalAnchor: 'middle',
-                dx: 0,
-                dy: -2, // manually adjusted until Text supports custom styles
+                dx: Math.sin(xValue) * (tickLength + 2),
+                dy: -Math.cos(xValue) * (tickLength + 4), // manually adjusted until Text supports custom styles
             };
         case 'radius':
             return {
@@ -173,44 +179,15 @@ $: resolvedLabelProps = {
 
 <g class={cls('Axis placement-{placement}', classes.root, $$props.class)}>
   {#if rule !== false}
-    {@const lineProps = typeof rule === 'object' ? rule : null}
-    {#if orientation === 'vertical'}
-      <Line
-        x1={placement === 'right' ? xRangeMax : xRangeMin}
-        x2={placement === 'right' ? xRangeMax : xRangeMin}
-        y1={$yRange[0] || 0}
-        y2={$yRange[1] || 0}
-        {tweened}
-        {spring}
-        {...lineProps}
-        class={cls('rule stroke-surface-content/50', lineProps?.class)}
-      />
-    {/if}
-
-    {#if orientation === 'horizontal'}
-      <Line
-        x1={$xRange[0] || 0}
-        x2={$xRange[1] || 0}
-        y1={placement === 'top' ? yRangeMin : yRangeMax}
-        y2={placement === 'top' ? yRangeMin : yRangeMax}
-        {tweened}
-        {spring}
-        {...lineProps}
-        class={cls('rule stroke-surface-content/50', lineProps?.class)}
-      />
-    {/if}
-
-    <!-- TODO: angle rule? -->
-
-    {#if orientation === 'radius'}
-      <Circle
-        r={$yRange[0] || 0}
-        {tweened}
-        {spring}
-        {...lineProps}
-        class={cls('rule stroke-surface-content/20 fill-none', lineProps?.class)}
-      />
-    {/if}
+    {@const ruleProps = typeof rule === 'object' ? rule : null}
+    <Rule
+      x={placement === 'left' || placement === 'right' ? placement : placement === 'angle'}
+      y={placement === 'top' || placement === 'bottom' ? placement : placement === 'radius'}
+      {tweened}
+      {spring}
+      {...ruleProps}
+      class={cls('rule stroke-surface-content/50', ruleProps?.class)}
+    />
   {/if}
 
   {#if label}
@@ -219,10 +196,14 @@ $: resolvedLabelProps = {
 
   {#each tickVals as tick, index (tick)}
     {@const tickCoords = getCoords(tick)}
-    {@const radialTickCoords = pointRadial(tickCoords.x, tickCoords.y)}
+    {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
+    {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
+      tickCoords.x,
+      tickCoords.y + tickLength
+    )}
     {@const resolvedTickLabelProps = {
-      x: orientation === 'angle' ? radialTickCoords[0] : tickCoords.x,
-      y: orientation === 'angle' ? radialTickCoords[1] : tickCoords.y,
+      x: orientation === 'angle' ? radialTickCoordsX : tickCoords.x,
+      y: orientation === 'angle' ? radialTickCoordsY : tickCoords.y,
       value: formatValue(tick, format ?? _scale.tickFormat?.() ?? ((v) => v)),
       ...getDefaultTickLabelProps(tick),
       tweened,
@@ -236,50 +217,15 @@ $: resolvedLabelProps = {
 
     <g in:transitionIn={transitionInParams}>
       {#if grid !== false}
-        {@const lineProps = typeof grid === 'object' ? grid : null}
-        {#if orientation === 'horizontal'}
-          <Line
-            x1={tickCoords.x}
-            y1={yRangeMin}
-            x2={tickCoords.x}
-            y2={yRangeMax}
-            {tweened}
-            {spring}
-            {...lineProps}
-            class={cls('grid stroke-surface-content/10', lineProps?.class)}
-          />
-        {:else if orientation === 'vertical'}
-          <Line
-            x1={0}
-            y1={tickCoords.y}
-            x2={$width}
-            y2={tickCoords.y}
-            {tweened}
-            {spring}
-            {...lineProps}
-            class={cls('grid stroke-surface-content/10', lineProps?.class)}
-          />
-        {:else if orientation === 'angle'}
-          {@const [x1, y1] = pointRadial(tickCoords.x, yRangeMin)}
-          {@const [x2, y2] = pointRadial(tickCoords.x, yRangeMax)}
-
-          <Line
-            {x1}
-            {y1}
-            {x2}
-            {y2}
-            {tweened}
-            {spring}
-            {...lineProps}
-            class={cls('grid stroke-surface-content/10', lineProps?.class)}
-          />
-        {:else if orientation === 'radius'}
-          <circle
-            r={tickCoords.y}
-            {...lineProps}
-            class={cls('grid stroke-surface-content/10 fill-none', lineProps?.class)}
-          />
-        {/if}
+        {@const ruleProps = typeof grid === 'object' ? grid : null}
+        <Rule
+          x={orientation === 'horizontal' || orientation === 'angle' ? tick : false}
+          y={orientation === 'vertical' || orientation === 'radius' ? tick : false}
+          {tweened}
+          {spring}
+          {...ruleProps}
+          class={cls('grid stroke-surface-content/10', ruleProps?.class)}
+        />
       {/if}
 
       <!-- Tick marks -->
@@ -303,7 +249,18 @@ $: resolvedLabelProps = {
           {spring}
           class="tick stroke-surface-content/50"
         />
+      {:else if orientation === 'angle'}
+        <Line
+          x1={radialTickCoordsX}
+          y1={radialTickCoordsY}
+          x2={radialTickMarkCoordsX}
+          y2={radialTickMarkCoordsY}
+          {tweened}
+          {spring}
+          class="tick stroke-surface-content/50"
+        />
       {/if}
+      <!-- TODO: Add tick marks for radial (angle)? -->
 
       <slot name="tickLabel" labelProps={resolvedTickLabelProps} {index}>
         <Text {...resolvedTickLabelProps} />

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

@@ -5,6 +5,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 import { type FormatType } from '@layerstack/utils';
 import type { TransitionParams } from 'svelte-ux';
+import Rule from './Rule.svelte';
 import Text from './Text.svelte';
 import { type AnyScale } from '../utils/scales.js';
 declare const __propDef: {
@@ -14,7 +15,7 @@ declare const __propDef: {
         label?: string | undefined;
         labelPlacement?: ("start" | "middle" | "end") | undefined;
         labelProps?: Partial<ComponentProps<Text>> | undefined;
-        rule?: (boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+        rule?: (boolean | Partial<ComponentProps<Rule>>) | undefined;
         grid?: (boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">) | undefined;
         ticks?: number | any[] | ((scale: AnyScale) => any) | null | undefined;
         tickLength?: number | undefined;

package/dist/components/Bars.svelte

@@ -27,6 +27,7 @@ export let y1 = undefined;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
+export let fill = undefined;
 /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
 export let inset = 0;
 export let spring = undefined;
@@ -42,7 +43,7 @@ export let tweened = undefined;
         {y}
         {x1}
         {y1}
-        fill={$config.c ? $cGet(item) : null}
+        fill={fill ?? ($config.c ? $cGet(item) : null)}
         {stroke}
         {strokeWidth}
         {radius}

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

@@ -13,6 +13,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
+        fill?: string | undefined;
         inset?: number | undefined;
         spring?: ComponentProps<Rect>["spring"];
         tweened?: ComponentProps<Rect>["tweened"];

package/dist/components/Chart.svelte

@@ -60,9 +60,11 @@ export let tooltip = undefined;
 export let transform = undefined;
 // @ts-expect-error will only be undefined until bind:transformContext runs
 export let transformContext = undefined;
-// Binded for access within TransformContext
-let geoProjection = undefined;
-// Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
+/** Expose bound geo projection context */
+export let geoProjection = undefined;
+/** Expose bound tooltip context */
+export let tooltipContext = undefined;
+// Track when mounted since LayerCake initializes width/height with `100` until bound `clientWidth`/`clientWidth` can run
 // Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
 let isMounted = false;
 onMount(() => {
@@ -184,7 +186,7 @@ $: _yRange =
       >
         <GeoContext {...geo} bind:geo={geoProjection} let:projection>
           {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-          <TooltipContext {...tooltipProps} let:tooltip>
+          <TooltipContext {...tooltipProps} bind:tooltip={tooltipContext} let:tooltip>
             <slot
               {aspectRatio}
               {containerHeight}

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

@@ -86,40 +86,40 @@ declare class __sveltets_Render<TData> {
         y1Scale?: AnyScale;
         /** The D3 scale that should be used for the  color dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleOrdinal */
         cScale?: AnyScale;
-        /** Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        /** Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         xRange?: string[] | number[] | ((args: {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        /** Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         yRange?: string[] | number[] | ((args: {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        /** Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         zRange?: string[] | number[] | ((args: {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        /** Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         rRange?: string[] | number[] | ((args: {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         x1Range?: string[] | number[] | ((args: {
             xScale: AnyScale;
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
         y1Range?: string[] | number[] | ((args: {
             yScale: AnyScale;
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-        cRange?: string[];
+        /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+        cRange?: string[] | readonly string[];
         /** Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop. @default false */
         xReverse?: boolean;
         /** Reverse the default y range. By default this is `true` and the range is `[height, 0]` unless using an ordinal scale with a `.bandwidth` method for `yScale`. Ignored if you set the `yRange` prop. @default true */
@@ -192,6 +192,13 @@ declare class __sveltets_Render<TData> {
             onClick?: ({ data }: {
                 data: any;
             }) => any;
+            tooltip?: import("svelte/store").Writable<{
+                y: number;
+                x: number;
+                data: any;
+                show: (e: PointerEvent, tooltipData?: any) => void;
+                hide: () => void;
+            }>;
         }> | undefined;
         /** Props passed to TransformContext */
         transform?: Partial<{
@@ -242,6 +249,16 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
         transformContext?: TransformContext;
+        /** Exposed via bind: to support `bind:geoProjection` for external access */
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
+        /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
+        tooltipContext?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }> | undefined;
     };
     events(): {
         resize: any;

package/dist/components/ChartContext.svelte

@@ -127,7 +127,7 @@ $: if (isMounted) {
         containerHeight: $containerHeight,
     });
 }
-// Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
+// Track when mounted since LayerCake initializes width/height with `100` until bound `clientWidth`/`clientWidth` can run
 let isMounted = false;
 onMount(() => {
     isMounted = true;

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

@@ -115,7 +115,7 @@ declare class __sveltets_Render<TData> {
         c?: import("../utils/common.js").Accessor<TData>;
         cScale?: AnyScale<any, any, any, any> | undefined;
         cDomain?: import("../utils/scales.js").DomainType | undefined;
-        cRange?: string[] | undefined;
+        cRange?: string[] | readonly string[] | undefined;
         /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */ radial?: boolean;
         data?: SankeyGraph<any, any> | TData[] | HierarchyNode<TData> | undefined;
     };

package/dist/components/Grid.svelte

@@ -0,0 +1,151 @@
+<script>import { fade } from 'svelte/transition';
+import { cubicIn } from 'svelte/easing';
+import { curveLinearClosed } from 'd3-shape';
+import { cls } from '@layerstack/tailwind';
+import { chartContext } from './ChartContext.svelte';
+import { isScaleBand } from '../utils/scales.js';
+import Rule from './Rule.svelte';
+import Spline from './Spline.svelte';
+import Circle from './Circle.svelte';
+const { xScale, yScale, radial } = chartContext();
+/** Draw a x-axis lines */
+export let x = false;
+/** Draw a y-axis lines */
+export let y = false;
+/** Control the number of x-axis ticks */
+export let xTicks = undefined;
+/** Control the number of y-axis ticks */
+export let yTicks = !isScaleBand($yScale) ? 4 : undefined;
+/** Line alignment when band scale is used (x or y axis) */
+export let bandAlign = 'center';
+/** Render `y` lines with circles or linear splines */
+export let radialY = 'circle';
+export let spring = undefined;
+export let tweened = undefined;
+export let transitionIn = tweened
+    ? fade
+    : () => {
+        return {};
+    };
+export let transitionInParams = { easing: cubicIn };
+export let classes = {};
+function getTickVals(scale, ticks) {
+    return Array.isArray(ticks)
+        ? ticks
+        : typeof ticks === 'function'
+            ? ticks(scale)
+            : isScaleBand(scale)
+                ? ticks
+                    ? scale.domain().filter((v, i) => i % ticks === 0)
+                    : scale.domain()
+                : scale.ticks?.(ticks);
+}
+$: xTickVals = getTickVals($xScale, xTicks);
+$: yTickVals = getTickVals($yScale, yTicks);
+$: xBandOffset = isScaleBand($xScale)
+    ? bandAlign === 'between'
+        ? -($xScale.padding() * $xScale.step()) / 2 // before
+        : $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2 // center
+    : 0;
+$: yBandOffset = isScaleBand($yScale)
+    ? bandAlign === 'between'
+        ? -($yScale.padding() * $yScale.step()) / 2 // before
+        : $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2 // center
+    : 0;
+</script>
+
+<g class={cls('Grid', classes.root, $$props.class)}>
+  {#if x}
+    {@const splineProps = typeof x === 'object' ? x : null}
+    <g in:transitionIn={transitionInParams}>
+      {#each xTickVals as x}
+        {#if $radial}
+          <Spline
+            data={yTickVals.map((y) => ({ x, y }))}
+            x="x"
+            y="y"
+            xOffset={xBandOffset}
+            curve={curveLinearClosed}
+            {tweened}
+            {spring}
+            {...splineProps}
+            class={cls('stroke-surface-content/10', classes.line, splineProps?.class)}
+          />
+        {:else}
+          <Rule
+            {x}
+            xOffset={xBandOffset}
+            {tweened}
+            {spring}
+            {...splineProps}
+            class={cls('stroke-surface-content/10', classes.line, splineProps?.class)}
+          />
+        {/if}
+      {/each}
+
+      <!-- Add extra rule after last band -->
+      {#if isScaleBand($xScale) && bandAlign === 'between' && !$radial && xTickVals.length}
+        <Rule
+          x={xTickVals[xTickVals.length - 1]}
+          xOffset={xBandOffset + $xScale.step()}
+          {tweened}
+          {spring}
+          {...splineProps}
+          class={cls('stroke-surface-content/10', classes.line, splineProps?.class)}
+        />
+      {/if}
+    </g>
+  {/if}
+
+  {#if y}
+    {@const splineProps = typeof y === 'object' ? y : null}
+    <g in:transitionIn={transitionInParams}>
+      {#each yTickVals as y}
+        {#if $radial}
+          {#if radialY === 'circle'}
+            <Circle
+              r={$yScale(y)}
+              {tweened}
+              {spring}
+              {...splineProps}
+              class={cls('fill-none stroke-surface-content/10', classes.line, splineProps?.class)}
+            />
+          {:else}
+            <Spline
+              data={xTickVals.map((x) => ({ x, y }))}
+              x="x"
+              y="y"
+              yOffset={yBandOffset}
+              {tweened}
+              {spring}
+              curve={curveLinearClosed}
+              {...splineProps}
+              class={cls('stroke-surface-content/10', classes.line, splineProps?.class)}
+            />
+          {/if}
+        {:else}
+          <Rule
+            {y}
+            yOffset={yBandOffset}
+            {tweened}
+            {spring}
+            {...splineProps}
+            class={cls('stroke-surface-content/10', classes.line, splineProps?.class)}
+          />
+        {/if}
+      {/each}
+
+      <!-- Add extra rule after last band -->
+      {#if isScaleBand($yScale) && bandAlign === 'between' && !$radial && yTickVals.length}
+        <Rule
+          y={yTickVals[yTickVals.length - 1]}
+          yOffset={yBandOffset + $yScale.step()}
+          {tweened}
+          {spring}
+          {...splineProps}
+          class={cls('stroke-surface-content/10', classes.line, splineProps?.class)}
+        />
+      {/if}
+    </g>
+  {/if}
+</g>

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

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SVGAttributes } from 'svelte/elements';
+import { fade } from 'svelte/transition';
+import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import type { TransitionParams } from 'svelte-ux';
+import { type AnyScale } from '../utils/scales.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        x?: (boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+        y?: (boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+        xTicks?: number | any[] | ((scale: AnyScale) => any) | null | undefined;
+        yTicks?: number | any[] | ((scale: AnyScale) => any) | null | undefined;
+        bandAlign?: ("center" | "between") | undefined;
+        radialY?: ("circle" | "linear") | undefined;
+        spring?: boolean | Parameters<typeof springStore>[1];
+        tweened?: boolean | Parameters<typeof tweenedStore>[1];
+        transitionIn?: (typeof fade | (() => {})) | undefined;
+        transitionInParams?: TransitionParams | undefined;
+        classes?: {
+            root?: string;
+            line?: string;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+export default class Grid extends SvelteComponentTyped<GridProps, GridEvents, GridSlots> {
+}
+export {};

package/dist/components/Labels.svelte

@@ -5,16 +5,26 @@ import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
 import { chartContext } from './ChartContext.svelte';
 import Points, {} from './Points.svelte';
+import { accessor } from '../utils/common.js';
+const { xScale, yScale } = chartContext();
+/** Override display value accessor.  By default, uses `y` unless yScale is band scale   */
+export let value = undefined;
 export let placement = 'outside';
 export let offset = placement === 'center' ? 0 : 4;
 export let format = undefined;
-const { yScale } = chartContext();
 $: getTextProps = (point) => {
-    const value = isScaleBand($yScale) ? point.xValue : point.yValue;
-    const formattedValue = formatValue(value, format ?? $yScale.tickFormat?.());
+    // Used for positioning
+    const pointValue = isScaleBand($yScale) ? point.xValue : point.yValue;
+    const displayValue = value
+        ? accessor(value)(point.data)
+        : isScaleBand($yScale)
+            ? point.xValue
+            : point.yValue;
+    const formattedValue = formatValue(displayValue, format ??
+        (value ? undefined : isScaleBand($yScale) ? $xScale.tickFormat?.() : $yScale.tickFormat?.()));
     if (isScaleBand($yScale)) {
         // Position label left/right on horizontal bars
-        if (value < 0) {
+        if (pointValue < 0) {
             // left
             return {
                 value: formattedValue,
@@ -39,7 +49,7 @@ $: getTextProps = (point) => {
     }
     else {
         // Position label top/bottom on vertical bars
-        if (value < 0) {
+        if (pointValue < 0) {
             // bottom
             return {
                 value: formattedValue,

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

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import { type FormatType } from '@layerstack/utils';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        value?: Accessor;
         placement?: ("inside" | "outside" | "center") | undefined;
         offset?: number | undefined;
         format?: FormatType | undefined;

package/dist/components/Legend.svelte

@@ -182,7 +182,7 @@ else {
               class={cls('h-4 w-4 rounded-full', classes.swatch)}
               style:background-color={scale(tick)}
             />
-            <div class={cls('text-xs text-surface-content', classes.label)}>
+            <div class={cls('text-xs text-surface-content whitespace-nowrap', classes.label)}>
               {tickFormat ? format(tick, tickFormat) : tick}
             </div>
           </div>