layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/components/charts/BarChartFixedWidthTest.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { scaleBand } from 'd3-scale';
+  import Chart from "../Chart/Chart.svelte";
+  import Layer from '../layers/Layer.svelte';
+  import Bars from '../Bars/Bars.svelte';
+
+  let {
+    data,
+    x,
+    y,
+    orientation = 'vertical',
+    barWidth,
+    barHeight,
+  }: {
+    data: any[];
+    x: string;
+    y: string;
+    orientation?: 'horizontal' | 'vertical';
+    barWidth?: number;
+    barHeight?: number;
+  } = $props();
+
+  const valueAxis = $derived(orientation === 'horizontal' ? 'x' : 'y');
+
+  const xScale = $derived(valueAxis === 'y' ? scaleBand().padding(0.4) : undefined);
+  const yScale = $derived(valueAxis === 'x' ? scaleBand().padding(0.4) : undefined);
+</script>
+
+<Chart
+  {data}
+  {x}
+  {y}
+  {xScale}
+  {yScale}
+  {valueAxis}
+  xBaseline={valueAxis === 'x' ? 0 : undefined}
+  yBaseline={valueAxis === 'y' ? 0 : undefined}
+  yDomain={valueAxis === 'y' ? [0, null] : undefined}
+  xDomain={valueAxis === 'x' ? [0, null] : undefined}
+  yNice={valueAxis === 'y'}
+  xNice={valueAxis === 'x'}
+  height={300}
+>
+  <Layer>
+    <Bars width={barWidth} height={barHeight} />
+  </Layer>
+</Chart>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    data: any[];
+    x: string;
+    y: string;
+    orientation?: 'horizontal' | 'vertical';
+    barWidth?: number;
+    barHeight?: number;
+};
+declare const BarChartFixedWidthTest: import("svelte").Component<$$ComponentProps, {}, "">;
+type BarChartFixedWidthTest = ReturnType<typeof BarChartFixedWidthTest>;
+export default BarChartFixedWidthTest;

package/dist/components/charts/ChartAnnotations.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
-  import type { ChartAnnotations, SeriesData } from './types.js';
-  import AnnotationLine from '../AnnotationLine.svelte';
-  import AnnotationPoint from '../AnnotationPoint.svelte';
-  import AnnotationRange from '../AnnotationRange.svelte';
+  import type { ChartAnnotations } from './types.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import AnnotationLine from '../AnnotationLine/AnnotationLine.svelte';
+  import AnnotationPoint from '../AnnotationPoint/AnnotationPoint.svelte';
+  import AnnotationRange from '../AnnotationRange/AnnotationRange.svelte';
 
   let {
     annotations,
     layer,
-    highlightKey,
-    visibleSeries,
   }: {
     annotations: ChartAnnotations;
     layer: 'below' | 'above';
-    highlightKey: string | null;
-    visibleSeries: SeriesData<any, any>[];
   } = $props();
 
+  const ctx = getChartContext();
+
   let visibleAnnotations = $derived(
     annotations.filter(
       (a) =>
         (a.layer === layer || (a.layer == null && layer === 'above')) &&
-        (highlightKey == null || a.seriesKey == null || a.seriesKey === highlightKey) &&
-        visibleSeries.some((s) => a.seriesKey == null || a.seriesKey === s.key)
+        (ctx.series.highlightKey == null ||
+          a.seriesKey == null ||
+          a.seriesKey === ctx.series.highlightKey) &&
+        ctx.series.visibleSeries.some((s) => a.seriesKey == null || a.seriesKey === s.key)
     )
   );
 </script>

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

@@ -1,9 +1,7 @@
-import type { ChartAnnotations, SeriesData } from './types.js';
+import type { ChartAnnotations } from './types.js';
 type $$ComponentProps = {
     annotations: ChartAnnotations;
     layer: 'below' | 'above';
-    highlightKey: string | null;
-    visibleSeries: SeriesData<any, any>[];
 };
 declare const ChartAnnotations: import("svelte").Component<$$ComponentProps, {}, "">;
 type ChartAnnotations = ReturnType<typeof ChartAnnotations>;

package/dist/components/charts/DefaultTooltip.svelte

@@ -1,60 +1,134 @@
 <script lang="ts">
-  // Shared tooltip logic across simplified chart components
+  // Shared tooltip logic across simplified chart components.
+  // Use explicit named imports instead of `import * as Tooltip from '../tooltip/index.js'`
+  // so this dynamically-imported chunk doesn't drag in `TooltipContext.svelte`
+  // (which is already in the static graph via Chart.svelte and would otherwise
+  // bloat the lazy chunk and trip Vite dev-server compilation in CI).
   import { sum } from 'd3-array';
-  import { getChartContext } from '../Chart.svelte';
-  import * as Tooltip from '../tooltip/index.js';
-  import type { SimplifiedChartPropsObject } from './types.js';
-  import type { SeriesState } from './utils.svelte.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import Root from '../tooltip/Tooltip.svelte';
+  import Header from '../tooltip/TooltipHeader.svelte';
+  import List from '../tooltip/TooltipList.svelte';
+  import Item from '../tooltip/TooltipItem.svelte';
+  import Separator from '../tooltip/TooltipSeparator.svelte';
+  const Tooltip = { Root, Header, List, Item, Separator };
   import { format } from '@layerstack/utils';
-  import { accessor, findRelatedData } from '../../utils/common.js';
+  import type { ChartChildrenProps } from "../ChartChildren/ChartChildren.svelte";
 
   let {
     tooltipProps,
-    seriesState,
     canHaveTotal = false,
   }: {
-    tooltipProps?: SimplifiedChartPropsObject['tooltip'];
-    seriesState: SeriesState<any, any>;
+    tooltipProps?: NonNullable<ChartChildrenProps<any>['props']>['tooltip'];
     canHaveTotal?: boolean;
   } = $props();
 
   const context = getChartContext();
+
+  // Get visible series (already in correct order from TooltipContext)
+  const visibleSeries = $derived(context.tooltip.series.filter((s) => s.visible));
+
+  // Single-point modes find one specific data point (by proximity in both x+y),
+  // so the tooltip shows dimensional info (x, y, r) for that point.
+  // Multi-series modes find data at a single axis position, showing all series values.
+  const isSinglePointMode = $derived(
+    context.tooltip.mode === 'quadtree' || context.tooltip.mode === 'voronoi'
+  );
+
+  // For single-point mode: find the active series for the hovered data point
+  const activeSeries = $derived(
+    isSinglePointMode
+      ? (context.tooltip.series.find((s) => s.key === context.tooltip.data?.seriesKey) ??
+          context.tooltip.series[0])
+      : null
+  );
+
+  // Header label comes from x-axis (or y-axis for horizontal/vertical charts)
+  const headerLabel = $derived(
+    context.tooltip.data
+      ? context.valueAxis === 'y'
+        ? context.x(context.tooltip.data)
+        : context.y(context.tooltip.data)
+      : undefined
+  );
+
+  function isSeriesItemHighlighted(seriesKey: string | null | undefined) {
+    return seriesKey ? context.series.isHighlighted(seriesKey, true) : undefined;
+  }
 </script>
 
 <Tooltip.Root {context} {...tooltipProps?.root}>
-  {#snippet children({ data, payload })}
-    <Tooltip.Header value={payload[0].label} {format} {...tooltipProps?.header} />
+  {#snippet children({ data })}
+    {#if isSinglePointMode}
+      {#if activeSeries && activeSeries.key !== 'default'}
+        <Tooltip.Header
+          value={activeSeries.label ?? activeSeries.key}
+          color={activeSeries.color}
+          {...tooltipProps?.header}
+        />
+      {/if}
 
-    <Tooltip.List {...tooltipProps?.list}>
-      <!-- Reverse series order so tooltip items match stacks -->
-      {#each payload as p, i (p.key ?? i)}
+      <Tooltip.List {...tooltipProps?.list}>
         <Tooltip.Item
-          label={p.name}
-          value={p.value}
-          color={p.color}
+          label={typeof context.config.x === 'string' ? context.config.x : 'x'}
+          value={context.x(data)}
+          data-highlighted={isSeriesItemHighlighted(activeSeries?.key)}
           {format}
-          valueAlign="right"
-          onpointerenter={() => (seriesState.highlightKey.current = p.key)}
-          onpointerleave={() => (seriesState.highlightKey.current = null)}
+          onpointerenter={() => (context.series.highlightKey = activeSeries?.key ?? null)}
+          onpointerleave={() => (context.series.highlightKey = null)}
           {...tooltipProps?.item}
         />
-      {/each}
-
-      {#if canHaveTotal && payload.length > 1 && !tooltipProps?.hideTotal}
-        <Tooltip.Separator {...tooltipProps?.separator} children={undefined} />
-
         <Tooltip.Item
-          label="total"
-          value={sum(seriesState.visibleSeries, (s) => {
-            const seriesTooltipData = s.data ? findRelatedData(s.data, data, context.x) : data;
-            const valueAccessor = accessor(s.value ?? (s.data ? context.y : s.key));
-            return valueAccessor(seriesTooltipData);
-          })}
-          format="integer"
-          valueAlign="right"
+          label={typeof context.config.y === 'string' ? context.config.y : 'y'}
+          value={context.y(data)}
+          data-highlighted={isSeriesItemHighlighted(activeSeries?.key)}
+          {format}
+          onpointerenter={() => (context.series.highlightKey = activeSeries?.key ?? null)}
+          onpointerleave={() => (context.series.highlightKey = null)}
           {...tooltipProps?.item}
         />
-      {/if}
-    </Tooltip.List>
+        {#if context.config.r}
+          <Tooltip.Item
+            label={typeof context.config.r === 'string' ? context.config.r : 'r'}
+            value={context.r(data)}
+            data-highlighted={isSeriesItemHighlighted(activeSeries?.key)}
+            {format}
+            onpointerenter={() => (context.series.highlightKey = activeSeries?.key ?? null)}
+            onpointerleave={() => (context.series.highlightKey = null)}
+            {...tooltipProps?.item}
+          />
+        {/if}
+      </Tooltip.List>
+    {:else}
+      <Tooltip.Header value={headerLabel} {format} {...tooltipProps?.header} />
+
+      <Tooltip.List {...tooltipProps?.list}>
+        {#each visibleSeries as s, i (s.key ?? i)}
+          <Tooltip.Item
+            label={s.label}
+            value={s.value}
+            color={s.color}
+            data-highlighted={context.series.isHighlighted(s.key, true)}
+            {format}
+            valueAlign="right"
+            onpointerenter={() => (context.series.highlightKey = s.key)}
+            onpointerleave={() => (context.series.highlightKey = null)}
+            {...tooltipProps?.item}
+          />
+        {/each}
+
+        {#if canHaveTotal && visibleSeries.length > 1 && !tooltipProps?.hideTotal}
+          <Tooltip.Separator {...tooltipProps?.separator} children={undefined} />
+
+          <Tooltip.Item
+            label="total"
+            value={sum(visibleSeries, (s) => s.value ?? 0)}
+            format="integer"
+            valueAlign="right"
+            {...tooltipProps?.item}
+          />
+        {/if}
+      </Tooltip.List>
+    {/if}
   {/snippet}
 </Tooltip.Root>

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

@@ -1,8 +1,6 @@
-import type { SimplifiedChartPropsObject } from './types.js';
-import type { SeriesState } from './utils.svelte.js';
+import type { ChartChildrenProps } from "../ChartChildren/ChartChildren.svelte";
 type $$ComponentProps = {
-    tooltipProps?: SimplifiedChartPropsObject['tooltip'];
-    seriesState: SeriesState<any, any>;
+    tooltipProps?: NonNullable<ChartChildrenProps<any>['props']>['tooltip'];
     canHaveTotal?: boolean;
 };
 declare const DefaultTooltip: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/charts/DefaultTooltip.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/charts/DefaultTooltip.svelte.test.js

@@ -0,0 +1,242 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import AreaChart from './AreaChart/AreaChart.svelte';
+import LineChart from './LineChart/LineChart.svelte';
+import ScatterChart from './ScatterChart/ScatterChart.svelte';
+// Shared test data
+const timeSeriesData = [
+    { date: 0, apples: 10, bananas: 20, oranges: 15 },
+    { date: 1, apples: 30, bananas: 15, oranges: 25 },
+    { date: 2, apples: 20, bananas: 40, oranges: 35 },
+    { date: 3, apples: 50, bananas: 25, oranges: 45 },
+    { date: 4, apples: 40, bananas: 30, oranges: 20 },
+];
+const series = [
+    { key: 'apples', color: 'rgb(255, 0, 0)' },
+    { key: 'bananas', color: 'rgb(0, 128, 0)' },
+    { key: 'oranges', color: 'rgb(255, 165, 0)' },
+];
+const scatterData = [
+    { x: 10, y: 20, size: 5 },
+    { x: 30, y: 40, size: 10 },
+    { x: 50, y: 60, size: 15 },
+    { x: 70, y: 80, size: 20 },
+];
+/** Dispatch pointer events to trigger the tooltip on a given element */
+function triggerTooltip(el) {
+    const rect = el.getBoundingClientRect();
+    const eventInit = {
+        bubbles: true,
+        clientX: rect.x + rect.width / 2,
+        clientY: rect.y + rect.height / 2,
+    };
+    el.dispatchEvent(new PointerEvent('pointerenter', eventInit));
+    el.dispatchEvent(new PointerEvent('pointermove', eventInit));
+}
+/**
+ * Trigger the tooltip and wait for it to render. Retries the dispatch until
+ * the lazy DefaultTooltip + (when in quadtree mode) d3-quadtree chunks have
+ * resolved — both happen in the background after mount.
+ */
+async function dispatchAndWaitForTooltip(el) {
+    await vi.waitFor(() => {
+        triggerTooltip(el);
+        expect(document.querySelector('.lc-tooltip-item-root')).not.toBeNull();
+    });
+}
+function triggerPointerEvent(el, type) {
+    el.dispatchEvent(new PointerEvent(type, { bubbles: true }));
+}
+describe('DefaultTooltip', () => {
+    describe('AreaChart (multi-series, quadtree-x mode)', () => {
+        it('should show header and all series items', async () => {
+            const { container } = render(AreaChart, {
+                data: timeSeriesData,
+                x: 'date',
+                series,
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                // Should have a header (portaled to body)
+                const header = document.querySelector('.lc-tooltip-header');
+                expect(header).not.toBeNull();
+                // Should have 4 tooltip items (3 series + 1 total)
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(4);
+                // Labels should match series keys + total
+                const labels = document.querySelectorAll('.lc-tooltip-item-label');
+                expect(labels.length).toBe(4);
+                const labelTexts = Array.from(labels).map((l) => l.textContent?.trim());
+                expect(labelTexts).toEqual(['apples', 'bananas', 'oranges', 'total']);
+            });
+        });
+        it('should show series colors in tooltip items', async () => {
+            const { container } = render(AreaChart, {
+                data: timeSeriesData,
+                x: 'date',
+                series,
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const colorDots = document.querySelectorAll('.lc-tooltip-item-color');
+                expect(colorDots.length).toBe(3);
+                const colors = Array.from(colorDots).map((dot) => dot.style.getPropertyValue('--color'));
+                expect(colors).toEqual(['rgb(255, 0, 0)', 'rgb(0, 128, 0)', 'rgb(255, 165, 0)']);
+            });
+        });
+        it('should fade non-highlighted tooltip series items on hover', async () => {
+            const { container } = render(AreaChart, {
+                data: timeSeriesData,
+                x: 'date',
+                series,
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(4);
+            });
+            const items = Array.from(document.querySelectorAll('.lc-tooltip-item-root'));
+            const labels = Array.from(document.querySelectorAll('.lc-tooltip-item-label'));
+            triggerPointerEvent(items[0], 'pointerenter');
+            await vi.waitFor(() => {
+                expect(items[0].dataset.highlighted).toBe('true');
+                expect(items[1].dataset.highlighted).toBe('false');
+                expect(items[2].dataset.highlighted).toBe('false');
+                expect(items[3].dataset.highlighted).toBeUndefined();
+                expect(getComputedStyle(labels[0]).opacity).not.toBe('0.1');
+                expect(getComputedStyle(labels[1]).opacity).toBe('0.1');
+                expect(getComputedStyle(labels[2]).opacity).toBe('0.1');
+                expect(getComputedStyle(labels[3]).opacity).not.toBe('0.1');
+            });
+            triggerPointerEvent(items[0], 'pointerleave');
+            await vi.waitFor(() => {
+                expect(items[0].dataset.highlighted).toBe('true');
+                expect(items[1].dataset.highlighted).toBe('true');
+                expect(items[2].dataset.highlighted).toBe('true');
+                expect(items[3].dataset.highlighted).toBeUndefined();
+                expect(getComputedStyle(labels[0]).opacity).not.toBe('0.1');
+                expect(getComputedStyle(labels[1]).opacity).not.toBe('0.1');
+                expect(getComputedStyle(labels[2]).opacity).not.toBe('0.1');
+                expect(getComputedStyle(labels[3]).opacity).not.toBe('0.1');
+            });
+        });
+        it('should show single series without total', async () => {
+            const { container } = render(AreaChart, {
+                data: timeSeriesData,
+                x: 'date',
+                y: 'apples',
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                // 1 series item, no total
+                expect(items.length).toBe(1);
+            });
+        });
+    });
+    describe('LineChart (multi-series, quadtree-x mode)', () => {
+        it('should show header and all series items', async () => {
+            const { container } = render(LineChart, {
+                data: timeSeriesData,
+                x: 'date',
+                series,
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const header = document.querySelector('.lc-tooltip-header');
+                expect(header).not.toBeNull();
+                // 3 series + 1 total = 4 items
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(4);
+                const labels = document.querySelectorAll('.lc-tooltip-item-label');
+                const labelTexts = Array.from(labels).map((l) => l.textContent?.trim());
+                expect(labelTexts).toEqual(['apples', 'bananas', 'oranges', 'total']);
+            });
+        });
+    });
+    describe('ScatterChart (single-point, quadtree mode)', () => {
+        it('should show x and y items in tooltip', async () => {
+            const { container } = render(ScatterChart, {
+                data: scatterData,
+                x: 'x',
+                y: 'y',
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                // Should show x and y items
+                expect(items.length).toBe(2);
+                const labels = Array.from(document.querySelectorAll('.lc-tooltip-item-label')).map((l) => l.textContent?.trim());
+                expect(labels).toEqual(['x', 'y']);
+            });
+        });
+        it('should show x, y, and r items when r is configured', async () => {
+            const { container } = render(ScatterChart, {
+                data: scatterData,
+                x: 'x',
+                y: 'y',
+                r: 'size',
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                // Should show x, y, and r items
+                expect(items.length).toBe(3);
+                const labels = Array.from(document.querySelectorAll('.lc-tooltip-item-label')).map((l) => l.textContent?.trim());
+                expect(labels).toEqual(['x', 'y', 'size']);
+            });
+        });
+        it('should show series header for multi-series', async () => {
+            const { container } = render(ScatterChart, {
+                x: 'x',
+                y: 'y',
+                series: [
+                    { key: 'group1', data: scatterData.slice(0, 2), color: 'rgb(255, 0, 0)' },
+                    { key: 'group2', data: scatterData.slice(2), color: 'rgb(0, 0, 255)' },
+                ],
+                height: 300,
+                width: 400,
+            });
+            const tooltipCtx = container.querySelector('.lc-tooltip-context');
+            await expect.element(tooltipCtx).toBeInTheDocument();
+            await dispatchAndWaitForTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                // Should show a header with the series name
+                const header = document.querySelector('.lc-tooltip-header');
+                expect(header).not.toBeNull();
+                expect(header.textContent).not.toBe('');
+                // Should show x and y items
+                const items = document.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(2);
+            });
+        });
+    });
+});

package/dist/components/charts/LineChart/LineChart.base.svelte

@@ -0,0 +1,126 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { LineChartProps } from './LineChart.shared.svelte.js';
+
+  export type LineChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Spline: Component<any>;
+  };
+
+  export type LineChartBaseProps<TData> = LineChartProps<TData> & LineChartBaseLayerComponents;
+</script>
+
+<script lang="ts" generics="TData">
+  import { onMount } from 'svelte';
+
+  import { getObjectOrNull } from '../../../utils/common.js';
+  import { isScaleTime } from '../../../utils/scales.svelte.js';
+
+  let {
+    Chart,
+    Spline,
+    data = [],
+    x: xProp,
+    xScale,
+    xDomain,
+    y: yProp,
+    yScale,
+    radial = false,
+    orientation = 'horizontal',
+    valueAxis: valueAxisProp,
+    series: seriesProp,
+    axis = true,
+    brush = false,
+    highlight = { lines: true, points: true },
+    legend = false,
+    onPointClick,
+    props = {},
+    profile = false,
+    tooltipContext = true,
+    marks,
+    context = $bindable(),
+    ...restProps
+  }: LineChartBaseProps<TData> = $props();
+
+  const valueAxis = $derived(valueAxisProp ?? (orientation === 'horizontal' ? 'y' : 'x'));
+
+  const series = $derived(
+    seriesProp === undefined
+      ? [
+          {
+            key: 'default',
+
+            label:
+              valueAxis == 'x'
+                ? typeof xProp === 'string'
+                  ? xProp
+                  : 'value'
+                : typeof yProp === 'string'
+                  ? yProp
+                  : 'value',
+            value: valueAxis == 'x' ? xProp : yProp,
+            color: 'var(--color-primary, currentColor)',
+          },
+        ]
+      : seriesProp
+  );
+  const highlightWithPointClick = $derived(
+    typeof highlight === 'function'
+      ? highlight
+      : onPointClick
+        ? { ...getObjectOrNull(highlight), ...props.highlight, onPointClick }
+        : highlight
+  );
+
+  if (profile) {
+    console.time('LineChart render');
+    onMount(() => {
+      console.timeEnd('LineChart render');
+    });
+  }
+</script>
+
+<Chart
+  bind:context
+  {data}
+  {xScale}
+  x={xProp ?? (valueAxis === 'x' ? series.map((s) => s.value ?? s.key) : undefined)}
+  {xDomain}
+  xBaseline={valueAxis === 'y' || (xScale && isScaleTime(xScale)) ? undefined : 0}
+  {yScale}
+  y={yProp ?? (valueAxis === 'y' ? series.map((s) => s.value ?? s.key) : undefined)}
+  yBaseline={valueAxis === 'x' || (yScale && isScaleTime(yScale)) ? undefined : 0}
+  {radial}
+  {valueAxis}
+  {axis}
+  {...restProps}
+  tooltipContext={tooltipContext === false
+    ? false
+    : {
+        mode: valueAxis === 'x' ? 'quadtree-y' : 'quadtree-x',
+        ...props.tooltip?.context,
+        ...(typeof tooltipContext === 'object' ? tooltipContext : null),
+      }}
+  brush={brush
+    ? {
+        axis: 'x',
+        zoomOnBrush: true,
+        ...(typeof brush === 'object' ? brush : null),
+        ...props.brush,
+      }
+    : false}
+  {series}
+  highlight={highlightWithPointClick as any}
+  {legend}
+  {props}
+>
+  {#snippet marks({ context }: { context: any })}
+    {#if typeof marks === 'function'}
+      {@render marks({ context })}
+    {:else}
+      {#each context.series.visibleSeries as s, i (s.key)}
+        <Spline seriesKey={s.key} {...props.spline} />
+      {/each}
+    {/if}
+  {/snippet}
+</Chart>