layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/charts/ArcChart.svelte

@@ -1,4 +1,15 @@
 <script lang="ts" module>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type { ChartProps } from '../Chart.svelte';
+  import type { ChartState } from '../../contexts/chart.js';
+  import type { ArcPropsWithoutHTML } from '../Arc.svelte';
+  import type { Accessor } from '../../utils/common.js';
+  import type { SeriesData } from './types.js';
+
+  import Arc from '../Arc.svelte';
+  import ArcLabel, { type ArcLabelConfig } from '../ArcLabel.svelte';
+  import Group from '../Group.svelte';
+
   export type ArcChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
     label: Accessor<TData>;
@@ -7,32 +18,26 @@
     getGroupProps: () => ComponentProps<typeof Group>;
     getArcProps: (s: SeriesData<TData, typeof Arc>, i: number) => ComponentProps<typeof Arc>;
   };
-  export type ArcChartPropsObjProp = Pick<
-    SimplifiedChartPropsObject,
-    'pie' | 'group' | 'arc' | 'legend' | 'canvas' | 'svg' | 'tooltip'
-  >;
-
-  export type ArcChartProps<TData> = Pick<
-    SimplifiedChartProps<TData, typeof Arc, ArcChartExtraSnippetProps<TData>>,
-    | 'aboveContext'
-    | 'aboveMarks'
-    | 'belowContext'
-    | 'belowMarks'
-    | 'children'
-    | 'data'
-    | 'debug'
-    | 'legend'
-    | 'marks'
-    | 'onTooltipClick'
-    | 'profile'
-    | 'renderContext'
-    | 'series'
-    | 'tooltip'
-    | 'cRange'
-    | 'padding'
-    | 'context'
-  > &
-    Pick<
+
+  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
+  export type ArcChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+  } & Omit<
+    ChartProps<any>,
+    // Props that don't apply to ArcChart
+    'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'
+  > & {
+      /**
+       * Render text labels on each arc.
+       *
+       * Pass `true` to enable with default placement (`centroid`), or an object
+       * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+       */
+      labels?: boolean | (ArcLabelConfig & { value?: Accessor });
+    } & Pick<
       ArcPropsWithoutHTML,
       | 'cornerRadius'
       | 'trackCornerRadius'
@@ -46,6 +51,11 @@
       | 'outerRadius'
       | 'range'
     > & {
+      /**
+       * The series data to be used for the chart.
+       */
+      series?: SeriesData<TData, typeof Arc>[];
+
       /**
        * Key accessor
        *
@@ -79,8 +89,6 @@
        */
       maxValue?: number;
 
-      props?: ArcChartPropsObjProp;
-
       /**
        * Placement of the ArcChart
        *
@@ -105,44 +113,36 @@
         detail: { data: any; series: SeriesData<TData, typeof Arc> }
       ) => void;
 
-      arc?: SimplifiedChartSnippet<
-        TData,
-        typeof Arc,
-        ArcChartExtraSnippetProps<TData> & {
-          props: ComponentProps<typeof Arc>;
-          /**
-           * The index of the series currently being iterated over.
-           */
-          seriesIndex: number;
-        }
+      arc?: Snippet<
+        [
+          { context: ChartState<TData> } & ArcChartExtraSnippetProps<TData> & {
+              props: ComponentProps<typeof Arc>;
+              /**
+               * The index of the series currently being iterated over.
+               */
+              seriesIndex: number;
+            },
+        ]
       >;
+
+      /**
+       * Enable profiling to measure render time.
+       * @default false
+       */
+      profile?: boolean;
     };
 </script>
 
 <script lang="ts" generics="TData">
-  import { onMount, type ComponentProps } from 'svelte';
+  import { onMount } from 'svelte';
   import { sum } from 'd3-array';
   import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
-  import { SelectionState } from '@layerstack/svelte-state';
 
-  import Arc, { type ArcPropsWithoutHTML } from '../Arc.svelte';
   import Chart from '../Chart.svelte';
-  import Group from '../Group.svelte';
-  import Layer from '../layout/Layer.svelte';
-  import Legend from '../Legend.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
-  import { asAny } from '../../utils/types.js';
-  import type {
-    SeriesData,
-    SimplifiedChartProps,
-    SimplifiedChartPropsObject,
-    SimplifiedChartSnippet,
-  } from './types.js';
-  import { HighlightKey } from './utils.svelte.js';
-  import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
+  import { accessor, chartDataArray, getObjectOrNull } from '../../utils/common.js';
   import { getColorIfDefined } from '../../utils/color.js';
 
   let {
@@ -166,17 +166,12 @@
     /** Event dispatched with current tooltip data */
     onTooltipClick = () => {},
     props = {},
-    renderContext = 'svg',
     profile = false,
-    debug = false,
-    tooltip = true,
-    children: childrenProp,
-    aboveContext,
-    belowContext,
-    belowMarks,
-    aboveMarks,
+    tooltipContext = true,
     marks,
+    tooltip: tooltipProp,
     arc,
+    labels = false,
     context = $bindable(),
     trackCornerRadius,
     trackPadAngle,
@@ -189,6 +184,10 @@
 
   const center = $derived(centerProp ?? placement === 'center');
 
+  const labelsConfig = $derived(
+    labels === true ? ({} as ArcLabelConfig & { value?: Accessor }) : labels || null
+  );
+
   const c = $derived(cProp ?? key);
 
   const keyAccessor = $derived(accessor(key));
@@ -211,7 +210,7 @@
   const series: SeriesData<TData, typeof Arc>[] = $derived.by(() => {
     if (!isDefaultSeries) return _series;
     // build series from data
-    return data.map((d) => {
+    return chartDataArray(data).map((d) => {
       return {
         key: keyAccessor(d),
         value: valueAccessor(d),
@@ -223,64 +222,31 @@
     });
   });
 
-  const selectedSeries = new SelectionState();
-
-  const visibleSeries = $derived(
-    series.filter((s) => selectedSeries.isEmpty() || selectedSeries.isSelected(s.key))
-  );
-
-  const allSeriesData = $derived(
-    visibleSeries
-      .flatMap((s) =>
-        s.data?.map((d) => {
-          return { seriesKey: s.key, ...d };
-        })
-      )
-      .filter((d) => d) as Array<TData & { stackData?: any }>
-  );
-
-  const chartData = $derived(
-    allSeriesData.length ? allSeriesData : chartDataArray(data)
-  ) as Array<TData>;
-
-  const seriesColors = $derived(series.map((s) => s.color).filter((d) => d != null));
-
-  const highlightKey = new HighlightKey<TData, typeof Arc>();
-  const selectedKeys = new SelectionState();
+  // ArcChart needs local chartData for visibleData filtering and cDomain calculation.
+  // IMPORTANT: Compute locally from `series` and `data` — NOT from `context.series.allSeriesData`.
+  // Reading context.series.allSeriesData here would create a derived_references_self cycle:
+  //   SeriesState.#series → ChartState.props → data={visibleData} → chartData → context.series.allSeriesData → #series
+  const chartData = $derived.by(() => {
+    const seriesData = series.flatMap((s) => s.data ?? []);
+    return (seriesData.length > 0 ? seriesData : chartDataArray(data)) as Array<TData>;
+  });
 
   const visibleData = $derived(
     chartData.filter((d) => {
       const dataKey = keyAccessor(d);
-      return selectedKeys.isEmpty() || selectedKeys.isSelected(dataKey);
+      const selectedKeys = context?.series.selectedKeys;
+      return !selectedKeys || selectedKeys.isEmpty() || selectedKeys.isSelected(dataKey);
     })
   );
 
-  function getLegendProps(): ComponentProps<typeof Legend> {
-    return {
-      tickFormat: (tick) => {
-        const item = chartData.find((d) => keyAccessor(d) === tick);
-        return item ? (labelAccessor(item) ?? tick) : tick;
-      },
-      placement: 'bottom',
-      variant: 'swatches',
-      onclick: (e, item) => {
-        selectedKeys.toggleSelected(item.value);
-        selectedSeries.toggleSelected(item.value);
-      },
-      onpointerenter: (e, item) => (highlightKey.current = item.value),
-      onpointerleave: (e) => (highlightKey.current = null),
-      ...props.legend,
-      ...(typeof legend === 'object' ? legend : null),
-      classes: {
-        item: (item) =>
-          visibleData.length && !visibleData.some((d) => keyAccessor(d) === item.value)
-            ? 'opacity-50'
-            : '',
-        ...props.legend?.classes,
-        ...(typeof legend === 'object' ? legend.classes : null),
-      },
-    };
-  }
+  // Compute series colors locally to avoid derived_references_self cycle through context.series.allSeriesColors
+  const allSeriesColors = $derived(series.map((s) => s.color).filter((c) => c != null) as string[]);
+
+  // Custom tickFormat for ArcChart legends - uses data labels instead of series labels
+  const legendTickFormat = (tick: any) => {
+    const item = chartData.find((d) => keyAccessor(d) === tick);
+    return item ? (labelAccessor(item) ?? tick) : tick;
+  };
 
   function getGroupProps(): ComponentProps<typeof Group> {
     if (!context) return {};
@@ -299,7 +265,7 @@
   function getArcProps(s: SeriesData<TData, typeof Arc>, i: number): ComponentProps<typeof Arc> {
     if (!context) return {};
     const d = s.data?.[0] || chartData[0];
-    const multiSeries = data.length > 1 || series.length > 1;
+    const multiSeries = chartDataArray(data).length > 1 || series.length > 1;
     return {
       value: valueAccessor(d),
       domain: [0, s.maxValue ?? maxValue ?? sum(chartData, valueAccessor)],
@@ -317,7 +283,8 @@
         multiSeries && (trackOuterRadius ?? 0) < 0 ? i * (trackOuterRadius ?? 0) : trackOuterRadius,
       fill: s.color ?? context.cScale?.(context.c(d)),
       track: { fill: s.color ?? context.cScale?.(context.c(d)), fillOpacity: 0.1 },
-      tooltipContext: context.tooltip,
+      opacity: (context?.series.isHighlighted(keyAccessor(d), true) ?? true) ? 1 : 0.1,
+      tooltip: true,
       data: d,
       onclick: (e) => {
         onArcClick(e, { data: d, series: s });
@@ -326,12 +293,7 @@
       },
       ...props.arc,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        highlightKey.current && highlightKey.current !== keyAccessor(d) && 'opacity-50',
-        props.arc?.class,
-        s.props?.class
-      ),
+      class: cls(props.arc?.class, s.props?.class),
     };
   }
 
@@ -341,124 +303,129 @@
       console.timeEnd('ArcChart render');
     });
   }
-
-  setTooltipMetaContext({
-    type: 'arc',
-    get color() {
-      return c;
-    },
-    get value() {
-      return value;
-    },
-    get label() {
-      return label;
-    },
-    get key() {
-      return key;
-    },
-    get visibleSeries() {
-      return visibleSeries;
-    },
-  });
 </script>
 
-<!-- svelte-ignore ownership_invalid_binding -->
 <Chart
   bind:context
   data={visibleData}
   x={value}
-  y={key}
   {c}
   cDomain={chartData.map(keyAccessor)}
-  cRange={seriesColors.length
-    ? seriesColors
+  cRange={allSeriesColors.length > 0
+    ? allSeriesColors
     : c !== key
       ? chartData.map((d) => cAccessor(d))
       : [
-          'var(--color-primary)',
-          'var(--color-secondary)',
-          'var(--color-info)',
-          'var(--color-success)',
-          'var(--color-warning)',
-          'var(--color-danger)',
+          'var(--color-primary, currentColor)',
+          'var(--color-secondary, currentColor)',
+          'var(--color-info, currentColor)',
+          'var(--color-success, currentColor)',
+          'var(--color-warning, currentColor)',
+          'var(--color-danger, currentColor)',
         ]}
-  padding={{ bottom: legend === true ? 32 : 0 }}
+  padding={{
+    bottom: legend === true || getObjectOrNull(legend)?.placement?.includes('bottom') ? 32 : 0,
+  }}
+  axis={false}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltipContext={tooltipContext === false
+    ? false
+    : {
+        onclick: onTooltipClick,
+        ...props.tooltip?.context,
+        ...(typeof tooltipContext === 'object' ? tooltipContext : null),
+      }}
+  {series}
+  legend={typeof legend === 'function'
+    ? (legend as any)
+    : legend
+      ? {
+          variant: 'swatches',
+          placement: 'bottom',
+          tickFormat: legendTickFormat,
+          ...(typeof legend === 'object' ? legend : null),
+        }
+      : false}
+  props={{
+    ...props,
+    svg: { center, ...props.svg },
+    canvas: { center, ...props.canvas },
+  }}
 >
-  {#snippet children({ context })}
-    {@const snippetProps = {
-      label: labelAccessor,
-      key: keyAccessor,
-      value: valueAccessor,
-      color: cAccessor,
-      context,
-      series,
-      visibleSeries,
-      visibleData,
-      highlightKey: highlightKey.current,
-      setHighlightKey: highlightKey.set,
-      getLegendProps,
-      getGroupProps,
-      getArcProps,
-    }}
-    {#if childrenProp}
-      {@render childrenProp(snippetProps)}
+  {#snippet marks(snippetProps)}
+    {#if typeof marks === 'function'}
+      {@render marks(snippetProps)}
     {:else}
-      {@render belowContext?.(snippetProps)}
-
-      <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
-        {center}
-        {debug}
-      >
-        {@render belowMarks?.(snippetProps)}
-
-        {#if typeof marks === 'function'}
-          {@render marks(snippetProps)}
-        {:else}
-          <Group {...getGroupProps()}>
-            {#each series as s, i (s.key)}
-              {#if typeof arc === 'function'}
-                {@render arc({ ...snippetProps, seriesIndex: i, props: getArcProps(s, i) })}
-              {:else}
-                <Arc {...getArcProps(s, i)} />
-              {/if}
-            {/each}
-          </Group>
-        {/if}
-
-        {@render aboveMarks?.(snippetProps)}
-      </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 })}
-            <Tooltip.List {...props.tooltip?.list}>
-              <Tooltip.Item
-                label={labelAccessor(data) || keyAccessor(data)}
-                value={valueAccessor(data)}
-                color={context.cScale?.(context.c(data))}
-                {format}
-                onpointerenter={() => (highlightKey.current = keyAccessor(data))}
-                onpointerleave={() => (highlightKey.current = null)}
-                {...props.tooltip?.item}
-              />
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/if}
+      <Group {...getGroupProps()}>
+        {#each series as s, i (s.key)}
+          {#if typeof arc === 'function'}
+            {@render arc({
+              ...snippetProps,
+              label: labelAccessor,
+              key: keyAccessor,
+              value: valueAccessor,
+              visibleData,
+              getGroupProps,
+              getArcProps,
+              seriesIndex: i,
+              props: getArcProps(s, i),
+            })}
+          {:else if labelsConfig}
+            {@const arcProps = getArcProps(s, i)}
+            <Arc {...arcProps}>
+              {#snippet children({
+                centroid,
+                startAngle,
+                endAngle,
+                innerRadius: arcInnerRadius,
+                outerRadius: arcOuterRadius,
+                getArcTextProps,
+              })}
+                {@const { value: labelValue, ...labelRest } = labelsConfig}
+                <ArcLabel
+                  {centroid}
+                  {startAngle}
+                  {endAngle}
+                  innerRadius={arcInnerRadius}
+                  outerRadius={arcOuterRadius}
+                  {getArcTextProps}
+                  value={accessor(labelValue ?? value)(s.data?.[0] || chartData[0])}
+                  {...labelRest}
+                />
+              {/snippet}
+            </Arc>
+          {:else}
+            <Arc {...getArcProps(s, i)} />
+          {/if}
+        {/each}
+      </Group>
+    {/if}
+  {/snippet}
+
+  {#snippet tooltip(snippetProps)}
+    {#if typeof tooltipProp === 'function'}
+      {@render tooltipProp(snippetProps as any)}
+    {:else if tooltipContext}
+      <Tooltip.Root context={snippetProps.context} {...props.tooltip?.root}>
+        {#snippet children({ data })}
+          <Tooltip.List {...props.tooltip?.list}>
+            <Tooltip.Item
+              label={labelAccessor(data) || keyAccessor(data)}
+              value={valueAccessor(data)}
+              color={snippetProps.context.cScale?.(snippetProps.context.c(data))}
+              {format}
+              onpointerenter={() => {
+                if (snippetProps.context)
+                  snippetProps.context.series.highlightKey = keyAccessor(data);
+              }}
+              onpointerleave={() => {
+                if (snippetProps.context) snippetProps.context.series.highlightKey = null;
+              }}
+              {...props.tooltip?.item}
+            />
+          </Tooltip.List>
+        {/snippet}
+      </Tooltip.Root>
     {/if}
   {/snippet}
 </Chart>

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

@@ -1,3 +1,12 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import type { ChartProps } from '../Chart.svelte';
+import type { ChartState } from '../../contexts/chart.js';
+import type { ArcPropsWithoutHTML } from '../Arc.svelte';
+import type { Accessor } from '../../utils/common.js';
+import type { SeriesData } from './types.js';
+import Arc from '../Arc.svelte';
+import { type ArcLabelConfig } from '../ArcLabel.svelte';
+import Group from '../Group.svelte';
 export type ArcChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
     label: Accessor<TData>;
@@ -6,8 +15,26 @@ export type ArcChartExtraSnippetProps<TData> = {
     getGroupProps: () => ComponentProps<typeof Group>;
     getArcProps: (s: SeriesData<TData, typeof Arc>, i: number) => ComponentProps<typeof Arc>;
 };
-export type ArcChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'pie' | 'group' | 'arc' | 'legend' | 'canvas' | 'svg' | 'tooltip'>;
-export type ArcChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc, ArcChartExtraSnippetProps<TData>>, 'aboveContext' | 'aboveMarks' | 'belowContext' | 'belowMarks' | 'children' | 'data' | 'debug' | 'legend' | 'marks' | 'onTooltipClick' | 'profile' | 'renderContext' | 'series' | 'tooltip' | 'cRange' | 'padding' | 'context'> & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
+export type ArcChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+} & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & {
+    /**
+     * Render text labels on each arc.
+     *
+     * Pass `true` to enable with default placement (`centroid`), or an object
+     * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+     */
+    labels?: boolean | (ArcLabelConfig & {
+        value?: Accessor;
+    });
+} & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
+    /**
+     * The series data to be used for the chart.
+     */
+    series?: SeriesData<TData, typeof Arc>[];
     /**
      * Key accessor
      *
@@ -36,7 +63,6 @@ export type ArcChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc,
      * Maximum possible value, useful when `data` is single item
      */
     maxValue?: number;
-    props?: ArcChartPropsObjProp;
     /**
      * Placement of the ArcChart
      *
@@ -58,23 +84,34 @@ export type ArcChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc,
         data: any;
         series: SeriesData<TData, typeof Arc>;
     }) => void;
-    arc?: SimplifiedChartSnippet<TData, typeof Arc, ArcChartExtraSnippetProps<TData> & {
-        props: ComponentProps<typeof Arc>;
-        /**
-         * The index of the series currently being iterated over.
-         */
-        seriesIndex: number;
-    }>;
+    arc?: Snippet<[
+        {
+            context: ChartState<TData>;
+        } & ArcChartExtraSnippetProps<TData> & {
+            props: ComponentProps<typeof Arc>;
+            /**
+             * The index of the series currently being iterated over.
+             */
+            seriesIndex: number;
+        }
+    ]>;
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
+};
+declare function $$render<TData>(): {
+    props: ArcChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
 };
-import { type ComponentProps } from 'svelte';
-import Arc, { type ArcPropsWithoutHTML } from '../Arc.svelte';
-import Group from '../Group.svelte';
-import { type Accessor } from '../../utils/common.js';
-import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject, SimplifiedChartSnippet } from './types.js';
 declare class __sveltets_Render<TData> {
-    props(): ArcChartProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "context";
     exports(): {};
 }

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

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

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

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import ArcChartTooltip from './__fixtures__/ArcChartTooltip.svelte';
+describe('ArcChart', () => {
+    it('uses the chart value accessor for explicit per-series tooltip values', async () => {
+        const { container } = render(ArcChartTooltip);
+        const arc = container.querySelectorAll('.lc-arc-line').item(2);
+        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('.arc-chart-tooltip-label');
+            const tooltipValue = container.querySelector('.arc-chart-tooltip-value');
+            expect(tooltipLabel?.textContent).toContain('firefox');
+            expect(tooltipValue?.textContent).toContain('187');
+        });
+    });
+});