layerchart 0.73.0 → 0.74.0

package/dist/components/Bar.svelte

@@ -5,7 +5,7 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { createDimensionGetter } from '../utils/rect.js';
+  import { createDimensionGetter, type Insets } from '../utils/rect.js';
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { greatestAbs } from '@layerstack/utils';
@@ -54,7 +54,7 @@
     | 'bottom-left'
     | 'bottom-right' = 'all';
 
-  export let inset = 0;
+  export let insets: Insets | undefined = undefined;
 
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
@@ -66,7 +66,7 @@
     y,
     x1,
     y1,
-    inset,
+    insets,
   });
   $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
 

package/dist/components/Bars.svelte

@@ -5,6 +5,7 @@
   import Bar from './Bar.svelte';
   import Rect from './Rect.svelte';
   import { chartDataArray, type Accessor } from '../utils/common.js';
+  import type { Insets } from '../index.js/utils/rect.js';
 
   const { data: contextData, cGet, config } = chartContext();
 
@@ -39,7 +40,7 @@
   export let fill: string | undefined = undefined;
 
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
-  export let inset = 0;
+  export let insets: Insets | undefined = undefined;
 
   /** Define unique value for {#each} `(key)` expressions to improve transitions.  `index` position used by default */
   export let key: (d: any, index: number) => any = (d, i) => i;
@@ -66,7 +67,7 @@
         {stroke}
         {strokeWidth}
         {radius}
-        {inset}
+        {insets}
         {spring}
         {tweened}
         on:click={() => onBarClick({ data: d })}

package/dist/components/Highlight.svelte

@@ -361,7 +361,7 @@
         spring={motion}
         x={typeof bar === 'object' ? bar.x : undefined}
         y={typeof bar === 'object' ? bar.y : undefined}
-        inset={typeof bar === 'object' ? bar.inset : undefined}
+        insets={typeof bar === 'object' ? bar.insets : undefined}
         stroke={typeof bar === 'object' ? bar.stroke : undefined}
         strokeWidth={typeof bar === 'object' ? bar.strokeWidth : undefined}
         radius={typeof bar === 'object' ? bar.radius : undefined}

package/dist/components/charts/BarChart.svelte

@@ -25,6 +25,7 @@
     type Accessor,
   } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
+  import type { Insets } from '../../index.js/utils/rect.js';
 
   type ChartProps = ComponentProps<Chart<TData>>;
 
@@ -33,6 +34,7 @@
     grid?: typeof grid;
     bandPadding?: typeof bandPadding;
     groupPadding?: typeof groupPadding;
+    stackPadding?: typeof stackPadding;
     labels?: typeof labels;
     legend?: typeof legend;
     orientation?: typeof orientation;
@@ -84,6 +86,8 @@
   export let bandPadding = 0.4;
   /** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
   export let groupPadding = 0;
+  /** Padding between series items within bars when using 'seriesLayout="stack"' */
+  export let stackPadding = 0;
 
   /** Event dispatched with current tooltip data */
   export let onTooltipClick: (e: { data: any }) => void = () => {};
@@ -177,18 +181,41 @@
   }
 
   function getBarsProps(s: (typeof series)[number], i: number) {
-    const valueAccesor = stackSeries
+    const isFirst = i == 0;
+    const isLast = i == series.length - 1;
+
+    const isStackLayout = seriesLayout.startsWith('stack');
+
+    let stackInsets: Insets | undefined = undefined;
+
+    if (isStackLayout) {
+      const stackInset = stackPadding / 2;
+      if (isVertical) {
+        stackInsets = {
+          bottom: isFirst ? undefined : stackInset,
+          top: isLast ? undefined : stackInset,
+        };
+      } else {
+        stackInsets = {
+          left: isFirst ? undefined : stackInset,
+          right: isLast ? undefined : stackInset,
+        };
+      }
+    }
+
+    const valueAccessor = stackSeries
       ? (d: any) => d.stackData[i]
       : (s.value ?? (s.data ? undefined : s.key));
     const barsProps: ComponentProps<Bars> = {
       data: s.data,
-      x: !isVertical ? valueAccesor : undefined,
-      y: isVertical ? valueAccesor : undefined,
+      x: !isVertical ? valueAccessor : undefined,
+      y: isVertical ? valueAccessor : undefined,
       x1: isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
-      rounded: seriesLayout.startsWith('stack') && i !== series.length - 1 ? 'none' : 'edge',
+      rounded: isStackLayout && i !== series.length - 1 ? 'none' : 'edge',
       radius: 4,
       strokeWidth: 1,
+      insets: stackInsets,
       fill: s.color,
       onBarClick: (e) => onBarClick({ data: e.data, series: s }),
       ...props.bars,

package/dist/utils/rect.d.ts

@@ -1,5 +1,22 @@
 import type { ChartContext } from '../components/ChartContext.svelte';
 import { type Accessor } from './common.js';
+/** A set of inset distances, applied to a rectangle to shrink or expand the area represented by that rectangle. */
+export type Insets = {
+    /** Applies an inset all sides of a rectangle: `left`, `right`, `bottom`, and `top` */
+    all?: number;
+    /** Applies an inset all horizontal sides of a rectangle: `left`, and `right`, overriding `all` */
+    x?: number;
+    /** Applies an inset all vertical sides of a rectangle: `top`, and `bottom`, overriding `all` */
+    y?: number;
+    /** Applies an inset the left side of a rectangle, overriding `x` */
+    left?: number;
+    /** Applies an inset the right side of a rectangle, overriding `x` */
+    right?: number;
+    /** Applies an inset the top side of a rectangle, overriding `y` */
+    top?: number;
+    /** Applies an inset the bottom side of a rectangle, overriding `y` */
+    bottom?: number;
+};
 type DimensionGetterOptions = {
     /** Override `x` accessor from context */
     x?: Accessor;
@@ -9,7 +26,7 @@ type DimensionGetterOptions = {
     x1?: Accessor;
     /** Override `y1` accessor from context */
     y1?: Accessor;
-    inset?: number;
+    insets?: Insets;
 };
 export declare function createDimensionGetter<TData>(context: ChartContext<TData>, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
     x: any;

package/dist/utils/rect.js

@@ -4,8 +4,8 @@ import { isScaleBand } from './scales.js';
 import { accessor } from './common.js';
 export function createDimensionGetter(context, options) {
     const { xScale, yScale, x: xAccessor, y: yAccessor, x1: x1Accessor, y1: y1Accessor, x1Scale, y1Scale, } = context;
-    const inset = options?.inset ?? 0;
     return derived([xScale, x1Scale, yScale, y1Scale, xAccessor, yAccessor, x1Accessor, y1Accessor], ([$xScale, $x1Scale, $yScale, $y1Scale, $xAccessor, $yAccessor, $x1Accessor, $y1Accessor]) => {
+        const insets = resolveInsets(options?.insets);
         // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
         const [minXDomain, maxXDomain] = $xScale.domain();
         const [minYDomain, maxYDomain] = $yScale.domain();
@@ -17,9 +17,11 @@ export function createDimensionGetter(context, options) {
         return function getter(item) {
             if (isScaleBand($yScale)) {
                 // Horizontal band
-                const y = firstValue($yScale(_y(item)) ?? 0) + ($y1Scale ? $y1Scale(_y1(item)) : 0) + inset / 2;
+                const y = firstValue($yScale(_y(item)) ?? 0) + ($y1Scale ? $y1Scale(_y1(item)) : 0) + insets.top;
                 const height = Math.max(0, $yScale.bandwidth
-                    ? ($y1Scale ? ($y1Scale.bandwidth?.() ?? 0) : $yScale.bandwidth()) - inset
+                    ? ($y1Scale ? ($y1Scale.bandwidth?.() ?? 0) : $yScale.bandwidth()) -
+                        insets.bottom -
+                        insets.top
                     : 0);
                 const xValue = _x(item);
                 let left = 0;
@@ -44,18 +46,17 @@ export function createDimensionGetter(context, options) {
                     left = xValue;
                     right = min([0, maxXDomain]);
                 }
-                return {
-                    x: $xScale(left),
-                    y,
-                    width: $xScale(right) - $xScale(left),
-                    height,
-                };
+                const x = $xScale(left) + insets.left;
+                const width = Math.max(0, $xScale(right) - $xScale(left) - insets.left - insets.right);
+                return { x, y, width, height };
             }
             else {
                 // Vertical band or linear
-                const x = firstValue($xScale(_x(item))) + ($x1Scale ? $x1Scale(_x1(item)) : 0) + inset / 2;
+                const x = firstValue($xScale(_x(item))) + ($x1Scale ? $x1Scale(_x1(item)) : 0) + insets.left;
                 const width = Math.max(0, $xScale.bandwidth
-                    ? ($x1Scale ? ($x1Scale.bandwidth?.() ?? 0) : $xScale.bandwidth()) - inset
+                    ? ($x1Scale ? ($x1Scale.bandwidth?.() ?? 0) : $xScale.bandwidth()) -
+                        insets.left -
+                        insets.right
                     : 0);
                 const yValue = _y(item);
                 let top = 0;
@@ -80,12 +81,9 @@ export function createDimensionGetter(context, options) {
                     top = min([0, maxYDomain]);
                     bottom = yValue;
                 }
-                return {
-                    x,
-                    y: $yScale(top),
-                    width,
-                    height: $yScale(bottom) - $yScale(top),
-                };
+                const y = $yScale(top) + insets.top;
+                const height = $yScale(bottom) - $yScale(top) - insets.bottom - insets.top;
+                return { x, y, width, height };
             }
         };
     });
@@ -97,3 +95,13 @@ export function createDimensionGetter(context, options) {
 export function firstValue(value) {
     return Array.isArray(value) ? value[0] : value;
 }
+function resolveInsets(insets) {
+    const all = insets?.all ?? 0;
+    const x = insets?.x ?? all;
+    const y = insets?.y ?? all;
+    const left = insets?.left ?? x;
+    const right = insets?.right ?? x;
+    const top = insets?.top ?? y;
+    const bottom = insets?.bottom ?? y;
+    return { left, right, bottom, top };
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",