@designsystem-se/af 38.0.1-beta.1 → 38.1.0

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

@@ -118,7 +118,13 @@ const barChart = class {
         this.defaultDuration = 400;
         // Text and formats
         this.fontSize = '0.875rem';
-        this.colorPalettes = ['--digi--color--background--brand-primary', '--digi--color--infographic--brand--primary', '--digi--color--background--sentiment--beta--primary', '--digi--color--text--interactive--visited', '--digi--color--icon--validation--error'];
+        this.colorPalettes = [
+            '--digi--color--background--brand-primary',
+            '--digi--color--infographic--brand--primary',
+            '--digi--color--background--sentiment--beta--primary',
+            '--digi--color--text--interactive--visited',
+            '--digi--color--icon--validation--error'
+        ];
         // Observer for watching size changes when in line chart mode
         this.barChartObserver = new ResizeObserver((entries) => {
             entries.forEach(() => {
@@ -128,7 +134,8 @@ const barChart = class {
             });
         });
         this.highlightBars = (serie) => {
-            this.barChartContainer.selectAll('.bar')
+            this.barChartContainer
+                .selectAll('.bar')
                 .attr('fill', (barData) => this.colorFunction(barData.serie))
                 .transition('color')
                 .duration(150)
@@ -137,47 +144,78 @@ const barChart = class {
                 if (barData.serie === serie)
                     return this.colorFunction(barData.serie);
                 else {
-                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    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');
                 }
             });
-            linear.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+            linear.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));
-            linear.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            this.barChartContainer
+                .selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => this.colorFunction(barData.serie));
+            linear.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')
+                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')
+            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) {
+                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('.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) */
-            linear.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+            linear.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');
+            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')
@@ -190,8 +228,9 @@ const barChart = class {
                   .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])
+            avLineGroup
+                .selectAll('.averageLine')
+                .data((d) => [d.value])
                 .join('line')
                 .attr('class', 'averageLine')
                 .attr('x1', this.xScale.range()[0])
@@ -239,11 +278,15 @@ const barChart = class {
         this.highlightBarGroup = (_event, datum) => {
             if (typeof datum === 'string') {
                 const barGroupID = '#' + this.barGroupID(datum);
-                this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
+                this.barChartContainer
+                    .select(barGroupID)
+                    .selectAll('.bar')
+                    .transition('color')
                     .duration(20)
                     .attr('fill', (d) => {
                     var _a;
-                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) &&
+                        this.series.indexOf(d.serie) > 0) {
                         return 'url(#prognosisHighlight)';
                     }
                     else
@@ -252,7 +295,9 @@ const barChart = class {
             }
         };
         this.unHighlightBarGroup = () => {
-            this.barSelection.selectAll('.bar').transition('color')
+            this.barSelection
+                .selectAll('.bar')
+                .transition('color')
                 .duration(100)
                 .attr('fill', (d) => {
                 return this.colorFunction(d.serie);
@@ -345,13 +390,15 @@ const barChart = class {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
         this.updateBars = () => {
-            this.barSelection = this.barChartContainer.select('.interactiveElements')
+            this.barSelection = this.barChartContainer
+                .select('.interactiveElements')
                 .selectAll('.barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
                 .attr('id', (d) => this.barGroupID(d.key));
-            this.barSelection.selectAll('.bar')
+            this.barSelection
+                .selectAll('.bar')
                 .data((d) => {
                 return d.series;
             })
@@ -430,7 +477,9 @@ const barChart = class {
                                     key: key,
                                     serie: serie.title,
                                     value: serie.yValues[index],
-                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                    len: serie.yValues[index]
+                                        ? this.getTextSize(serie.yValues[index].toLocaleString())
+                                        : 0
                                 });
                             }
                         });
@@ -446,7 +495,9 @@ const barChart = class {
                                     key: key.toString(),
                                     serie: serie.title,
                                     value: serie.yValues[index],
-                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                    len: serie.yValues[index]
+                                        ? this.getTextSize(serie.yValues[index].toLocaleString())
+                                        : 0
                                 });
                             }
                         });
@@ -457,7 +508,8 @@ const barChart = class {
             return toReturn;
         };
         this.adjustBarSize = () => {
-            this.barSelection.selectAll('.bar')
+            this.barSelection
+                .selectAll('.bar')
                 .attr('x', this.xFunction)
                 .attr('y', this.yFunction)
                 .attr('width', this.widthFunction)
@@ -472,30 +524,38 @@ const barChart = class {
         // Handling x positioning of bars
         this.xFunction = (d, i) => {
             return this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
-                ? (d.value > 0 ? this.xScale(0) : this.xScale(d.value))
-                : this.xScale(d.key) + ((this.xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
+                ? d.value > 0
+                    ? this.xScale(0)
+                    : this.xScale(d.value)
+                : this.xScale(d.key) +
+                    ((this.xScale.bandwidth() / this.dataWidth) * i + this.barGap * i);
         };
         // Handling y positioning of bars
         this.yFunction = (d, i) => {
             if (!d.value)
                 return 0;
             return this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
-                ? this.yScale(d.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
-                : (d.value < 0 ? this.yScale(0) : this.yScale(d.value));
+                ? this.yScale(d.key) +
+                    ((this.yScale.bandwidth() / this.dataWidth) * i + this.barGap * i)
+                : d.value < 0
+                    ? this.yScale(0)
+                    : this.yScale(d.value);
         };
         // Handling height for bars
         this.heightFunction = (d) => {
             if (!d.value)
                 return 0;
             return this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
-                ? this.yScale.bandwidth() / this.dataWidth - (this.barGap)
-                : (d.value < 0 ? this.yScale(d.value) - this.yScale(0) : this.yScale(0) - this.yScale(d.value));
+                ? this.yScale.bandwidth() / this.dataWidth - this.barGap
+                : d.value < 0
+                    ? this.yScale(d.value) - this.yScale(0)
+                    : this.yScale(0) - this.yScale(d.value);
         };
         // Handling width for bars
         this.widthFunction = (d) => {
             return this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
                 ? Math.abs(this.xScale(0) - this.xScale(d.value))
-                : this.xScale.bandwidth() / this.dataWidth - (this.barGap);
+                : this.xScale.bandwidth() / this.dataWidth - this.barGap;
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
@@ -738,7 +798,8 @@ const barChart = class {
                 .attr('fill', (d) => {
                 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) {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) &&
+                        this.series.indexOf(d.serie) > 0) {
                         return 'url(#prognosisHighlight)';
                     }
                     else
@@ -754,7 +815,9 @@ const barChart = class {
             linear.select(event.target)
                 .transition('color')
                 .duration(this.defaultDuration)
-                .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
+                .attr('fill', (d) => event.target.tagName === 'rect'
+                ? this.colorFunction(d.serie)
+                : '#333333');
         };
         this.openTooltip = (...[, d]) => {
             // If type is string, the user has clicked on a y-axis tick
@@ -766,9 +829,7 @@ const barChart = class {
             else
                 this.tooltipData = d;
             const tooltipBody = this.tooltip.select('.tooltipBody');
-            this.tooltip
-                .select('.tooltipHeading')
-                .html(this.tooltipData.key);
+            this.tooltip.select('.tooltipHeading').html(this.tooltipData.key);
             tooltipBody
                 .selectAll('div')
                 .data(this.tooltipData.series ? this.tooltipData.series : [this.tooltipData])
@@ -807,15 +868,25 @@ const barChart = class {
                         .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
                 }
                 else {
-                    const index = (_a = this.mappedData.find(xPoint => xPoint.key === data.key)) === null || _a === void 0 ? void 0 : _a.series.findIndex(serie => serie.serie === data.serie);
-                    const barIndex = ((this.xScale.bandwidth() / this.dataWidth) * (index ? index + 1 : 1)) - (this.xScale.bandwidth() / this.dataWidth) / 2;
+                    const index = (_a = this.mappedData
+                        .find((xPoint) => xPoint.key === data.key)) === null || _a === void 0 ? void 0 : _a.series.findIndex((serie) => serie.serie === data.serie);
+                    const barIndex = (this.xScale.bandwidth() / this.dataWidth) * (index ? index + 1 : 1) -
+                        this.xScale.bandwidth() / this.dataWidth / 2;
                     // This should be where the x-axis starts
                     const xStart = this.margin.left + this.tickPadding + this.yTickSize;
                     // Creating adjustment for tooltip to not appear outside of chart
                     const spaceToSVGEdge = 5;
-                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (this.xScale(data.key) + xStart + barIndex + width / 2) ? (((this.xScale(data.key) + xStart + barIndex + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
-                    this.tooltip
-                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + barIndex}px - ${50 + inlineAdjustment}%), calc(-100% + ${(data.value > 0 ? this.yScale(data.value) : this.yScale(0)) - 2}px) )`);
+                    const inlineAdjustment = this.dims.width - spaceToSVGEdge <
+                        this.xScale(data.key) + xStart + barIndex + width / 2
+                        ? ((this.xScale(data.key) +
+                            xStart +
+                            barIndex +
+                            width / 2 -
+                            (this.dims.width - spaceToSVGEdge)) /
+                            width) *
+                            100
+                        : 0;
+                    this.tooltip.style('transform', `translate( calc(${this.xScale(data.key) + xStart + barIndex}px - ${50 + inlineAdjustment}%), calc(-100% + ${(data.value > 0 ? this.yScale(data.value) : this.yScale(0)) - 2}px) )`);
                     this.tooltip
                         .select('digi-icon-caret-down')
                         .style('position', 'absolute')
@@ -825,8 +896,7 @@ const barChart = class {
             }
             else {
                 if (this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal) {
-                    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.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')
@@ -839,12 +909,17 @@ const barChart = class {
                 else {
                     const xStart = this.margin.left + this.tickPadding + this.yTickSize;
                     const translatePoint = this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2;
-                    const yMax = linear.max(data.series.map(elem => elem.value));
+                    const yMax = linear.max(data.series.map((elem) => elem.value));
                     // Creating adjustment for tooltip to not appear outside of chart
                     const spaceToSVGEdge = 5;
-                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (translatePoint + width / 2) ? (((translatePoint + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
-                    this.tooltip
-                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2}px - ${50 + inlineAdjustment}%), calc(-100% + ${this.yScale(yMax && yMax > 0 ? yMax : 0) - 1}px) )`);
+                    const inlineAdjustment = this.dims.width - spaceToSVGEdge < translatePoint + width / 2
+                        ? ((translatePoint +
+                            width / 2 -
+                            (this.dims.width - spaceToSVGEdge)) /
+                            width) *
+                            100
+                        : 0;
+                    this.tooltip.style('transform', `translate( calc(${this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2}px - ${50 + inlineAdjustment}%), calc(-100% + ${this.yScale(yMax && yMax > 0 ? yMax : 0) - 1}px) )`);
                     this.tooltip
                         .select('digi-icon-caret-down')
                         .style('position', 'absolute')
@@ -880,7 +955,10 @@ const barChart = class {
                 .attr('opacity', 0)
                 .on('end', () => {
                 this.svg.remove();
-                linear.select(this.legendDiv).select('.legend').selectAll('.legendChip').remove();
+                linear.select(this.legendDiv)
+                    .select('.legend')
+                    .selectAll('.legendChip')
+                    .remove();
                 this.legendDiv.style['display'] = 'none';
                 this.tableDiv.style['display'] = 'block';
                 this.setTableContent();
@@ -934,12 +1012,13 @@ const barChart = class {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
+        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.series = this.chartData.data.series.map((serie) => serie.title);
         }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
@@ -982,10 +1061,11 @@ const barChart = class {
     }
     initLegend() {
         const rectSize = 18;
-        const legendData = this.chartData.data.series.map(serie => serie.title);
+        const legendData = this.chartData.data.series.map((serie) => serie.title);
         if (this.chartData.data.averageLine)
             legendData.push(this.chartData.data.averageLine.text);
-        const legendChips = linear.select(this.legendDiv).select('.legend')
+        const legendChips = linear.select(this.legendDiv)
+            .select('.legend')
             .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
             .style('margin-top', '0.5rem')
             .selectAll('.legendChip')
@@ -999,7 +1079,8 @@ const barChart = class {
             .style('cursor', 'default')
             .on('mouseenter', (_event, serie) => this.highlightBars(serie))
             .on('mouseleave', this.resetBarColor);
-        legendChips.append('svg')
+        legendChips
+            .append('svg')
             .attr('width', rectSize + 1)
             .attr('height', rectSize + 1)
             .append('rect')
@@ -1010,15 +1091,19 @@ const barChart = class {
             .attr('rx', 4)
             .attr('ry', 4)
             .attr('fill', (title) => this.colorFunction(title));
-        legendChips.append('span').style('text-wrap', 'nowrap').style('font-size', '0.875rem').text((d) => d);
+        legendChips
+            .append('span')
+            .style('text-wrap', 'nowrap')
+            .style('font-size', '0.875rem')
+            .text((d) => d);
         if (this.chartData.data.averageLine) {
-            const averageLine = legendChips.filter(':last-child')
+            const averageLine = legendChips
+                .filter(':last-child')
                 .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
-            const miniSVG = averageLine
-                .select('svg')
-                .attr('width', rectSize * 2);
+            const miniSVG = averageLine.select('svg').attr('width', rectSize * 2);
             miniSVG.select('rect').remove();
-            miniSVG.append('line')
+            miniSVG
+                .append('line')
                 .attr('x1', 1)
                 .attr('x2', rectSize * 2 - 1)
                 .attr('y1', rectSize / 2 + 1)
@@ -1061,7 +1146,8 @@ const barChart = class {
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
             ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
-            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
+            : 'Stapeldiagram')
+            .attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         linear.select(this.titleDiv)
             .select(this.afHeadingLevel)
@@ -1123,7 +1209,8 @@ const barChart = class {
                 .join('g')
                 .attr('class', 'barGroup')
                 .attr('id', (d) => this.barGroupID(d.key));
-            this.barSelection.selectAll('bar')
+            this.barSelection
+                .selectAll('bar')
                 .data((d) => {
                 return d.series;
             })
@@ -1138,13 +1225,15 @@ const barChart = class {
                 .attr('width', this.widthFunction)
                 .attr('height', () => 0)
                 .attr('fill', 'gray');
-            this.barChartContainer.selectAll('.bar')
+            this.barChartContainer
+                .selectAll('.bar')
                 .transition('animateBar')
                 .duration(400)
                 .delay((...[, i]) => i * 150)
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
-            this.barChartContainer.selectAll('.bar')
+            this.barChartContainer
+                .selectAll('.bar')
                 .transition('animateBar')
                 .duration(400)
                 .ease(linear.linear$1)
@@ -1254,7 +1343,8 @@ const barChart = class {
             .join('g')
             .attr('class', 'barGroup')
             .attr('id', (d) => this.barGroupID(d.key));
-        this.barSelection.selectAll('.barGroup')
+        this.barSelection
+            .selectAll('.barGroup')
             .data((d) => {
             return d.series;
         })
@@ -1281,7 +1371,9 @@ const barChart = class {
             .append('text');
         this.textSelection
             .text((d) => {
-            return d.value ? d.value.toLocaleString(undefined, this.numberFormat) : undefined;
+            return d.value
+                ? d.value.toLocaleString(undefined, this.numberFormat)
+                : undefined;
         })
             .attr('class', 'barText')
             .attr('font-size', this.fontSize)
@@ -1345,8 +1437,7 @@ const barChart = class {
             this.setMinMax();
             const newHeight = this.setDims();
             this.transitionTitle();
-            this.svg
-                .attr('aria-label', this.chartData && this.chartData.title
+            this.svg.attr('aria-label', this.chartData && this.chartData.title
                 ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
                 : 'Stapeldiagram');
             this.setMargins();
@@ -1402,7 +1493,9 @@ const barChart = class {
                 linear.select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
                 this.barChartContainer.selectAll('.bar').interrupt('animateBar');
-                this.barChartContainer.selectAll('.bar').transition()
+                this.barChartContainer
+                    .selectAll('.bar')
+                    .transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
                     ? this.yScale(d.key)
@@ -1490,7 +1583,11 @@ const barChart = class {
         return width;
     }
     adjustColor(color, amount) {
-        return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
+        return ('#' +
+            color
+                .replace(/^#/, '')
+                .replace(/../g, (color) => ('0' +
+                Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)));
     }
     componentWillLoad() {
         this.afChartDataUpdate(this.afChartData);
@@ -1553,7 +1650,10 @@ const barChart = class {
     }
     setTableDimensions() {
         const table = linear.select(this.tableDiv);
-        table.style('display', 'flex').style('height', '100%').style('width', '100%');
+        table
+            .style('display', 'flex')
+            .style('height', '100%')
+            .style('width', '100%');
     }
     // Extracting all headings from data and returning a string with <th>-elements with headings
     headings() {
@@ -1592,7 +1692,7 @@ const barChart = class {
             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 (index.h(index.Host, { key: 'd39019eecd4013769648a7cdb1e5dc48712de934', ref: (el) => (this.host = el) }, index.h("svg", { key: '9e4dbfcd19038c6b9c8cfe26b4e8b3c5ef624896', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: '9ed2bc8b3064642d01e9028fa91c55577ed2da1c' }, index.h("pattern", { key: 'ca867a03dac364d29de422bc074c7ff3a8bac858', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: '2f2169ba84fcbb198a8f109bc57971beb3c3ca09', width: "8", height: "8", fill: 'white' }), index.h("line", { key: 'ad51412cb272233eb58a82a293643c4e865e34e9', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: 'ecc0ffeb0eda0d84102678c17163d0afc472cde5', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: 'ca9a51785850ea8e26f4ca3b84dc28401325af63', width: "8", height: "8", fill: 'white' }), index.h("line", { key: 'd7dd225c20b588f74bff91d44ff5abc8839bc445', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '654a002d89f6ce33fc4958afe3997829511b867e', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: '6d0286f1d11de92c88083618d4acb3300f36857d', width: "8", height: "8", fill: 'white' }), index.h("line", { key: '4acd94253dbdb1fc85090d677d246028a6e595d6', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '9022c75fa8077b2c025aac91b8c1a565b50ad8f0', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '4a28b8506806ca2418fd21512460baebe84614d5', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '69f4603b0fde842906e17abee241c6e3b4de1059', 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() : ''}` }, index.h("digi-icon-table", { key: '803f63ac1912c5979c43e7c58d28591a1d6ce461', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '7d87badd6ae3df65127bdfe4c4308c0d38d5ccb7', 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() : ''}` }, index.h("digi-icon-chart", { key: 'f92c2eb9f08bf7f13a7eaea287b80a233efd95ef', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'ee5b3ad8cdcfcf00891f56f7a7e738adf76f36c1', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'cbc0c8724ac73a07a4f2d01044d4928214e63f43', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '52cb24ae1a29f5381860031513b7b9e835044935', class: "chartTooltip", id: this.afId }, index.h("div", { key: '17c4c08dcf63cd263db4f32fecae7ec5216e3014', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'f44a9a534ae02fe674fc0f9161e5c4b5a3eecb30', class: "tooltipClose" })), index.h("div", { key: 'ffbe44f6a8db4dc67d6980bd69ca2209e4a75745', class: "tooltipBody" }), this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '5d9cce591ea02a7b8ebdb42af55f378ee064a48a', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '8b8b7cd614e5d6202bfce04e57c98ee040f15dab', class: "legend" })), index.h("div", { key: '64a35d431e28638ffece4dd12bdf04678ed13768', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (index.h(index.Host, { key: 'cb70095467051cf1142891bc63694623e707d92f', ref: (el) => (this.host = el) }, index.h("svg", { key: 'c040fe2f27d9a5e3de1471fe7e4d853757f6a754', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: '17fd52f2cac5a3225e097aee80e8dc1a99909840' }, index.h("pattern", { key: '2940e729359dad1acc4635363cd5a8f3ee4d8ea1', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: '4b47d41ea9f4699a4bcc7b0f04d00b8bbd124946', width: "8", height: "8", fill: "white" }), index.h("line", { key: 'd5c3a32fb715a5271a784771d9812ea599390fc3', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '8038bb4d62fd87a118e0bcf4e750165eed48f789', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: 'b1247b7d27e73836c7b5a05fb77a872e89853d3b', width: "8", height: "8", fill: "white" }), index.h("line", { key: '14265bcba469f08b890654315a86d6278271d64d', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '4069999fd742795379f093c83c00cca488b6139c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: 'c525ae39e05acf3e7522f1b92feffdfe5221e528', width: "8", height: "8", fill: "white" }), index.h("line", { key: 'fa183e0678f6f3794e094b97975fe96955b49e0a', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: 'b6e46d7f4701775a177b02a98f46ca40308e9938', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '88d49833d43776a2bc23d7f73bb8cc9442350634', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '75e2ef09c3f9f91a08b3596d02ad308b244586bb', 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() : ''}` }, index.h("digi-icon-table", { key: '7712b56f991bb5214aa3bebb9e380221156b6bbf', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: 'b9d442ea0b62303c2bf1018651ce3206063f3b35', 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() : ''}` }, index.h("digi-icon-chart", { key: '260c432d04f8ea00216cd485b5ec3a29df4b4db1', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'a7fd6276b5738e9cf040f0e9b99e983b27ec25cf', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '705ec9e3931b91009ff565bbd8f4ba300bd8dbd7', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '242fd5b7afba36df00aa7fb256bd8578712d25e7', class: "chartTooltip", id: this.afId }, index.h("div", { key: '6417cc30962396164fe4840ecfef62c4ef7591d6', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'dc4edb442bfb342fbdb64b06e70f1e19ccc5ffb1', class: "tooltipClose" })), index.h("div", { key: 'da625c879d4c0eebffa02193dc36d794c755b768', class: "tooltipBody" }), this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: 'a003a616c2ee8b848d402b38009261539ebf0c50', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '44a6db8daa836ccf910aafd6fd996f153c337bf4', class: "legend" })), index.h("div", { key: 'a872281035f2799fe8aa9128a953d0c5d9f6b2cc', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {