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

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

@@ -391,189 +391,33 @@ const barChart = class {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
         this.updateBars = (fromLoading) => {
-            this.barChartContainer
+            this.barSelection = this.barChartContainer.select('.interactiveElements')
                 .selectAll('.barGroup')
                 .data(this.mappedData)
-                .join((enter) => {
-                var _a, _b;
-                const tempSelection = enter
-                    .append('g')
-                    .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                tempSelection
-                    .append('rect')
-                    .attr('class', 'bar')
-                    .style('cursor', 'pointer')
-                    .attr('ry', 4)
-                    .attr('rx', 4)
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key)
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key))
-                    .attr('width', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? 0
-                    : this.xScale.bandwidth())
-                    .attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale.bandwidth()
-                    : 0)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut)
-                    .on('click', this.openTooltip)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(linear.polyInOut)
-                    .attr('width', this.widthFunction)
-                    .attr('y', this.yFunction)
-                    .attr('height', this.heightFunction)
-                    .attr('fill', '#00005a');
-                if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-                    return tempSelection;
-                tempSelection
-                    .append('text')
-                    .text((d) => d.value.toLocaleString())
-                    .attr('class', 'barText')
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('text-anchor', 'end')
-                    .style('pointer-events', 'none')
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(linear.polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = linear.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-                return tempSelection;
-            }, (update) => {
-                // Update ids to bars
-                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                // Mouse interaction to updated loading bars
-                if (fromLoading) {
-                    update
-                        .select('rect')
-                        .on('mouseenter', this.hover)
-                        .on('mouseleave', this.hoverOut)
-                        .on('click', this.openTooltip)
-                        .attr('x', this.xFunction)
-                        .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                        ? this.yScale(d.key)
-                        : this.dims.height - this.margin.bottom)
-                        .attr('width', this.widthFunction)
-                        .attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                        ? this.yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(linear.polyInOut)
-                        .attr('y', this.yFunction)
-                        .attr('height', this.heightFunction)
-                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(linear.polyInOut)
-                        .attr('x', this.xFunction)
-                        .attr('y', this.yFunction)
-                        .attr('width', this.widthFunction)
-                        .attr('height', this.heightFunction)
-                        .attr('fill', '#00005a');
-                }
-                return update
-                    .select('text')
-                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(linear.polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = linear.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-            }, (exit) => exit.remove());
-            this.barSelection = this.barChartContainer.selectAll('rect');
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('.bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction)
+                .attr('fill', (d) => this.colorFunction(d.serie))
+                .on('mouseenter', this.hover)
+                .on('mouseleave', this.hoverOut)
+                .on('click', this.openTooltip);
+            if (fromLoading) {
+                this.initLegend();
+            }
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
             this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
@@ -612,7 +456,7 @@ const barChart = class {
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this.loading || !this.chartData) {
+            if (!this.chartData) {
                 this.placeholderTicks.forEach((key) => {
                     const tick = { key: key, series: [] };
                     tick.series.push({
@@ -1259,6 +1103,7 @@ const barChart = class {
         // Hide unusable components
         linear.select(this.titleDiv)
             .append(this.afHeadingLevel)
+            .attr('class', 'loadingHeader')
             .html(`${text._t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
@@ -1307,14 +1152,17 @@ const barChart = class {
             this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this.barChartContainer.selectAll('.barGroup').remove();
+            this.barChartContainer.selectAll('.interactiveElements').remove();
             this.barSelection = this.barChartContainer
+                .append('g')
+                .attr('class', 'interactiveElements')
+                .style('isolation', 'isolate')
                 .selectAll('barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-            this.barSelection.selectAll('.barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
                 .data((d) => {
                 return d.series;
             })
@@ -1336,7 +1184,7 @@ const barChart = class {
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
             this.barChartContainer.selectAll('.bar')
-                .transition()
+                .transition('animateBar')
                 .duration(400)
                 .ease(linear.linear$1)
                 .delay((...[, i]) => i * 150 + 400)
@@ -1351,8 +1199,8 @@ const barChart = class {
         };
         const flattenBars = () => {
             this.barChartContainer
-                .selectAll('rect')
-                .transition()
+                .selectAll('.bar')
+                .transition('animateBar')
                 .duration(200)
                 .ease(linear.linear$1)
                 .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
@@ -1588,10 +1436,11 @@ const barChart = class {
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this.barSelection.selectAll('.barGroup').on('end', null);
+                this.barChartContainer.selectAll('.barGroup').on('end', null);
+                linear.select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
-                this.barSelection
-                    .transition()
+                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
+                this.barChartContainer.selectAll('.bar').transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
                     ? this.yScale(d.key)
@@ -1781,7 +1630,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 (index.h(index.Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, index.h("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, index.h("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), index.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() : ''}` }, index.h("digi-icon-table", { key: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), index.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() : ''}` }, index.h("digi-icon-chart", { key: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, index.h("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), index.h("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), index.h("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (index.h(index.Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, index.h("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, index.h("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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() : ''}` }, index.h("digi-icon-table", { key: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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() : ''}` }, index.h("digi-icon-chart", { key: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, index.h("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), index.h("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), index.h("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/_chart/bar-chart/bar-chart.js

@@ -267,189 +267,33 @@ export class barChart {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
         this.updateBars = (fromLoading) => {
-            this.barChartContainer
+            this.barSelection = this.barChartContainer.select('.interactiveElements')
                 .selectAll('.barGroup')
                 .data(this.mappedData)
-                .join((enter) => {
-                var _a, _b;
-                const tempSelection = enter
-                    .append('g')
-                    .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                tempSelection
-                    .append('rect')
-                    .attr('class', 'bar')
-                    .style('cursor', 'pointer')
-                    .attr('ry', 4)
-                    .attr('rx', 4)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key)
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key))
-                    .attr('width', () => this.afVariation === BarChartVariation.Horizontal
-                    ? 0
-                    : this.xScale.bandwidth())
-                    .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale.bandwidth()
-                    : 0)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut)
-                    .on('click', this.openTooltip)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(d3.easePolyInOut)
-                    .attr('width', this.widthFunction)
-                    .attr('y', this.yFunction)
-                    .attr('height', this.heightFunction)
-                    .attr('fill', '#00005a');
-                if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-                    return tempSelection;
-                tempSelection
-                    .append('text')
-                    .text((d) => d.value.toLocaleString())
-                    .attr('class', 'barText')
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('text-anchor', 'end')
-                    .style('pointer-events', 'none')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(d3.easePolyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = d3.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-                return tempSelection;
-            }, (update) => {
-                // Update ids to bars
-                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                // Mouse interaction to updated loading bars
-                if (fromLoading) {
-                    update
-                        .select('rect')
-                        .on('mouseenter', this.hover)
-                        .on('mouseleave', this.hoverOut)
-                        .on('click', this.openTooltip)
-                        .attr('x', this.xFunction)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this.yScale(d.key)
-                        : this.dims.height - this.margin.bottom)
-                        .attr('width', this.widthFunction)
-                        .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                        ? this.yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(d3.easePolyInOut)
-                        .attr('y', this.yFunction)
-                        .attr('height', this.heightFunction)
-                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(d3.easePolyInOut)
-                        .attr('x', this.xFunction)
-                        .attr('y', this.yFunction)
-                        .attr('width', this.widthFunction)
-                        .attr('height', this.heightFunction)
-                        .attr('fill', '#00005a');
-                }
-                return update
-                    .select('text')
-                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(d3.easePolyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = d3.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-            }, (exit) => exit.remove());
-            this.barSelection = this.barChartContainer.selectAll('rect');
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('.bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction)
+                .attr('fill', (d) => this.colorFunction(d.serie))
+                .on('mouseenter', this.hover)
+                .on('mouseleave', this.hoverOut)
+                .on('click', this.openTooltip);
+            if (fromLoading) {
+                this.initLegend();
+            }
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
             this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
@@ -488,7 +332,7 @@ export class barChart {
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this.loading || !this.chartData) {
+            if (!this.chartData) {
                 this.placeholderTicks.forEach((key) => {
                     const tick = { key: key, series: [] };
                     tick.series.push({
@@ -1139,6 +983,7 @@ export class barChart {
         // Hide unusable components
         d3.select(this.titleDiv)
             .append(this.afHeadingLevel)
+            .attr('class', 'loadingHeader')
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
@@ -1187,14 +1032,17 @@ export class barChart {
             this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this.barChartContainer.selectAll('.barGroup').remove();
+            this.barChartContainer.selectAll('.interactiveElements').remove();
             this.barSelection = this.barChartContainer
+                .append('g')
+                .attr('class', 'interactiveElements')
+                .style('isolation', 'isolate')
                 .selectAll('barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-            this.barSelection.selectAll('.barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
                 .data((d) => {
                 return d.series;
             })
@@ -1216,7 +1064,7 @@ export class barChart {
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
             this.barChartContainer.selectAll('.bar')
-                .transition()
+                .transition('animateBar')
                 .duration(400)
                 .ease(d3.easeLinear)
                 .delay((...[, i]) => i * 150 + 400)
@@ -1231,8 +1079,8 @@ export class barChart {
         };
         const flattenBars = () => {
             this.barChartContainer
-                .selectAll('rect')
-                .transition()
+                .selectAll('.bar')
+                .transition('animateBar')
                 .duration(200)
                 .ease(d3.easeLinear)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
@@ -1469,10 +1317,11 @@ export class barChart {
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this.barSelection.selectAll('.barGroup').on('end', null);
+                this.barChartContainer.selectAll('.barGroup').on('end', null);
+                d3.select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
-                this.barSelection
-                    .transition()
+                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
+                this.barChartContainer.selectAll('.bar').transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                     ? this.yScale(d.key)
@@ -1662,7 +1511,7 @@ export 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 (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) }, ' ')));
+        return (h(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, h("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, h("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), h("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, h("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, h("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), h("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), h("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }