@internetstiftelsen/charts 0.3.1 → 0.3.2

package/base-chart.d.ts

@@ -21,6 +21,7 @@ export declare abstract class BaseChart {
     protected readonly theme: ChartTheme;
     protected readonly scaleConfig: AxisScaleConfig;
     protected width: number;
+    protected height: number;
     protected xAxis: XAxis | null;
     protected yAxis: YAxis | null;
     protected grid: Grid | null;

package/base-chart.js

@@ -31,6 +31,12 @@ export class BaseChart {
             writable: true,
             value: void 0
         }); // Current rendering width
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        }); // Current rendering height
         Object.defineProperty(this, "xAxis", {
             enumerable: true,
             configurable: true,
@@ -120,6 +126,7 @@ export class BaseChart {
         this.data = config.data;
         this.theme = { ...defaultTheme, ...config.theme };
         this.width = this.theme.width;
+        this.height = this.theme.height;
         this.scaleConfig = config.scales || {};
         this.layoutManager = new LayoutManager(this.theme);
     }
@@ -148,15 +155,21 @@ export class BaseChart {
         // Calculate current width
         this.width =
             this.container.getBoundingClientRect().width || this.theme.width;
+        this.height =
+            this.container.getBoundingClientRect().height || this.theme.height;
         // Clear and setup SVG
         this.container.innerHTML = '';
         this.svg = create('svg')
             .attr('width', '100%')
-            .attr('height', this.theme.height)
+            .attr('height', this.height)
             .style('display', 'block');
         this.container.appendChild(this.svg.node());
         // Calculate layout
-        const layoutTheme = { ...this.theme, width: this.width };
+        const layoutTheme = {
+            ...this.theme,
+            width: this.width,
+            height: this.height,
+        };
         this.layoutManager = new LayoutManager(layoutTheme);
         const components = this.getLayoutComponents();
         this.plotArea = this.layoutManager.calculateLayout(components);
@@ -267,7 +280,7 @@ export class BaseChart {
         const clone = this.svg.node().cloneNode(true);
         clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         clone.setAttribute('width', String(this.width));
-        clone.setAttribute('height', String(this.theme.height));
+        clone.setAttribute('height', String(this.height));
         return clone.outerHTML;
     }
     exportJSON() {

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.3.1",
+    "version": "0.3.2",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,