layerchart 2.0.0-next.61 → 2.0.0-next.63

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.61",
+  "version": "2.0.0-next.63",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",

package/dist/components/Blur.svelte

@@ -1,49 +0,0 @@
-<script lang="ts" module>
-  export type BlurProps = {
-    /**
-     * A unique id for the filter.
-     */
-    id?: string;
-
-    /**
-     * The standard deviation for the blur effect.
-     *
-     * @default 5
-     */
-    stdDeviation?: number;
-
-    /**
-     * The default children snippet which provides
-     * the id for the filter.
-     */
-    children?: Snippet;
-  };
-</script>
-
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { getLayerContext } from '../contexts/layer.js';
-  import { createId } from '../utils/createId.js';
-
-  const uid = $props.id();
-
-  let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
-
-  const layerCtx = getLayerContext();
-</script>
-
-{#if layerCtx === 'svg'}
-  <defs>
-    <filter {id} class="lc-blur-filter">
-      <feGaussianBlur in="SourceGraphic" {stdDeviation} />
-    </filter>
-  </defs>
-
-  {#if children}
-    <g filter="url(#{id})" class="lc-blur-g">
-      {@render children()}
-    </g>
-  {/if}
-{:else if children}
-  {@render children()}
-{/if}