layerchart 2.0.0-next.46 → 2.0.0-next.47

package/dist/components/charts/DefaultTooltip.svelte

@@ -3,58 +3,123 @@
   import { sum } from 'd3-array';
   import { getChartContext } from '../../contexts/chart.js';
   import * as Tooltip from '../tooltip/index.js';
-  import type { SimplifiedChartPropsObject } from './types.js';
-  import type { SeriesState } from '../../states/series.svelte.js';
   import { format } from '@layerstack/utils';
-  import { accessor, findRelatedData } from '../../utils/common.js';
+  import type { ChartChildrenProps } from '../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 seriesTooltipData ? valueAccessor(seriesTooltipData) : 0;
-          })}
-          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 '../../states/series.svelte.js';
+import type { ChartChildrenProps } from '../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,231 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import AreaChart from './AreaChart.svelte';
+import LineChart from './LineChart.svelte';
+import ScatterChart from './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));
+}
+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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                // Should have a header
+                const header = container.querySelector('.lc-tooltip-header');
+                expect(header).not.toBeNull();
+                // Should have 4 tooltip items (3 series + 1 total)
+                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(4);
+                // Labels should match series keys + total
+                const labels = container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const colorDots = container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(4);
+            });
+            const items = Array.from(container.querySelectorAll('.lc-tooltip-item-root'));
+            const labels = Array.from(container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const header = container.querySelector('.lc-tooltip-header');
+                expect(header).not.toBeNull();
+                // 3 series + 1 total = 4 items
+                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(4);
+                const labels = container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                // Should show x and y items
+                expect(items.length).toBe(2);
+                const labels = Array.from(container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                // Should show x, y, and r items
+                expect(items.length).toBe(3);
+                const labels = Array.from(container.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();
+            triggerTooltip(tooltipCtx);
+            await vi.waitFor(() => {
+                // Should show a header with the series name
+                const header = container.querySelector('.lc-tooltip-header');
+                expect(header).not.toBeNull();
+                expect(header.textContent).not.toBe('');
+                // Should show x and y items
+                const items = container.querySelectorAll('.lc-tooltip-item-root');
+                expect(items.length).toBe(2);
+            });
+        });
+    });
+});