layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/components/charts/BarChart.svelte

@@ -84,9 +84,8 @@
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleBand, scaleLinear } from 'd3-scale';
+  import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -109,8 +108,9 @@
   import { asAny } from '../../utils/types.js';
   import type { Insets } from '../../utils/rect.svelte.js';
   import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-  import type { AnyScale } from '../../utils/scales.svelte.js';
-  import { createLegendProps, SeriesState } from './utils.svelte.js';
+  import { isScaleTime, type AnyScale } from '../../utils/scales.svelte.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';
@@ -142,6 +142,8 @@
     bandPadding = radial ? 0 : 0.4,
     groupPadding = 0,
     stackPadding = 0,
+    xInterval,
+    yInterval,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -160,6 +162,14 @@
       ? [
           {
             key: 'default',
+            label:
+              orientation === 'vertical'
+                ? typeof yProp === 'string'
+                  ? yProp
+                  : 'value'
+                : typeof xProp === 'string'
+                  ? xProp
+                  : 'value',
             value: orientation === 'vertical' ? yProp : xProp,
           },
         ]
@@ -171,15 +181,60 @@
   const isStackSeries = $derived(seriesLayout.startsWith('stack'));
   const isGroupSeries = $derived(seriesLayout === 'group');
 
+  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
+    let _chartData = (
+      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
+    ) as Array<TData & { stackData?: any }>;
+    if (isStackSeries) {
+      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
+
+      const offset =
+        seriesLayout === 'stackExpand'
+          ? stackOffsetExpand
+          : seriesLayout === 'stackDiverging'
+            ? stackOffsetDiverging
+            : stackOffsetNone;
+      const stackData = stack()
+        .keys(seriesKeys)
+        .value((d, key) => {
+          const s = series.find((d) => d.key === key)!;
+          return accessor(s.value ?? s.key)(d as any);
+        })
+        .offset(offset)(chartDataArray(data)) as any[];
+
+      _chartData = _chartData.map((d, i) => {
+        return {
+          ...d,
+          stackData: stackData.map((sd) => sd[i]),
+        };
+      });
+    }
+    return _chartData;
+  });
+
   const xScale = $derived(
-    xScaleProp ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear())
+    xScaleProp ??
+      (xInterval
+        ? scaleTime()
+        : isVertical
+          ? scaleBand().padding(bandPadding)
+          : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
+            ? scaleTime()
+            : scaleLinear())
   );
-  const xBaseline = $derived(isVertical ? undefined : 0);
+  const xBaseline = $derived(isVertical || isScaleTime(xScale) ? undefined : 0);
 
   const yScale = $derived(
-    yScaleProp ?? (isVertical ? scaleLinear() : scaleBand().padding(bandPadding))
+    yScaleProp ??
+      (yInterval
+        ? scaleTime()
+        : isVertical
+          ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
+            ? scaleTime()
+            : scaleLinear()
+          : scaleBand().padding(bandPadding))
   );
-  const yBaseline = $derived(isVertical ? 0 : undefined);
+  const yBaseline = $derived(isVertical || isScaleTime(yScale) ? 0 : undefined);
 
   const x1Scale = $derived(
     isGroupSeries && isVertical ? scaleBand().padding(groupPadding) : undefined
@@ -214,37 +269,6 @@
     return d && typeof d === 'object' && 'stackData' in d;
   }
 
-  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
-    let _chartData = (
-      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
-    ) as Array<TData & { stackData?: any }>;
-    if (isStackSeries) {
-      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
-
-      const offset =
-        seriesLayout === 'stackExpand'
-          ? stackOffsetExpand
-          : seriesLayout === 'stackDiverging'
-            ? stackOffsetDiverging
-            : stackOffsetNone;
-      const stackData = stack()
-        .keys(seriesKeys)
-        .value((d, key) => {
-          const s = series.find((d) => d.key === key)!;
-          return accessor(s.value ?? s.key)(d as any);
-        })
-        .offset(offset)(chartDataArray(data)) as any[];
-
-      _chartData = _chartData.map((d, i) => {
-        return {
-          ...d,
-          stackData: stackData.map((sd) => sd[i]),
-        };
-      });
-    }
-    return _chartData;
-  });
-
   function getBarsProps(s: SeriesData<TData, typeof Bars>, i: number): ComponentProps<typeof Bars> {
     const isFirst = i == 0;
     const isLast = i == seriesState.visibleSeries.length - 1;
@@ -278,22 +302,21 @@
       y: isVertical ? valueAccessor : undefined,
       x1: isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
-      rounded: isStackLayout && i !== seriesState.visibleSeries.length - 1 ? 'none' : 'edge',
+      rounded:
+        isStackLayout && i !== seriesState.visibleSeries.length - 1
+          ? 'none'
+          : Array.isArray(xProp) || Array.isArray(yProp)
+            ? 'all'
+            : 'edge',
       radius: 4,
       strokeWidth: 1,
       insets: stackInsets,
       fill: s.color,
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       onBarClick: (e, detail) => onBarClick(e, { ...detail, series: s }),
       ...props.bars,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.bars?.class,
-        s.props?.class
-      ),
+      class: cls(props.bars?.class, s.props?.class),
     };
   }
 
@@ -305,16 +328,10 @@
       // TODO: Improve placement when using `seriesLayout="group"`
       // data: s.data,
       // y: s.value ?? (s.data ? undefined : s.key),
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.labels,
       ...(typeof labels === 'object' ? labels : null),
-      class: cls(
-        'stroke-surface-200 transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.labels?.class,
-        typeof labels === 'object' && labels.class
-      ),
+      class: cls(props.labels?.class, typeof labels === 'object' && labels.class),
     };
   }
 
@@ -350,26 +367,14 @@
       return {
         placement: radial ? 'radius' : 'left',
 
-        format: (value) => {
-          if (isVertical && seriesLayout === 'stackExpand') {
-            return format(value, 'percentRound');
-          } else {
-            return format(value, undefined, { variant: 'short' });
-          }
-        },
+        format: isVertical && seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => {
-        if (!isVertical && seriesLayout === 'stackExpand') {
-          return format(value, 'percentRound');
-        } else {
-          return format(value, undefined, { variant: 'short' });
-        }
-      },
+      format: !isVertical && seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };
@@ -426,6 +431,7 @@
   {x1Scale}
   {x1Domain}
   {x1Range}
+  {xInterval}
   y={resolveAccessor(yProp)}
   {yScale}
   {yBaseline}
@@ -433,8 +439,9 @@
   {y1Scale}
   {y1Domain}
   {y1Range}
+  {yInterval}
   c={isVertical ? yProp : xProp}
-  cRange={['var(--color-primary)']}
+  cRange={['var(--color-primary, currentColor)']}
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
   {...restProps}
@@ -445,6 +452,7 @@
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

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

@@ -57,10 +57,17 @@ import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Rule from '../Rule.svelte';
 import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
+declare function $$render<TData>(): {
+    props: BarChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData> {
-    props(): BarChartProps<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/DefaultTooltip.svelte

@@ -4,7 +4,7 @@
   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 type { SeriesState } from '../../states/series.svelte.js';
   import { format } from '@layerstack/utils';
   import { accessor, findRelatedData } from '../../utils/common.js';
 
@@ -41,14 +41,14 @@
       {/each}
 
       {#if canHaveTotal && payload.length > 1 && !tooltipProps?.hideTotal}
-        <Tooltip.Separator {...tooltipProps?.separator} />
+        <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);
+            return seriesTooltipData ? valueAccessor(seriesTooltipData) : 0;
           })}
           format="integer"
           valueAlign="right"

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

@@ -1,5 +1,5 @@
 import type { SimplifiedChartPropsObject } from './types.js';
-import type { SeriesState } from './utils.svelte.js';
+import type { SeriesState } from '../../states/series.svelte.js';
 type $$ComponentProps = {
     tooltipProps?: SimplifiedChartPropsObject['tooltip'];
     seriesState: SeriesState<any, any>;

package/dist/components/charts/LineChart.svelte

@@ -44,12 +44,11 @@
     LineChartExtraSnippetProps<TData>
   > & {
     /**
-     * The event to be dispatched when the point is clicked.
+     * The orientation of the line chart.
+     *
+     * @default 'horizontal'
      */
-    onPointClick?: (
-      e: MouseEvent,
-      details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
-    ) => void;
+    orientation?: 'vertical' | 'horizontal';
 
     props?: LineChartPropsObjProp;
 
@@ -64,13 +63,19 @@
         seriesIndex: number;
       }
     >;
+
+    /**
+     * The event to be dispatched when the point is clicked.
+     */
+    onPointClick?: (
+      e: MouseEvent,
+      details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
+    ) => void;
   };
 </script>
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleLinear, scaleTime } from 'd3-scale';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -85,12 +90,7 @@
   import Rule from '../Rule.svelte';
   import Spline from '../Spline.svelte';
 
-  import {
-    accessor,
-    chartDataArray,
-    defaultChartPadding,
-    findRelatedData,
-  } from '../../utils/common.js';
+  import { chartDataArray, defaultChartPadding, findRelatedData } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
   import type {
     SeriesData,
@@ -98,18 +98,22 @@
     SimplifiedChartPropsObject,
     SimplifiedChartSnippet,
   } from './types.js';
-  import { createLegendProps, SeriesState } from './utils.svelte.js';
+  import { SeriesState } from '../../states/series.svelte.js';
+  import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
-  import { layerClass } from '../../utils/attributes.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
+  import { isScaleTime } from '../../utils/scales.svelte.js';
 
   let {
     data = [],
     x: xProp,
-    y: yProp,
+    xScale,
     xDomain,
+    y: yProp,
+    yScale,
     radial = false,
+    orientation = 'horizontal',
     series: seriesProp,
     seriesLayout = 'overlap',
     axis = true,
@@ -125,7 +129,6 @@
     renderContext = 'svg',
     profile = false,
     debug = false,
-    xScale: xScaleProp,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -140,9 +143,25 @@
     ...restProps
   }: LineChartProps<TData> = $props();
 
+  const isVertical = $derived(orientation === 'vertical');
+
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: yProp, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+
+            label: isVertical
+              ? typeof xProp === 'string'
+                ? xProp
+                : 'value'
+              : typeof yProp === 'string'
+                ? yProp
+                : 'value',
+            value: isVertical ? xProp : yProp,
+            color: 'var(--color-primary, currentColor)',
+          },
+        ]
       : seriesProp
   );
   const seriesState = new SeriesState(() => series);
@@ -153,29 +172,18 @@
       : chartDataArray(data)) as Array<TData>
   );
 
-  // Default xScale based on first data's `x` value
-  const xScale = $derived(
-    xScaleProp ?? (accessor(xProp)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear())
-  );
-
   function getSplineProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const splineProps: ComponentProps<typeof Spline> = {
       data: s.data,
-      y: s.value ?? (s.data ? undefined : s.key),
+      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(
-        layerClass('line-chart-line'),
-        'transition-opacity',
-        // Checking `visibleSeries.length > 1` fixes re-animated tweened areas on hover
-        seriesState.visibleSeries.length > 1 &&
-          seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.spline?.class,
-        s.props?.class
-      ),
+      class: cls(props.spline?.class, s.props?.class),
     };
 
     return splineProps;
@@ -184,18 +192,14 @@
   function getPointsProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const pointsProps: ComponentProps<typeof Points> = {
       data: s.data,
-      y: s.value ?? (s.data ? undefined : s.key),
+      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(
-        'stroke-surface-200 transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.points?.class,
-        typeof points === 'object' && points.class
-      ),
+      class: cls(props.points?.class, typeof points === 'object' && points.class),
     };
 
     return pointsProps;
@@ -204,26 +208,17 @@
   function getLabelsProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const labelsProps: ComponentProps<typeof Labels<TData>> = {
       data: s.data,
-      y: s.value ?? (s.data ? undefined : s.key),
+      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(
-        'stroke-surface-200 transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.labels?.class,
-        typeof labels === 'object' && labels.class
-      ),
+      class: cls(props.labels?.class, typeof labels === 'object' && labels.class),
     };
 
     return labelsProps;
   }
 
-  const highlightPointsProps = $derived(
-    typeof props.highlight?.points === 'object' ? props.highlight.points : null
-  );
-
   function getHighlightProps(
     s: SeriesData<TData, typeof Spline>,
     i: number
@@ -231,18 +226,22 @@
     if (!context || !context.tooltip.data) return {};
     const seriesTooltipData =
       s.data && context.tooltip.data
-        ? findRelatedData(s.data, context.tooltip.data, context.x)
+        ? (findRelatedData(s.data, context.tooltip.data, context.x) ?? {})
         : null;
+    const highlightPointsProps =
+      typeof props.highlight?.points === 'object' ? props.highlight.points : null;
 
     return {
       data: seriesTooltipData,
-      y: s.value ?? (s.data ? undefined : s.key),
+      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
@@ -250,13 +249,6 @@
           : {
               ...highlightPointsProps,
               fill: s.color,
-              class: cls(
-                'transition-opacity',
-                seriesState.highlightKey.current &&
-                  seriesState.highlightKey.current !== s.key &&
-                  'opacity-10',
-                highlightPointsProps?.class
-              ),
             },
     };
   }
@@ -265,8 +257,8 @@
     return createLegendProps({
       seriesState,
       props: {
-        ...props.legend,
         ...(typeof legend === 'object' ? legend : null),
+        ...props.legend,
       },
     });
   }
@@ -284,14 +276,12 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format: (value) => format(value, undefined, { variant: 'short' }),
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };
@@ -327,22 +317,26 @@
 <Chart
   bind:context
   data={chartData}
-  x={xProp}
-  {xDomain}
   {xScale}
-  y={yProp ?? series.map((s) => s.value ?? s.key)}
-  yBaseline={0}
-  yNice
+  x={xProp ?? (isVertical ? series.map((s) => s.value ?? s.key) : undefined)}
+  {xDomain}
+  xBaseline={!isVertical || (xScale && isScaleTime(xScale)) ? undefined : 0}
+  xNice={orientation === 'vertical'}
+  {yScale}
+  y={yProp ?? (isVertical ? undefined : series.map((s) => s.value ?? s.key))}
+  yBaseline={isVertical || (yScale && isScaleTime(yScale)) ? undefined : 0}
+  yNice={orientation === 'horizontal'}
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
   {...restProps}
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: isVertical ? 'quadtree-y' : 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

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

@@ -10,12 +10,11 @@ export type LineChartExtraSnippetProps<TData> = {
 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 event to be dispatched when the point is clicked.
+     * The orientation of the line chart.
+     *
+     * @default 'horizontal'
      */
-    onPointClick?: (e: MouseEvent, details: {
-        data: HighlightPointData;
-        series: SeriesData<TData, typeof Spline>;
-    }) => void;
+    orientation?: 'vertical' | 'horizontal';
     props?: LineChartPropsObjProp;
     spline?: SimplifiedChartSnippet<TData, typeof Spline, LineChartExtraSnippetProps<TData> & {
         props: ComponentProps<typeof Spline>;
@@ -24,6 +23,13 @@ export type LineChartProps<TData> = SimplifiedChartProps<TData, typeof Spline, L
          */
         seriesIndex: number;
     }>;
+    /**
+     * The event to be dispatched when the point is clicked.
+     */
+    onPointClick?: (e: MouseEvent, details: {
+        data: HighlightPointData;
+        series: SeriesData<TData, typeof Spline>;
+    }) => void;
 };
 import { type ComponentProps } from 'svelte';
 import Axis from '../Axis.svelte';
@@ -34,10 +40,17 @@ import Points from '../Points.svelte';
 import Rule from '../Rule.svelte';
 import Spline from '../Spline.svelte';
 import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject, SimplifiedChartSnippet } from './types.js';
+declare function $$render<TData>(): {
+    props: LineChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData> {
-    props(): LineChartProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "context";
     exports(): {};
 }