@designsystem-se/af 35.4.1-beta.1 → 35.4.1-beta.10

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

@@ -51,22 +51,82 @@ export class barChart {
                 .transition('color')
                 .duration(150)
                 .attr('fill', (barData) => {
+                var _a;
                 if (barData.serie === serie)
                     return this.colorFunction(barData.serie);
-                else
+                else {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                        return 'url(#prognosisInactive)';
+                    }
                     return this.evalColorVar('--digi--color--background--secondary-accent');
+                }
             });
             d3.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
         };
         this.resetBarColor = () => {
             this.barChartContainer.selectAll('.bar').transition('color').duration(150).attr('fill', (barData) => this.colorFunction(barData.serie));
             d3.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            if (this.chartData.data.averageLine) {
+                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                    .style('filter', 'contrast(0.5)');
+                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                        .style('filter', 'contrast(0.5)'); */
+            }
+        };
+        this.highlightAverageLine = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    return 'url(#prognosisInactive)';
+                }
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
+                .duration(150).style('mix-blend-mode', null).style('filter', null);
+            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
+                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
+            d3.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        // Sets and resizespositions the average line
+        this.averageLine = () => {
+            if (!this.chartData.data.averageLine)
+                return;
+            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
+            /*     avLineGroup.selectAll('.averageLineText')
+                  .data(d => [d])
+                  .join('text')
+                  .attr('class', 'averageLineText')
+                  .text(d => d.text)
+                  .attr('x', this.xScale.range()[0])
+                  .attr('y', (d) => this.yScale(d.value))
+                  .attr('dy', -2)
+                  .attr('font-size', this.fontSize)
+                  .attr('fill', 'var(--digi--color--infographic--lineart)')
+                  .style('mix-blend-mode', 'plus-lighter')
+                  .style('filter', 'contrast(0.5)'); */
+            avLineGroup.selectAll('.averageLine')
+                .data(d => [d.value])
+                .join('line')
+                .attr('class', 'averageLine')
+                .attr('x1', this.xScale.range()[0])
+                .attr('y1', (d) => this.yScale(d))
+                .attr('x2', this.xScale.range()[1])
+                .attr('y2', (d) => this.yScale(d))
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '12, 7')
+                .attr('stroke-linecap', 'round')
+                .style('mix-blend-mode', 'plus-lighter')
+                .style('filter', 'contrast(0.5)')
+                .style('pointer-events', 'none');
         };
         // 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 +
@@ -91,10 +151,8 @@ export 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') {
@@ -102,7 +160,12 @@ export class barChart {
                 this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
                     .duration(20)
                     .attr('fill', (d) => {
-                    return this.adjustColor(this.colorFunction(d.serie), 50);
+                    var _a;
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
                 });
             }
         };
@@ -203,190 +266,31 @@ export class barChart {
         this.barGroupID = (key) => {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
-        this.updateBars = (fromLoading) => {
-            this.barChartContainer
+        this.updateBars = () => {
+            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);
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
             this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
@@ -425,7 +329,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({
@@ -438,20 +342,40 @@ export class barChart {
                 });
                 return toReturn;
             }
-            this.chartData.data.xValueNames.forEach((key, index) => {
-                const tick = { key: key, series: [] };
-                this.chartData.data.series.forEach((serie) => {
-                    if (serie.yValues[index]) {
-                        tick.series.push({
-                            key: key,
-                            serie: serie.title,
-                            value: serie.yValues[index],
-                            len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+            else {
+                if (this.chartData.data.xValueNames) {
+                    this.chartData.data.xValueNames.forEach((key, index) => {
+                        const tick = { key: key, series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key,
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
                         });
-                    }
-                });
-                toReturn.push(tick);
-            });
+                        toReturn.push(tick);
+                    });
+                }
+                else {
+                    this.chartData.data.xValues.forEach((key, index) => {
+                        const tick = { key: key.toString(), series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key.toString(),
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
+                        });
+                        toReturn.push(tick);
+                    });
+                }
+            }
             return toReturn;
         };
         this.adjustBarSize = () => {
@@ -504,7 +428,10 @@ export class barChart {
                 this.dims = d3.select(this.chartDiv).node().getBoundingClientRect();
             this.dims.height =
                 this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
-            return prevHeight != this.dims.height;
+            // Making sure height and width are defined
+            this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
+            this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
+            return prevHeight !== this.dims.height;
         };
         // Setting margins given text size
         this.setMargins = (fromLoading) => {
@@ -731,9 +658,17 @@ export class barChart {
                 .transition('color')
                 .duration(20)
                 .attr('fill', (d) => {
-                return event.target.tagName === 'rect'
-                    ? this.adjustColor(this.colorFunction(d.serie), 50)
-                    : this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                var _a;
+                if (event.target.tagName === 'rect') {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
+                }
+                else {
+                    return this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                }
             });
         };
         // Removing highlight from bar
@@ -753,7 +688,7 @@ export class barChart {
             else
                 this.tooltipData = d;
             const tooltipBody = this.tooltip.select('.tooltipBody');
-            tooltipBody
+            this.tooltip
                 .select('.tooltipHeading')
                 .html(this.tooltipData.key);
             tooltipBody
@@ -769,11 +704,11 @@ export 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) => {
@@ -789,7 +724,7 @@ export class barChart {
                     this.tooltip
                         .select('digi-icon-caret-up')
                         .style('position', 'absolute')
-                        .style('top', '-12px')
+                        .style('top', '-11px')
                         .style('left', '0')
                         .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
                 }
@@ -812,7 +747,16 @@ export class barChart {
             }
             else {
                 if (this.afVariation === BarChartVariation.Horizontal) {
-                    console.log('helloo');
+                    this.tooltip
+                        .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
+                    );
+                    this.tooltip
+                        .select('digi-icon-caret-up')
+                        .style('position', 'absolute')
+                        .style('top', '-11px')
+                        .style('left', '0')
+                        .style('transform', `translate(50%,0)`);
+                    //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
                 }
                 else {
                     const xStart = this.margin.left + this.tickPadding + this.yTickSize;
@@ -912,10 +856,13 @@ export class barChart {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this.chartData = data;
-        else
-            this.chartData = JSON.parse(data);
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && 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) => {
@@ -959,10 +906,13 @@ export class barChart {
     }
     initLegend() {
         const rectSize = 18;
+        const legendData = this.chartData.data.series.map(serie => serie.title);
+        if (this.chartData.data.averageLine)
+            legendData.push(this.chartData.data.averageLine.text);
         const legendChips = d3.select(this.legendDiv).select('.legend')
             .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
             .selectAll('.legendChip')
-            .data(this.chartData.data.series.map(serie => serie.title))
+            .data(legendData)
             .join('div')
             .attr('class', 'legendChip')
             .style('display', 'flex')
@@ -973,8 +923,8 @@ export class barChart {
             .on('mouseenter', (_event, serie) => this.highlightBars(serie))
             .on('mouseleave', this.resetBarColor);
         legendChips.append('svg')
-            .attr('width', rectSize)
-            .attr('height', rectSize)
+            .attr('width', rectSize + 1)
+            .attr('height', rectSize + 1)
             .append('rect')
             .attr('x', 0)
             .attr('y', 0)
@@ -983,29 +933,47 @@ export class barChart {
             .attr('rx', 4)
             .attr('ry', 4)
             .attr('fill', (title) => this.colorFunction(title));
-        legendChips.append('span').text((d) => d);
+        legendChips.append('span').style('text-wrap', 'nowrap').text((d) => d);
+        if (this.chartData.data.averageLine) {
+            const averageLine = legendChips.filter(':last-child')
+                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
+            const miniSVG = averageLine
+                .select('svg')
+                .attr('width', rectSize * 2);
+            miniSVG.select('rect').remove();
+            miniSVG.append('line')
+                .attr('x1', 1)
+                .attr('x2', rectSize * 2 - 1)
+                .attr('y1', rectSize / 2 + 1)
+                .attr('y2', rectSize / 2 + 1)
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-dasharray', '12, 7');
+        }
     }
     initToolTip() {
         // Getting handle for tooltip
         this.tooltip = d3.select('#' + this.afId);
-        this.tooltip.select('.close').on('click', this.closeTooltip);
-        // Add heading placeholder for heading
+        this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
+        this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
-            .select('.tooltipBody')
-            .append('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1)) // increment heading level by one
+            .select('.tooltipHead')
+            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
             .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
+            .style('text-wrap', 'wrap')
             .style('font-size', '1rem')
-            .style('margin', '0 0.75rem 0.5rem 0 ')
+            .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
-        d3.select(this.chartDiv).select('svg').remove();
+        d3.select(this.chartDiv).select('.chartSVG').remove();
         this.maxHeight = d3
             .select(this.host)
             .node()
             .parentNode.getBoundingClientRect().height;
         this.barChartObserver.observe(this.chartDiv);
+        this.setDims();
         // Getting rem-size
         this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setMargins();
@@ -1013,17 +981,20 @@ export class barChart {
         this.svg = d3
             .select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .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
         d3.select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
+        this.tooltip = d3.select('#' + this.afId);
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
@@ -1067,17 +1038,22 @@ 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, ''))
-                .append('rect')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
                 .attr('class', 'bar')
-                .style('cursor', 'pointer');
-            this.barSelection
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                 ? this.yScale(d.key)
                 : this.dims.height - this.margin.bottom)
@@ -1086,14 +1062,15 @@ export class barChart {
                 .attr('rx', 4)
                 .attr('width', this.widthFunction)
                 .attr('height', () => 0)
-                .attr('fill', 'gray')
-                .transition()
+                .attr('fill', 'gray');
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .delay((...[, i]) => i * 150)
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
-            this.barSelection
-                .transition()
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .ease(d3.easeLinear)
                 .delay((...[, i]) => i * 150 + 400)
@@ -1108,8 +1085,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
@@ -1195,6 +1172,9 @@ export class barChart {
     // Initializing bars, can only handle one series of bars for now
     initBars() {
         this.barSelection = this.barChartContainer
+            .append('g')
+            .attr('class', 'interactiveElements')
+            .style('isolation', 'isolate')
             .selectAll('barGroup')
             .data(this.mappedData)
             .join('g')
@@ -1251,6 +1231,7 @@ export class barChart {
         this.initYAxis();
         this.initXAxis();
         this.initBars();
+        this.averageLine();
         this.initBarText();
     }
     async updateChain() {
@@ -1283,6 +1264,7 @@ export class barChart {
                 d3.select(this.host).select('.tableButton').style('display', null);
                 d3.select(this.legendDiv).style('display', null);
                 this.initToolTip();
+                this.initLegend();
             }
             // Disconnect resize observer while adjusting things
             this.barChartObserver.disconnect();
@@ -1342,18 +1324,22 @@ 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)
                     : this.dims.height - this.margin.bottom)
                     .attr('height', () => 0)
-                    .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
-                    ? this.updateBars(true)
-                    : null);
+                    .on('end', (...[, i]) => {
+                    if (i === this.placeholderTicks.length - 1) {
+                        this.updateBars();
+                        this.barChartObserver.observe(this.chartDiv);
+                    }
+                });
                 this.setTickInteraction();
             }
             else {
@@ -1365,12 +1351,18 @@ export class barChart {
     }
     // Getting correct color given index or name of data serie
     colorFunction(input) {
-        if (typeof input === 'number')
+        var _a;
+        if (typeof input === 'number') {
             return this.evalColorVar(this.colorPalettes[input]);
+        }
         else {
             const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
-            if (index > 0)
-                return this.evalColorVar(this.colorPalettes[index]);
+            if (index > 0) {
+                if ((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern)
+                    return 'url(#prognosis)';
+                else
+                    return this.evalColorVar(this.colorPalettes[index]);
+            }
             else
                 return this.evalColorVar(this.colorPalettes[0]);
         }
@@ -1406,9 +1398,10 @@ export class barChart {
         this.setNamedTicks();
         this.setValueTicks();
         this.setTickInteraction();
+        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
@@ -1514,21 +1507,18 @@ export class barChart {
         return body;
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         // Setting header
         let heading = '';
         if (this.chartData) {
             if (!this.chartData.subTitle)
                 heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}>`;
-            else {
-                if (!this.chartData.infoText)
-                    heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
-                else
-                    heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${(_a = this.chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
-				<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>`;
-            }
+            else
+                heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
+            if (this.chartData.infoText)
+                heading = `${heading}<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>`;
         }
-        return (h(Host, { key: 'adbf9f1c26a8816a8d4b585b0fc7a0b9100bf252', ref: (el) => (this.host = el) }, h("div", { key: 'ee28dc5914be751e08c73253b80fd257c2e17bbb', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '6a0b051d3c26e9c34fb59d4ee323a10d1cb542e1', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '9e11623f0b35f394dc3655067625a37771f648d1', 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: '6e00e771521a10c0213ae6267ea2879c7ccc4b3c', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a1eec7299c9cd273ceffa1f1689ee0c6297ce0a1', 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: '5361af6d17e4cd7d6217afd48c4a474fd905c8de', slot: "icon" }), "Visa diagram"), h("div", { key: '2efe2244c2105390580779f60a7c1accd5135d49', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '48f2316efe396309fd73510a2eea011c137e24ed', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '4f2f494517979cbb9de43945d5ffe17acbe6c814', class: "chartTooltip", id: this.afId }, h("div", { key: '36db97d0dcd4e2009cd33b4125b631eddae039ae', class: "tooltipBody" }), h("digi-icon-x", { key: 'b3ac9ec4b6cd6c2c666d475929c10c0aaba2b9e1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'f96ed8b4c527ba32de5dd5bdb58c367435ecbc04', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3911352915f02a33231c2e0604a5073fb7203bd3', class: "legend" })), h("div", { key: '29c613f6af6e23b05748e230bad4c00156f30fd6', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (h(Host, { key: '1ab10d9ffdace070cb03283feebedca4e863861f', ref: (el) => (this.host = el) }, h("svg", { key: 'a3c9e8fefde5e65e72bc8fc58dcbaa8ff826209c', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '1d09a39b88541e40f0b214868c5643c093f5937b' }, h("pattern", { key: '7b970d7058d72cc3e45142f4579258732ceb42de', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'f6df583f921009b48870147aeab0ea8889f93579', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '84a37cff5cbedea49dc838b242256582f802bcde', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'db7b1a0adbe3882020f5c11c3e551dc01b800feb', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '9f8cda9f0d61c4159a4fbffea57a26fe703b4385', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '449db0c35d6853268ebfc9b5c6fe079a13e456f1', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '894d4c17158b1a1a328ef4fcb5804433ea52ccee', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '08d2233139ac5d56da76fab35627e7b1627396b3', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '3c839ebd4a0ba1c06728bbe741e83616aaf1f36f', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'e1eadf2efd8dac8983f192e3006fa123e0282374', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'ce46449ea0795643670e518ef0b8f2e63255b3fe', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '96dd86955745ec735a877e53578330e36bf1ef8f', slot: "icon" }), "Visa diagram"), h("div", { key: 'f1202a3b4fc36f8b2636e4d271340d2ffc2c32a6', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '1b656ca1316129c21458c25eb2365b3a0401ef61', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '467fcb6c584348fc5a0a033ad6ea9615bfaa5b02', class: "chartTooltip", id: this.afId }, h("div", { key: 'c9e5df91c0b8190698992413edc43d386870b494', class: "tooltipHead" }, h("digi-icon-x", { key: 'ce913cb114fde0466046c6de08cc66790af456fb', class: "tooltipClose" })), h("div", { key: 'ddfb4de44d8835d5d36cfea6c7da26dcbbab69bc', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '5ee958d222be39bf89be5be1396a45099872c8e4', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '74051676296db5c3a7d21a51000e42f6b64beec9', class: "legend" })), h("div", { key: '6e7777302ed87cf1a3d63147486b89a990341b60', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }