layerchart 0.73.0 → 0.75.0

package/dist/components/Area.svelte

@@ -59,9 +59,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
-  const xAccessor = x ? accessor(x) : $contextX;
-  const y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
-  const y1Accessor = y1 ? accessor(y1) : $y;
+  $: xAccessor = x ? accessor(x) : $contextX;
+  $: y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
+  $: y1Accessor = y1 ? accessor(y1) : $y;
 
   $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
   $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 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/Circle.svelte

@@ -78,6 +78,7 @@
     {...$$restProps}
     on:click
     on:pointermove
+    on:pointerenter
     on:pointerleave
   />
 {/if}

package/dist/components/Highlight.svelte

@@ -68,7 +68,10 @@
 
   export let onAreaClick: (e: { data: any }) => void = () => {};
   export let onBarClick: (e: { data: any }) => void = () => {};
+
   export let onPointClick: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
+  export let onPointEnter: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
+  export let onPointLeave: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
 
   const _x = accessor(x);
   const _y = accessor(y);
@@ -361,7 +364,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}
@@ -411,6 +414,8 @@
             typeof points === 'object' ? points.class : null
           )}
           on:click={() => onPointClick({ point, data: highlightData })}
+          on:pointerenter={() => onPointEnter({ point, data: highlightData })}
+          on:pointerleave={() => onPointLeave({ point, data: highlightData })}
         />
       {/each}
     </slot>

package/dist/components/Legend.svelte

@@ -35,7 +35,9 @@
   export let placement: Placement | undefined = undefined;
   export let orientation: 'horizontal' | 'vertical' = 'horizontal';
 
-  export let onClick: ((tick: any) => any) | undefined = undefined;
+  export let onClick: ((item: any) => any) | undefined = undefined;
+  export let onPointerEnter: ((item: any) => any) | undefined = undefined;
+  export let onPointerLeave: ((item: any) => any) | undefined = undefined;
 
   /** Determine display ramp (individual color swatches or continuous ramp)*/
   export let variant: 'ramp' | 'swatches' = 'ramp';
@@ -47,6 +49,7 @@
     tick?: string;
     swatches?: string;
     swatch?: string;
+    item?: (item: any) => string;
   } = {};
 
   $: _scale = scale ?? (cScale ? $cScale : null);
@@ -137,6 +140,7 @@
   {...$$restProps}
   class={cls(
     'inline-block',
+    'z-[1]', // stack above tooltip context layers (band rects, voronoi, ...)
     placement && [
       'absolute',
       {
@@ -208,9 +212,12 @@
       >
         {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick}
           {@const color = _scale(tick)}
+          {@const item = { value: tick, color }}
           <button
-            class={cls('flex gap-1', !onClick && 'cursor-auto')}
-            on:click={() => onClick?.({ tick, color })}
+            class={cls('flex gap-1', !onClick && 'cursor-auto', classes.item?.(item))}
+            on:click={() => onClick?.(item)}
+            on:pointerenter={() => onPointerEnter?.(item)}
+            on:pointerleave={() => onPointerLeave?.(item)}
           >
             <div
               class={cls('h-4 w-4 rounded-full', classes.swatch)}

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

@@ -14,7 +14,9 @@ declare const __propDef: {
         tickLength?: number | undefined;
         placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
-        onClick?: ((tick: any) => any) | undefined | undefined;
+        onClick?: ((item: any) => any) | undefined | undefined;
+        onPointerEnter?: ((item: any) => any) | undefined | undefined;
+        onPointerLeave?: ((item: any) => any) | undefined | undefined;
         variant?: "ramp" | "swatches" | undefined;
         classes?: {
             root?: string;
@@ -23,6 +25,7 @@ declare const __propDef: {
             tick?: string;
             swatches?: string;
             swatch?: string;
+            item?: (item: any) => string;
         } | undefined;
     };
     events: {

package/dist/components/Spline.svelte

@@ -101,8 +101,8 @@
     }
   }
 
-  const xAccessor = x ? accessor(x) : $contextX;
-  const yAccessor = y ? accessor(y) : $contextY;
+  $: xAccessor = x ? accessor(x) : $contextX;
+  $: yAccessor = y ? accessor(y) : $contextY;
 
   $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
   $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;

package/dist/components/charts/AreaChart.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" generics="TData">
-  import { type ComponentProps } from 'svelte';
+  import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
   import { sum } from 'd3-array';
   import { format } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { selectionStore } from '@layerstack/svelte-stores';
 
   import Area from '../Area.svelte';
   import Axis from '../Axis.svelte';
@@ -34,6 +36,7 @@
     labels?: typeof labels;
     legend?: typeof legend;
     points?: typeof points;
+    profile?: typeof profile;
     props?: typeof props;
     rule?: typeof rule;
     series?: typeof series;
@@ -103,7 +106,10 @@
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
 
-  $: allSeriesData = series
+  /** Log initial render performance using `console.time` */
+  export let profile = false;
+
+  $: allSeriesData = visibleSeries
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
 
@@ -112,13 +118,14 @@
   >;
 
   $: if (stackSeries) {
-    const seriesKeys = series.map((s) => s.key);
+    const seriesKeys = visibleSeries.map((s) => s.key);
     const offset =
       seriesLayout === 'stackExpand'
         ? stackOffsetExpand
         : seriesLayout === 'stackDiverging'
           ? stackOffsetDiverging
           : stackOffsetNone;
+
     const stackData = stack()
       .keys(seriesKeys)
       .value((d, key) => {
@@ -139,6 +146,8 @@
   $: xScale =
     $$props.xScale ?? (accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear());
 
+  let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
+
   function getAreaProps(s: (typeof series)[number], i: number) {
     const lineProps = {
       ...props.line,
@@ -156,10 +165,18 @@
           : (s.value ?? (s.data ? undefined : s.key)),
       fill: s.color,
       fillOpacity: 0.3,
+      class: cls(
+        'transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+      ),
       ...props.area,
       ...s.props,
       line: {
-        class: !('stroke-width' in lineProps) ? 'stroke-2' : '',
+        class: cls(
+          !('stroke-width' in lineProps) && 'stroke-2',
+          'transition-opacity',
+          highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+        ),
         stroke: s.color,
         ...lineProps,
       },
@@ -167,6 +184,22 @@
 
     return areaProps;
   }
+
+  const selectedSeries = selectionStore();
+  $: visibleSeries = series.filter((s) => {
+    return (
+      // @ts-expect-error
+      $selectedSeries.selected.length === 0 || $selectedSeries.isSelected(s.key)
+      // || highlightSeriesKey == s.key
+    );
+  });
+
+  if (profile) {
+    console.time('AreaChart render');
+    onMount(() => {
+      console.timeEnd('AreaChart render');
+    });
+  }
 </script>
 
 <Chart
@@ -175,8 +208,8 @@
   {xScale}
   y={y ??
     (stackSeries
-      ? (d) => series.flatMap((s, i) => d.stackData[i])
-      : series.map((s) => s.value ?? s.key))}
+      ? (d) => visibleSeries.flatMap((s, i) => d.stackData[i])
+      : visibleSeries.map((s) => s.value ?? s.key))}
   yBaseline={0}
   yNice
   {radial}
@@ -220,7 +253,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i (s.key)}
+        {#each visibleSeries as s, i (s.key)}
           <Area {...getAreaProps(s, i)} />
         {/each}
       </slot>
@@ -260,7 +293,7 @@
       </slot>
 
       {#if points}
-        {#each series as s}
+        {#each visibleSeries as s}
           <Points
             data={s.data}
             fill={s.color}
@@ -272,7 +305,7 @@
       {/if}
 
       <slot name="highlight" {...slotProps}>
-        {#each series as s, i (s.key)}
+        {#each visibleSeries as s, i (s.key)}
           {@const seriesTooltipData =
             s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
 
@@ -282,6 +315,8 @@
             points={{ fill: s.color }}
             lines={i == 0}
             onPointClick={(e) => onPointClick({ ...e, series: s })}
+            onPointEnter={() => (highlightSeriesKey = s.key)}
+            onPointLeave={() => (highlightSeriesKey = null)}
             {...props.highlight}
           />
         {/each}
@@ -298,11 +333,21 @@
           scale={isDefaultSeries
             ? undefined
             : scaleOrdinal(
-                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.key),
                 series.map((s) => s.color)
               )}
+          tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
+          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
+          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
+          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          classes={{
+            item: (item) =>
+              visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
+                ? 'opacity-50'
+                : '',
+          }}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
         />
@@ -314,7 +359,7 @@
         <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}
+          {@const seriesItems = stackSeries ? [...visibleSeries].reverse() : visibleSeries}
           {#each seriesItems as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
             {@const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key))}

package/dist/components/charts/BarChart.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" generics="TData">
-  import { type ComponentProps } from 'svelte';
+  import { onMount, type ComponentProps } from 'svelte';
   import { scaleBand, scaleOrdinal, scaleLinear } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
   import { sum } from 'd3-array';
   import { format } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
   import Bars from '../Bars.svelte';
@@ -25,6 +27,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,9 +36,11 @@
     grid?: typeof grid;
     bandPadding?: typeof bandPadding;
     groupPadding?: typeof groupPadding;
+    stackPadding?: typeof stackPadding;
     labels?: typeof labels;
     legend?: typeof legend;
     orientation?: typeof orientation;
+    profile?: typeof profile;
     props?: typeof props;
     rule?: typeof rule;
     series?: typeof series;
@@ -84,6 +89,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 = () => {};
@@ -109,11 +116,11 @@
   $: if (seriesLayout === 'group') {
     if (isVertical) {
       x1Scale = scaleBand().padding(groupPadding);
-      x1Domain = series.map((s) => s.key);
+      x1Domain = visibleSeries.map((s) => s.key);
       x1Range = ({ xScale }) => [0, xScale.bandwidth?.()];
     } else {
       y1Scale = scaleBand().padding(groupPadding);
-      y1Domain = series.map((s) => s.key);
+      y1Domain = visibleSeries.map((s) => s.key);
       y1Range = ({ yScale }) => [0, yScale.bandwidth?.()];
     }
   }
@@ -138,7 +145,10 @@
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
 
-  $: allSeriesData = series
+  /** Log initial render performance using `console.time` */
+  export let profile = false;
+
+  $: allSeriesData = visibleSeries
     .flatMap((s) =>
       s.data?.map((d) => {
         return { seriesKey: s.key, ...d };
@@ -151,7 +161,7 @@
   >;
 
   $: if (stackSeries) {
-    const seriesKeys = series.map((s) => s.key);
+    const seriesKeys = visibleSeries.map((s) => s.key);
     // const stackData = stack().keys(seriesKeys)(chartDataArray(data)) as any[];
 
     const offset =
@@ -176,20 +186,49 @@
     });
   }
 
+  let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
+
   function getBarsProps(s: (typeof series)[number], i: number) {
-    const valueAccesor = stackSeries
+    const isFirst = i == 0;
+    const isLast = i == visibleSeries.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 !== visibleSeries.length - 1 ? 'none' : 'edge',
       radius: 4,
       strokeWidth: 1,
+      insets: stackInsets,
       fill: s.color,
+      class: cls(
+        'transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+      ),
       onBarClick: (e) => onBarClick({ data: e.data, series: s }),
       ...props.bars,
       ...s.props,
@@ -197,14 +236,30 @@
 
     return barsProps;
   }
+
+  const selectedSeries = selectionStore();
+  $: visibleSeries = series.filter((s) => {
+    return (
+      // @ts-expect-error
+      $selectedSeries.selected.length === 0 || $selectedSeries.isSelected(s.key)
+      // || highlightSeriesKey == s.key
+    );
+  });
+
+  if (profile) {
+    console.time('BarChart render');
+    onMount(() => {
+      console.timeEnd('BarChart render');
+    });
+  }
 </script>
 
 <Chart
   data={chartData}
   x={x ??
     (stackSeries
-      ? (d) => series.flatMap((s, i) => d.stackData[i])
-      : series.map((s) => s.value ?? s.key))}
+      ? (d) => visibleSeries.flatMap((s, i) => d.stackData[i])
+      : visibleSeries.map((s) => s.value ?? s.key))}
   {xScale}
   {xBaseline}
   xNice={orientation === 'horizontal'}
@@ -213,8 +268,8 @@
   {x1Range}
   y={y ??
     (stackSeries
-      ? (d) => series.flatMap((s, i) => d.stackData[i])
-      : series.map((s) => s.value ?? s.key))}
+      ? (d) => visibleSeries.flatMap((s, i) => d.stackData[i])
+      : visibleSeries.map((s) => s.value ?? s.key))}
   {yScale}
   {yBaseline}
   yNice={orientation === 'vertical'}
@@ -267,7 +322,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i (s.key)}
+        {#each visibleSeries as s, i (s.key)}
           <Bars {...getBarsProps(s, i)} />
         {/each}
       </slot>
@@ -332,11 +387,21 @@
           scale={isDefaultSeries
             ? undefined
             : scaleOrdinal(
-                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.key),
                 series.map((s) => s.color)
               )}
+          tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
+          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
+          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
+          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          classes={{
+            item: (item) =>
+              visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
+                ? 'opacity-50'
+                : '',
+          }}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
         />
@@ -350,7 +415,7 @@
         >
         <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
-          {@const seriesItems = stackSeries ? [...series].reverse() : series}
+          {@const seriesItems = stackSeries ? [...visibleSeries].reverse() : visibleSeries}
           {#each seriesItems as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
             {@const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key))}
@@ -364,12 +429,12 @@
             />
           {/each}
 
-          {#if stackSeries || groupSeries}
+          {#if (stackSeries || groupSeries) && visibleSeries.length > 1}
             <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
-              value={sum(series, (s) => {
+              value={sum(visibleSeries, (s) => {
                 const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data;
                 const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key));
                 return valueAccessor(seriesTooltipData);

package/dist/components/charts/LineChart.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" generics="TData">
-  import { type ComponentProps } from 'svelte';
+  import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
   import { format } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
   import Canvas from '../layout/Canvas.svelte';
@@ -31,6 +33,7 @@
     labels?: typeof labels;
     legend?: typeof legend;
     points?: typeof points;
+    profile?: typeof profile;
     props?: typeof props;
     rule?: typeof rule;
     series?: typeof series;
@@ -94,6 +97,9 @@
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
 
+  /** Log initial render performance using `console.time` */
+  export let profile = false;
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -106,11 +112,16 @@
   $: xScale =
     $$props.xScale ?? (accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear());
 
+  let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
+
   function getSplineProps(s: (typeof series)[number], i: number) {
     const splineProps: ComponentProps<Spline> = {
       data: s.data,
       y: s.value ?? (s.data ? undefined : s.key),
-      class: 'stroke-2',
+      class: cls(
+        'stroke-2 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+      ),
       stroke: s.color,
       ...props.spline,
       ...s.props,
@@ -118,6 +129,22 @@
 
     return splineProps;
   }
+
+  const selectedSeries = selectionStore();
+  $: visibleSeries = series.filter((s) => {
+    return (
+      // @ts-expect-error
+      $selectedSeries.selected.length === 0 || $selectedSeries.isSelected(s.key)
+      // || highlightSeriesKey == s.key
+    );
+  });
+
+  if (profile) {
+    console.time('LineChart render');
+    onMount(() => {
+      console.timeEnd('LineChart render');
+    });
+  }
 </script>
 
 <Chart
@@ -167,7 +194,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i (s.key)}
+        {#each visibleSeries as s, i (s.key)}
           <Spline {...getSplineProps(s, i)} />
         {/each}
       </slot>
@@ -201,7 +228,7 @@
       </slot>
 
       {#if points}
-        {#each series as s}
+        {#each visibleSeries as s}
           <Points
             data={s.data}
             fill={s.color}
@@ -217,7 +244,7 @@
       {/if}
 
       <slot name="highlight" {...slotProps}>
-        {#each series as s, i (s.key)}
+        {#each visibleSeries as s, i (s.key)}
           {@const seriesTooltipData =
             s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
           <Highlight
@@ -226,6 +253,8 @@
             points={{ fill: s.color }}
             lines={i === 0}
             onPointClick={(e) => onPointClick({ ...e, series: s })}
+            onPointEnter={() => (highlightSeriesKey = s.key)}
+            onPointLeave={() => (highlightSeriesKey = null)}
             {...props.highlight}
           />
         {/each}
@@ -238,11 +267,21 @@
           scale={isDefaultSeries
             ? undefined
             : scaleOrdinal(
-                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.key),
                 series.map((s) => s.color)
               )}
+          tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
+          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
+          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
+          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          classes={{
+            item: (item) =>
+              visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
+                ? 'opacity-50'
+                : '',
+          }}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
         />
@@ -253,7 +292,7 @@
       <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}
+          {#each visibleSeries as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
             {@const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key))}
 

package/dist/components/charts/PieChart.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" generics="TData">
-  import { type ComponentProps } from 'svelte';
+  import { onMount, type ComponentProps } from 'svelte';
   import { sum } from 'd3-array';
   import { format } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { selectionStore } from '@layerstack/svelte-stores';
 
   import Arc from '../Arc.svelte';
   import Canvas from '../layout/Canvas.svelte';
@@ -27,6 +29,7 @@
     padAngle?: typeof padAngle;
     center?: typeof center;
     placement?: typeof placement;
+    profile?: typeof profile;
     props?: typeof props;
     range?: typeof range;
     series?: typeof series;
@@ -118,6 +121,9 @@
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
 
+  /** Log initial render performance using `console.time` */
+  export let profile = false;
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData>;
@@ -125,13 +131,33 @@
   $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<TData>;
 
   $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
+
+  let highlightKey: (typeof series)[number]['key'] | null = null;
+
+  const selectedKeys = selectionStore();
+  $: visibleData = chartData.filter((d) => {
+    const dataKey = keyAccessor(d);
+    return (
+      // @ts-expect-error
+      $selectedKeys.selected.length === 0 || $selectedKeys.isSelected(dataKey)
+      // || highlightKey == dataKey
+    );
+  });
+
+  if (profile) {
+    console.time('PieChart render');
+    onMount(() => {
+      console.timeEnd('PieChart render');
+    });
+  }
 </script>
 
 <Chart
-  data={chartData}
+  data={visibleData}
   x={value}
   y={key}
   c={key}
+  cDomain={chartData.map(keyAccessor)}
   cRange={seriesColors.length
     ? seriesColors
     : [
@@ -205,6 +231,10 @@
                   // Workaround for `tooltip={{ mode: 'manual' }}
                   onTooltipClick({ data: d });
                 }}
+                class={cls(
+                  'transition-opacity',
+                  highlightKey && highlightKey !== keyAccessor(d) && 'opacity-50'
+                )}
                 {...props.arc}
                 {...s.props}
               />
@@ -235,6 +265,10 @@
                       // Workaround for `tooltip={{ mode: 'manual' }}
                       onTooltipClick({ data: arc.data });
                     }}
+                    class={cls(
+                      'transition-opacity',
+                      highlightKey && highlightKey !== keyAccessor(arc.data) && 'opacity-50'
+                    )}
                     {...props.arc}
                     {...s.props}
                   />
@@ -257,6 +291,15 @@
           }}
           placement="bottom"
           variant="swatches"
+          onClick={(item) => $selectedKeys.toggleSelected(item.value)}
+          onPointerEnter={(item) => (highlightKey = item.value)}
+          onPointerLeave={(item) => (highlightKey = null)}
+          classes={{
+            item: (item) =>
+              visibleData.length && !visibleData.some((d) => keyAccessor(d) === item.value)
+                ? 'opacity-50'
+                : '',
+          }}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
         />

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

@@ -210,7 +210,9 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: "horizontal" | "vertical" | undefined;
-            onClick?: ((tick: any) => any) | undefined | undefined;
+            onClick?: ((item: any) => any) | undefined | undefined;
+            onPointerEnter?: ((item: any) => any) | undefined | undefined;
+            onPointerLeave?: ((item: any) => any) | undefined | undefined;
             variant?: "ramp" | "swatches" | undefined;
             classes?: {
                 root?: string;
@@ -219,6 +221,7 @@ declare class __sveltets_Render<TData> {
                 tick?: string;
                 swatches?: string;
                 swatch?: string;
+                item?: (item: any) => string;
             } | undefined;
         };
         maxValue?: number | undefined;
@@ -226,6 +229,7 @@ declare class __sveltets_Render<TData> {
         padAngle?: number;
         center?: boolean;
         placement?: "center" | "left" | "right";
+        profile?: boolean;
         props?: {
             pie?: Partial<ComponentProps<Pie>>;
             group?: Partial<ComponentProps<Group>>;

package/dist/components/charts/ScatterChart.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" generics="TData">
-  import { type ComponentProps } from 'svelte';
+  import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
   import { format } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
   import Canvas from '../layout/Canvas.svelte';
@@ -27,6 +29,7 @@
     grid?: typeof grid;
     labels?: typeof labels;
     legend?: typeof legend;
+    profile?: typeof profile;
     props?: typeof props;
     series?: typeof series;
     renderContext?: typeof renderContext;
@@ -75,6 +78,9 @@
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
 
+  /** Log initial render performance using `console.time` */
+  export let profile = false;
+
   // Default xScale based on first data's `x` value
   $: xScale =
     $$props.xScale ??
@@ -85,22 +91,44 @@
     $$props.yScale ??
     (accessor(y)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear());
 
-  $: chartData = series
+  $: chartData = visibleSeries
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData>;
 
+  let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
+
   function getPointsProps(s: (typeof series)[number], i: number) {
     const pointsProps: ComponentProps<Points> = {
       data: s.data,
       stroke: s.color,
       fill: s.color,
       fillOpacity: 0.3,
+      class: cls(
+        'transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+      ),
       ...props.points,
       ...s.props,
     };
 
     return pointsProps;
   }
+
+  const selectedSeries = selectionStore();
+  $: visibleSeries = series.filter((s) => {
+    return (
+      // @ts-expect-error
+      $selectedSeries.selected.length === 0 || $selectedSeries.isSelected(s.key)
+      // || highlightSeriesKey == s.key
+    );
+  });
+
+  if (profile) {
+    console.time('ScatterChart render');
+    onMount(() => {
+      console.timeEnd('ScatterChart render');
+    });
+  }
 </script>
 
 <Chart
@@ -142,7 +170,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i (s.key)}
+        {#each visibleSeries as s, i (s.key)}
           <Points {...getPointsProps(s, i)} />
         {/each}
       </slot>
@@ -194,11 +222,21 @@
           scale={isDefaultSeries
             ? undefined
             : scaleOrdinal(
-                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.key),
                 series.map((s) => s.color)
               )}
+          tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
+          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
+          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
+          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          classes={{
+            item: (item) =>
+              visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
+                ? 'opacity-50'
+                : '',
+          }}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
         />

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