@designsystem-se/af 35.4.1-beta.3 → 35.4.1-beta.5

package/dist/esm/digi-bar-chart_27.entry.js

@@ -251,8 +251,6 @@ const barChart = class {
         // Resizing chart while loading
         this.loadingResize = () => {
             const newHeight = this.setDims();
-            this.setMargins(true);
-            this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
             this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
             this.margin.right =
                 this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
@@ -277,10 +275,8 @@ const barChart = class {
                 0,
                 this.dims.width - this.margin.right - this.margin.left
             ]);
-            this.barSelection
-                .attr('x', this.xFunction)
-                .attr('width', this.widthFunction);
             this.setValueTicks();
+            this.adjustBarSize();
         };
         this.highlightBarGroup = (_event, datum) => {
             if (typeof datum === 'string') {
@@ -987,11 +983,11 @@ const barChart = class {
                 .html((d) => {
                 return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
             });
-            this.tooltip.style('visibility', 'visible');
+            this.tooltip.style('display', null);
             this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this.tooltip.style('visibility', 'hidden');
+            this.tooltip.style('display', 'none');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
@@ -1130,12 +1126,13 @@ const barChart = class {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this.chartData = data;
-        else
-            this.chartData = JSON.parse(data);
-        if (this.chartData)
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
+            if (typeof data != 'string')
+                this.chartData = data;
+            else
+                this.chartData = JSON.parse(data);
             this.series = this.chartData.data.series.map(serie => serie.title);
+        }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -1226,7 +1223,7 @@ const barChart = class {
         // Getting handle for tooltip
         this.tooltip = select('#' + this.afId);
         this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
-        // Add heading placeholder for heading
+        this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
             .select('.tooltipHead')
             .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
@@ -1234,7 +1231,7 @@ const barChart = class {
             .style('font-size', '1rem')
             .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
         select(this.chartDiv).select('.chartSVG').remove();
@@ -1254,20 +1251,19 @@ const barChart = class {
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
             ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
-            : 'Stapeldiagram');
+            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         select(this.titleDiv)
-            .select(this.afHeadingLevel)
+            .append(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
         this.tooltip = select('#' + this.afId);
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
         this.loading = true;
-        console.log('loading!');
         // close potentially open tooltip
         if (this.tooltip)
             this.closeTooltip();
@@ -1661,7 +1657,7 @@ const barChart = class {
         this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this.tooltip.style('visibility') !== 'hidden')
+        if (this.tooltip.style('display') !== 'none')
             this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
@@ -1781,7 +1777,7 @@ const barChart = class {
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
             }
         }
-        return (h(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (h(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, h("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, h("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), h("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, h("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, h("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), h("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), h("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.js

@@ -35813,8 +35813,6 @@ class barChart {
         // Resizing chart while loading
         this.loadingResize = () => {
             const newHeight = this.setDims();
-            this.setMargins(true);
-            this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
             this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
             this.margin.right =
                 this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
@@ -35839,10 +35837,8 @@ class barChart {
                 0,
                 this.dims.width - this.margin.right - this.margin.left
             ]);
-            this.barSelection
-                .attr('x', this.xFunction)
-                .attr('width', this.widthFunction);
             this.setValueTicks();
+            this.adjustBarSize();
         };
         this.highlightBarGroup = (_event, datum) => {
             if (typeof datum === 'string') {
@@ -36549,11 +36545,11 @@ class barChart {
                 .html((d) => {
                 return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
             });
-            this.tooltip.style('visibility', 'visible');
+            this.tooltip.style('display', null);
             this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this.tooltip.style('visibility', 'hidden');
+            this.tooltip.style('display', 'none');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
@@ -36692,12 +36688,13 @@ class barChart {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this.chartData = data;
-        else
-            this.chartData = JSON.parse(data);
-        if (this.chartData)
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
+            if (typeof data != 'string')
+                this.chartData = data;
+            else
+                this.chartData = JSON.parse(data);
             this.series = this.chartData.data.series.map(serie => serie.title);
+        }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -36788,7 +36785,7 @@ class barChart {
         // Getting handle for tooltip
         this.tooltip = select('#' + this.afId);
         this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
-        // Add heading placeholder for heading
+        this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
             .select('.tooltipHead')
             .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
@@ -36796,7 +36793,7 @@ class barChart {
             .style('font-size', '1rem')
             .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
         select(this.chartDiv).select('.chartSVG').remove();
@@ -36816,20 +36813,19 @@ class barChart {
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
             ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
-            : 'Stapeldiagram');
+            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         select(this.titleDiv)
-            .select(this.afHeadingLevel)
+            .append(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
         this.tooltip = select('#' + this.afId);
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
         this.loading = true;
-        console.log('loading!');
         // close potentially open tooltip
         if (this.tooltip)
             this.closeTooltip();
@@ -37223,7 +37219,7 @@ class barChart {
         this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this.tooltip.style('visibility') !== 'hidden')
+        if (this.tooltip.style('display') !== 'none')
             this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
@@ -37343,7 +37339,7 @@ class barChart {
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
             }
         }
-        return (hAsync(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, hAsync("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, hAsync("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), hAsync("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), hAsync("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (hAsync(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, hAsync("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, hAsync("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), hAsync("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), hAsync("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.mjs

@@ -35809,8 +35809,6 @@ class barChart {
         // Resizing chart while loading
         this.loadingResize = () => {
             const newHeight = this.setDims();
-            this.setMargins(true);
-            this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
             this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
             this.margin.right =
                 this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
@@ -35835,10 +35833,8 @@ class barChart {
                 0,
                 this.dims.width - this.margin.right - this.margin.left
             ]);
-            this.barSelection
-                .attr('x', this.xFunction)
-                .attr('width', this.widthFunction);
             this.setValueTicks();
+            this.adjustBarSize();
         };
         this.highlightBarGroup = (_event, datum) => {
             if (typeof datum === 'string') {
@@ -36545,11 +36541,11 @@ class barChart {
                 .html((d) => {
                 return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
             });
-            this.tooltip.style('visibility', 'visible');
+            this.tooltip.style('display', null);
             this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this.tooltip.style('visibility', 'hidden');
+            this.tooltip.style('display', 'none');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
@@ -36688,12 +36684,13 @@ class barChart {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this.chartData = data;
-        else
-            this.chartData = JSON.parse(data);
-        if (this.chartData)
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
+            if (typeof data != 'string')
+                this.chartData = data;
+            else
+                this.chartData = JSON.parse(data);
             this.series = this.chartData.data.series.map(serie => serie.title);
+        }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -36784,7 +36781,7 @@ class barChart {
         // Getting handle for tooltip
         this.tooltip = select('#' + this.afId);
         this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
-        // Add heading placeholder for heading
+        this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
             .select('.tooltipHead')
             .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
@@ -36792,7 +36789,7 @@ class barChart {
             .style('font-size', '1rem')
             .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
         select(this.chartDiv).select('.chartSVG').remove();
@@ -36812,20 +36809,19 @@ class barChart {
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
             ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
-            : 'Stapeldiagram');
+            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         select(this.titleDiv)
-            .select(this.afHeadingLevel)
+            .append(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
         this.tooltip = select('#' + this.afId);
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
         this.loading = true;
-        console.log('loading!');
         // close potentially open tooltip
         if (this.tooltip)
             this.closeTooltip();
@@ -37219,7 +37215,7 @@ class barChart {
         this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this.tooltip.style('visibility') !== 'hidden')
+        if (this.tooltip.style('display') !== 'none')
             this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
@@ -37339,7 +37335,7 @@ class barChart {
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
             }
         }
-        return (hAsync(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, hAsync("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, hAsync("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), hAsync("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), hAsync("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (hAsync(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, hAsync("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, hAsync("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), hAsync("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), hAsync("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "35.4.1-beta.3",
+  "version": "35.4.1-beta.5",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",