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

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

@@ -0,0 +1,189 @@
+import { describe, bench, afterEach } from 'vitest';
+import { render, cleanup } from 'vitest-browser-svelte';
+import LineChart from './LineChart.svelte';
+import { generateTimeSeriesData, generateMultiSeriesData, generateSeparateSeriesData, } from '../../bench/generateData.js';
+afterEach(() => {
+    cleanup();
+});
+// ── Data size scaling ────────────────────────────────────────────────
+describe('LineChart mount — data size', () => {
+    const data10 = generateTimeSeriesData(10);
+    const data100 = generateTimeSeriesData(100);
+    const data1000 = generateTimeSeriesData(1_000);
+    const data5000 = generateTimeSeriesData(5_000);
+    bench('10 points', () => {
+        cleanup();
+        render(LineChart, { data: data10, x: 'date', y: 'value', height: 300 });
+    });
+    bench('100 points', () => {
+        cleanup();
+        render(LineChart, { data: data100, x: 'date', y: 'value', height: 300 });
+    });
+    bench('1,000 points', () => {
+        cleanup();
+        render(LineChart, { data: data1000, x: 'date', y: 'value', height: 300 });
+    });
+    bench('5,000 points', () => {
+        cleanup();
+        render(LineChart, { data: data5000, x: 'date', y: 'value', height: 300 });
+    });
+});
+// ── Explicit dimensions vs auto-sizing ──────────────────────────────
+describe('LineChart mount — explicit dimensions', () => {
+    const data = generateTimeSeriesData(500);
+    bench('no explicit width/height (auto-size)', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', y: 'value' });
+    });
+    bench('explicit height only', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', y: 'value', height: 300 });
+    });
+    bench('explicit width and height', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', y: 'value', width: 600, height: 300 });
+    });
+});
+// ── Explicit domain vs computed domain ──────────────────────────────
+describe('LineChart mount — domain optimization', () => {
+    const data = generateTimeSeriesData(1_000);
+    const xDomain = [data[0].date, data[data.length - 1].date];
+    const yValues = data.map((d) => d.value);
+    const yDomain = [Math.min(...yValues), Math.max(...yValues)];
+    bench('computed domain (default)', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', y: 'value', height: 300 });
+    });
+    bench('explicit xDomain', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', y: 'value', height: 300, xDomain });
+    });
+    bench('explicit xDomain + yDomain', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            xDomain,
+            yDomain,
+        });
+    });
+    bench('explicit width + height + xDomain + yDomain', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            width: 600,
+            height: 300,
+            xDomain,
+            yDomain,
+        });
+    });
+});
+// ── Data patterns: chart-level vs series ────────────────────────────
+describe('LineChart mount — data patterns (3 series)', () => {
+    const seriesKeys = ['alpha', 'beta', 'gamma'];
+    const wideData = generateMultiSeriesData(500, seriesKeys);
+    const separateData = generateSeparateSeriesData(500, seriesKeys);
+    bench('chart-level data + series (wide format)', () => {
+        cleanup();
+        render(LineChart, {
+            data: wideData,
+            x: 'date',
+            series: seriesKeys.map((key) => ({ key, color: 'currentColor' })),
+            height: 300,
+        });
+    });
+    bench('series with separate data (long format)', () => {
+        cleanup();
+        render(LineChart, {
+            x: 'date',
+            y: 'value',
+            series: seriesKeys.map((key) => ({
+                key,
+                color: 'currentColor',
+                data: separateData[key],
+            })),
+            height: 300,
+        });
+    });
+});
+// ── Series count scaling ────────────────────────────────────────────
+describe('LineChart mount — series count', () => {
+    const keys1 = ['a'];
+    const keys3 = ['a', 'b', 'c'];
+    const keys5 = ['a', 'b', 'c', 'd', 'e'];
+    const keys10 = Array.from({ length: 10 }, (_, i) => `s${i}`);
+    const data1 = generateMultiSeriesData(200, keys1);
+    const data3 = generateMultiSeriesData(200, keys3);
+    const data5 = generateMultiSeriesData(200, keys5);
+    const data10 = generateMultiSeriesData(200, keys10);
+    const makeSeries = (keys) => keys.map((key) => ({ key, color: 'currentColor' }));
+    bench('1 series', () => {
+        cleanup();
+        render(LineChart, { data: data1, x: 'date', series: makeSeries(keys1), height: 300 });
+    });
+    bench('3 series', () => {
+        cleanup();
+        render(LineChart, { data: data3, x: 'date', series: makeSeries(keys3), height: 300 });
+    });
+    bench('5 series', () => {
+        cleanup();
+        render(LineChart, { data: data5, x: 'date', series: makeSeries(keys5), height: 300 });
+    });
+    bench('10 series', () => {
+        cleanup();
+        render(LineChart, { data: data10, x: 'date', series: makeSeries(keys10), height: 300 });
+    });
+});
+// ── Chart features impact ───────────────────────────────────────────
+describe('LineChart mount — feature toggles', () => {
+    const data = generateTimeSeriesData(500);
+    bench('minimal (no axis, no legend, no highlight)', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            axis: false,
+            legend: false,
+            highlight: false,
+            tooltipContext: false,
+        });
+    });
+    bench('axis only', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            axis: true,
+            legend: false,
+            highlight: false,
+            tooltipContext: false,
+        });
+    });
+    bench('default (axis + highlight + tooltip)', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+        });
+    });
+    bench('all features (axis + highlight + tooltip + legend)', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            legend: true,
+        });
+    });
+});

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

@@ -1,28 +1,24 @@
-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>;
-};
-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>> & {
+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 orientation of the line chart.
+     * 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?: '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;
-    }>;
+    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.
      */
@@ -30,16 +26,12 @@ export type LineChartProps<TData> = SimplifiedChartProps<TData, typeof Spline, L
         data: HighlightPointData;
         series: SeriesData<TData, typeof Spline>;
     }) => void;
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
 };
-import { type ComponentProps } from 'svelte';
-import Axis from '../Axis.svelte';
-import Grid from '../Grid.svelte';
-import Highlight, { type HighlightPointData } from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
-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: {};

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

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

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

@@ -0,0 +1,45 @@
+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';
+const data = [
+    { date: 0, value: 10 },
+    { date: 1, value: 30 },
+    { date: 2, value: 20 },
+    { date: 3, value: 50 },
+    { date: 4, value: 40 },
+];
+describe('LineChart', () => {
+    it('tooltip should prefer cScale color over default series color when cScale is explicitly provided', async () => {
+        const { container } = render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            c: 'value',
+            cScale: scaleSequential(interpolateTurbo),
+            height: 300,
+            width: 400,
+        });
+        // Hover over the bisect overlay to trigger tooltip
+        const tooltipRect = container.querySelector('.lc-tooltip-context');
+        await expect.element(tooltipRect).toBeInTheDocument();
+        const rect = tooltipRect.getBoundingClientRect();
+        const eventInit = {
+            bubbles: true,
+            clientX: rect.x + rect.width / 2,
+            clientY: rect.y + rect.height / 2,
+        };
+        tooltipRect.dispatchEvent(new PointerEvent('pointerenter', eventInit));
+        tooltipRect.dispatchEvent(new PointerEvent('pointermove', eventInit));
+        await vi.waitFor(() => {
+            const colorDot = container.querySelector('.lc-tooltip-item-color');
+            expect(colorDot).not.toBeNull();
+            const color = colorDot.style.getPropertyValue('--color');
+            // Should NOT be the default series color
+            expect(color).not.toBe('var(--color-primary, currentColor)');
+            // Should be a color from the Turbo scale (an rgb value)
+            expect(color).toMatch(/^rgb/);
+        });
+    });
+});