@designsystem-se/af 35.3.1 → 35.4.1-beta.0

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

@@ -1,1506 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-148a7577.js';
-import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, p as polyInOut, c as interpolate, m as max, d as min, e as linear$1 } from './linear-0246aaea.js';
-import { _ as _t } from './text-26e02c8d.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { B as BarChartVariation } from './bar-chart-variation.enum-97c0b47f.js';
-
-function band() {
-  var scale = ordinal().unknown(undefined),
-      domain = scale.domain,
-      ordinalRange = scale.range,
-      r0 = 0,
-      r1 = 1,
-      step,
-      bandwidth,
-      round = false,
-      paddingInner = 0,
-      paddingOuter = 0,
-      align = 0.5;
-
-  delete scale.unknown;
-
-  function rescale() {
-    var n = domain().length,
-        reverse = r1 < r0,
-        start = reverse ? r1 : r0,
-        stop = reverse ? r0 : r1;
-    step = (stop - start) / Math.max(1, n - paddingInner + paddingOuter * 2);
-    if (round) step = Math.floor(step);
-    start += (stop - start - step * (n - paddingInner)) * align;
-    bandwidth = step * (1 - paddingInner);
-    if (round) start = Math.round(start), bandwidth = Math.round(bandwidth);
-    var values = range(n).map(function(i) { return start + step * i; });
-    return ordinalRange(reverse ? values.reverse() : values);
-  }
-
-  scale.domain = function(_) {
-    return arguments.length ? (domain(_), rescale()) : domain();
-  };
-
-  scale.range = function(_) {
-    return arguments.length ? ([r0, r1] = _, r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
-  };
-
-  scale.rangeRound = function(_) {
-    return [r0, r1] = _, r0 = +r0, r1 = +r1, round = true, rescale();
-  };
-
-  scale.bandwidth = function() {
-    return bandwidth;
-  };
-
-  scale.step = function() {
-    return step;
-  };
-
-  scale.round = function(_) {
-    return arguments.length ? (round = !!_, rescale()) : round;
-  };
-
-  scale.padding = function(_) {
-    return arguments.length ? (paddingInner = Math.min(1, paddingOuter = +_), rescale()) : paddingInner;
-  };
-
-  scale.paddingInner = function(_) {
-    return arguments.length ? (paddingInner = Math.min(1, _), rescale()) : paddingInner;
-  };
-
-  scale.paddingOuter = function(_) {
-    return arguments.length ? (paddingOuter = +_, rescale()) : paddingOuter;
-  };
-
-  scale.align = function(_) {
-    return arguments.length ? (align = Math.max(0, Math.min(1, _)), rescale()) : align;
-  };
-
-  scale.copy = function() {
-    return band(domain(), [r0, r1])
-        .round(round)
-        .paddingInner(paddingInner)
-        .paddingOuter(paddingOuter)
-        .align(align);
-  };
-
-  return initRange.apply(rescale(), arguments);
-}
-
-const barChartCss = ".sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--digi--typography--h2--margin:0.5rem;--digi--typography--h3--margin:0.5rem;--digi--typography--h4--margin:0.5rem;--digi--typography--h5--margin:0.5rem;--digi--typography--h6--margin:0.5rem;display:flex;justify-content:flex-start;flex-direction:column;align-items:left;text-align:left;padding-bottom:1rem;margin-right:0.5rem;flex-grow:2}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{box-sizing:border-box;position:absolute;background-color:rgba(250, 250, 250, 0.98);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;font-size:0.875rem;display:none}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{--digi--icon--color:black;cursor:pointer;margin-top:-5px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar{height:10px;width:10px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-track,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-thumb,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}";
-const DigiBarChartStyle0 = barChartCss;
-
-const barChart = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // States
-        this._loading = false;
-        this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
-        this._dims = {};
-        this._margin = {
-            bottom: 0,
-            top: 6,
-            left: 5,
-            right: 15,
-            ellipsis: false
-        };
-        this.tickPadding = 8;
-        this.yTickSize = 0;
-        this.xTickSize = 5;
-        // Width of the largets X-tick-value
-        this._tickWidth = 1;
-        // Transition
-        this.defaultDuration = 400;
-        // Text and formats
-        this.fontSize = '0.875rem';
-        // Observer for watching size changes when in line chart mode
-        this.barChartObserver = new ResizeObserver((entries) => {
-            entries.forEach(() => {
-                if (this._loading)
-                    return this.loadingResize();
-                this.resize();
-            });
-        });
-        // Observer for watching size changes when in table mode
-        this.tableObserver = new ResizeObserver((entries) => {
-            entries.forEach(() => {
-                select(this._legendDiv).style('width', this._dims.width + 'px');
-                this.resizeTable();
-            });
-        });
-        // 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 +
-                    this.yTickSize +
-                    this.tickPadding;
-            // If there is a new height
-            if (newHeight) {
-                // Update y-axis with potentially new height (might want to do a check here)
-                this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.range([
-                        this._margin.top,
-                        this._dims.height - this._margin.bottom
-                    ])
-                    : this._yScale.range([
-                        this._dims.height - this._margin.bottom,
-                        this._margin.top
-                    ]);
-                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
-            }
-            // Update x-axis with new width
-            this._xScale.range([
-                0,
-                this._dims.width - this._margin.right - this._margin.left
-            ]);
-            this._barSelection
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth());
-            this.setValueTicks();
-        };
-        // Adding click listener for tool tip text
-        this.setTickInteraction = () => {
-            if (this.afVariation === BarChartVariation.Horizontal) {
-                this._yAxisHandle
-                    .selectAll('text')
-                    .style('cursor', 'pointer')
-                    .on('click', this.openTooltip)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut);
-            }
-            else {
-                this._xAxisHandle
-                    .selectAll('text')
-                    .style('cursor', 'pointer')
-                    .on('click', this.openTooltip)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut);
-            }
-        };
-        // Setting Y-scale
-        this.setYScale = (empty) => {
-            var _a, _b, _c;
-            if (this.afVariation == BarChartVariation.Horizontal) {
-                this._yScale = band(empty
-                    ? ['0', '1', '2', '3', '4', '5', '6', '7']
-                    : this._chartData.data.xValueNames, [this._margin.top, this._dims.height - this._margin.bottom])
-                    .paddingOuter(0.1)
-                    .paddingInner(0.1);
-                this._yAxis = axisLeft(this._yScale);
-            }
-            else {
-                this._yScale = linear()
-                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
-                    .nice(((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
-                    ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
-                    : 3);
-                this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
-                ]);
-                this._yAxis = axisLeft(this._yScale);
-            }
-        };
-        // Setting X-Scale
-        this.setXScale = (empty) => {
-            // Horizontal
-            if (this.afVariation == BarChartVariation.Horizontal) {
-                this._xScale = linear()
-                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
-                    .nice(3);
-                this._margin.right =
-                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
-                        this.yTickSize +
-                        this.tickPadding;
-                this._xScale.range([
-                    0,
-                    this._dims.width - this._margin.right - this._margin.left
-                ]);
-                // Initializing actual axis
-                this._xAxis = axisBottom(this._xScale);
-                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
-            }
-            else {
-                // Vertical
-                this._xScale = band()
-                    .domain(empty ? this._placeholderTicks : this._chartData.data.xValueNames)
-                    .range([0, this._dims.width - this._margin.right - this._margin.left])
-                    .paddingOuter(0.1)
-                    .paddingInner(0.1);
-                this._xAxis = axisBottom(this._xScale);
-            }
-        };
-        // Stores all tick text sizes in an indexable array
-        this.tickSizes = () => {
-            // Initializing tick size array
-            this._namedTickSizes = [];
-            this._ellipsisSize = this.getTextSize('...');
-            if (this._chartData && this._chartData.data) {
-                for (let i = 0; i < this._chartData.data.xValueNames.length; i++) {
-                    this._namedTickSizes.push(Math.ceil(this.getTextSize(this._chartData.data.xValueNames[i])));
-                }
-            }
-        };
-        this.updateBars = (fromLoading) => {
-            this._barChartContainer
-                .selectAll('.barGroup')
-                .data(this.reshapeData)
-                .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(polyInOut)
-                    .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale.bandwidth())
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._yScale(d.value))
-                    .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.bandwidth()
-                    : this._dims.height -
-                        this._margin.bottom -
-                        this._yScale(d.value))
-                    .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(polyInOut)
-                    .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 = 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', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? 2
-                        : this._xScale(d.key))
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._dims.height - this._margin.bottom)
-                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._xScale(d.value)
-                        : this._xScale.bandwidth())
-                        .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(polyInOut)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._yScale(d.value))
-                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : this._dims.height -
-                            this._margin.bottom -
-                            this._yScale(d.value))
-                        .on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(polyInOut)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._yScale(d.value))
-                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? 2
-                        : this._xScale(d.key))
-                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._xScale(d.value)
-                        : this._xScale.bandwidth())
-                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : this._dims.height -
-                            this._margin.bottom -
-                            this._yScale(d.value))
-                        .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(polyInOut)
-                    .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 = 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');
-            this._textSelection = this._barChartContainer.selectAll('.barText');
-        };
-        // Setting position of text according to bar size
-        this.adjustBarText = () => {
-            var _a, _b;
-            if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-                return;
-            this._textSelection
-                .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('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('text-anchor', (d) => {
-                if (this.afVariation === BarChartVariation.Vertical)
-                    return 'middle';
-                return this._xScale(d.value) < d.len + this.tickPadding * 2
-                    ? 'start'
-                    : 'end';
-            });
-        };
-        this.reshapeData = () => {
-            const toReturn = [];
-            if (this._loading) {
-                this._placeholderTicks.forEach((key) => {
-                    toReturn.push({
-                        key: key,
-                        value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
-                        len: '1'
-                    });
-                });
-                return toReturn;
-            }
-            this._chartData.data.xValueNames.forEach((key, index) => {
-                toReturn.push({
-                    key: key,
-                    value: this._chartData.data.series[0].yValues[index],
-                    len: this.getTextSize(this._chartData.data.series[0].yValues[index].toLocaleString())
-                });
-            });
-            return toReturn;
-        };
-        this.adjustBarSize = () => {
-            this._barSelection
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._yScale(d.value))
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
-                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth()
-                : this._dims.height - this._margin.bottom - this._yScale(d.value));
-        };
-        // Resize table
-        this.resizeTable = () => {
-            this.setDims();
-            this.setTableDimensions();
-        };
-        // Setting dimension variable
-        this.setDims = (onlyHeight = false) => {
-            // Get title dimensions
-            const tempTitle = select(this._titleDiv).node().getBoundingClientRect(), tempLegend = select(this._legendDiv).node().getBoundingClientRect();
-            const prevHeight = this._dims.height;
-            if (!onlyHeight)
-                this._dims = select(this._chartDiv).node().getBoundingClientRect();
-            this._dims.height =
-                this._maxHeight - tempLegend.height - tempTitle.height - 1.75 * this._rem;
-            return prevHeight != this._dims.height;
-        };
-        // Setting margins given text size
-        this.setMargins = (fromLoading) => {
-            var _a;
-            this._pixelSize =
-                Number(window
-                    .getComputedStyle(document.body)
-                    .getPropertyValue('font-size')
-                    .match(/\d+/)[0]) * Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, ''));
-            // Getting the longest word, assuming it will also be the widest in terms of pixels
-            if (this.afVariation === BarChartVariation.Horizontal) {
-                const left = ((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data) &&
-                    this.getLargestText(this._chartData.data.xValueNames)
-                    ? this.getLargestText(this._chartData.data.xValueNames)
-                    : 0;
-                this._margin.left = left;
-            }
-            else
-                this._margin.left = this.getLargestText(fromLoading
-                    ? ['0', '10']
-                    : [
-                        this._minVal ? this._tempScale[0].toLocaleString() : '0',
-                        this._maxVal ? this._tempScale[1].toLocaleString() : '10'
-                    ]);
-            if (this._margin.left > this._dims.width / 4) {
-                this._margin.left = Math.floor(this._dims.width / 4);
-                this._margin.ellipsis = true;
-            }
-            else
-                this._margin.ellipsis = false;
-            this._margin.bottom = this._pixelSize + this.tickPadding + this.xTickSize;
-        };
-        // Adjusting y-ticks
-        this.setNamedTicks = (transition = false) => {
-            if (this.afVariation == BarChartVariation.Horizontal) {
-                if (!transition) {
-                    this._yAxisHandle
-                        .style('font-size', this.fontSize)
-                        .style('font-family', 'Open Sans')
-                        .call(this._yAxis
-                        .tickPadding(this.tickPadding)
-                        .tickSize(this.yTickSize)
-                        .tickSizeOuter(0)
-                        .tickFormat((d, i) => {
-                        if (!this._margin.ellipsis)
-                            return d.toLocaleString();
-                        // Adding ellipsis to text
-                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
-                        const mSize = this._margin.left;
-                        if (size < mSize)
-                            return d.toLocaleString();
-                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
-                        let adjustment = 0;
-                        if (newSize > mSize) {
-                            adjustment = Math.ceil((newSize - mSize) / (size / d.length));
-                        }
-                        // Slicing the text up, saving atleast 3 characters
-                        return (d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
-                            .trim() + '...');
-                    }));
-                }
-                else {
-                    this._yAxisHandle
-                        .style('font-size', this.fontSize)
-                        .style('font-family', 'Open Sans')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .call(this._yAxis
-                        .tickPadding(this.tickPadding)
-                        .tickSize(this.yTickSize)
-                        .tickSizeOuter(0)
-                        .tickFormat((d, i) => {
-                        if (!this._margin.ellipsis)
-                            return d;
-                        // Adding ellipsis to text
-                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
-                        const mSize = this._margin.left;
-                        if (size < mSize)
-                            return d;
-                        const newSize = this.getTextSize(d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3))
-                            .trim() + '...');
-                        let adjustment = 0;
-                        if (newSize > mSize) {
-                            adjustment = Math.ceil((newSize - mSize) / (size / d.length));
-                        }
-                        // Slicing the text up, saving atleast 3 characters
-                        return (d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
-                            .trim() + '...');
-                    }));
-                }
-            }
-            else {
-                //Calculating every n:th text to show
-                let nTh = Math.round(this._chartData.data.xValues.length /
-                    ((this._dims.width - this._margin.left - this._margin.right) / 90 - 1));
-                if (Math.floor(this._chartData.data.xValues.length / nTh) < 4) {
-                    nTh = Math.round(this._chartData.data.xValues.length / 4);
-                }
-                const allowedWidth = (this._dims.width - this._margin.left - this._margin.right) /
-                    Math.floor(this._chartData.data.xValues.length / nTh + 1);
-                if (!transition) {
-                    this._xAxisHandle
-                        .style('font-size', this.fontSize)
-                        .style('font-family', 'Open Sans')
-                        .call(this._xAxis
-                        .tickValues(this._xScale.domain().filter((...[, i]) => {
-                        if (i == 0)
-                            return true;
-                        else {
-                            return i % nTh == 0;
-                        }
-                    }))
-                        .tickPadding(this.tickPadding)
-                        .tickSize(this.xTickSize)
-                        .tickSizeOuter(0)
-                        .tickFormat((d, i) => {
-                        const index = i * nTh;
-                        if (this._namedTickSizes[index] < allowedWidth)
-                            return d;
-                        return (d.slice(0, Math.max(Math.floor((allowedWidth /
-                            (this._namedTickSizes[index] +
-                                this._ellipsisSize +
-                                5)) *
-                            d.length), 3)) + '...');
-                    }));
-                }
-                else {
-                    this._xAxisHandle
-                        .style('font-size', this.fontSize)
-                        .style('font-family', 'Open Sans')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .call(this._xAxis
-                        .tickValues(this._xScale.domain().filter((...[, i]) => {
-                        if (i == 0)
-                            return true;
-                        else {
-                            return i % nTh == 0;
-                        }
-                    }))
-                        .tickPadding(this.tickPadding)
-                        .tickSize(this.xTickSize)
-                        .tickSizeOuter(0)
-                        .tickFormat((d, i) => {
-                        const index = i * nTh;
-                        if (this._namedTickSizes[index] < allowedWidth)
-                            return d;
-                        return (d.slice(0, Math.max(Math.floor((allowedWidth /
-                            (this._namedTickSizes[index] +
-                                this._ellipsisSize +
-                                5)) *
-                            d.length), 3)) + '...');
-                    }));
-                }
-            }
-        };
-        // Positioning the ticks of the value bearing axis
-        this.setValueTicks = (transition = false) => {
-            var _a, _b;
-            if (((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) && ((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.meta.hideXAxis)) {
-                this.afVariation === BarChartVariation.Horizontal
-                    ? this._xAxisHandle.attr('display', 'none')
-                    : this._yAxisHandle.attr('display', 'none');
-                return;
-            }
-            let toCall, tickSize, handle;
-            if (this.afVariation === BarChartVariation.Horizontal) {
-                this._xAxisHandle.attr('display', null);
-                toCall = this._xAxis;
-                tickSize = -(this._dims.height - this._margin.top - this._margin.bottom);
-                handle = this._xAxisHandle;
-            }
-            else {
-                this._yAxisHandle.attr('display', null);
-                toCall = this._yAxis;
-                tickSize = -(this._dims.width - this._margin.left - this._margin.right);
-                handle = this._yAxisHandle;
-            }
-            // Computing the amount of ticks to show
-            const ticks = Math.min(Math.floor((this._dims.width - this._margin.left - this._margin.right) /
-                (this._tickWidth + this.xTickSize)) - 2, this.afVariation == BarChartVariation.Horizontal
-                ? this._xScale.ticks().length
-                : this._yScale.ticks().length);
-            if (!transition) {
-                handle
-                    .style('font-size', this.fontSize)
-                    .style('font-family', 'Open Sans')
-                    .call(toCall
-                    .ticks(this.afVariation === BarChartVariation.Horizontal
-                    ? Math.max(2, Math.min(ticks, 9))
-                    : 5) // Clamping value between 2 and 10
-                    .tickPadding(this.tickPadding)
-                    .tickSize(tickSize)
-                    .tickSizeOuter(0)
-                    .tickFormat((d) => d.toLocaleString()));
-            }
-            else {
-                handle
-                    .style('font-size', this.fontSize)
-                    .style('font-family', 'Open Sans')
-                    .transition('newScale')
-                    .duration(this.defaultDuration)
-                    .call(toCall
-                    .ticks(this.afVariation === BarChartVariation.Horizontal
-                    ? Math.max(2, Math.min(ticks, 9))
-                    : 5) // Clamping value between 2 and 10
-                    .tickPadding(this.tickPadding)
-                    .tickSize(tickSize)
-                    .tickSizeOuter(0)
-                    .tickFormat((d) => d.toLocaleString()));
-            }
-            handle.selectAll('line').attr('stroke', 'lightgray');
-            if (this.afVariation === BarChartVariation.Vertical)
-                this._yAxisHandle.select('.domain').attr('display', 'none');
-        };
-        // Highlight bar
-        this.hover = (event) => {
-            select(event.target)
-                .transition('hover')
-                .duration(20)
-                .attr('fill', event.target.tagName === 'rect'
-                ? '#4C4C8B'
-                : 'var(--digi--color--text--link-hover)');
-        };
-        // Removing highlight from bar
-        this.hoverOut = (event) => {
-            select(event.target)
-                .transition('hover')
-                .duration(this.defaultDuration)
-                .attr('fill', event.target.tagName === 'rect' ? '#00005a' : '#333333');
-        };
-        this.openTooltip = (...[, d]) => {
-            // If type is string, the user has clicked on a y-axis tick
-            if (typeof d === 'string') {
-                this._tooltipData = this._barChartContainer
-                    .select(`#barGroup${d.replace(/[^A-Z0-9]+/gi, '_')}`)
-                    .datum();
-            }
-            else
-                this._tooltipData = d;
-            const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
-                .select(this._tooltipHeading)
-                .style('margin', '0 0.75rem 0 0 ')
-                .style('font-weight', 500)
-                .html(this._tooltipData.key);
-            tooltipBody
-                .selectAll('div')
-                .data([this._tooltipData])
-                .join('div')
-                .style('display', 'flex')
-                .style('flex-direction', 'row')
-                .style('flex-wrap', 'nowrap')
-                .style('white-space', 'nowrap')
-                .style('justify-content', 'space-between')
-                .html((d) => d.value.toLocaleString());
-            this._tooltip.style('display', 'flex');
-            this.positionTooltip(this._tooltipData);
-        };
-        this.closeTooltip = () => {
-            this._tooltip.style('display', 'none');
-        };
-        // Positions tooltip in horizontal mode
-        this.positionTooltip = (data) => {
-            const width = this._tooltip.node().getBoundingClientRect().width;
-            const height = this._tooltip.node().getBoundingClientRect().height + 8;
-            const diff = this._xScale(data.value) / 2 - width / 2;
-            if (this.afVariation === BarChartVariation.Horizontal) {
-                this._tooltip
-                    .style('transform', `translate(${this._margin.left + this.tickPadding + Math.max(diff, -4)}px, ${this._yScale(data.key) + this._yScale.bandwidth() + this._yScale.paddingInner() * this._yScale.bandwidth()}px )`)
-                    .style('max-width', this._xScale.range()[1] + 'px');
-                this._tooltip
-                    .select('digi-icon-caret-up')
-                    .style('position', 'absolute')
-                    .style('--digi--icon--color', 'white')
-                    .style('top', '-11px')
-                    .style('left', '0')
-                    .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this._xScale(data.value) / 2}px,0)`);
-            }
-            else {
-                this._tooltip
-                    .style('transform', `translate(${this._margin.left + this.tickPadding + this._xScale(data.key) + this._xScale.bandwidth() / 2 - width / 2}px, ${this._yScale(data.value) - height}px )`)
-                    .style('max-width', this._xScale.range()[1] + 'px');
-                this._tooltip
-                    .select('digi-icon-caret-down')
-                    .style('position', 'absolute')
-                    .style('--digi--icon--color', 'white')
-                    .style('left', '0')
-                    .style('bottom', '-11px')
-                    .style('transform', `translate(${width / 2 - 6}px,0)`);
-            }
-        };
-        // Once texts has fully loaded, we can recompute some sizes
-        this.recomputeTextSize = () => {
-            var _a, _b;
-            if (this.afVariation == BarChartVariation.Horizontal)
-                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
-            this.tickSizes();
-            this._barChartContainer.selectAll('.barGroup').data(this.reshapeData);
-            if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
-                this._textSelection.remove();
-            this.initBarText();
-        };
-        // Removes resize observer for chart and inits table
-        this.activateTable = (event) => {
-            this.closeTooltip();
-            this.barChartObserver.disconnect();
-            this.tableObserver.observe(this._chartDiv);
-            this._status.innerHTML = '<p>Visas som tabell</p>';
-            select(this._host).select('.tableButton').style('display', 'none');
-            select(this._host).select('.chartButton').style('display', null);
-            event.target.nextSibling.lastChild.focus();
-            const duration = 150;
-            this._svg
-                .attr('opacity', 1)
-                .transition('fadeout')
-                .duration(duration)
-                .attr('opacity', 0)
-                .on('end', () => {
-                this._svg.remove();
-                this._legendDiv.style['display'] = 'none';
-                this._tableDiv.style['display'] = 'block';
-                this.setTableContent();
-                this.setTableDimensions();
-                select(this._tableDiv)
-                    .style('opacity', 0)
-                    .transition('fadein')
-                    .duration(duration)
-                    .style('opacity', 1);
-            });
-            select(this._legendDiv)
-                .style('opacity', 1)
-                .transition('fadeout')
-                .duration(duration)
-                .style('opacity', 0);
-        };
-        // Removes observer and calls init functions for line chart
-        this.reInitChart = (event) => {
-            this.tableObserver.disconnect();
-            this._status.innerHTML = '<p>Visas som diagram</p>';
-            select(this._host).select('.tableButton').style('display', null);
-            select(this._host).select('.chartButton').style('display', 'none');
-            event.target.previousSibling.lastChild.focus();
-            const table = select(this._tableDiv);
-            table
-                .style('opacity', 1)
-                .transition()
-                .duration(150)
-                .style('opacity', 0)
-                .on('end', () => {
-                table.style('display', 'none');
-                this.initChain();
-                this._svg
-                    .attr('opacity', 0)
-                    .transition()
-                    .duration(150)
-                    .attr('opacity', 1);
-            });
-        };
-        this.afVariation = BarChartVariation.Vertical;
-        this.afHeadingLevel = 'h3';
-        this.afId = randomIdGenerator('tooltip');
-        this.afChartData = undefined;
-    }
-    afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this._chartData = data;
-        else
-            this._chartData = JSON.parse(data);
-    }
-    initSvg() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        // Fetch number formatting
-        this._numberFormat = {
-            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
-            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
-                ? 'compact'
-                : 'standard'
-        };
-        select(this._chartDiv).select('svg').remove();
-        this._maxHeight = (_g = select(this._host)
-            .node()
-            .parentNode) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height;
-        this.barChartObserver.observe(this._chartDiv);
-        // Getting rem-size
-        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        this.setMinMax();
-        this.setDims();
-        this.setMargins();
-        // Appending svg
-        this._svg = select(this._chartDiv)
-            .append('svg')
-            .attr('aria-hidden', true)
-            .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-            : 'Stapeldiagram');
-        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
-    }
-    initToolTip() {
-        // Getting handle for tooltip
-        this._tooltip = select('#' + this.afId);
-        this._tooltip.select('.close').on('click', this.closeTooltip);
-        this._tooltipHeading =
-            'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1); // increment heading level by one
-        // Add heading placeholder for heading
-        this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading)
-            .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
-            .style('font-size', '1rem')
-            .style('margin', '0 0.75rem')
-            .style('font-weight', '500');
-    }
-    initEmpty() {
-        select(this._chartDiv).select('svg').remove();
-        this._maxHeight = select(this._host)
-            .node()
-            .parentNode.getBoundingClientRect().height;
-        this.barChartObserver.observe(this._chartDiv);
-        // Getting rem-size
-        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        //this.setMinMax();
-        this.setDims();
-        this.setMargins();
-        // Appending svg
-        this._svg = select(this._chartDiv)
-            .append('svg')
-            .attr('aria-hidden', true)
-            .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-            : 'Stapeldiagram');
-        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
-        // Hide unusable components
-        select(this._titleDiv)
-            .select(this.afHeadingLevel)
-            .html(`${_t.loading}...`);
-        this.initYAxis(true);
-        this.initXAxis(true);
-        this.loadingState(true);
-    }
-    loadingState(empty) {
-        this._loading = true;
-        // close potentially open tooltip
-        if (this._tooltip)
-            this.closeTooltip();
-        select(this._host).select('.tableButton').style('display', 'none');
-        const newHeight = this.setDims();
-        this.transitionTitle();
-        this._xAxisHandle.selectAll('.tick').remove();
-        this._xAxisHandle.select('path').remove();
-        this._svg
-            .transition()
-            .duration(400)
-            .attr('width', this._dims.width)
-            .attr('height', this._dims.height)
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-            : 'Stapeldiagram');
-        this.setMargins(true);
-        select(this._titleDiv)
-            .select(this.afHeadingLevel)
-            .html(`${_t.loading}...`);
-        // Waiting with observing for changes until transition to regular bars is complete
-        this._barChartContainer
-            .transition('position')
-            .duration(this.defaultDuration)
-            .ease(polyInOut)
-            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        // If there is a new height
-        if (newHeight) {
-            // Update y-axis with potentially new height (might want to do a check here)
-            this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.range([
-                    this._margin.top,
-                    this._dims.height - this._margin.bottom
-                ])
-                : this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
-                ]);
-            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
-        }
-        const animateBars = () => {
-            this._barChartContainer.selectAll('.barGroup').remove();
-            this._barSelection = this._barChartContainer
-                .selectAll('barGroup')
-                .data(this.reshapeData)
-                .join('g')
-                .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
-                .append('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)
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('ry', 4)
-                .attr('rx', 4)
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
-                .attr('height', () => 0)
-                //.attr('height', (d: any) => this.afVariation === BarChartVariation.Horizontal ? this._yScale.bandwidth() : (this._dims.height - this._margin.bottom) - this._yScale(d.value))
-                .attr('fill', 'gray')
-                .transition()
-                .duration(400)
-                .delay((...[, i]) => i * 150)
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._yScale(d.value))
-                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth()
-                : this._dims.height - this._margin.bottom - this._yScale(d.value));
-            this._barSelection
-                .transition()
-                .duration(400)
-                .ease(linear$1)
-                .delay((...[, i]) => i * 150 + 400)
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
-                .attr('height', () => 0)
-                .on('end', (...[, i]) => {
-                if (i === this._placeholderTicks.length - 1)
-                    animateBars();
-            });
-        };
-        const flattenBars = () => {
-            this._barChartContainer
-                .selectAll('rect')
-                .transition()
-                .duration(200)
-                .ease(linear$1)
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
-                .attr('height', () => 0)
-                .on('end', (...[, i]) => {
-                if (i != 0)
-                    return;
-                this.setYScale(true);
-                this.setValueTicks();
-                this.setXScale(true);
-                this.barChartObserver.observe(this._chartDiv);
-                animateBars();
-            });
-        };
-        if (empty)
-            animateBars();
-        else
-            flattenBars();
-    }
-    transitionTitle() {
-        const height = select(this._titleDiv).style('height');
-        select(this._titleDiv)
-            .style('height', this._prevHeight)
-            .transition('adjust')
-            .duration(400)
-            .style('height', height)
-            .on('end', () => select(this._titleDiv).style('height', null));
-    }
-    initYAxis(empty) {
-        this.setYScale(empty);
-        this._barChartContainer = this._svg
-            .append('g')
-            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        this._yAxisHandle = this._barChartContainer.append('g');
-        if (this.afVariation === BarChartVariation.Horizontal) {
-            this.tickSizes();
-            this.setNamedTicks();
-            this.setTickInteraction();
-        }
-        else
-            this.setValueTicks();
-    }
-    // Sets the largest and smallest value from series 0, Should only be used when not loading
-    setMinMax() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const max$1 = max((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
-            ? max((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
-            : 0;
-        const min$1 = min([0, min((_c = this._chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
-            ? min([0, min((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
-            : 0;
-        this._maxVal = max$1;
-        this._minVal = min$1;
-        this._tempScale = linear()
-            .domain([this._minVal, this._maxVal])
-            .nice(((_f = (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
-            ? (_g = this._chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
-            : 3)
-            .domain();
-    }
-    // Setting up x-axis, getting margin.right in this function
-    initXAxis(empty) {
-        this.setXScale(empty);
-        this._xAxisHandle = this._barChartContainer
-            .append('g')
-            .attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
-        if (this.afVariation === BarChartVariation.Horizontal) {
-            this.setValueTicks();
-            // Removing first tick, because it aligns with y-axis domain
-            this._xAxisHandle.select('.tick').select('line').remove();
-        }
-        else {
-            if (!empty) {
-                this.tickSizes();
-                this.setNamedTicks();
-                this.setTickInteraction();
-            }
-        }
-    }
-    // Initializing bars, can only handle one series of bars for now
-    initBars() {
-        this._barSelection = this._barChartContainer
-            .selectAll('barGroup')
-            .data(this.reshapeData)
-            .join('g')
-            .attr('class', 'barGroup')
-            .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
-            .append('rect')
-            .attr('class', 'bar')
-            .style('cursor', 'pointer');
-        this._barSelection
-            .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale(d.key)
-            : this._yScale(d.value))
-            .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? 2
-            : this._xScale(d.key))
-            .attr('ry', 4)
-            .attr('rx', 4)
-            .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._xScale(d.value)
-            : this._xScale.bandwidth())
-            .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale.bandwidth()
-            : this._dims.height - this._margin.bottom - this._yScale(d.value))
-            .attr('fill', '#00005a')
-            .on('mouseenter', this.hover)
-            .on('mouseleave', this.hoverOut)
-            .on('click', this.openTooltip);
-    }
-    initBarText() {
-        this._textSelection = this._barChartContainer
-            .selectAll('.barGroup')
-            .append('text');
-        this._textSelection
-            .text((d) => d.value.toLocaleString(undefined, this._numberFormat))
-            .attr('class', 'barText')
-            .attr('font-size', this.fontSize)
-            .attr('font-weight', '600')
-            .attr('text-anchor', 'end')
-            .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)
-            : this._xScale(d.key) + this._xScale.bandwidth())
-            .attr('dy', () => this.afVariation == BarChartVariation.Horizontal ? '0.35em' : '-0.25em')
-            .style('pointer-events', 'none')
-            .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'; });
-        this.adjustBarText();
-    }
-    initChain() {
-        this.initSvg();
-        this.initToolTip();
-        this.initYAxis();
-        this.initXAxis();
-        this.initBars();
-        this.initBarText();
-    }
-    async updateChain() {
-        var _a, _b, _c, _d, _e, _f;
-        // Fetch number formatting
-        this._numberFormat = {
-            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
-            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
-                ? 'compact'
-                : 'standard'
-        };
-        if (this._tooltip)
-            this.closeTooltip();
-        // Check whether we are in table mode or not
-        if (this._tableDiv.style['display'] == 'block') {
-            if (!this._chartData.title) {
-                select(this._titleDiv)
-                    .select(this.afHeadingLevel)
-                    .html(`${_t.loading}...`);
-            }
-            else {
-                this.setTableContent();
-                this.setTableDimensions();
-            }
-            this.transitionTitle();
-        }
-        else {
-            // displaying legend again
-            if (this._loading) {
-                select(this._host).select('.tableButton').style('display', null);
-                select(this._legendDiv).style('display', null);
-                this.initToolTip();
-            }
-            // Disconnect resize observer while adjusting things
-            this.barChartObserver.disconnect();
-            this.setMinMax();
-            const newHeight = this.setDims();
-            this.transitionTitle();
-            this._svg
-                .transition()
-                .duration(400)
-                .attr('width', this._dims.width)
-                .attr('height', this._dims.height)
-                .attr('aria-label', this._chartData && this._chartData.title
-                ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-                : 'Stapeldiagram');
-            this.setMargins();
-            // Waiting with observing for changes until transition to regular bars is complete
-            this._barChartContainer
-                .transition('position')
-                .duration(this.defaultDuration)
-                .ease(polyInOut)
-                .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-            if (!this._loading)
-                this._barChartContainer.on('end', () => this.barChartObserver.observe(this._chartDiv));
-            // If there is a new height
-            if (newHeight) {
-                // Update y-axis with potentially new height (might want to do a check here)
-                this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.range([
-                        this._margin.top,
-                        this._dims.height - this._margin.bottom
-                    ])
-                    : this._yScale.range([
-                        this._dims.height - this._margin.bottom,
-                        this._margin.top
-                    ]);
-                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
-            }
-            this.tickSizes();
-            this.setYScale();
-            this.setXScale();
-            this.setTickInteraction();
-            this._tickWidth = this.getLargestText(this.afVariation == BarChartVariation.Horizontal
-                ? this._xScale.ticks().map((tick) => tick.toLocaleString())
-                : this._yScale.ticks().map((tick) => tick.toLocaleString()));
-            this.setValueTicks(true);
-            if (this._loading) {
-                select(this._legendDiv)
-                    .style('opacity', 0)
-                    .transition()
-                    .duration(400)
-                    .ease(polyInOut)
-                    .style('opacity', 1);
-                this._margin.right =
-                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
-                        this.yTickSize +
-                        this.tickPadding;
-                // Update x-axis with new width
-                this._xScale.range([
-                    0,
-                    this._dims.width - this._margin.right - this._margin.left
-                ]);
-                this.setNamedTicks(true);
-                // Stop animation
-                this._barSelection.selectAll('.barGroup').on('end', null);
-                this._loading = false;
-                this._barSelection
-                    .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);
-                this.setTickInteraction();
-            }
-            else {
-                this.setNamedTicks(true);
-                // Removing first tick, because it aligns with y-axis domain
-                this.updateBars();
-            }
-        }
-    }
-    // Resizing bar chart
-    resize() {
-        var _a;
-        const newHeight = this.setDims();
-        this.setMargins();
-        (_a = this._svg) === null || _a === void 0 ? void 0 : _a.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 +
-                this.yTickSize +
-                this.tickPadding;
-        // If there is a new height
-        if (newHeight) {
-            // Update y-axis with potentially new height (might want to do a check here)
-            this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.range([
-                    this._margin.top,
-                    this._dims.height - this._margin.bottom
-                ])
-                : this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
-                ]);
-            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
-        }
-        // Update x-axis with new width
-        this._xScale.range([
-            0,
-            this._dims.width - this._margin.right - this._margin.left
-        ]);
-        this.setNamedTicks();
-        this.setValueTicks();
-        this.adjustBarSize();
-        this.adjustBarText();
-        if (this._tooltipData)
-            this.positionTooltip(this._tooltipData);
-    }
-    // Returns the longest text from an array of strings
-    getLargestText(array) {
-        let width = 0;
-        array.forEach((elem) => {
-            const temp = this.getTextSize(elem);
-            if (temp > width) {
-                width = temp;
-            }
-        });
-        return width;
-    }
-    componentWillLoad() {
-        this.afChartDataUpdate(this.afChartData);
-    }
-    componentDidLoad() {
-        if (!this._chartData || Object.keys(this._chartData).length === 0) {
-            this._loading = true;
-            return this.initEmpty();
-        }
-        this.initChain();
-        document.fonts.ready.then(() => {
-            this.recomputeTextSize();
-            this.setNamedTicks();
-            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        });
-    }
-    disconnectedCallback() {
-        this.barChartObserver.disconnect();
-    }
-    componentWillUpdate() {
-        this._prevHeight = select(this._titleDiv).style('height');
-    }
-    componentDidUpdate() {
-        if (this._tableDiv.style['display'] != 'block' &&
-            Object.keys(this._chartData).length === 0) {
-            // Disconnect old barchartobserver while doing resizing
-            this.barChartObserver.disconnect();
-            return this.loadingState();
-        }
-        this.updateChain();
-    }
-    // Not currently used
-    /*get cssModifiers() {
-          return {
-              'digi-bar-chart--vertical': this.afVariation == 'vertical',
-              'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
-          };
-      }*/
-    // Returns pixelwidth of text given the current fontSize (costly function using .each)
-    getTextSize(text) {
-        const textWidth = [];
-        const svg = select(this._chartDiv).append('svg');
-        svg
-            .selectAll('dummyText')
-            .data([text])
-            .join('text')
-            .attr('font-size', this.fontSize) // <- using 1rem here whereas default is 0.875rem
-            .text((d) => d)
-            .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength();
-            textWidth.push(thisWidth);
-            nodelist[i].remove();
-        });
-        svg.remove().exit();
-        return textWidth[0];
-    }
-    // Setting table content from this._chartData
-    setTableContent() {
-        this._tableDiv.innerHTML = `<digi-table af-size="small" af-variation="primary"> <table><caption>${this._chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
-    }
-    setTableDimensions() {
-        const table = select(this._tableDiv);
-        table
-            // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
-            .style('height', this._dims.height + 'px');
-        table.style('width', this._dims.width - this._rem * 0.65 + 'px');
-    }
-    // Extracting all headings from data and returning a string with <th>-elements with headings
-    headings() {
-        let headingsString = `<th scope="col">${this._chartData.x}</th>`;
-        this._chartData.data.series.forEach((elem) => {
-            headingsString = headingsString.concat(`<th scope="col">${elem.title}</th>`);
-        });
-        return headingsString;
-    }
-    // Building the table body
-    tableBody() {
-        let body = '';
-        if (this._chartData && this._chartData.data) {
-            const loopable = this._chartData.data.xValueNames
-                ? this._chartData.data.xValueNames
-                : this._chartData.data.xValues;
-            loopable.forEach((elem, index) => {
-                let cells = '';
-                this._chartData.data.series.forEach((serie) => {
-                    cells = cells.concat(`<td>${serie.yValues[index] != null ? serie.yValues[index].toLocaleString() : '-'}</td>`);
-                });
-                body = body.concat(`<tr><th scope='row'>${elem}${cells}</th></tr>`);
-            });
-        }
-        return body;
-    }
-    render() {
-        var _a, _b, _c, _d, _e;
-        // 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>`;
-            }
-        }
-        return (h(Host, { key: '7659fcc4817cdfb3f19f2bd11a41464c13b5e19e', ref: (el) => (this._host = el) }, h("div", { key: '063611cf8dbb2554904d972ed3fc1f89d714772e', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'ad58c43c2629e7b2b97e3ad1658646e5171b1531', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '2234460c0ffab8e7d251f099f4f2d38e1e5ebede', 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: 'b82a89d578d997ab878d44a2928e5e31773bd34f', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b5dc532f7655bd383d0dcf42f8851edbc81b448c', 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: 'f868d9fd2c37c247e8abdd59cf2b9342ad120fef', slot: "icon" }), "Visa diagram"), h("div", { key: '6a0f7838d86a43b46d9a036ad935f50ebb2b523f', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5f37b9eaf1030cd1d5b1b0360cdaaa61f953b624', class: "chartTooltip", id: this.afId }, h("div", { key: 'a89608cb64620456a165ba4fb57db823870d2231', class: "tooltipBody" }), h("digi-icon-x", { key: 'e842c2b42f6bc7d6dfdad1d1b8a7acb9f8df5a1a', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'f07154ab370a948016aa30a2547c4c9b25fae03b', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '385151df18d373779257040d298bf8c108184500', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'd5f07fc01a628aa2035a96d86621b6bab1e73f01', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "afChartData": ["afChartDataUpdate"]
-    }; }
-};
-barChart.style = DigiBarChartStyle0;
-
-export { barChart as digi_bar_chart };