layerchart 2.0.0-next.62 → 2.0.0-next.63

package/dist/utils/canvas.js

@@ -13,6 +13,16 @@ function isTransparentFill(fill) {
     // Match rgba(..., 0) - alpha channel is 0 (fully transparent)
     return /rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)/.test(fill);
 }
+/**
+ * Returns true if a style value cannot be assigned directly to a canvas
+ * context and must first be resolved through the hidden `<svg>` helper —
+ * specifically `var(...)` references and the `currentColor` keyword.
+ */
+function needsCSSResolution(value) {
+    if (typeof value !== 'string')
+        return false;
+    return value.includes('var(') || value.toLowerCase() === 'currentcolor';
+}
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
 /**
  * Parse an inline CSS style string into a StyleOptions object.
@@ -122,9 +132,8 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
     let resolvedStyles;
     if (typeof document === 'undefined' ||
-        (styleOptions.classes == null &&
-            !Object.values(mergedStyles).some((v) => typeof v === 'string' && v.includes('var(')))) {
-        // Skip resolving styles if running on server (no DOM), or no classes are provided and no styles are using CSS variables
+        (styleOptions.classes == null && !Object.values(mergedStyles).some(needsCSSResolution))) {
+        // Skip resolving styles if running on server (no DOM), or no classes are provided and no styles need CSS resolution (`var(...)` / `currentColor`)
         resolvedStyles = mergedStyles;
         // On server, provide sensible defaults for styles that would normally come from CSS
         if (typeof document === 'undefined') {
@@ -136,12 +145,12 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     else {
         // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
         const { constantStyles, variableStyles } = Object.entries(mergedStyles).reduce((acc, [key, value]) => {
-            if (typeof value === 'number' || (typeof value === 'string' && !value.includes('var('))) {
-                acc.constantStyles[key] = value;
-            }
-            else if (typeof value === 'string' && value.includes('var(')) {
+            if (needsCSSResolution(value)) {
                 acc.variableStyles[key] = value;
             }
+            else if (typeof value === 'number' || typeof value === 'string') {
+                acc.constantStyles[key] = value;
+            }
             return acc;
         }, { constantStyles: {}, variableStyles: {} });
         const computedStyles = getComputedStyles(ctx.canvas, {
@@ -200,7 +209,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
                     styleOptions.styles?.fill instanceof CanvasGradient) ||
                     (typeof CanvasPattern !== 'undefined' &&
                         styleOptions.styles?.fill instanceof CanvasPattern) ||
-                    !styleOptions.styles?.fill?.includes('var'))
+                    !needsCSSResolution(styleOptions.styles?.fill))
                 ? styleOptions.styles.fill
                 : resolvedStyles?.fill;
             if (fill && !isTransparentFill(fill)) {
@@ -217,7 +226,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
             const stroke = styleOptions.styles?.stroke &&
                 ((typeof CanvasGradient !== 'undefined' &&
                     styleOptions.styles?.stroke instanceof CanvasGradient) ||
-                    !styleOptions.styles?.stroke?.includes('var'))
+                    !needsCSSResolution(styleOptions.styles?.stroke))
                 ? styleOptions.styles?.stroke
                 : resolvedStyles?.stroke;
             if (stroke && !['none'].includes(stroke)) {
@@ -371,10 +380,18 @@ export function _createPattern(ctx, width, height, shapes, background) {
     const patternCtx = patternCanvas.getContext('2d');
     // Add pattern canvas to DOM to allow computed styles to be read (`getComputedStyles()`)
     ctx.canvas.after(patternCanvas);
-    // TODO: Fix blurry pattern
-    // const newScale = scaleCanvas(patternCtx, width, height);
-    patternCanvas.width = width;
-    patternCanvas.height = height;
+    // Render the pattern at the device pixel ratio so the bitmap tile is
+    // sharp on high-DPI screens. Chrome samples patterns in the canvas's
+    // user (post-transform) coordinate space, so 1 source pixel = 1 user px
+    // by default — without DPR-scaling the bitmap, a 12 logical-px tile is
+    // sampled from 12 source pixels, leaving each device pixel of fill to
+    // be interpolated from a 1/dpr-th of a source pixel (blurry). Drawing
+    // at DPR resolution and scaling the pattern back down to user space at
+    // fill time keeps tiles sharp.
+    const dpr = (typeof window !== 'undefined' ? window.devicePixelRatio : 1) || 1;
+    patternCanvas.width = Math.max(1, Math.round(width * dpr));
+    patternCanvas.height = Math.max(1, Math.round(height * dpr));
+    patternCtx.scale(dpr, dpr);
     if (background) {
         patternCtx.fillStyle = background;
         patternCtx.fillRect(0, 0, width, height);
@@ -389,9 +406,23 @@ export function _createPattern(ctx, width, height, shapes, background) {
                 styles: { stroke: shape.stroke, strokeWidth: shape.strokeWidth, opacity: shape.opacity },
             });
         }
+        else if (shape.type === 'rect') {
+            const rx = typeof shape.rx === 'string' ? toRectCornerPx(shape.rx, shape.width) : shape.rx;
+            const ry = typeof shape.ry === 'string' ? toRectCornerPx(shape.ry, shape.height) : (shape.ry ?? rx);
+            renderRect(patternCtx, { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx, ry }, { styles: { fill: shape.fill, opacity: shape.opacity } });
+        }
         patternCtx.restore();
     }
     const pattern = ctx.createPattern(patternCanvas, 'repeat');
+    // Scale-only matrix; no translate so the pattern anchors to the path's
+    // local origin at fill time (matches SVG `patternUnits="userSpaceOnUse"`).
+    // Use the *actual* bitmap pixel dimensions for the scale so rounding
+    // `width * dpr` to an integer doesn't accumulate drift across tiles.
+    if (pattern) {
+        const sx = width / patternCanvas.width;
+        const sy = height / patternCanvas.height;
+        pattern.setTransform(new DOMMatrix([sx, 0, 0, sy, 0, 0]));
+    }
     // Cleanup
     ctx.canvas.parentElement?.removeChild(patternCanvas);
     return pattern;
@@ -400,3 +431,13 @@ export function _createPattern(ctx, width, height, shapes, background) {
 export const createPattern = memoize(_createPattern, {
     cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
 });
+function toRectCornerPx(value, max) {
+    if (value.endsWith('%')) {
+        const pct = parseFloat(value);
+        if (!Number.isFinite(pct))
+            return 0;
+        return (max / 2) * (pct / 100);
+    }
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : 0;
+}

package/dist/utils/canvas.svelte.test.js

@@ -403,6 +403,33 @@ describe('renderPathData', () => {
         expect(strokeSpy).toHaveBeenCalled();
         expect(ctx.strokeStyle).toBe('#008000');
     });
+    it('resolves currentColor stroke through the SVG helper', () => {
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(255, 165, 0)';
+        renderPathData(ctx, 'M0,0 L100,0', {
+            styles: {
+                fill: 'none',
+                stroke: 'currentColor',
+                strokeOpacity: '1',
+                opacity: '1',
+                strokeWidth: '2',
+            },
+        });
+        // Canvas normalizes rgb(255, 165, 0) → '#ffa500'
+        expect(ctx.strokeStyle).toBe('#ffa500');
+        parent.style.color = previousColor;
+    });
+    it('resolves currentColor fill through the SVG helper', () => {
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(128, 0, 128)';
+        renderPathData(ctx, 'M0,0 L100,0 L100,100 Z', {
+            styles: { fill: 'currentColor', fillOpacity: '1', opacity: '1', stroke: 'none' },
+        });
+        expect(ctx.fillStyle).toBe('#800080');
+        parent.style.color = previousColor;
+    });
 });
 // ---------------------------------------------------------------------------
 // renderText
@@ -704,6 +731,23 @@ describe('_getComputedStyles', () => {
         // 'red' resolves to 'rgb(255, 0, 0)' in the browser
         expect(result.fill).toMatch(/rgb\(255,\s*0,\s*0\)/);
     });
+    it('resolves currentColor for fill via inherited color', () => {
+        // Set color on the canvas's parent so the helper SVG (sibling of canvas) inherits it
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(0, 128, 0)';
+        const result = _getComputedStyles(canvas, { styles: { fill: 'currentColor' } });
+        expect(result.fill).toMatch(/rgb\(0,\s*128,\s*0\)/);
+        parent.style.color = previousColor;
+    });
+    it('resolves currentColor for stroke via inherited color', () => {
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(0, 0, 255)';
+        const result = _getComputedStyles(canvas, { styles: { stroke: 'currentColor' } });
+        expect(result.stroke).toMatch(/rgb\(0,\s*0,\s*255\)/);
+        parent.style.color = previousColor;
+    });
     it('returns empty object when DOM throws (graceful error handling)', () => {
         // Simulate error by breaking canvas.after
         const originalAfter = canvas.after.bind(canvas);

package/dist/utils/download.d.ts

@@ -17,9 +17,11 @@ export type ChartImageOptions = {
      */
     quality?: number;
     /**
-     * Device pixel ratio to use when rasterising SVG layers.
-     * Higher values produce crisper images on retina displays.
-     * Defaults to `window.devicePixelRatio` (usually 1 or 2).
+     * Device pixel ratio to use when rasterising the image. Defaults to `1`
+     * so the output matches the chart's CSS dimensions (looks the same as
+     * what's on the page when viewed 1:1). Set to `window.devicePixelRatio`
+     * (or higher) to produce crisper images on retina displays at the cost
+     * of larger files.
      */
     pixelRatio?: number;
 };

package/dist/utils/download.js

@@ -27,6 +27,12 @@ const SVG_STYLE_PROPERTIES = [
     'alignment-baseline',
     'visibility',
     'display',
+    // `<Text>` wraps each label in a nested `<svg class="lc-text-svg">` that
+    // relies on `overflow: visible` so labels can render outside the wrapper
+    // (axis ticks positioned at negative x). Without this inlined, the
+    // rasteriser falls back to the spec default `overflow: hidden` and clips
+    // the labels.
+    'overflow',
     'paint-order',
     'shape-rendering',
     'text-rendering',
@@ -58,9 +64,16 @@ function inlineSvgStyles(svg) {
 }
 /**
  * Draw an SVG element onto a canvas context at the given pixel dimensions.
+ * Sets `viewBox` (if not authored) so the SVG content scales to fill the
+ * destination size — without it, increasing the `width`/`height` attributes
+ * leaves content at its original pixel coordinates and the result lands in
+ * the top-left.
  */
-function drawSvgToCanvas(svg, ctx, pixelWidth, pixelHeight) {
+function drawSvgToCanvas(svg, ctx, pixelWidth, pixelHeight, cssWidth, cssHeight) {
     const inlined = inlineSvgStyles(svg);
+    if (!inlined.getAttribute('viewBox')) {
+        inlined.setAttribute('viewBox', `0 0 ${cssWidth} ${cssHeight}`);
+    }
     inlined.setAttribute('width', String(pixelWidth));
     inlined.setAttribute('height', String(pixelHeight));
     const svgStr = new XMLSerializer().serializeToString(inlined);
@@ -69,7 +82,7 @@ function drawSvgToCanvas(svg, ctx, pixelWidth, pixelHeight) {
     return new Promise((resolve, reject) => {
         const img = new Image();
         img.onload = () => {
-            ctx.drawImage(img, 0, 0);
+            ctx.drawImage(img, 0, 0, pixelWidth, pixelHeight);
             URL.revokeObjectURL(url);
             resolve();
         };
@@ -90,9 +103,22 @@ function drawSvgToCanvas(svg, ctx, pixelWidth, pixelHeight) {
  */
 export async function getChartImageBlob(container, options = {}) {
     const { background, format = 'png', quality = 0.92 } = options;
-    const dpr = options.pixelRatio ?? window.devicePixelRatio ?? 1;
-    const cssWidth = container.clientWidth;
-    const cssHeight = container.clientHeight;
+    // Default to 1 so PNGs match the chart's on-page size; pass
+    // `pixelRatio: window.devicePixelRatio` (or higher) for retina-sharp output.
+    const dpr = options.pixelRatio ?? 1;
+    // Find all SVG and Canvas layers within the container, sorted by z-index.
+    // The class-name selector implicitly excludes `.lc-hit-canvas`.
+    const layers = Array.from(container.querySelectorAll('.lc-layout-svg, .lc-layout-canvas')).sort((a, b) => {
+        const aZ = parseFloat(window.getComputedStyle(a).zIndex) || 0;
+        const bZ = parseFloat(window.getComputedStyle(b).zIndex) || 0;
+        return aZ - bZ;
+    });
+    // Size the output to the chart layers (all share the same bounds) rather
+    // than the wrapping container, so padding/margin doesn't leave blank
+    // space on the right/bottom of the image.
+    const layerRect = layers[0]?.getBoundingClientRect();
+    const cssWidth = layerRect?.width || container.clientWidth;
+    const cssHeight = layerRect?.height || container.clientHeight;
     const pixelWidth = Math.round(cssWidth * dpr);
     const pixelHeight = Math.round(cssHeight * dpr);
     const offscreen = document.createElement('canvas');
@@ -105,21 +131,15 @@ export async function getChartImageBlob(container, options = {}) {
         ctx.fillStyle = bg;
         ctx.fillRect(0, 0, pixelWidth, pixelHeight);
     }
-    // Find all SVG and Canvas layers within the container, sorted by z-index.
-    // `.lc-hit-canvas` is excluded via the class selector (it uses `.lc-layout-canvas`).
-    const layers = Array.from(container.querySelectorAll('.lc-layout-svg, .lc-layout-canvas')).sort((a, b) => {
-        const aZ = parseFloat(window.getComputedStyle(a).zIndex) || 0;
-        const bZ = parseFloat(window.getComputedStyle(b).zIndex) || 0;
-        return aZ - bZ;
-    });
     for (const layer of layers) {
         if (layer instanceof SVGElement) {
-            await drawSvgToCanvas(layer, ctx, pixelWidth, pixelHeight);
+            await drawSvgToCanvas(layer, ctx, pixelWidth, pixelHeight, cssWidth, cssHeight);
         }
         else if (layer instanceof HTMLCanvasElement) {
-            // Canvas layers are already rendered at physical pixel resolution via scaleCanvas().
-            // Draw them at full natural size to preserve sharpness.
-            ctx.drawImage(layer, 0, 0);
+            // Canvas bitmaps are sized to `cssSize × window.devicePixelRatio`
+            // (set by `scaleCanvas`). Map them to the requested output size so
+            // the result matches `pixelRatio`.
+            ctx.drawImage(layer, 0, 0, pixelWidth, pixelHeight);
         }
     }
     return new Promise((resolve, reject) => {

package/dist/utils/stack.js

@@ -14,7 +14,11 @@ export function groupStackData(data, options) {
                 ...new Set(groupData.map((d) => d[options.stackBy ?? ''])),
             ];
             // @ts-expect-error
-            const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
+            const stackData = stack()
+                .keys(stackKeys)
+                .value((d, key) => d[key] ?? 0)
+                .order(options.order)
+                .offset(options.offset)(pivotData);
             return stackData.flatMap((series) => {
                 return series.flatMap((s) => {
                     const keys = {
@@ -43,7 +47,11 @@ export function groupStackData(data, options) {
         // @ts-expect-error
         const stackKeys = [...new Set(data.map((d) => d[options.stackBy ?? '']))];
         // @ts-expect-error
-        const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
+        const stackData = stack()
+            .keys(stackKeys)
+            .value((d, key) => d[key] ?? 0)
+            .order(options.order)
+            .offset(options.offset)(pivotData);
         const result = stackData.flatMap((series) => {
             return series.flatMap((s) => {
                 const keys = {

package/package.json

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