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

package/dist/components/charts/LineChart.svelte

@@ -1,112 +1,53 @@
 <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>;
-  };
+  import type { ChartProps } from '../Chart.svelte';
+  import type { HighlightPointData } from '../Highlight.svelte';
+  import type { SeriesData } from './types.js';
 
-  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 orientation of the line chart.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: 'vertical' | 'horizontal';
-
-    props?: LineChartPropsObjProp;
-
-    spline?: SimplifiedChartSnippet<
-      TData,
-      typeof Spline,
-      LineChartExtraSnippetProps<TData> & {
-        props: ComponentProps<typeof Spline>;
-        /**
-         * The index of the series currently being iterated over.
-         */
-        seriesIndex: number;
-      }
-    >;
+  import Spline from '../Spline.svelte';
 
+  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
+  export type LineChartProps<TData> = {
     /**
-     * The event to be dispatched when the point is clicked.
+     * The data for the chart
      */
-    onPointClick?: (
-      e: MouseEvent,
-      details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
-    ) => void;
-  };
+    data?: TData[] | readonly TData[];
+  } & Omit<ChartProps<any>, 'data'> & {
+      /**
+       * The orientation of the chart.  Sets which axis is the value axis.
+       *
+       * @default 'horizontal'
+       */
+      orientation?: 'horizontal' | 'vertical';
+
+      /**
+       * The series data to be used for the chart.
+       * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+       */
+      series?: SeriesData<TData, typeof Spline>[];
+
+      /**
+       * The event to be dispatched when the point is clicked.
+       */
+      onPointClick?: (
+        e: MouseEvent,
+        details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
+      ) => void;
+
+      /**
+       * Enable profiling to measure render time.
+       * @default false
+       */
+      profile?: boolean;
+    };
 </script>
 
 <script lang="ts" generics="TData">
-  import { onMount, type ComponentProps } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
+  import { onMount } from 'svelte';
 
-  import Axis from '../Axis.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 '../layers/Layer.svelte';
-  import Legend from '../Legend.svelte';
-  import Points from '../Points.svelte';
-  import Rule from '../Rule.svelte';
-  import Spline from '../Spline.svelte';
 
-  import { chartDataArray, defaultChartPadding, findRelatedData } from '../../utils/common.js';
-  import { asAny } from '../../utils/types.js';
-  import type {
-    SeriesData,
-    SimplifiedChartProps,
-    SimplifiedChartPropsObject,
-    SimplifiedChartSnippet,
-  } from './types.js';
-  import { SeriesState } from '../../states/series.svelte.js';
-  import { createLegendProps } from './utils.svelte.js';
-  import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
-  import DefaultTooltip from './DefaultTooltip.svelte';
-  import ChartAnnotations from './ChartAnnotations.svelte';
+  import { getObjectOrNull } from '../../utils/common.js';
   import { isScaleTime } from '../../utils/scales.svelte.js';
-  import { getSettings } from '../../contexts/settings.js';
-
-  const settings = getSettings();
 
   let {
     data = [],
@@ -117,39 +58,22 @@
     yScale,
     radial = false,
     orientation = 'horizontal',
+    valueAxis: valueAxisProp,
     series: seriesProp,
-    seriesLayout = 'overlap',
     axis = true,
     brush = false,
-    grid = true,
-    labels = false,
+    highlight = { lines: true, points: true },
     legend = false,
-    points = false,
-    rule = true,
-    onTooltipClick = () => {},
     onPointClick,
     props = {},
-    layer: layerProp,
     profile = false,
-    debug: debugProp,
-    tooltip = true,
-    children: childrenProp,
-    aboveContext,
-    belowContext,
-    belowMarks,
-    aboveMarks,
+    tooltipContext = true,
     marks,
-    spline,
-    highlight = true,
-    annotations = [],
     context = $bindable(),
     ...restProps
   }: LineChartProps<TData> = $props();
 
-  const layer = $derived(layerProp ?? settings.layer);
-  const debug = $derived(debugProp ?? settings.debug);
-
-  const isVertical = $derived(orientation === 'vertical');
+  const valueAxis = $derived(valueAxisProp ?? (orientation === 'horizontal' ? 'y' : 'x'));
 
   const series = $derived(
     seriesProp === undefined
@@ -157,335 +81,72 @@
           {
             key: 'default',
 
-            label: isVertical
-              ? typeof xProp === 'string'
-                ? xProp
-                : 'value'
-              : typeof yProp === 'string'
-                ? yProp
-                : 'value',
-            value: isVertical ? xProp : yProp,
+            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 seriesState = new SeriesState(() => series);
-
-  const chartData = $derived(
-    (seriesState.allSeriesData.length
-      ? seriesState.allSeriesData
-      : chartDataArray(data)) as Array<TData>
+  const highlightWithPointClick = $derived(
+    typeof highlight === 'function'
+      ? highlight
+      : onPointClick
+        ? { ...getObjectOrNull(highlight), ...props.highlight, onPointClick }
+        : highlight
   );
 
-  function getSplineProps(s: SeriesData<TData, typeof Spline>, i: number) {
-    const splineProps: ComponentProps<typeof Spline> = {
-      data: s.data,
-      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      stroke: s.color,
-      opacity:
-        // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
-        seriesState.visibleSeries.length <= 1 || seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
-      ...props.spline,
-      ...s.props,
-      class: cls(props.spline?.class, s.props?.class),
-    };
-
-    return splineProps;
-  }
-
-  function getPointsProps(s: SeriesData<TData, typeof Spline>, i: number) {
-    const pointsProps: ComponentProps<typeof Points> = {
-      data: s.data,
-      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      fill: s.color,
-      stroke: 'var(--color-surface-100, light-dark(white, black))',
-      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
-      ...props.points,
-      ...(typeof points === 'object' ? points : null),
-      class: cls(props.points?.class, typeof points === 'object' && points.class),
-    };
-
-    return pointsProps;
-  }
-
-  function getLabelsProps(s: SeriesData<TData, typeof Spline>, i: number) {
-    const labelsProps: ComponentProps<typeof Labels<TData>> = {
-      data: s.data,
-      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      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),
-    };
-
-    return labelsProps;
-  }
-
-  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;
-    const highlightPointsProps =
-      typeof props.highlight?.points === 'object' ? props.highlight.points : null;
-
-    return {
-      data: seriesTooltipData,
-      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
-      lines: i === 0,
-      onPointClick: onPointClick
-        ? (e, detail) => onPointClick(e, { ...detail, series: s })
-        : undefined,
-      onPointEnter: () => (seriesState.highlightKey.current = s.key),
-      onPointLeave: () => (seriesState.highlightKey.current = null),
-      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
-      ...props.highlight,
-      points:
-        props.highlight?.points == false
-          ? false
-          : {
-              ...highlightPointsProps,
-              fill: s.color,
-            },
-    };
-  }
-
-  function getLegendProps(): ComponentProps<typeof Legend> {
-    return createLegendProps({
-      seriesState,
-      props: {
-        ...(typeof legend === 'object' ? legend : null),
-        ...props.legend,
-      },
-    });
-  }
-
-  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',
-        ...(typeof axis === 'object' ? axis : null),
-        ...props.yAxis,
-      };
-    }
-    return {
-      placement: radial ? 'angle' : '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('LineChart render');
     onMount(() => {
       console.timeEnd('LineChart render');
     });
   }
-
-  setTooltipMetaContext({
-    type: 'line',
-    get visibleSeries() {
-      return seriesState.visibleSeries;
-    },
-  });
 </script>
 
-<!-- svelte-ignore ownership_invalid_binding -->
 <Chart
   bind:context
-  data={chartData}
+  {data}
   {xScale}
-  x={xProp ?? (isVertical ? series.map((s) => s.value ?? s.key) : undefined)}
+  x={xProp ?? (valueAxis === 'x' ? series.map((s) => s.value ?? s.key) : undefined)}
   {xDomain}
-  xBaseline={!isVertical || (xScale && isScaleTime(xScale)) ? undefined : 0}
-  xNice={orientation === 'vertical'}
+  xBaseline={valueAxis === 'y' || (xScale && isScaleTime(xScale)) ? undefined : 0}
   {yScale}
-  y={yProp ?? (isVertical ? undefined : series.map((s) => s.value ?? s.key))}
-  yBaseline={isVertical || (yScale && isScaleTime(yScale)) ? undefined : 0}
-  yNice={orientation === 'horizontal'}
+  y={yProp ?? (valueAxis === 'y' ? series.map((s) => s.value ?? s.key) : undefined)}
+  yBaseline={valueAxis === 'x' || (yScale && isScaleTime(yScale)) ? undefined : 0}
   {radial}
-  padding={radial ? undefined : defaultChartPadding({ axis, legend })}
+  {valueAxis}
+  {axis}
   {...restProps}
-  tooltip={tooltip === false
+  tooltipContext={tooltipContext === false
     ? false
     : {
-        mode: isVertical ? 'quadtree-y' : 'quadtree-x',
-        onclick: onTooltipClick,
-        debug,
+        mode: valueAxis === 'x' ? 'quadtree-y' : 'quadtree-x',
         ...props.tooltip?.context,
-        ...(typeof tooltip === 'object' ? tooltip : null),
+        ...(typeof tooltipContext === 'object' ? tooltipContext : null),
       }}
-  brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
-    ? {
-        axis: 'x',
-        resetOnEnd: true,
-        xDomain,
-        ...brushProps,
-        onBrushEnd: (e) => {
-          xDomain = e.xDomain;
-          brushProps.onBrushEnd?.(e);
-        },
-      }
+  brush={brush
+    ? { axis: 'x', zoomOnBrush: true, ...(typeof brush === 'object' ? brush : null), ...props.brush }
     : false}
+  {series}
+  highlight={highlightWithPointClick as any}
+  {legend}
+  {props}
 >
-  {#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)}
+  {#snippet marks({ context })}
+    {#if typeof marks === 'function'}
+      {@render marks({ context })}
     {:else}
-      {@render belowContext?.(snippetProps)}
-
-      <Layer
-        type={layer}
-        {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
-        center={radial}
-        {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 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}
-
-          {@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 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}
-
-      {#if typeof tooltip === 'function'}
-        {@render tooltip(snippetProps)}
-      {:else if tooltip}
-        <DefaultTooltip tooltipProps={props.tooltip} {seriesState} canHaveTotal />
-      {/if}
+      {#each context.series.visibleSeries as s, i (s.key)}
+        <Spline seriesKey={s.key} {...props.spline} />
+      {/each}
     {/if}
   {/snippet}
 </Chart>

package/dist/components/charts/LineChart.svelte.bench.d.ts

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