layerchart 2.0.0-next.55 → 2.0.0-next.57

package/dist/states/brush.svelte.js

@@ -6,9 +6,7 @@ import { add } from '../utils/math.js';
  * For continuous scales, returns the domain unchanged.
  */
 export function expandBandBrushDomain(brushDomain, baseDomain) {
-    if (brushDomain[0] == null ||
-        brushDomain[1] == null ||
-        typeof brushDomain[0] !== 'string') {
+    if (brushDomain[0] == null || brushDomain[1] == null || typeof brushDomain[0] !== 'string') {
         return brushDomain;
     }
     const startIdx = baseDomain.indexOf(brushDomain[0]);
@@ -109,8 +107,7 @@ export class BrushState {
         // Determine active state from current values
         const hasX = this.x[0] != null && this.x[1] != null;
         const hasY = this.y[0] != null && this.y[1] != null;
-        this.active =
-            this.axis === 'x' ? hasX : this.axis === 'y' ? hasY : hasX || hasY;
+        this.active = this.axis === 'x' ? hasX : this.axis === 'y' ? hasY : hasX || hasY;
     }
     /** Set brush to a new range, clamped to domain bounds */
     setRange(startValue, currentValue) {
@@ -177,12 +174,16 @@ export class BrushState {
         const yDomain = this.ctx?.baseYScale.domain() ?? [];
         const xCat = isCategoricalDomain(xDomain);
         const yCat = isCategoricalDomain(yDomain);
-        const clampX = (v) => xCat ? clampByIndex(v, this.xDomainMin, this.xDomainMax, xDomain) : clamp(v, this.xDomainMin, this.xDomainMax);
-        const clampY = (v) => yCat ? clampByIndex(v, this.yDomainMin, this.yDomainMax, yDomain) : clamp(v, this.yDomainMin, this.yDomainMax);
-        const ltX = (a, b) => xCat ? xDomain.indexOf(a) < xDomain.indexOf(b) : a < +b;
-        const gtX = (a, b) => xCat ? xDomain.indexOf(a) > xDomain.indexOf(b) : a > +b;
-        const ltY = (a, b) => yCat ? yDomain.indexOf(a) < yDomain.indexOf(b) : a < +b;
-        const gtY = (a, b) => yCat ? yDomain.indexOf(a) > yDomain.indexOf(b) : a > +b;
+        const clampX = (v) => xCat
+            ? clampByIndex(v, this.xDomainMin, this.xDomainMax, xDomain)
+            : clamp(v, this.xDomainMin, this.xDomainMax);
+        const clampY = (v) => yCat
+            ? clampByIndex(v, this.yDomainMin, this.yDomainMax, yDomain)
+            : clamp(v, this.yDomainMin, this.yDomainMax);
+        const ltX = (a, b) => (xCat ? xDomain.indexOf(a) < xDomain.indexOf(b) : a < +b);
+        const gtX = (a, b) => (xCat ? xDomain.indexOf(a) > xDomain.indexOf(b) : a > +b);
+        const ltY = (a, b) => (yCat ? yDomain.indexOf(a) < yDomain.indexOf(b) : a < +b);
+        const gtY = (a, b) => (yCat ? yDomain.indexOf(a) > yDomain.indexOf(b) : a > +b);
         switch (edge) {
             case 'top':
                 this.y = [
@@ -218,10 +219,12 @@ export class BrushState {
         const newX = externalX ?? [null, null];
         const newY = externalY ?? [null, null];
         // Only write when values actually differ to avoid reactive loops
-        if (this.x[0]?.valueOf() !== newX[0]?.valueOf() || this.x[1]?.valueOf() !== newX[1]?.valueOf()) {
+        if (this.x[0]?.valueOf() !== newX[0]?.valueOf() ||
+            this.x[1]?.valueOf() !== newX[1]?.valueOf()) {
             this.x = newX;
         }
-        if (this.y[0]?.valueOf() !== newY[0]?.valueOf() || this.y[1]?.valueOf() !== newY[1]?.valueOf()) {
+        if (this.y[0]?.valueOf() !== newY[0]?.valueOf() ||
+            this.y[1]?.valueOf() !== newY[1]?.valueOf()) {
             this.y = newY;
         }
         const isXAxisActive = externalX != null &&

package/dist/states/chart.svelte.js

@@ -678,8 +678,13 @@ export class ChartState {
     rDomain = $derived(calcDomain('r', this.extents, this.props.rDomain));
     x1Domain = $derived.by(() => {
         if (this.props.x1Domain) {
-            const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
-            return this.props.x1Domain.filter((key) => visibleKeys.has(key));
+            // Only filter by visible series when series are configured — otherwise the
+            // full x1Domain is used as-is (composable charts without series).
+            if (this.seriesState.series.length > 0) {
+                const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
+                return this.props.x1Domain.filter((key) => visibleKeys.has(key));
+            }
+            return this.props.x1Domain;
         }
         // Auto-derive for grouped series when x is the category axis
         if (this.props.seriesLayout === 'group' && this.valueAxis === 'y') {
@@ -692,8 +697,13 @@ export class ChartState {
     });
     y1Domain = $derived.by(() => {
         if (this.props.y1Domain) {
-            const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
-            return this.props.y1Domain.filter((key) => visibleKeys.has(key));
+            // Only filter by visible series when series are configured — otherwise the
+            // full y1Domain is used as-is (composable charts without series).
+            if (this.seriesState.series.length > 0) {
+                const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
+                return this.props.y1Domain.filter((key) => visibleKeys.has(key));
+            }
+            return this.props.y1Domain;
         }
         // Auto-derive for grouped series when y is the category axis
         if (this.props.seriesLayout === 'group' && this.valueAxis === 'x') {

package/dist/states/chart.svelte.test.js

@@ -287,17 +287,23 @@ describe('ChartState mark registration', () => {
             flushSync();
             expect(state.seriesState.isDefaultSeries).toBe(false);
             expect(state.seriesState.series).toHaveLength(2);
-            expect(state.seriesState.series[0]).toMatchObject({ key: 'apples', color: 'red', value: 'apples' });
-            expect(state.seriesState.series[1]).toMatchObject({ key: 'bananas', color: 'yellow', value: 'bananas' });
+            expect(state.seriesState.series[0]).toMatchObject({
+                key: 'apples',
+                color: 'red',
+                value: 'apples',
+            });
+            expect(state.seriesState.series[1]).toMatchObject({
+                key: 'bananas',
+                color: 'yellow',
+                value: 'bananas',
+            });
         }
         finally {
             cleanup();
         }
     });
     it('should not generate implicit series when explicit series are provided', () => {
-        const data = [
-            { date: '2024-01', apples: 10, bananas: 15 },
-        ];
+        const data = [{ date: '2024-01', apples: 10, bananas: 15 }];
         const { state, cleanup } = createChartState({
             data,
             x: 'date',
@@ -611,8 +617,16 @@ describe('ChartState geo projection skips markInfo', () => {
             // seriesKey/color/label should still create implicit series for legends
             expect(state.seriesState.isDefaultSeries).toBe(false);
             expect(state.seriesState.series).toHaveLength(2);
-            expect(state.seriesState.series[0]).toMatchObject({ key: 'earthquakes', color: 'red', label: 'Earthquakes' });
-            expect(state.seriesState.series[1]).toMatchObject({ key: 'volcanos', color: 'orange', label: 'Volcanos' });
+            expect(state.seriesState.series[0]).toMatchObject({
+                key: 'earthquakes',
+                color: 'red',
+                label: 'Earthquakes',
+            });
+            expect(state.seriesState.series[1]).toMatchObject({
+                key: 'volcanos',
+                color: 'orange',
+                label: 'Volcanos',
+            });
             // But flatData should not include extra mark data
             expect(state.flatData).toHaveLength(3);
         }
@@ -861,9 +875,7 @@ describe('ChartState implicit x/y from marks (no x/y on Chart)', () => {
         }
     });
     it('should deduplicate repeated mark x keys into a single accessor', () => {
-        const data = [
-            { date: new Date(2024, 0, 1), value: 10 },
-        ];
+        const data = [{ date: new Date(2024, 0, 1), value: 10 }];
         const { state, cleanup } = createChartState({});
         try {
             // Two marks, same x='date' — should not create duplicate keys
@@ -878,9 +890,7 @@ describe('ChartState implicit x/y from marks (no x/y on Chart)', () => {
         }
     });
     it('should use explicit x/y from Chart props over mark-derived values', () => {
-        const data = [
-            { date: new Date(2024, 0, 1), value: 10 },
-        ];
+        const data = [{ date: new Date(2024, 0, 1), value: 10 }];
         const { state, cleanup } = createChartState({
             x: 'value', // explicit — should override 'date' from marks
             y: 'value',
@@ -1250,12 +1260,7 @@ describe('ChartState group layout auto-derives x1/y1', () => {
         { year: '2016', apples: 480, bananas: 240, cherries: 120, grapes: 50 },
         { year: '2017', apples: 960, bananas: 480, cherries: 240, grapes: 100 },
     ];
-    const series = [
-        { key: 'apples' },
-        { key: 'bananas' },
-        { key: 'cherries' },
-        { key: 'grapes' },
-    ];
+    const series = [{ key: 'apples' }, { key: 'bananas' }, { key: 'cherries' }, { key: 'grapes' }];
     it('should auto-derive x1Domain from series keys when seriesLayout=group and valueAxis=y', () => {
         const { state, cleanup } = createChartState({
             data: wideData,
@@ -1401,3 +1406,49 @@ describe('ChartState group layout auto-derives x1/y1', () => {
         }
     });
 });
+describe('ChartState x1Domain/y1Domain without series', () => {
+    const longData = [
+        { year: 2019, fruit: 'apples', value: 3840 },
+        { year: 2019, fruit: 'bananas', value: 1920 },
+        { year: 2018, fruit: 'apples', value: 1600 },
+        { year: 2018, fruit: 'bananas', value: 1440 },
+    ];
+    it('should pass through explicit x1Domain when no series are configured', () => {
+        const { state, cleanup } = createChartState({
+            data: longData,
+            x: 'year',
+            xScale: scaleBand(),
+            y: 'value',
+            x1: 'fruit',
+            x1Domain: ['apples', 'bananas'],
+            x1Range: ({ xScale }) => [0, xScale.bandwidth()],
+        });
+        try {
+            expect(state.seriesState.series).toHaveLength(0);
+            expect(state.x1Domain).toEqual(['apples', 'bananas']);
+            expect(state.x1Scale.domain()).toEqual(['apples', 'bananas']);
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should pass through explicit y1Domain when no series are configured', () => {
+        const { state, cleanup } = createChartState({
+            data: longData,
+            y: 'year',
+            yScale: scaleBand(),
+            x: 'value',
+            y1: 'fruit',
+            y1Domain: ['apples', 'bananas'],
+            y1Range: ({ yScale }) => [0, yScale.bandwidth()],
+        });
+        try {
+            expect(state.seriesState.series).toHaveLength(0);
+            expect(state.y1Domain).toEqual(['apples', 'bananas']);
+            expect(state.y1Scale.domain()).toEqual(['apples', 'bananas']);
+        }
+        finally {
+            cleanup();
+        }
+    });
+});

package/dist/states/geo.svelte.js

@@ -57,10 +57,7 @@ export class GeoState {
                 ]);
             }
             if (this.transformState?.mode === 'projection' && this.transformApply.translate) {
-                _projection.translate([
-                    this.transformState.translate.x,
-                    this.transformState.translate.y,
-                ]);
+                _projection.translate([this.transformState.translate.x, this.transformState.translate.y]);
             }
         }
         // Apply center

package/dist/states/series.svelte.js

@@ -214,7 +214,7 @@ export class SeriesState {
      * Check if the series is the default
      */
     get isDefaultSeries() {
-        return this.#series.length === 0 || (this.#series.length === 1 && this.#series[0].key === 'default');
+        return (this.#series.length === 0 || (this.#series.length === 1 && this.#series[0].key === 'default'));
     }
     /**
      * Check if series is highlighted

package/dist/utils/canvas.js

@@ -196,8 +196,10 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     for (const attr of paintOrder) {
         if (attr === 'fill') {
             const fill = styleOptions.styles?.fill &&
-                ((typeof CanvasGradient !== 'undefined' && styleOptions.styles?.fill instanceof CanvasGradient) ||
-                    (typeof CanvasPattern !== 'undefined' && styleOptions.styles?.fill instanceof CanvasPattern) ||
+                ((typeof CanvasGradient !== 'undefined' &&
+                    styleOptions.styles?.fill instanceof CanvasGradient) ||
+                    (typeof CanvasPattern !== 'undefined' &&
+                        styleOptions.styles?.fill instanceof CanvasPattern) ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
                 : resolvedStyles?.fill;
@@ -213,7 +215,8 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
         }
         else if (attr === 'stroke') {
             const stroke = styleOptions.styles?.stroke &&
-                ((typeof CanvasGradient !== 'undefined' && styleOptions.styles?.stroke instanceof CanvasGradient) ||
+                ((typeof CanvasGradient !== 'undefined' &&
+                    styleOptions.styles?.stroke instanceof CanvasGradient) ||
                     !styleOptions.styles?.stroke?.includes('var'))
                 ? styleOptions.styles?.stroke
                 : resolvedStyles?.stroke;
@@ -337,7 +340,7 @@ export function clearCanvasContext(ctx, options) {
   @see: https://web.dev/articles/canvas-hidipi
 */
 export function scaleCanvas(ctx, width, height) {
-    const devicePixelRatio = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
+    const devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
     ctx.canvas.width = width * devicePixelRatio;
     ctx.canvas.height = height * devicePixelRatio;
     ctx.canvas.style.width = `${width}px`;

package/dist/utils/trail.js

@@ -88,9 +88,7 @@ function trailPathButt(points) {
         const dirPrev = hasPrev
             ? normalize(curr.x - prev.x, curr.y - prev.y)
             : normalize(next.x - curr.x, next.y - curr.y);
-        const dirNext = hasNext
-            ? normalize(next.x - curr.x, next.y - curr.y)
-            : dirPrev;
+        const dirNext = hasNext ? normalize(next.x - curr.x, next.y - curr.y) : dirPrev;
         // Perpendicular normals (rotate 90° CCW)
         const normPrev = [-dirPrev[1], dirPrev[0]];
         const normNext = [-dirNext[1], dirNext[0]];
@@ -296,7 +294,8 @@ function interpolateRadii(original, dense) {
     // Cumulative arc-length of original points
     const origCum = [0];
     for (let i = 1; i < original.length; i++) {
-        origCum.push(origCum[i - 1] + Math.hypot(original[i].x - original[i - 1].x, original[i].y - original[i - 1].y));
+        origCum.push(origCum[i - 1] +
+            Math.hypot(original[i].x - original[i - 1].x, original[i].y - original[i - 1].y));
     }
     const origTotal = origCum[origCum.length - 1] || 1;
     // Cumulative arc-length of dense points

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.55",
+  "version": "2.0.0-next.57",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",