layerchart 0.74.0 → 0.75.1

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/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);
@@ -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))}
@@ -329,12 +374,12 @@
             />
           {/each}
 
-          {#if stackSeries}
+          {#if stackSeries && visibleSeries.length > 1}
             <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
-              value={sum(series, (s) => {
+              value={sum(visibleSeries, (s) => {
                 const seriesTooltipData = s.data ? s.data.find((d) => x(d) === x(data)) : 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';
@@ -38,6 +40,7 @@
     labels?: typeof labels;
     legend?: typeof legend;
     orientation?: typeof orientation;
+    profile?: typeof profile;
     props?: typeof props;
     rule?: typeof rule;
     series?: typeof series;
@@ -113,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?.()];
     }
   }
@@ -142,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 };
@@ -155,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 =
@@ -180,9 +186,11 @@
     });
   }
 
+  let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
+
   function getBarsProps(s: (typeof series)[number], i: number) {
     const isFirst = i == 0;
-    const isLast = i == series.length - 1;
+    const isLast = i == visibleSeries.length - 1;
 
     const isStackLayout = seriesLayout.startsWith('stack');
 
@@ -212,11 +220,15 @@
       y: isVertical ? valueAccessor : undefined,
       x1: isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
-      rounded: isStackLayout && 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,
@@ -224,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'}
@@ -240,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'}
@@ -294,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>
@@ -359,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}
         />
@@ -377,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))}
@@ -391,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/components/tooltip/TooltipContext.svelte

@@ -171,18 +171,18 @@
 
     const referenceNode = (e.target as Element).closest('.layercake-container')!;
     const point = localPoint(referenceNode, e);
-    const localX = point?.x ?? 0;
-    const localY = point?.y ?? 0;
+    const pointerX = point?.x ?? 0;
+    const pointerY = point?.y ?? 0;
 
     if (
       // @ts-expect-error
-      e.offsetX < e.currentTarget?.offsetLeft ||
+      pointerX < e.currentTarget?.offsetLeft ||
       // @ts-expect-error
-      e.offsetX > e.currentTarget?.offsetLeft + e.currentTarget?.offsetWidth ||
+      pointerX > e.currentTarget?.offsetLeft + e.currentTarget?.offsetWidth ||
       // @ts-expect-error
-      e.offsetY < e.currentTarget?.offsetTop ||
+      pointerY < e.currentTarget?.offsetTop ||
       // @ts-expect-error
-      e.offsetY > e.currentTarget?.offsetTop + e.currentTarget?.offsetHeight
+      pointerY > e.currentTarget?.offsetTop + e.currentTarget?.offsetHeight
     ) {
       // Ignore if within padding of chart
       hideTooltip();
@@ -197,10 +197,10 @@
           let xValueAtPoint: any;
           if ($radial) {
             // Assume radial is always centered
-            const { radians } = cartesianToPolar(localX - $width / 2, localY - $height / 2);
+            const { radians } = cartesianToPolar(pointerX - $width / 2, pointerY - $height / 2);
             xValueAtPoint = scaleInvert($xScale, radians);
           } else {
-            xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+            xValueAtPoint = scaleInvert($xScale, pointerX - $padding.left);
           }
 
           const index = bisectX($flatData, xValueAtPoint, 1);
@@ -212,7 +212,7 @@
 
         case 'bisect-y': {
           // `y` value at pointer coordinate
-          const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
+          const yValueAtPoint = scaleInvert($yScale, pointerY - $padding.top);
 
           const index = bisectY($flatData, yValueAtPoint, 1);
           const previousValue = $flatData[index - 1];
@@ -223,8 +223,8 @@
 
         case 'bisect-band': {
           // `x` and `y` values at pointer coordinate
-          const xValueAtPoint = scaleInvert($xScale, localX);
-          const yValueAtPoint = scaleInvert($yScale, localY);
+          const xValueAtPoint = scaleInvert($xScale, pointerX);
+          const yValueAtPoint = scaleInvert($yScale, pointerY);
 
           if (isScaleBand($xScale)) {
             // Find point closest to pointer within the x band
@@ -251,7 +251,7 @@
         }
 
         case 'quadtree': {
-          tooltipData = quadtree.find(localX, localY, radius);
+          tooltipData = quadtree.find(pointerX, pointerY, radius);
           break;
         }
       }
@@ -264,8 +264,8 @@
 
       $tooltip = {
         ...$tooltip,
-        x: localX,
-        y: localY,
+        x: pointerX,
+        y: pointerY,
         data: tooltipData,
       };
     } else {

package/package.json

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