layerchart 0.72.2 → 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/AreaChart.svelte

@@ -92,6 +92,13 @@
     points?: Partial<ComponentProps<Points>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -303,9 +310,9 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
@@ -318,11 +325,12 @@
               color={s.color}
               {format}
               valueAlign="right"
+              {...props.tooltip?.item}
             />
           {/each}
 
           {#if stackSeries}
-            <Tooltip.Separator />
+            <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
@@ -334,6 +342,7 @@
               })}
               format="integer"
               valueAlign="right"
+              {...props.tooltip?.root}
             />
           {/if}
         </Tooltip.List>

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 = () => {};
@@ -127,6 +131,13 @@
     legend?: Partial<ComponentProps<Legend>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -170,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,
@@ -337,9 +371,11 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.Header>{format(isVertical ? x(data) : y(data))}</Tooltip.Header>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.Header {...props.tooltip?.header}
+          >{format(isVertical ? x(data) : y(data))}</Tooltip.Header
+        >
+        <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
@@ -351,11 +387,12 @@
               color={s.color ?? cScale?.(c(data))}
               {format}
               valueAlign="right"
+              {...props.tooltip?.item}
             />
           {/each}
 
           {#if stackSeries || groupSeries}
-            <Tooltip.Separator />
+            <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
@@ -366,6 +403,7 @@
               })}
               format="integer"
               valueAlign="right"
+              {...props.tooltip?.item}
             />
           {/if}
         </Tooltip.List>

package/dist/components/charts/LineChart.svelte

@@ -83,6 +83,13 @@
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
     points?: Partial<ComponentProps<Points>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -243,9 +250,9 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List {...props.tooltip?.list}>
           {#each series as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
             {@const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key))}
@@ -255,6 +262,7 @@
               value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color}
               {format}
+              {...props.tooltip?.item}
             />
           {/each}
         </Tooltip.List>

package/dist/components/charts/PieChart.svelte

@@ -107,6 +107,13 @@
     group?: Partial<ComponentProps<Group>>;
     arc?: Partial<ComponentProps<Arc>>;
     legend?: Partial<ComponentProps<Legend>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -257,13 +264,14 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.List {...props.tooltip?.list}>
           <Tooltip.Item
             label={labelAccessor(data) || keyAccessor(data)}
             value={valueAccessor(data)}
             color={cScale?.(c(data))}
             {format}
+            {...props.tooltip?.item}
           />
         </Tooltip.List>
       </Tooltip.Root>

package/dist/components/charts/PieChart.svelte.d.ts

@@ -4,6 +4,7 @@ import Arc from '../Arc.svelte';
 import Group from '../Group.svelte';
 import Legend from '../Legend.svelte';
 import Pie from '../Pie.svelte';
+import * as Tooltip from '../tooltip/index.js';
 import { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
     props(): {
@@ -230,6 +231,13 @@ declare class __sveltets_Render<TData> {
             group?: Partial<ComponentProps<Group>>;
             arc?: Partial<ComponentProps<Arc>>;
             legend?: Partial<ComponentProps<Legend>>;
+            tooltip?: {
+                root?: Partial<ComponentProps<Tooltip.Root>>;
+                header?: Partial<ComponentProps<Tooltip.Header>>;
+                list?: Partial<ComponentProps<Tooltip.List>>;
+                item?: Partial<ComponentProps<Tooltip.Item>>;
+                separator?: Partial<ComponentProps<Tooltip.Separator>>;
+            } | undefined;
         } | undefined;
         range?: number[];
         series?: {

package/dist/components/charts/ScatterChart.svelte

@@ -64,6 +64,13 @@
     labels?: Partial<ComponentProps<Labels>>;
     legend?: Partial<ComponentProps<Legend>>;
     rule?: Partial<ComponentProps<Rule>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -199,28 +206,31 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
         {#if activeSeries?.key !== 'default'}
-          <Tooltip.Header color={activeSeries?.color}>
+          <Tooltip.Header {...props.tooltip?.header} color={activeSeries?.color}>
             {activeSeries?.label ?? activeSeries?.key}
           </Tooltip.Header>
         {/if}
-        <Tooltip.List>
+        <Tooltip.List {...props.tooltip?.list}>
           <Tooltip.Item
             label={typeof config.x === 'string' ? config.x : 'x'}
             value={x(data)}
             {format}
+            {...props.tooltip?.item}
           />
           <Tooltip.Item
             label={typeof config.y === 'string' ? config.y : 'y'}
             value={y(data)}
             {format}
+            {...props.tooltip?.item}
           />
           {#if config.r}
             <Tooltip.Item
               label={typeof config.r === 'string' ? config.r : 'r'}
               value={r(data)}
               {format}
+              {...props.tooltip?.item}
             />
           {/if}
         </Tooltip.List>

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.72.2",
+  "version": "0.74.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",