layerchart 2.0.0-next.45 → 2.0.0-next.47

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

@@ -1,3 +1,11 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import type { ChartProps } from '../Chart.svelte';
+import type { ChartState } from '../../contexts/chart.js';
+import type { Accessor } from '../../utils/common.js';
+import type { SeriesData } from './types.js';
+import Arc from '../Arc.svelte';
+import Group from '../Group.svelte';
+import Pie from '../Pie.svelte';
 export type PieChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
     label: Accessor<TData>;
@@ -5,8 +13,16 @@ export type PieChartExtraSnippetProps<TData> = {
     visibleData: TData[];
     getGroupProps: () => ComponentProps<typeof Group>;
 };
-export type PieChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'pie' | 'group' | 'arc' | 'legend' | 'canvas' | 'svg' | 'tooltip'>;
-export type PieChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc, PieChartExtraSnippetProps<TData>>, 'aboveContext' | 'aboveMarks' | 'belowContext' | 'belowMarks' | 'children' | 'data' | 'debug' | 'legend' | 'marks' | 'onTooltipClick' | 'profile' | 'layer' | 'series' | 'tooltip' | 'tooltipContext' | 'cRange' | 'padding' | 'context' | 'width' | 'height'> & {
+export type PieChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+} & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & {
+    /**
+     * The series data to be used for the chart.
+     */
+    series?: SeriesData<TData, typeof Arc>[];
     /**
      * Key accessor
      *
@@ -43,7 +59,6 @@ export type PieChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc,
      * @default [0, 360]
      */
     range?: [number, number];
-    props?: PieChartPropsObjProp;
     /**
      * Inner radius of the arc.
      *   value >= 1: discrete value
@@ -86,32 +101,40 @@ export type PieChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc,
      *
      * Use the `props` snippet prop to access the default props.
      */
-    pie?: SimplifiedChartSnippet<TData, typeof Arc, PieChartExtraSnippetProps<TData> & {
-        /**
-         * Default props to apply to the Pie component.
-         */
-        props: ComponentProps<typeof Pie>;
-        /**
-         * The index of the pie series currently being iterated over.
-         */
-        index: number;
-    }>;
+    pie?: Snippet<[
+        {
+            context: ChartState<TData>;
+        } & PieChartExtraSnippetProps<TData> & {
+            /**
+             * Default props to apply to the Pie component.
+             */
+            props: ComponentProps<typeof Pie>;
+            /**
+             * The index of the pie series currently being iterated over.
+             */
+            index: number;
+        }
+    ]>;
     /**
      * Replace the default rendering of the `<Arc>` component internally with your own.
      *
      * Use the `props` snippet prop to access the default props.
      */
-    arc?: SimplifiedChartSnippet<TData, typeof Arc, PieChartExtraSnippetProps<TData> & {
-        props: ComponentProps<typeof Arc>;
-        /**
-         * The index of the arc currently being iterated over
-         */
-        index: number;
-        /**
-         * The index of the series currently being iterated over.
-         */
-        seriesIndex: number;
-    }>;
+    arc?: Snippet<[
+        {
+            context: ChartState<TData>;
+        } & PieChartExtraSnippetProps<TData> & {
+            props: ComponentProps<typeof Arc>;
+            /**
+             * The index of the arc currently being iterated over
+             */
+            index: number;
+            /**
+             * The index of the series currently being iterated over.
+             */
+            seriesIndex: number;
+        }
+    ]>;
     /**
      * A callback function triggered when the arc is clicked.
      */
@@ -119,13 +142,12 @@ export type PieChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc,
         data: any;
         series: SeriesData<TData, typeof Arc>;
     }) => void;
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
 };
-import { type ComponentProps } from 'svelte';
-import Arc from '../Arc.svelte';
-import Group from '../Group.svelte';
-import Pie from '../Pie.svelte';
-import { type Accessor } from '../../utils/common.js';
-import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject, SimplifiedChartSnippet } from './types.js';
 declare function $$render<TData>(): {
     props: PieChartProps<TData>;
     exports: {};

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

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

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

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import PieChart from './PieChart.svelte';
+const data = [
+    { browser: 'chrome', visitors: 275, color: 'red' },
+    { browser: 'safari', visitors: 200, color: 'blue' },
+    { browser: 'firefox', visitors: 187, color: 'orange' },
+];
+describe('PieChart', () => {
+    it('uses hovered slice identity for implicit tooltip series', async () => {
+        const { container } = render(PieChart, {
+            data,
+            key: 'browser',
+            value: 'visitors',
+            c: 'color',
+            height: 300,
+            width: 300,
+        });
+        const arc = container.querySelector('.lc-arc-line');
+        await expect.element(arc).toBeInTheDocument();
+        const rect = arc.getBoundingClientRect();
+        const eventInit = {
+            bubbles: true,
+            clientX: rect.x + rect.width / 2,
+            clientY: rect.y + rect.height / 2,
+        };
+        arc.dispatchEvent(new PointerEvent('pointerenter', eventInit));
+        arc.dispatchEvent(new PointerEvent('pointermove', eventInit));
+        await vi.waitFor(() => {
+            const tooltipLabel = container.querySelector('.lc-tooltip-item-label');
+            const tooltipValue = container.querySelector('.lc-tooltip-item-value');
+            expect(tooltipLabel?.textContent).toContain('chrome');
+            expect(tooltipValue?.textContent).toContain('275');
+        });
+    });
+});

package/dist/components/charts/ScatterChart.svelte

@@ -1,73 +1,35 @@
 <script lang="ts" module>
-  import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-  import type { AnyScale } from '../../utils/scales.svelte.js';
-  import { onMount, type ComponentProps } from 'svelte';
+  import type { ChartProps } from '../Chart.svelte';
+  import type { SeriesData } from './types.js';
 
-  export type ScatterChartExtraSnippetProps<TData> = {
-    getLabelsProps: (
-      s: SeriesData<TData, typeof Points>,
-      i: number
-    ) => ComponentProps<typeof Labels<TData>>;
-    getPointsProps: (
-      s: SeriesData<TData, typeof Points>,
-      i: number
-    ) => ComponentProps<typeof Points>;
-    getHighlightProps: () => ComponentProps<typeof Highlight>;
-    getAxisProps: (axisDirection: 'x' | 'y') => ComponentProps<typeof Axis>;
-    getRuleProps: () => ComponentProps<typeof Rule>;
-  };
-
-  export type ScatterChartPropsObjProp = Pick<
-    SimplifiedChartPropsObject,
-    | 'brush'
-    | 'canvas'
-    | 'grid'
-    | 'highlight'
-    | 'labels'
-    | 'legend'
-    | 'points'
-    | 'rule'
-    | 'svg'
-    | 'tooltip'
-    | 'xAxis'
-    | 'yAxis'
-  >;
+  import Points from '../Points.svelte';
 
-  export type ScatterChartProps<TData> = Omit<
-    SimplifiedChartProps<TData, typeof Points, ScatterChartExtraSnippetProps<TData>>,
-    'radial'
-  > & {
-    props?: ScatterChartPropsObjProp;
-    yDomain?: ComponentProps<typeof BrushContext>['yDomain'];
-    yScale?: AnyScale;
-  };
+  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
+  export type ScatterChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+  } & Omit<ChartProps<any>, 'data'> & {
+      /**
+       * The series data to be used for the chart.
+       */
+      series?: SeriesData<TData, typeof Points>[];
+
+      /**
+       * Enable profiling to measure render time.
+       * @default false
+       */
+      profile?: boolean;
+    };
 </script>
 
 <script lang="ts" generics="TData">
-  import { format } from '@layerstack/utils';
-  import { cls } from '@layerstack/tailwind';
+  import { onMount } from 'svelte';
 
-  import Axis from '../Axis.svelte';
-  import BrushContext from '../BrushContext.svelte';
   import Chart from '../Chart.svelte';
-  import ChartAnnotations from './ChartAnnotations.svelte';
-  import ChartClipPath from '../ChartClipPath.svelte';
-  import Grid from '../Grid.svelte';
-  import Highlight from '../Highlight.svelte';
-  import Labels from '../Labels.svelte';
-  import Layer from '../layers/Layer.svelte';
-  import Legend from '../Legend.svelte';
-  import Points from '../Points.svelte';
-  import Rule from '../Rule.svelte';
-  import * as Tooltip from '../tooltip/index.js';
 
-  import { chartDataArray, defaultChartPadding } from '../../utils/common.js';
-  import { asAny } from '../../utils/types.js';
-  import { SeriesState } from '../../states/series.svelte.js';
-  import { createLegendProps } from './utils.svelte.js';
-  import { getSettings } from '../../contexts/settings.js';
-
-  const settings = getSettings();
+  import { chartDataArray } from '../../utils/common.js';
 
   let {
     data = [],
@@ -76,137 +38,24 @@
     xDomain,
     yDomain,
     series: seriesProp,
-    seriesLayout = 'overlap',
     axis = true,
     brush = false,
-    grid = true,
-    labels = false,
+    grid = { x: true, y: true },
+    rule = { x: 0, y: 0 },
+    highlight = { lines: true, points: true, axis: 'both' },
     legend = false,
-    points = false,
-    rule = true,
-    tooltip = true,
-    context = $bindable(),
-    onTooltipClick = () => {},
     props = {},
-    layer: layerProp,
     profile = false,
-    debug: debugProp,
-    children: childrenProp,
-    aboveContext,
-    belowContext,
-    belowMarks,
-    aboveMarks,
+    tooltipContext = true,
     marks,
-    highlight = true,
-    annotations = [],
+    tooltip: tooltipProp,
+    context = $bindable(),
     ...restProps
   }: ScatterChartProps<TData> = $props();
 
-  const layer = $derived(layerProp ?? settings.layer);
-  const debug = $derived(debugProp ?? settings.debug);
-
-  const series: SeriesData<TData, typeof Points>[] = $derived(
+  const series = $derived(
     seriesProp === undefined ? [{ key: 'default', data: chartDataArray(data) }] : seriesProp
   );
-
-  const seriesState = new SeriesState(() => series);
-
-  const chartData = $derived(
-    seriesState.visibleSeries
-      .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-      .filter((d) => d) as Array<TData>
-  );
-
-  function getPointsProps(
-    s: SeriesData<TData, typeof Points>,
-    i: number
-  ): ComponentProps<typeof Points> {
-    return {
-      data: s.data,
-      fill: s.color,
-      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
-      ...props.points,
-      ...s.props,
-      class: cls(props.points?.class, s.props?.class),
-    };
-  }
-
-  function getLabelsProps(
-    s: SeriesData<TData, typeof Points>,
-    i: number
-  ): ComponentProps<typeof Labels<TData>> {
-    return {
-      data: s.data,
-      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
-      ...props.labels,
-      ...(typeof labels === 'object' ? labels : null),
-      class: cls(props.labels?.class, typeof labels === 'object' && labels.class),
-    };
-  }
-
-  function getLegendProps(): ComponentProps<typeof Legend> {
-    return createLegendProps({
-      seriesState,
-      props: {
-        ...props.legend,
-        ...(typeof legend === 'object' ? legend : null),
-      },
-    });
-  }
-
-  function getGridProps(): ComponentProps<typeof Grid> {
-    return {
-      x: true,
-      y: true,
-      ...(typeof grid === 'object' ? grid : null),
-      ...props.grid,
-    };
-  }
-
-  const activeSeries = $derived.by(() => {
-    if (!context?.tooltip?.data) return null;
-    // @ts-expect-error - shh
-    return series.find((s) => s.key === context?.tooltip.data?.seriesKey) ?? series[0];
-  });
-
-  function getHighlightProps(): ComponentProps<typeof Highlight> {
-    return {
-      lines: true,
-      axis: 'both',
-      ...props.highlight,
-      points: {
-        ...(activeSeries?.color && { fill: activeSeries.color }),
-        ...(typeof props.highlight?.points === 'object' ? props.highlight.points : null),
-      },
-    };
-  }
-
-  function getAxisProps(axisDirection: 'x' | 'y'): ComponentProps<typeof Axis> {
-    if (axisDirection === 'y') {
-      return {
-        placement: 'left',
-        ...(typeof axis === 'object' ? axis : null),
-        ...props.yAxis,
-      };
-    }
-    return {
-      placement: 'bottom',
-      ...(typeof axis === 'object' ? axis : null),
-      ...props.xAxis,
-    };
-  }
-
-  function getRuleProps(): ComponentProps<typeof Rule> {
-    return {
-      x: 0,
-      y: 0,
-      ...(typeof rule === 'object' ? rule : null),
-      ...props.rule,
-    };
-  }
-
-  const brushProps = $derived({ ...(typeof brush === 'object' ? brush : null), ...props.brush });
-
   if (profile) {
     console.time('ScatterChart render');
     onMount(() => {
@@ -215,192 +64,47 @@
   }
 </script>
 
-<!-- svelte-ignore ownership_invalid_binding -->
 <Chart
   bind:context
-  data={chartData}
+  {data}
   x={xProp}
   {xDomain}
   y={yProp}
   {yDomain}
-  yNice
   c={yProp}
   cRange={['var(--color-primary, currentColor)']}
-  padding={defaultChartPadding({ axis, legend })}
   {...restProps}
-  tooltip={tooltip === false
+  tooltipContext={tooltipContext === false
     ? false
     : {
         mode: 'quadtree',
-        onclick: onTooltipClick,
-        debug,
         ...props.tooltip?.context,
-        ...(typeof tooltip === 'object' ? tooltip : null),
+        ...(typeof tooltipContext === 'object' ? tooltipContext : null),
       }}
-  brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
+  brush={brush
     ? {
         axis: 'both',
-        resetOnEnd: true,
-        xDomain,
-        yDomain,
-        ...brushProps,
-        onBrushEnd: (e) => {
-          xDomain = e.xDomain;
-          yDomain = e.yDomain;
-          brushProps.onBrushEnd?.(e);
-        },
+        zoomOnBrush: true,
+        ...(typeof brush === 'object' ? brush : null),
+        ...props.brush,
       }
     : false}
+  {series}
+  {axis}
+  {grid}
+  {rule}
+  {highlight}
+  {legend}
+  tooltip={tooltipProp}
+  {props}
 >
-  {#snippet children({ context })}
-    {@const snippetProps = {
-      context,
-      series,
-      visibleSeries: seriesState.visibleSeries,
-      getLabelsProps,
-      getPointsProps,
-      getLegendProps,
-      getHighlightProps,
-      getAxisProps,
-      getRuleProps,
-      highlightKey: seriesState.highlightKey.current,
-      setHighlightKey: seriesState.highlightKey.set,
-    }}
-
-    {#if childrenProp}
-      {@render childrenProp(snippetProps)}
+  {#snippet marks({ context })}
+    {#if typeof marks === 'function'}
+      {@render marks({ context })}
     {:else}
-      {@render belowContext?.(snippetProps)}
-      <Layer type={layer} {...asAny(layer === 'canvas' ? props.canvas : props.svg)} {debug}>
-        {#if typeof grid === 'function'}
-          {@render grid(snippetProps)}
-        {:else if grid}
-          <Grid {...getGridProps()} />
-        {/if}
-
-        <ChartClipPath disabled={!brush}>
-          <ChartAnnotations
-            {annotations}
-            layer="below"
-            highlightKey={seriesState.highlightKey.current}
-            visibleSeries={seriesState.visibleSeries}
-          />
-
-          {@render belowMarks?.(snippetProps)}
-
-          {#if typeof marks === 'function'}
-            {@render marks(snippetProps)}
-          {:else}
-            {#each seriesState.visibleSeries as s, i (s.key)}
-              <Points {...getPointsProps(s, i)} />
-            {/each}
-          {/if}
-
-          {@render aboveMarks?.(snippetProps)}
-        </ChartClipPath>
-
-        {#if typeof axis === 'function'}
-          {@render axis(snippetProps)}
-          {#if typeof rule === 'function'}
-            {@render rule(snippetProps)}
-          {:else if rule}
-            <Rule {...getRuleProps()} />
-          {/if}
-        {:else if axis}
-          {#if axis !== 'x'}
-            <Axis {...getAxisProps('y')} />
-          {/if}
-
-          {#if axis !== 'y'}
-            <Axis {...getAxisProps('x')} />
-          {/if}
-
-          {#if typeof rule === 'function'}
-            {@render rule(snippetProps)}
-          {:else if rule}
-            <Rule {...getRuleProps()} />
-          {/if}
-        {/if}
-
-        <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
-        <ChartClipPath disabled={!brush} full>
-          {#if typeof highlight === 'function'}
-            {@render highlight(snippetProps)}
-          {:else if highlight}
-            <Highlight {...getHighlightProps()} />
-          {/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}
-
-          <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}
-
-      {#if typeof tooltip === 'function'}
-        {@render tooltip(snippetProps)}
-      {:else if tooltip}
-        <Tooltip.Root {context} {...props.tooltip?.root}>
-          {#snippet children({ data })}
-            {#if activeSeries?.key !== 'default'}
-              <Tooltip.Header
-                value={activeSeries?.label ?? activeSeries?.key}
-                color={activeSeries?.color}
-                {...props.tooltip?.header}
-              />
-            {/if}
-            <Tooltip.List {...props.tooltip?.list}>
-              <Tooltip.Item
-                label={typeof context.config.x === 'string' ? context.config.x : 'x'}
-                value={context.x(data)}
-                {format}
-                onpointerenter={() =>
-                  (seriesState.highlightKey.current = activeSeries?.key ?? null)}
-                onpointerleave={() => (seriesState.highlightKey.current = null)}
-                {...props.tooltip?.item}
-              />
-              <Tooltip.Item
-                label={typeof context.config.y === 'string' ? context.config.y : 'y'}
-                value={context.y(data)}
-                {format}
-                onpointerenter={() =>
-                  (seriesState.highlightKey.current = activeSeries?.key ?? null)}
-                onpointerleave={() => (seriesState.highlightKey.current = null)}
-                {...props.tooltip?.item}
-              />
-              {#if context.config.r}
-                <Tooltip.Item
-                  label={typeof context.config.r === 'string' ? context.config.r : 'r'}
-                  value={context.r(data)}
-                  {format}
-                  onpointerenter={() =>
-                    (seriesState.highlightKey.current = activeSeries?.key ?? null)}
-                  onpointerleave={() => (seriesState.highlightKey.current = null)}
-                  {...props.tooltip?.item}
-                />
-              {/if}
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/if}
+      {#each context.series.visibleSeries as s, i (s.key)}
+        <Points seriesKey={s.key} {...props.points} />
+      {/each}
     {/if}
   {/snippet}
 </Chart>

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

@@ -1,25 +1,22 @@
-import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-import type { AnyScale } from '../../utils/scales.svelte.js';
-import { type ComponentProps } from 'svelte';
-export type ScatterChartExtraSnippetProps<TData> = {
-    getLabelsProps: (s: SeriesData<TData, typeof Points>, i: number) => ComponentProps<typeof Labels<TData>>;
-    getPointsProps: (s: SeriesData<TData, typeof Points>, i: number) => ComponentProps<typeof Points>;
-    getHighlightProps: () => ComponentProps<typeof Highlight>;
-    getAxisProps: (axisDirection: 'x' | 'y') => ComponentProps<typeof Axis>;
-    getRuleProps: () => ComponentProps<typeof Rule>;
-};
-export type ScatterChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'brush' | 'canvas' | 'grid' | 'highlight' | 'labels' | 'legend' | 'points' | 'rule' | 'svg' | 'tooltip' | 'xAxis' | 'yAxis'>;
-export type ScatterChartProps<TData> = Omit<SimplifiedChartProps<TData, typeof Points, ScatterChartExtraSnippetProps<TData>>, 'radial'> & {
-    props?: ScatterChartPropsObjProp;
-    yDomain?: ComponentProps<typeof BrushContext>['yDomain'];
-    yScale?: AnyScale;
-};
-import Axis from '../Axis.svelte';
-import BrushContext from '../BrushContext.svelte';
-import Highlight from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
+import type { ChartProps } from '../Chart.svelte';
+import type { SeriesData } from './types.js';
 import Points from '../Points.svelte';
-import Rule from '../Rule.svelte';
+export type ScatterChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+} & Omit<ChartProps<any>, 'data'> & {
+    /**
+     * The series data to be used for the chart.
+     */
+    series?: SeriesData<TData, typeof Points>[];
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
+};
 declare function $$render<TData>(): {
     props: ScatterChartProps<TData>;
     exports: {};