layerchart 2.0.0-next.1 → 2.0.0-next.3

package/dist/components/charts/LineChart.svelte

@@ -1,159 +1,177 @@
+<script lang="ts" module>
+  export type LineChartExtraSnippetProps<TData> = {
+    getSplineProps: (
+      s: SeriesData<TData, typeof Spline>,
+      i: number
+    ) => ComponentProps<typeof Spline>;
+    getLabelsProps: (
+      s: SeriesData<TData, typeof Spline>,
+      i: number
+    ) => ComponentProps<typeof Labels<TData>>;
+    getPointsProps: (
+      s: SeriesData<TData, typeof Spline>,
+      i: number
+    ) => ComponentProps<typeof Points>;
+    getHighlightProps: (
+      s: SeriesData<TData, typeof Spline>,
+      i: number
+    ) => ComponentProps<typeof Highlight>;
+    getGridProps: () => ComponentProps<typeof Grid>;
+    getAxisProps: (axisDirection?: 'x' | 'y') => ComponentProps<typeof Axis>;
+    getRuleProps: () => ComponentProps<typeof Rule>;
+  };
+
+  export type LineChartPropsObjProp = Pick<
+    SimplifiedChartPropsObject,
+    | 'brush'
+    | 'canvas'
+    | 'grid'
+    | 'highlight'
+    | 'labels'
+    | 'legend'
+    | 'points'
+    | 'rule'
+    | 'spline'
+    | 'svg'
+    | 'tooltip'
+    | 'xAxis'
+    | 'yAxis'
+  >;
+
+  export type LineChartProps<TData> = SimplifiedChartProps<
+    TData,
+    typeof Spline,
+    LineChartExtraSnippetProps<TData>
+  > & {
+    /**
+     * The event to be dispatched when the point is clicked.
+     */
+    onPointClick?: (
+      e: MouseEvent,
+      details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
+    ) => void;
+
+    props?: LineChartPropsObjProp;
+
+    spline?: SimplifiedChartSnippet<
+      TData,
+      typeof Spline,
+      LineChartExtraSnippetProps<TData> & {
+        props: ComponentProps<typeof Spline>;
+        /**
+         * The index of the series currently being iterated over.
+         */
+        seriesIndex: number;
+      }
+    >;
+  };
+</script>
+
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
+  import { scaleLinear, 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 BrushContext from '../BrushContext.svelte';
-  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import ChartClipPath from '../ChartClipPath.svelte';
   import Grid from '../Grid.svelte';
   import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
+  import Layer from '../layout/Layer.svelte';
   import Legend from '../Legend.svelte';
   import Points from '../Points.svelte';
   import Rule from '../Rule.svelte';
   import Spline from '../Spline.svelte';
-  import Svg from '../layout/Svg.svelte';
-  import * as Tooltip from '../tooltip/index.js';
 
   import {
     accessor,
     chartDataArray,
     defaultChartPadding,
     findRelatedData,
-    type Accessor,
   } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
-
-  interface $$Props extends ComponentProps<Chart<TData>> {
-    axis?: typeof axis;
-    brush?: typeof brush;
-    debug?: typeof debug;
-    grid?: typeof grid;
-    labels?: typeof labels;
-    legend?: typeof legend;
-    points?: typeof points;
-    profile?: typeof profile;
-    props?: typeof props;
-    rule?: typeof rule;
-    series?: typeof series;
-    renderContext?: typeof renderContext;
-    onpointclick?: typeof onpointclick;
-    ontooltipclick?: typeof ontooltipclick;
-  }
-
-  export let data: $$Props['data'] = [];
-  export let x: Accessor<TData> = undefined;
-  export let y: Accessor<TData> = undefined;
-
-  /** Set xDomain.  Useful for external brush control */
-  export let xDomain: ComponentProps<typeof BrushContext>['xDomain'] = undefined;
-
-  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-  export let radial = false;
-
-  export let series: {
-    key: string | number;
-    label?: string;
-    value?: Accessor<TData>;
-    /** Provider series data, else uses chart data (with value/key accessor) */
-    data?: TData[];
-    color?: string;
-    props?: Partial<ComponentProps<Spline>>;
-  }[] = [{ key: 'default', value: y, color: 'var(--color-primary)' }];
-  $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
-
-  export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
-  export let brush: ComponentProps<BrushContext> | boolean = false;
-  export let grid: ComponentProps<Grid> | boolean = true;
-  export let labels: ComponentProps<Labels> | boolean = false;
-  export let legend: ComponentProps<Legend> | boolean = false;
-  export let points: ComponentProps<Points> | boolean = false;
-  export let rule: ComponentProps<Rule> | boolean = true;
-
-  /** Expose tooltip context for external access */
-  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
-
-  /** Event dispatched with current tooltip data */
-  export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
-
-  /** Event dispatched when Highlight point is clicked (useful with multiple series) */
-  export let onpointclick:
-    | ((
-        e: MouseEvent,
-        details: {
-          data: HighlightPointData;
-          series: (typeof series)[number];
-        }
-      ) => void)
-    | undefined = undefined;
-
-  export let props: {
-    brush?: Partial<ComponentProps<BrushContext>>;
-    canvas?: Partial<ComponentProps<Canvas>>;
-    grid?: Partial<ComponentProps<Grid>>;
-    highlight?: Partial<ComponentProps<Highlight>>;
-    labels?: Partial<ComponentProps<Labels>>;
-    legend?: Partial<ComponentProps<Legend>>;
-    points?: Partial<ComponentProps<Points>>;
-    rule?: Partial<ComponentProps<Rule>>;
-    spline?: Partial<ComponentProps<Spline>>;
-    svg?: Partial<ComponentProps<Svg>>;
-    tooltip?: {
-      context?: Partial<ComponentProps<Tooltip.Context>>;
-      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>>;
-    };
-    xAxis?: Partial<ComponentProps<Axis>>;
-    yAxis?: Partial<ComponentProps<Axis>>;
-  } = {};
-
-  export let renderContext: 'svg' | 'canvas' = 'svg';
-
-  /** Log initial render performance using `console.time` */
-  export let profile = false;
-
-  /** Enable debug mode */
-  export let debug = false;
-
-  $: allSeriesData = series
-    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d) as Array<TData & { stackData?: any }>;
-
-  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
-    TData & { stackData?: any }
-  >;
+  import type {
+    SeriesData,
+    SimplifiedChartProps,
+    SimplifiedChartPropsObject,
+    SimplifiedChartSnippet,
+  } from './types.js';
+  import { createLegendProps, SeriesState } from './utils.svelte.js';
+  import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
+  import { layerClass } from '../../utils/attributes.js';
+  import DefaultTooltip from './DefaultTooltip.svelte';
+  import ChartAnnotations from './ChartAnnotations.svelte';
+
+  let {
+    data = [],
+    x: xProp,
+    y: yProp,
+    xDomain,
+    radial = false,
+    series: seriesProp,
+    seriesLayout = 'overlap',
+    axis = true,
+    brush = false,
+    grid = true,
+    labels = false,
+    legend = false,
+    points = false,
+    rule = true,
+    onTooltipClick = () => {},
+    onPointClick,
+    props = {},
+    renderContext = 'svg',
+    profile = false,
+    debug = false,
+    xScale: xScaleProp,
+    tooltip = true,
+    children: childrenProp,
+    aboveContext,
+    belowContext,
+    belowMarks,
+    aboveMarks,
+    marks,
+    spline,
+    highlight = true,
+    annotations = [],
+    context = $bindable(),
+    ...restProps
+  }: LineChartProps<TData> = $props();
+
+  const series = $derived(
+    seriesProp === undefined
+      ? [{ key: 'default', value: yProp, color: 'var(--color-primary)' }]
+      : seriesProp
+  );
+  const seriesState = new SeriesState(() => series);
+
+  const chartData = $derived(
+    (seriesState.allSeriesData.length
+      ? seriesState.allSeriesData
+      : chartDataArray(data)) as Array<TData>
+  );
 
   // Default xScale based on first data's `x` value
-  $: xScale =
-    $$props.xScale ?? (accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear());
-
-  let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
-
-  function setHighlightSeriesKey(seriesKey: typeof highlightSeriesKey) {
-    highlightSeriesKey = seriesKey;
-  }
+  const xScale = $derived(
+    xScaleProp ?? (accessor(xProp)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear())
+  );
 
-  $: getSplineProps = (s: (typeof series)[number], i: number) => {
-    const splineProps: ComponentProps<Spline> = {
+  function getSplineProps(s: SeriesData<TData, typeof Spline>, i: number) {
+    const splineProps: ComponentProps<typeof Spline> = {
       data: s.data,
       y: s.value ?? (s.data ? undefined : s.key),
       stroke: s.color,
       ...props.spline,
       ...s.props,
       class: cls(
+        layerClass('line-chart-line'),
         'transition-opacity',
         // Checking `visibleSeries.length > 1` fixes re-animated tweened areas on hover
-        visibleSeries.length > 1 &&
-          highlightSeriesKey &&
-          highlightSeriesKey !== s.key &&
+        seriesState.visibleSeries.length > 1 &&
+          seriesState.highlightKey.current &&
+          seriesState.highlightKey.current !== s.key &&
           'opacity-10',
         props.spline?.class,
         s.props?.class
@@ -161,10 +179,10 @@
     };
 
     return splineProps;
-  };
+  }
 
-  function getPointsProps(s: (typeof series)[number], i: number) {
-    const pointsProps: ComponentProps<Points> = {
+  function getPointsProps(s: SeriesData<TData, typeof Spline>, i: number) {
+    const pointsProps: ComponentProps<typeof Points> = {
       data: s.data,
       y: s.value ?? (s.data ? undefined : s.key),
       fill: s.color,
@@ -172,7 +190,9 @@
       ...(typeof points === 'object' ? points : null),
       class: cls(
         'stroke-surface-200 transition-opacity',
-        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        seriesState.highlightKey.current &&
+          seriesState.highlightKey.current !== s.key &&
+          'opacity-10',
         props.points?.class,
         typeof points === 'object' && points.class
       ),
@@ -181,15 +201,17 @@
     return pointsProps;
   }
 
-  function getLabelsProps(s: (typeof series)[number], i: number) {
-    const labelsProps: ComponentProps<Labels> = {
+  function getLabelsProps(s: SeriesData<TData, typeof Spline>, i: number) {
+    const labelsProps: ComponentProps<typeof Labels<TData>> = {
       data: s.data,
       y: s.value ?? (s.data ? undefined : s.key),
       ...props.labels,
       ...(typeof labels === 'object' ? labels : null),
       class: cls(
         'stroke-surface-200 transition-opacity',
-        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        seriesState.highlightKey.current &&
+          seriesState.highlightKey.current !== s.key &&
+          'opacity-10',
         props.labels?.class,
         typeof labels === 'object' && labels.class
       ),
@@ -198,16 +220,93 @@
     return labelsProps;
   }
 
-  const selectedSeries = selectionStore();
-  $: visibleSeries = series.filter((s) => {
-    return (
-      // @ts-expect-error
-      $selectedSeries.selected.length === 0 || $selectedSeries.isSelected(s.key)
-      // || highlightSeriesKey == s.key
-    );
-  });
+  const highlightPointsProps = $derived(
+    typeof props.highlight?.points === 'object' ? props.highlight.points : null
+  );
+
+  function getHighlightProps(
+    s: SeriesData<TData, typeof Spline>,
+    i: number
+  ): ComponentProps<typeof Highlight> {
+    if (!context || !context.tooltip.data) return {};
+    const seriesTooltipData =
+      s.data && context.tooltip.data
+        ? findRelatedData(s.data, context.tooltip.data, context.x)
+        : null;
+
+    return {
+      data: seriesTooltipData,
+      y: s.value ?? (s.data ? undefined : s.key),
+      lines: i === 0,
+      onPointClick: onPointClick
+        ? (e, detail) => onPointClick(e, { ...detail, series: s })
+        : undefined,
+      onPointEnter: () => (seriesState.highlightKey.current = s.key),
+      onPointLeave: () => (seriesState.highlightKey.current = null),
+      ...props.highlight,
+      points:
+        props.highlight?.points == false
+          ? false
+          : {
+              ...highlightPointsProps,
+              fill: s.color,
+              class: cls(
+                'transition-opacity',
+                seriesState.highlightKey.current &&
+                  seriesState.highlightKey.current !== s.key &&
+                  'opacity-10',
+                highlightPointsProps?.class
+              ),
+            },
+    };
+  }
+
+  function getLegendProps(): ComponentProps<typeof Legend> {
+    return createLegendProps({
+      seriesState,
+      props: {
+        ...props.legend,
+        ...(typeof legend === 'object' ? legend : null),
+      },
+    });
+  }
+
+  function getGridProps(): ComponentProps<typeof Grid> {
+    return {
+      x: radial,
+      y: true,
+      ...(typeof grid === 'object' ? grid : null),
+      ...props.grid,
+    };
+  }
+
+  function getAxisProps(axisDirection?: 'x' | 'y'): ComponentProps<typeof Axis> {
+    if (axisDirection === 'y') {
+      return {
+        placement: radial ? 'radius' : 'left',
+        format: (value) => format(value, undefined, { variant: 'short' }),
+        ...(typeof axis === 'object' ? axis : null),
+        ...props.yAxis,
+      };
+    }
+    return {
+      placement: radial ? 'angle' : 'bottom',
+      format: (value) => format(value, undefined, { variant: 'short' }),
+      ...(typeof axis === 'object' ? axis : null),
+      ...props.xAxis,
+    };
+  }
+
+  function getRuleProps(): ComponentProps<typeof Rule> {
+    return {
+      x: 0,
+      y: 0,
+      ...(typeof rule === 'object' ? rule : null),
+      ...props.rule,
+    };
+  }
 
-  $: brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush };
+  const brushProps = $derived({ ...(typeof brush === 'object' ? brush : null), ...props.brush });
 
   if (profile) {
     console.time('LineChart render');
@@ -215,223 +314,179 @@
       console.timeEnd('LineChart render');
     });
   }
+
+  setTooltipMetaContext({
+    type: 'line',
+    get visibleSeries() {
+      return seriesState.visibleSeries;
+    },
+  });
 </script>
 
+<!-- svelte-ignore ownership_invalid_binding -->
 <Chart
+  bind:context
   data={chartData}
-  {x}
+  x={xProp}
   {xDomain}
   {xScale}
-  y={y ?? series.map((s) => s.value ?? s.key)}
+  y={yProp ?? series.map((s) => s.value ?? s.key)}
   yBaseline={0}
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  {...$$restProps}
-  tooltip={$$props.tooltip === false
+  {...restProps}
+  tooltip={tooltip === false
     ? false
     : {
         mode: 'bisect-x',
-        onclick: ontooltipclick,
+        onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
-        ...$$props.tooltip,
       }}
-  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',
         resetOnEnd: true,
         xDomain,
         ...brushProps,
-        onbrushend: (e) => {
+        onBrushEnd: (e) => {
           xDomain = e.xDomain;
-          brushProps.onbrushend?.(e);
+          brushProps.onBrushEnd?.(e);
         },
       }
     : false}
-  let:x
-  let:xScale
-  let:y
-  let:yScale
-  let:c
-  let:cScale
-  let:width
-  let:height
-  let:padding
-  let:tooltip
 >
-  {@const slotProps = {
-    x,
-    xScale,
-    y,
-    yScale,
-    c,
-    cScale,
-    width,
-    height,
-    padding,
-    tooltip,
-    series,
-    visibleSeries,
-    getLabelsProps,
-    getPointsProps,
-    getSplineProps,
-    highlightSeriesKey,
-    setHighlightSeriesKey,
-  }}
-  <slot {...slotProps}>
-    <slot name="belowContext" {...slotProps} />
-
-    <svelte:component
-      this={renderContext === 'canvas' ? Canvas : Svg}
-      {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
-      center={radial}
-      {debug}
-    >
-      <slot name="grid" {...slotProps}>
-        {#if grid}
-          <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
+  {#snippet children({ context })}
+    {@const snippetProps = {
+      context,
+      series,
+      visibleSeries: seriesState.visibleSeries,
+      getLabelsProps,
+      getPointsProps,
+      getSplineProps,
+      getHighlightProps,
+      getLegendProps,
+      getGridProps,
+      getAxisProps,
+      getRuleProps,
+      highlightKey: seriesState.highlightKey.current,
+      setHighlightKey: seriesState.highlightKey.set,
+    }}
+    {#if childrenProp}
+      {@render childrenProp(snippetProps)}
+    {:else}
+      {@render belowContext?.(snippetProps)}
+      <!-- TODO: Always use `Svg` until `Pattern` supports `Canvas` (issue #307) -->
+
+      <Layer
+        type={renderContext}
+        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+        center={radial}
+        {debug}
+      >
+        {#if typeof grid === 'function'}
+          {@render grid(snippetProps)}
+        {:else if grid}
+          <Grid {...getGridProps()} />
         {/if}
-      </slot>
 
-      <ChartClipPath disabled={!brush}>
-        <slot name="belowMarks" {...slotProps} />
+        <ChartClipPath disabled={!brush}>
+          <ChartAnnotations
+            {annotations}
+            layer="below"
+            highlightKey={seriesState.highlightKey.current}
+            visibleSeries={seriesState.visibleSeries}
+          />
+
+          {@render belowMarks?.(snippetProps)}
+          {#if marks}
+            {@render marks(snippetProps)}
+          {:else}
+            {#each seriesState.visibleSeries as s, i (s.key)}
+              {#if typeof spline === 'function'}
+                {@render spline({ ...snippetProps, props: getSplineProps(s, i), seriesIndex: i })}
+              {:else}
+                <Spline {...getSplineProps(s, i)} />
+              {/if}
+            {/each}
+          {/if}
 
-        <slot name="marks" {...slotProps}>
-          {#each visibleSeries as s, i (s.key)}
-            <Spline {...getSplineProps(s, i)} />
-          {/each}
-        </slot>
+          {@render aboveMarks?.(snippetProps)}
+        </ChartClipPath>
 
-        <slot name="aboveMarks" {...slotProps} />
-      </ChartClipPath>
+        {#if typeof axis === 'function'}
+          {@render axis(snippetProps)}
 
-      <slot name="axis" {...slotProps}>
-        {#if axis}
+          {#if typeof rule === 'function'}
+            {@render rule(snippetProps)}
+          {:else if rule}
+            <Rule {...getRuleProps()} />
+          {/if}
+        {:else if axis}
           {#if axis !== 'x'}
-            <Axis
-              placement={radial ? 'radius' : 'left'}
-              format={(value) => format(value, undefined, { variant: 'short' })}
-              {...typeof axis === 'object' ? axis : null}
-              {...props.yAxis}
-            />
+            <Axis {...getAxisProps('y')} />
           {/if}
 
           {#if axis !== 'y'}
-            <Axis
-              placement={radial ? 'angle' : 'bottom'}
-              format={(value) => format(value, undefined, { variant: 'short' })}
-              {...typeof axis === 'object' ? axis : null}
-              {...props.xAxis}
-            />
+            <Axis {...getAxisProps('x')} />
           {/if}
 
-          {#if rule}
-            <Rule x={0} y={0} {...typeof rule === 'object' ? rule : null} {...props.rule} />
+          {#if typeof rule === 'function'}
+            {@render rule(snippetProps)}
+          {:else if rule}
+            <Rule {...getRuleProps()} />
           {/if}
         {/if}
-      </slot>
-
-      <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
-      <ChartClipPath disabled={!brush} full>
-        {#if points}
-          {#each visibleSeries as s, i (s.key)}
-            <Points {...getPointsProps(s, i)} />
-          {/each}
-        {/if}
 
-        {#if labels}
-          {#each visibleSeries as s, i (s.key)}
-            <Labels {...getLabelsProps(s, i)} />
-          {/each}
-        {/if}
+        <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
+        <ChartClipPath disabled={!brush} full>
+          {#if typeof points === 'function'}
+            {@render points(snippetProps)}
+          {:else if points}
+            {#each seriesState.visibleSeries as s, i (s.key)}
+              <Points {...getPointsProps(s, i)} />
+            {/each}
+          {/if}
+
+          {#if typeof labels === 'function'}
+            {@render labels(snippetProps)}
+          {:else if labels}
+            {#each seriesState.visibleSeries as s, i (s.key)}
+              <Labels {...getLabelsProps(s, i)} />
+            {/each}
+          {/if}
+
+          {#if typeof highlight === 'function'}
+            {@render highlight(snippetProps)}
+          {:else if highlight}
+            {#each seriesState.visibleSeries as s, i (s.key)}
+              <Highlight {...getHighlightProps(s, i)} />
+            {/each}
+          {/if}
+
+          <ChartAnnotations
+            {annotations}
+            layer="above"
+            highlightKey={seriesState.highlightKey.current}
+            visibleSeries={seriesState.visibleSeries}
+          />
+        </ChartClipPath>
+      </Layer>
+
+      {@render aboveContext?.(snippetProps)}
+
+      {#if typeof legend === 'function'}
+        {@render legend(snippetProps)}
+      {:else if legend}
+        <Legend {...getLegendProps()} />
+      {/if}
 
-        <slot name="highlight" {...slotProps}>
-          {#each visibleSeries as s, i (s.key)}
-            {@const seriesTooltipData =
-              s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
-            {@const highlightPointsProps =
-              typeof props.highlight?.points === 'object' ? props.highlight.points : null}
-
-            <Highlight
-              data={seriesTooltipData}
-              y={s.value ?? (s.data ? undefined : s.key)}
-              lines={i === 0}
-              onpointclick={onpointclick
-                ? (e, detail) => onpointclick(e, { ...detail, series: s })
-                : undefined}
-              onpointenter={() => (highlightSeriesKey = s.key)}
-              onpointleave={() => (highlightSeriesKey = null)}
-              {...props.highlight}
-              points={props.highlight?.points == false
-                ? false
-                : {
-                    ...highlightPointsProps,
-                    fill: s.color,
-                    class: cls(
-                      'transition-opacity',
-                      highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
-                      highlightPointsProps?.class
-                    ),
-                  }}
-            />
-          {/each}
-        </slot>
-      </ChartClipPath>
-    </svelte:component>
-
-    <slot name="aboveContext" {...slotProps} />
-
-    <slot name="legend" {...slotProps}>
-      {#if legend}
-        <Legend
-          scale={isDefaultSeries
-            ? undefined
-            : scaleOrdinal(
-                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={(e, item) => $selectedSeries.toggleSelected(item.value)}
-          onpointerenter={(e, item) => (highlightSeriesKey = item.value)}
-          onpointerleave={(e) => (highlightSeriesKey = null)}
-          {...props.legend}
-          {...typeof legend === 'object' ? legend : null}
-          classes={{
-            item: (item) =>
-              visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
-                ? 'opacity-50'
-                : '',
-            ...props.legend?.classes,
-            ...(typeof legend === 'object' ? legend.classes : null),
-          }}
-        />
+      {#if typeof tooltip === 'function'}
+        {@render tooltip(snippetProps)}
+      {:else if tooltip}
+        <DefaultTooltip tooltipProps={props.tooltip} {seriesState} canHaveTotal />
       {/if}
-    </slot>
-
-    <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header value={x(data)} {format} {...props.tooltip?.header} />
-        <Tooltip.List {...props.tooltip?.list}>
-          {#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))}
-
-            <Tooltip.Item
-              label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
-              value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
-              color={s.color}
-              {format}
-              onpointerenter={() => (highlightSeriesKey = s.key)}
-              onpointerleave={() => (highlightSeriesKey = null)}
-              {...props.tooltip?.item}
-            />
-          {/each}
-        </Tooltip.List>
-      </Tooltip.Root>
-    </slot>
-  </slot>
+    {/if}
+  {/snippet}
 </Chart>