layerchart 2.0.0-next.46 → 2.0.0-next.48

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

@@ -1,47 +1,39 @@
-/**
- * The additional snippet props passed to the various snippets belonging
- * to the `AreaChart` component.
- */
-export type AreaChartExtraSnippetProps<TData> = {
-    getAreaProps: (s: SeriesData<TData, typeof Area>, i: number) => ComponentProps<typeof Area>;
-    getLabelsProps: (s: SeriesData<TData, typeof Area>, i: number) => ComponentProps<typeof Labels<TData>>;
-    getPointsProps: (s: SeriesData<TData, typeof Area>, i: number) => ComponentProps<typeof Points>;
-    getHighlightProps: (s: SeriesData<TData, typeof Area>, i: number) => ComponentProps<typeof Highlight>;
-    getGridProps: () => ComponentProps<typeof Grid>;
-    getAxisProps: (axisDirection?: 'x' | 'y') => ComponentProps<typeof Axis>;
-    getRuleProps: () => ComponentProps<typeof Rule>;
-};
-/**
- * The accepted props via the `props` prop of the `AreaChart` component.
- */
-export type AreaChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'area' | 'brush' | 'canvas' | 'grid' | 'highlight' | 'labels' | 'legend' | 'line' | 'points' | 'rule' | 'svg' | 'tooltip' | 'xAxis' | 'yAxis'>;
-export type AreaChartProps<TData> = SimplifiedChartProps<TData, typeof Area, AreaChartExtraSnippetProps<TData>> & {
+import type { ChartProps } from '../Chart.svelte';
+import type { HighlightPoint } from '../Highlight.svelte';
+import type { SeriesData } from './types.js';
+import Area from '../Area.svelte';
+export type AreaChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+} & Omit<ChartProps<any>, 'data'> & {
+    /**
+     * The series data to be used for the chart.
+     * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+     */
+    series?: SeriesData<TData, typeof Area>[];
+    /**
+     * The layout of the series.
+     * @default 'overlap'
+     */
+    seriesLayout?: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging';
     /**
      * A callback function called when a point in the chart is clicked.
      *
      * @param e - the original event that triggered the `onPointClick`
-     * @param details - an object containing the highlighted point data and series data
+     * @param details - an object containing the highlighted point and data
      */
     onPointClick?: (e: MouseEvent, details: {
-        data: HighlightPointData;
-        series: SeriesData<TData, typeof Area>;
+        point: HighlightPoint;
+        data: any;
     }) => void;
     /**
-     * Additional props to be passed to the components rendered internally by the
-     * `AreaChart` component. This is useful for customizing the behavior of the individual
-     * components, without having to fully override them via a snippet.
+     * Enable profiling to measure render time.
+     * @default false
      */
-    props?: AreaChartPropsObjProp;
+    profile?: boolean;
 };
-import { type ComponentProps } from 'svelte';
-import Area from '../Area.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 type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
 declare function $$render<TData>(): {
     props: AreaChartProps<TData>;
     exports: {};

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

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

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

@@ -0,0 +1,154 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import AreaChart from './AreaChart.svelte';
+const seriesData = [
+    { date: new Date('2024-01-01'), one: 10, two: 20, three: 15 },
+    { date: new Date('2024-01-02'), one: 15, two: 25, three: 20 },
+    { date: new Date('2024-01-03'), one: 12, two: 18, three: 22 },
+    { date: new Date('2024-01-04'), one: 20, two: 30, three: 25 },
+    { date: new Date('2024-01-05'), one: 18, two: 22, three: 28 },
+];
+const separateSeriesData = {
+    one: [
+        { date: new Date('2024-01-01'), value: 10 },
+        { date: new Date('2024-01-02'), value: 15 },
+        { date: new Date('2024-01-03'), value: 12 },
+        { date: new Date('2024-01-04'), value: 20 },
+        { date: new Date('2024-01-05'), value: 18 },
+    ],
+    two: [
+        { date: new Date('2024-01-01'), value: 20 },
+        { date: new Date('2024-01-02'), value: 25 },
+        { date: new Date('2024-01-03'), value: 18 },
+        { date: new Date('2024-01-04'), value: 30 },
+        { date: new Date('2024-01-05'), value: 22 },
+    ],
+    three: [
+        { date: new Date('2024-01-01'), value: 15 },
+        { date: new Date('2024-01-02'), value: 20 },
+        { date: new Date('2024-01-03'), value: 22 },
+        { date: new Date('2024-01-04'), value: 25 },
+        { date: new Date('2024-01-05'), value: 28 },
+    ],
+};
+describe(`AreaChart`, () => {
+    describe('basic', () => {
+        it('should render with single series when no series prop provided', async () => {
+            const simpleData = [
+                { date: new Date('2024-01-01'), value: 10 },
+                { date: new Date('2024-01-02'), value: 15 },
+                { date: new Date('2024-01-03'), value: 12 },
+            ];
+            const { container } = render(AreaChart, {
+                data: simpleData,
+                x: 'date',
+                y: 'value',
+                height: 300,
+            });
+            const svg = container.querySelector('svg');
+            await expect.element(svg).toBeInTheDocument();
+            // Should have 1 area path for default series
+            const paths = container.querySelectorAll('path.lc-area-path');
+            expect(paths.length).toBe(1);
+        });
+        it('should render multiple area paths for each series', async () => {
+            const { container } = render(AreaChart, {
+                data: seriesData,
+                x: 'date',
+                series: [
+                    { key: 'one', color: 'blue' },
+                    { key: 'two', color: 'green' },
+                    { key: 'three', color: 'orange' },
+                ],
+                height: 300,
+            });
+            // Should have 3 area paths (one for each series)
+            const paths = container.querySelectorAll('path.lc-area-path');
+            expect(paths.length).toBe(3);
+        });
+        it('should render multiple area paths for each series with separate data', async () => {
+            const { container } = render(AreaChart, {
+                x: 'date',
+                y: 'value',
+                series: [
+                    { key: 'one', color: 'blue', data: separateSeriesData.one },
+                    { key: 'two', color: 'green', data: separateSeriesData.two },
+                    { key: 'three', color: 'orange', data: separateSeriesData.three },
+                ],
+                height: 300,
+            });
+            // Should have 3 area paths (one for each series)
+            const paths = container.querySelectorAll('path.lc-area-path');
+            expect(paths.length).toBe(3);
+        });
+        it('should render multiple area paths for each series with separate data and stack layout', async () => {
+            const { container } = render(AreaChart, {
+                x: 'date',
+                y: 'value',
+                series: [
+                    { key: 'one', color: 'blue', data: separateSeriesData.one },
+                    { key: 'two', color: 'green', data: separateSeriesData.two },
+                    { key: 'three', color: 'orange', data: separateSeriesData.three },
+                ],
+                seriesLayout: 'stack',
+                height: 300,
+            });
+            // Should have 3 area paths (one for each series)
+            const paths = container.querySelectorAll('path.lc-area-path');
+            expect(paths.length).toBe(3);
+        });
+    });
+    describe('all-zero data', () => {
+        it('should render area path with valid d attribute when all values are 0', async () => {
+            const zeroData = [
+                { date: new Date('2024-01-01'), value: 0 },
+                { date: new Date('2024-01-02'), value: 0 },
+                { date: new Date('2024-01-03'), value: 0 },
+            ];
+            const { container } = render(AreaChart, {
+                data: zeroData,
+                x: 'date',
+                y: 'value',
+                height: 300,
+            });
+            const svg = container.querySelector('svg');
+            await expect.element(svg).toBeInTheDocument();
+            const path = container.querySelector('path.lc-area-path');
+            expect(path).not.toBeNull();
+            // The path's d attribute should not contain NaN
+            const d = path.getAttribute('d');
+            expect(d).not.toBeNull();
+            expect(d).not.toContain('NaN');
+        });
+    });
+    describe('series layout', () => {
+        it('should render with overlap layout', async () => {
+            const { container } = render(AreaChart, {
+                data: seriesData,
+                x: 'date',
+                series: [
+                    { key: 'one', color: 'blue' },
+                    { key: 'two', color: 'green' },
+                ],
+                seriesLayout: 'overlap',
+                height: 300,
+            });
+            const svg = container.querySelector('svg');
+            await expect.element(svg).toBeInTheDocument();
+        });
+        it('should render with stack layout', async () => {
+            const { container } = render(AreaChart, {
+                data: seriesData,
+                x: 'date',
+                series: [
+                    { key: 'one', color: 'blue' },
+                    { key: 'two', color: 'green' },
+                ],
+                seriesLayout: 'stack',
+                height: 300,
+            });
+            const svg = container.querySelector('svg');
+            await expect.element(svg).toBeInTheDocument();
+        });
+    });
+});