layerchart 2.0.0-next.60 → 2.0.0-next.62

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

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-svelte';
-import BarChart from './BarChart.svelte';
+import BarChart from './BarChart/BarChart.svelte';
 import BarChartFixedWidthTest from './BarChartFixedWidthTest.svelte';
 const wideData = [
     { year: '2016', apples: 480, bananas: 240, cherries: 120, grapes: 50 },

package/dist/components/charts/BarChartFixedWidthTest.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { scaleBand } from 'd3-scale';
-  import Chart from '../Chart.svelte';
+  import Chart from "../Chart/Chart.svelte";
   import Layer from '../layers/Layer.svelte';
-  import Bars from '../Bars.svelte';
+  import Bars from '../Bars/Bars.svelte';
 
   let {
     data,

package/dist/components/charts/ChartAnnotations.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { ChartAnnotations } from './types.js';
   import { getChartContext } from '../../contexts/chart.js';
-  import AnnotationLine from '../AnnotationLine.svelte';
-  import AnnotationPoint from '../AnnotationPoint.svelte';
-  import AnnotationRange from '../AnnotationRange.svelte';
+  import AnnotationLine from '../AnnotationLine/AnnotationLine.svelte';
+  import AnnotationPoint from '../AnnotationPoint/AnnotationPoint.svelte';
+  import AnnotationRange from '../AnnotationRange/AnnotationRange.svelte';
 
   let {
     annotations,

package/dist/components/charts/DefaultTooltip.svelte

@@ -13,7 +13,7 @@
   import Separator from '../tooltip/TooltipSeparator.svelte';
   const Tooltip = { Root, Header, List, Item, Separator };
   import { format } from '@layerstack/utils';
-  import type { ChartChildrenProps } from '../ChartChildren.svelte';
+  import type { ChartChildrenProps } from "../ChartChildren/ChartChildren.svelte";
 
   let {
     tooltipProps,

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

@@ -1,4 +1,4 @@
-import type { ChartChildrenProps } from '../ChartChildren.svelte';
+import type { ChartChildrenProps } from "../ChartChildren/ChartChildren.svelte";
 type $$ComponentProps = {
     tooltipProps?: NonNullable<ChartChildrenProps<any>['props']>['tooltip'];
     canHaveTotal?: boolean;

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

@@ -1,8 +1,8 @@
 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';
+import AreaChart from './AreaChart/AreaChart.svelte';
+import LineChart from './LineChart/LineChart.svelte';
+import ScatterChart from './ScatterChart/ScatterChart.svelte';
 // Shared test data
 const timeSeriesData = [
     { date: 0, apples: 10, bananas: 20, oranges: 15 },

package/dist/components/charts/{LineChart.svelte → LineChart/LineChart.base.svelte}

@@ -1,55 +1,24 @@
 <script lang="ts" module>
-  import type { ChartProps } from '../Chart.svelte';
-  import type { HighlightPointData } from '../Highlight.svelte';
-  import type { SeriesData } from './types.js';
+  import type { Component } from 'svelte';
+  import type { LineChartProps } from './LineChart.shared.svelte.js';
 
-  import Spline from '../Spline.svelte';
+  export type LineChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Spline: Component<any>;
+  };
 
-  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
-  export type LineChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    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;
-    };
+  export type LineChartBaseProps<TData> = LineChartProps<TData> & LineChartBaseLayerComponents;
 </script>
 
 <script lang="ts" generics="TData">
   import { onMount } from 'svelte';
 
-  import Chart from '../Chart.svelte';
-
-  import { getObjectOrNull } from '../../utils/common.js';
-  import { isScaleTime } from '../../utils/scales.svelte.js';
+  import { getObjectOrNull } from '../../../utils/common.js';
+  import { isScaleTime } from '../../../utils/scales.svelte.js';
 
   let {
+    Chart,
+    Spline,
     data = [],
     x: xProp,
     xScale,
@@ -71,7 +40,7 @@
     marks,
     context = $bindable(),
     ...restProps
-  }: LineChartProps<TData> = $props();
+  }: LineChartBaseProps<TData> = $props();
 
   const valueAxis = $derived(valueAxisProp ?? (orientation === 'horizontal' ? 'y' : 'x'));
 
@@ -145,7 +114,7 @@
   {legend}
   {props}
 >
-  {#snippet marks({ context })}
+  {#snippet marks({ context }: { context: any })}
     {#if typeof marks === 'function'}
       {@render marks({ context })}
     {:else}

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

@@ -0,0 +1,31 @@
+import type { Component } from 'svelte';
+import type { LineChartProps } from './LineChart.shared.svelte.js';
+export type LineChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Spline: Component<any>;
+};
+export type LineChartBaseProps<TData> = LineChartProps<TData> & LineChartBaseLayerComponents;
+declare function $$render<TData>(): {
+    props: LineChartBaseProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LineChart: $$IsomorphicComponent;
+type LineChart<TData> = InstanceType<typeof LineChart<TData>>;
+export default LineChart;

package/dist/components/charts/LineChart/LineChart.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { LineChartProps } from './LineChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import LineChartBase from './LineChart.base.svelte';
+  import Chart from '../../Chart/Chart.canvas.svelte';
+  import Spline from '../../Spline/Spline.canvas.svelte';
+  import type { LineChartProps } from './LineChart.shared.svelte.js';
+
+  let props: LineChartProps<TData> = $props();
+</script>
+
+<LineChartBase {Chart} {Spline} {...props} />

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

@@ -0,0 +1,26 @@
+export type { LineChartProps } from './LineChart.shared.svelte.js';
+import type { LineChartProps } from './LineChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: LineChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LineChart: $$IsomorphicComponent;
+type LineChart<TData> = InstanceType<typeof LineChart<TData>>;
+export default LineChart;

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

@@ -0,0 +1,35 @@
+import type { Component } from 'svelte';
+import type { ChartProps } from '../../Chart/Chart.shared.svelte.js';
+import type { HighlightPointData } from '../../Highlight/Highlight.shared.svelte.js';
+import type { SplineProps } from '../../Spline/Spline.shared.svelte.js';
+import type { SeriesData } from '../types.js';
+export type LineChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    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, Component<SplineProps>>[];
+    /**
+     * The event to be dispatched when the point is clicked.
+     */
+    onPointClick?: (e: MouseEvent, details: {
+        data: HighlightPointData;
+        series: SeriesData<TData, Component<SplineProps>>;
+    }) => void;
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
+};

package/dist/components/charts/LineChart/LineChart.shared.svelte.js

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

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

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { LineChartProps } from './LineChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import LineChartBase from './LineChart.base.svelte';
+  import Chart from '../../Chart/Chart.svelte';
+  import Spline from '../../Spline/Spline.svelte';
+  import type { LineChartProps } from './LineChart.shared.svelte.js';
+
+  let { context = $bindable(), ...props }: LineChartProps<TData> = $props();
+</script>
+
+<LineChartBase {Chart} {Spline} bind:context {...props} />

package/dist/components/charts/{LineChart.svelte.d.ts → LineChart/LineChart.svelte.d.ts}

@@ -1,37 +1,5 @@
-import type { ChartProps } from '../Chart.svelte';
-import type { HighlightPointData } from '../Highlight.svelte';
-import type { SeriesData } from './types.js';
-import Spline from '../Spline.svelte';
-export type LineChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    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;
-};
+export type { LineChartProps } from './LineChart.shared.svelte.js';
+import type { LineChartProps } from './LineChart.shared.svelte.js';
 declare function $$render<TData>(): {
     props: LineChartProps<TData>;
     exports: {};

package/dist/components/charts/LineChart/LineChart.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { LineChartProps } from './LineChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import LineChartBase from './LineChart.base.svelte';
+  import Chart from '../../Chart/Chart.svg.svelte';
+  import Spline from '../../Spline/Spline.svg.svelte';
+  import type { LineChartProps } from './LineChart.shared.svelte.js';
+
+  let props: LineChartProps<TData> = $props();
+</script>
+
+<LineChartBase {Chart} {Spline} {...props} />

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

@@ -0,0 +1,26 @@
+export type { LineChartProps } from './LineChart.shared.svelte.js';
+import type { LineChartProps } from './LineChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: LineChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LineChart: $$IsomorphicComponent;
+type LineChart<TData> = InstanceType<typeof LineChart<TData>>;
+export default LineChart;

package/dist/components/charts/LineChart.svelte.bench.js

@@ -1,6 +1,6 @@
 import { describe, bench, afterEach } from 'vitest';
 import { render, cleanup } from 'vitest-browser-svelte';
-import LineChart from './LineChart.svelte';
+import LineChart from './LineChart/LineChart.svelte';
 import { generateTimeSeriesData, generateMultiSeriesData, generateSeparateSeriesData, } from '../../bench/generateData.js';
 afterEach(() => {
     cleanup();

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

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { scaleSequential } from 'd3-scale';
 import { interpolateTurbo } from 'd3-scale-chromatic';
-import LineChart from './LineChart.svelte';
+import LineChart from './LineChart/LineChart.svelte';
 const data = [
     { date: 0, value: 10 },
     { date: 1, value: 30 },