layerchart 2.0.0-next.56 → 2.0.0-next.57

package/dist/components/AnnotationRange.svelte

@@ -73,20 +73,31 @@
   const ctx = getChartContext();
 
   const rect = $derived.by(() => {
-    const x0 = x ? ctx.xScale(x[0] ?? ctx.xDomain[0]) : ctx.xRange[0];
-    const x1 = x ? ctx.xScale(x[1] ?? ctx.xDomain[1]) : ctx.xRange[1];
-    const y0 = y ? ctx.yScale(y[0] ?? ctx.yDomain[0]) : ctx.yRange[0];
-    const y1 = y ? ctx.yScale(y[1] ?? ctx.yDomain[1]) : ctx.yRange[1];
+    // `null`/`undefined` on either side means "extend to chart edge" (xRange/yRange).
+    // Tracked so band adjustments only apply to endpoints derived from the band scale,
+    // not to the xRange fallback (which already contains the full pixel extent).
+    const x0FromScale = x?.[0] != null;
+    const x1FromScale = x?.[1] != null;
+    const x0 = x0FromScale ? ctx.xScale(x![0]) : ctx.xRange[0];
+    const x1 = x1FromScale ? ctx.xScale(x![1]) : ctx.xRange[1];
+    const y0 = y?.[0] != null ? ctx.yScale(y[0]) : ctx.yRange[0];
+    const y1 = y?.[1] != null ? ctx.yScale(y[1]) : ctx.yRange[1];
 
     const bandPadding = isScaleBand(ctx.xScale)
       ? (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
     const bandStep = isScaleBand(ctx.xScale) ? ctx.xScale.step() : 0;
 
+    const leftFromScale = x0 <= x1 ? x0FromScale : x1FromScale;
+    const rightFromScale = x0 <= x1 ? x1FromScale : x0FromScale;
+
+    const left = Math.min(x0, x1) - (leftFromScale ? bandPadding : 0);
+    const right = Math.max(x0, x1) + (rightFromScale ? bandStep - bandPadding : 0);
+
     return {
-      x: Math.min(x0, x1) - bandPadding,
+      x: left,
       y: Math.min(y0, y1),
-      width: Math.abs(x1 - x0) + bandStep,
+      width: right - left,
       height: Math.abs(y1 - y0),
     } satisfies ComponentProps<typeof Rect>;
   });

package/dist/components/Spline.svelte

@@ -301,9 +301,9 @@
       pathData={seg.d}
       stroke={seg.stroke}
       fill={seg.fill}
+      opacity={seg.opacity ?? seriesOpacity}
       {...series?.props}
       {...restProps}
-      opacity={seg.opacity ?? seriesOpacity}
     />
   {/each}
 {:else}
@@ -311,8 +311,8 @@
     pathData={isTweened ? tweenState.current : d}
     stroke={(typeof stroke === 'string' ? stroke : undefined) ?? series?.color}
     fill={typeof fill === 'string' ? fill : undefined}
+    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? seriesOpacity}
     {...series?.props}
     {...restProps}
-    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? seriesOpacity}
   />
 {/if}

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

@@ -1406,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/package.json

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