import { p as proxyCustomElement, H, h, d as Host } from './p-a53686b3.js';
import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, m as max, p as polyInOut, c as min, d as linear$1 } from './p-f9a1a787.js';
import { _ as _t } from './p-08cf2c0e.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { B as BarChartVariation } from './p-dcdffb3c.js';
import { d as defineCustomElement$8 } from './p-e8fc33ed.js';
import { d as defineCustomElement$7 } from './p-4e7ca8dc.js';
import { d as defineCustomElement$6 } from './p-ae0dec3a.js';
import { d as defineCustomElement$5 } from './p-412a1a43.js';
import { d as defineCustomElement$4 } from './p-fa6446e2.js';
import { d as defineCustomElement$3 } from './p-70ca6868.js';
import { d as defineCustomElement$2 } from './p-5c53d1d4.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{width:100%;display:flex;flex-direction:column;min-width:0}.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 .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0;--MARGIN--BODY:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.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:auto;height:auto;border-radius:4px;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}";
const DigiBarChartStyle0 = barChartCss;

const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
    constructor() {
        super();
        this.__registerHost();
        // States
        this.loading = false;
        this.placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
        // Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
        this.dataWidth = 1;
        // Bar gap when using multiple bars for each point, this will be doubled, since it is applied on both bars
        this.barGap = 0;
        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';
        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(() => {
                if (this.loading)
                    return this.loadingResize();
                this.resize();
            });
        });
        this.highlightBars = (serie) => {
            this.barChartContainer.selectAll('.bar')
                .attr('fill', (barData) => this.colorFunction(barData.serie))
                .transition('color')
                .duration(150)
                .attr('fill', (barData) => {
                var _a;
                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) {
                        return 'url(#prognosisInactive)';
                    }
                    return this.evalColorVar('--digi--color--background--secondary-accent');
                }
            });
            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));
            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
            if (this.chartData.data.averageLine) {
                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
                    .style('filter', 'contrast(0.5)');
                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
                        .style('filter', 'contrast(0.5)'); */
            }
        };
        this.highlightAverageLine = (serie) => {
            this.barChartContainer.selectAll('.bar')
                .transition('color')
                .duration(150)
                .attr('fill', (barData) => {
                var _a;
                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
                    return 'url(#prognosisInactive)';
                }
                else
                    return this.evalColorVar('--digi--color--background--secondary-accent');
            });
            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
                .duration(150).style('mix-blend-mode', null).style('filter', null);
            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
        };
        // Sets and resizespositions the average line
        this.averageLine = () => {
            if (!this.chartData.data.averageLine)
                return;
            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
            /*     avLineGroup.selectAll('.averageLineText')
                  .data(d => [d])
                  .join('text')
                  .attr('class', 'averageLineText')
                  .text(d => d.text)
                  .attr('x', this.xScale.range()[0])
                  .attr('y', (d) => this.yScale(d.value))
                  .attr('dy', -2)
                  .attr('font-size', this.fontSize)
                  .attr('fill', 'var(--digi--color--infographic--lineart)')
                  .style('mix-blend-mode', 'plus-lighter')
                  .style('filter', 'contrast(0.5)'); */
            avLineGroup.selectAll('.averageLine')
                .data(d => [d.value])
                .join('line')
                .attr('class', 'averageLine')
                .attr('x1', this.xScale.range()[0])
                .attr('y1', (d) => this.yScale(d))
                .attr('x2', this.xScale.range()[1])
                .attr('y2', (d) => this.yScale(d))
                .attr('stroke', 'var(--digi--color--infographic--lineart)')
                .attr('stroke-width', 2)
                .attr('stroke-dasharray', '12, 7')
                .attr('stroke-linecap', 'round')
                .style('mix-blend-mode', 'plus-lighter')
                .style('filter', 'contrast(0.5)')
                .style('pointer-events', 'none');
        };
        // Resizing chart while loading
        this.loadingResize = () => {
            const newHeight = this.setDims();
            this.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.setValueTicks();
            this.adjustBarSize();
        };
        this.highlightBarGroup = (_event, datum) => {
            if (typeof datum === 'string') {
                const barGroupID = '#' + this.barGroupID(datum);
                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) {
                        return 'url(#prognosisHighlight)';
                    }
                    else
                        return this.adjustColor(this.colorFunction(d.serie), 50);
                });
            }
        };
        this.unHighlightBarGroup = () => {
            this.barSelection.selectAll('.bar').transition('color')
                .duration(100)
                .attr('fill', (d) => {
                return this.colorFunction(d.serie);
            });
        };
        // 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.highlightBarGroup)
                    .on('mouseleave', this.unHighlightBarGroup);
            }
            else {
                this.xAxisHandle
                    .selectAll('text')
                    .style('cursor', 'pointer')
                    .on('click', this.openTooltip)
                    .on('mouseenter', this.highlightBarGroup)
                    .on('mouseleave', this.unHighlightBarGroup);
            }
        };
        // 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.barGroupID = (key) => {
            return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
        };
        this.updateBars = () => {
            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')
                .data((d) => {
                return d.series;
            })
                .join('rect')
                .attr('class', 'bar')
                .style('cursor', 'pointer')
                .attr('x', this.xFunction)
                .attr('y', this.yFunction)
                .attr('ry', 4)
                .attr('rx', 4)
                .attr('width', this.widthFunction)
                .attr('height', this.heightFunction)
                .attr('fill', (d) => this.colorFunction(d.serie))
                .on('mouseenter', this.hover)
                .on('mouseleave', this.hoverOut)
                .on('click', this.openTooltip);
            this.barSelection = this.barChartContainer.selectAll('.barGroup');
            this.textSelection = this.barChartContainer.selectAll('.barText');
        };
        // Setting position of text according to bar size
        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.chartData) {
                this.placeholderTicks.forEach((key) => {
                    const tick = { key: key, series: [] };
                    tick.series.push({
                        key: key,
                        serie: 'loading',
                        value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
                        len: 0
                    });
                    toReturn.push(tick);
                });
                return toReturn;
            }
            else {
                if (this.chartData.data.xValueNames) {
                    this.chartData.data.xValueNames.forEach((key, index) => {
                        const tick = { key: key, series: [] };
                        this.chartData.data.series.forEach((serie) => {
                            if (serie.yValues[index]) {
                                tick.series.push({
                                    key: key,
                                    serie: serie.title,
                                    value: serie.yValues[index],
                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
                                });
                            }
                        });
                        toReturn.push(tick);
                    });
                }
                else {
                    this.chartData.data.xValues.forEach((key, index) => {
                        const tick = { key: key.toString(), series: [] };
                        this.chartData.data.series.forEach((serie) => {
                            if (serie.yValues[index]) {
                                tick.series.push({
                                    key: key.toString(),
                                    serie: serie.title,
                                    value: serie.yValues[index],
                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
                                });
                            }
                        });
                        toReturn.push(tick);
                    });
                }
            }
            return toReturn;
        };
        this.adjustBarSize = () => {
            this.barSelection.selectAll('.bar')
                .attr('x', this.xFunction)
                .attr('y', this.yFunction)
                .attr('width', this.widthFunction)
                .attr('height', this.heightFunction);
        };
        this.evalColorVar = (colorVar) => {
            return getComputedStyle(document.documentElement)
                .getPropertyValue(colorVar)
                .trim()
                .toLocaleLowerCase();
        };
        // Handling x positioning of bars
        this.xFunction = (d, i) => {
            return this.afVariation === 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));
        };
        // Handling y positioning of bars
        this.yFunction = (d, i) => {
            if (!d.value)
                return 0;
            return this.afVariation === 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));
        };
        // Handling height for bars
        this.heightFunction = (d) => {
            if (!d.value)
                return 0;
            return this.afVariation === 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));
        };
        // Handling width for bars
        this.widthFunction = (d) => {
            return this.afVariation === BarChartVariation.Horizontal
                ? Math.abs(this.xScale(0) - this.xScale(d.value))
                : this.xScale.bandwidth() / this.dataWidth - (this.barGap);
        };
        // 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;
            // Making sure height and width are defined
            this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
            this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
            return prevHeight !== this.dims.height;
        };
        // Setting margins given text size
        this.setMargins = (fromLoading) => {
            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;
                this.margin.bottom = this.pixelSize + this.tickPadding + this.xTickSize;
            }
            else {
                this.margin.left = this.getLargestText(fromLoading
                    ? ['0', '10']
                    : [
                        this.minVal ? this.tempScale[0].toLocaleString() : '0',
                        this.maxVal ? this.tempScale[1].toLocaleString() : '10'
                    ]);
                this.margin.bottom = this.pixelSize;
            }
            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;
        };
        // 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.max(Math.round(this.chartData.data.xValues.length /
                    ((this.dims.width - this.margin.left - this.margin.right) / 90 - 1)), 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('color')
                .duration(20)
                .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) {
                        return 'url(#prognosisHighlight)';
                    }
                    else
                        return this.adjustColor(this.colorFunction(d.serie), 50);
                }
                else {
                    return this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
                }
            });
        };
        // Removing highlight from bar
        this.hoverOut = (event) => {
            select(event.target)
                .transition('color')
                .duration(this.defaultDuration)
                .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
            if (typeof d === 'string') {
                this.tooltipData = this.barChartContainer
                    .select(`#${this.barGroupID(d)}`)
                    .datum();
            }
            else
                this.tooltipData = d;
            const tooltipBody = this.tooltip.select('.tooltipBody');
            this.tooltip
                .select('.tooltipHeading')
                .html(this.tooltipData.key);
            tooltipBody
                .selectAll('div')
                .data(this.tooltipData.series ? this.tooltipData.series : [this.tooltipData])
                .join('div')
                .style('display', 'flex')
                .style('flex-direction', 'row')
                .style('flex-wrap', 'nowrap')
                .style('white-space', 'nowrap')
                .style('justify-content', 'space-between')
                .style('margin', '0.25rem 0')
                .html((d) => {
                return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
            });
            this.tooltip.style('display', null);
            this.positionTooltip(this.tooltipData);
        };
        this.closeTooltip = () => {
            this.tooltip.style('display', 'none');
        };
        // Positions tooltip in horizontal mode
        this.positionTooltip = (data) => {
            var _a;
            const width = this.tooltip.node().getBoundingClientRect().width;
            // Single bar
            if ('serie' in data) {
                if (this.afVariation === BarChartVariation.Horizontal) {
                    const diff = this.xScale(data.value) / 2 - width / 2;
                    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('top', '-11px')
                        .style('left', '0')
                        .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;
                    // 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) )`);
                    this.tooltip
                        .select('digi-icon-caret-down')
                        .style('position', 'absolute')
                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
                        .style('bottom', '-11.5px');
                }
            }
            else {
                if (this.afVariation === 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
                        .select('digi-icon-caret-up')
                        .style('position', 'absolute')
                        .style('top', '-11px')
                        .style('left', '0')
                        .style('transform', `translate(50%,0)`);
                    //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
                }
                else {
                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
                    const translatePoint = this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2;
                    const yMax = 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) )`);
                    this.tooltip
                        .select('digi-icon-caret-down')
                        .style('position', 'absolute')
                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
                        .style('bottom', '-11.5px');
                }
            }
        };
        // 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.mappedData);
            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.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();
                select(this.legendDiv).select('.legend').selectAll('.legendChip').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);
                this.chartDiv.style['display'] = 'none';
            });
            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.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);
            const duration = 150;
            table
                .style('opacity', 1)
                .transition()
                .duration(150)
                .style('opacity', 0)
                .on('end', () => {
                table.style('display', 'none');
                this.chartDiv.style['display'] = 'flex';
                this.legendDiv.style['display'] = 'grid';
                this.initChain();
                this.svg
                    .attr('opacity', 0)
                    .transition()
                    .duration(duration)
                    .attr('opacity', 1);
                select(this.legendDiv)
                    .style('opacity', 0)
                    .transition('fadeout')
                    .duration(duration)
                    .style('opacity', 1);
            });
        };
        this.afVariation = BarChartVariation.Vertical;
        this.afHeadingLevel = 'h3';
        this.afId = randomIdGenerator('tooltip');
        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')
                this.chartData = data;
            else
                this.chartData = JSON.parse(data);
            this.series = this.chartData.data.series.map(serie => serie.title);
        }
        this.mappedData = this.reshapeData();
        // checking for width of each tick
        this.mappedData.forEach((elem) => {
            if (elem.series.length > this.dataWidth)
                this.dataWidth = elem.series.length;
        });
        if (this.dataWidth > 1)
            this.barGap = 1;
    }
    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('.chartSVG').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.setDims();
        this.setMinMax();
        this.setMargins();
        // Appending svg
        this.svg = select(this.chartDiv)
            .append('svg')
            .attr('class', 'chartSVG')
            .attr('aria-hidden', true)
            .attr('role', 'img')
            .attr('aria-label', this.chartData && this.chartData.title
            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
            : 'Stapeldiagram')
            .attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
    }
    initLegend() {
        const rectSize = 18;
        const legendData = this.chartData.data.series.map(serie => serie.title);
        if (this.chartData.data.averageLine)
            legendData.push(this.chartData.data.averageLine.text);
        const legendChips = select(this.legendDiv).select('.legend')
            .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
            .style('margin-top', '0.5rem')
            .selectAll('.legendChip')
            .data(legendData)
            .join('div')
            .attr('class', 'legendChip')
            .style('display', 'flex')
            .style('flex-direction', 'row')
            .style('align-items', 'center')
            .style('gap', '0.25rem')
            .style('cursor', 'default')
            .on('mouseenter', (_event, serie) => this.highlightBars(serie))
            .on('mouseleave', this.resetBarColor);
        legendChips.append('svg')
            .attr('width', rectSize + 1)
            .attr('height', rectSize + 1)
            .append('rect')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', rectSize)
            .attr('height', rectSize)
            .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);
        if (this.chartData.data.averageLine) {
            const averageLine = legendChips.filter(':last-child')
                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
            const miniSVG = averageLine
                .select('svg')
                .attr('width', rectSize * 2);
            miniSVG.select('rect').remove();
            miniSVG.append('line')
                .attr('x1', 1)
                .attr('x2', rectSize * 2 - 1)
                .attr('y1', rectSize / 2 + 1)
                .attr('y2', rectSize / 2 + 1)
                .attr('stroke', 'var(--digi--color--infographic--lineart)')
                .attr('stroke-linecap', 'round')
                .attr('stroke-dasharray', '12, 7');
        }
    }
    initToolTip() {
        // Getting handle for tooltip
        this.tooltip = select('#' + this.afId);
        this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
        this.tooltip.selectAll('.tooltipHeading').remove();
        this.tooltip
            .select('.tooltipHead')
            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
            .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
            .style('text-wrap', 'wrap')
            .style('font-size', '1rem')
            .style('margin', '0 0.75rem 0.25rem 0 ')
            .style('font-weight', '500');
        this.tooltip.style('display', 'none');
    }
    initEmpty() {
        select(this.chartDiv).select('.chartSVG').remove();
        this.maxHeight = select(this.host)
            .node()
            .parentNode.getBoundingClientRect().height;
        this.barChartObserver.observe(this.chartDiv);
        this.setDims();
        // Getting rem-size
        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
        this.setMargins();
        // Appending svg
        this.svg = select(this.chartDiv)
            .append('svg')
            .attr('class', 'chartSVG')
            .attr('aria-hidden', true)
            .attr('role', 'img')
            .attr('aria-label', this.chartData && this.chartData.title
            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
        // Hide unusable components
        select(this.titleDiv)
            .select(this.afHeadingLevel)
            .html(`${_t.loading}...`);
        this.initYAxis(true);
        this.initXAxis(true);
        this.tooltip = select('#' + this.afId);
        this.tooltip.style('display', 'none');
        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('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('.interactiveElements').remove();
            this.barSelection = this.barChartContainer
                .append('g')
                .attr('class', 'interactiveElements')
                .style('isolation', 'isolate')
                .selectAll('barGroup')
                .data(this.mappedData)
                .join('g')
                .attr('class', 'barGroup')
                .attr('id', (d) => this.barGroupID(d.key));
            this.barSelection.selectAll('bar')
                .data((d) => {
                return d.series;
            })
                .join('rect')
                .attr('class', 'bar')
                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                ? this.yScale(d.key)
                : this.dims.height - this.margin.bottom)
                .attr('x', this.xFunction)
                .attr('ry', 4)
                .attr('rx', 4)
                .attr('width', this.widthFunction)
                .attr('height', () => 0)
                .attr('fill', 'gray');
            this.barChartContainer.selectAll('.bar')
                .transition('animateBar')
                .duration(400)
                .delay((...[, i]) => i * 150)
                .attr('y', this.yFunction)
                .attr('height', this.heightFunction);
            this.barChartContainer.selectAll('.bar')
                .transition('animateBar')
                .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('.bar')
                .transition('animateBar')
                .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
            .append('g')
            .attr('class', 'interactiveElements')
            .style('isolation', 'isolate')
            .selectAll('barGroup')
            .data(this.mappedData)
            .join('g')
            .attr('class', 'barGroup')
            .attr('id', (d) => this.barGroupID(d.key));
        this.barSelection.selectAll('.barGroup')
            .data((d) => {
            return d.series;
        })
            .join('rect')
            .attr('class', 'bar')
            .style('cursor', 'pointer')
            .attr('x', this.xFunction)
            .attr('y', this.yFunction)
            .attr('ry', 4)
            .attr('rx', 4)
            .attr('width', this.widthFunction)
            .attr('height', this.heightFunction)
            .attr('fill', (d) => this.colorFunction(d.serie))
            .on('mouseenter', this.hover)
            .on('mouseleave', this.hoverOut)
            .on('click', this.openTooltip);
    }
    initBarText() {
        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 = this.barChartContainer
            .selectAll('.barGroup')
            .append('text');
        this.textSelection
            .text((d) => {
            return d.value ? d.value.toLocaleString(undefined, this.numberFormat) : undefined;
        })
            .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.initLegend();
        this.initToolTip();
        this.initYAxis();
        this.initXAxis();
        this.initBars();
        this.averageLine();
        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();
                this.initLegend();
            }
            // Disconnect resize observer while adjusting things
            this.barChartObserver.disconnect();
            this.setMinMax();
            const newHeight = this.setDims();
            this.transitionTitle();
            this.svg
                .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.barChartContainer.selectAll('.barGroup').on('end', null);
                select(this.titleDiv).select('.loadingHeader').remove();
                this.loading = false;
                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
                this.barChartContainer.selectAll('.bar').transition()
                    .duration(this.defaultDuration)
                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                    ? this.yScale(d.key)
                    : this.dims.height - this.margin.bottom)
                    .attr('height', () => 0)
                    .on('end', (...[, i]) => {
                    if (i === this.placeholderTicks.length - 1) {
                        this.updateBars();
                        this.barChartObserver.observe(this.chartDiv);
                    }
                });
                this.setTickInteraction();
            }
            else {
                this.setNamedTicks(true);
                // Removing first tick, because it aligns with y-axis domain
                this.updateBars();
            }
        }
    }
    // Getting correct color given index or name of data serie
    colorFunction(input) {
        var _a;
        if (typeof input === 'number') {
            return this.evalColorVar(this.colorPalettes[input]);
        }
        else {
            const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
            if (index > 0) {
                if ((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern)
                    return 'url(#prognosis)';
                else
                    return this.evalColorVar(this.colorPalettes[index]);
            }
            else
                return this.evalColorVar(this.colorPalettes[0]);
        }
    }
    // Resizing bar chart
    resize() {
        const newHeight = this.setDims();
        //this.setMargins();
        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.setTickInteraction();
        this.averageLine();
        this.adjustBarSize();
        this.adjustBarText();
        if (this.tooltip.style('display') !== 'none')
            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;
    }
    adjustColor(color, amount) {
        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);
    }
    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" style="width:100%" 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.style('display', 'flex').style('height', '100%').style('width', '100%');
    }
    // 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;
        // Setting header
        let heading = '';
        if (this.chartData) {
            if (!this.chartData.subTitle)
                heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}>`;
            else
                heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
            if (this.chartData.infoText)
                heading = `${heading}<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span>`;
        }
        return (h(Host, { key: 'd39019eecd4013769648a7cdb1e5dc48712de934', ref: (el) => (this.host = el) }, h("svg", { key: '9e4dbfcd19038c6b9c8cfe26b4e8b3c5ef624896', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '9ed2bc8b3064642d01e9028fa91c55577ed2da1c' }, h("pattern", { key: 'ca867a03dac364d29de422bc074c7ff3a8bac858', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '2f2169ba84fcbb198a8f109bc57971beb3c3ca09', width: "8", height: "8", fill: 'white' }), h("line", { key: 'ad51412cb272233eb58a82a293643c4e865e34e9', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'ecc0ffeb0eda0d84102678c17163d0afc472cde5', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: 'ca9a51785850ea8e26f4ca3b84dc28401325af63', width: "8", height: "8", fill: 'white' }), h("line", { key: 'd7dd225c20b588f74bff91d44ff5abc8839bc445', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '654a002d89f6ce33fc4958afe3997829511b867e', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '6d0286f1d11de92c88083618d4acb3300f36857d', width: "8", height: "8", fill: 'white' }), h("line", { key: '4acd94253dbdb1fc85090d677d246028a6e595d6', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '9022c75fa8077b2c025aac91b8c1a565b50ad8f0', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '4a28b8506806ca2418fd21512460baebe84614d5', class: "chartTitle", innerHTML: heading }), 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() : ''}` }, h("digi-icon-table", { key: '803f63ac1912c5979c43e7c58d28591a1d6ce461', slot: "icon" }), "Visa tabell"), 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() : ''}` }, h("digi-icon-chart", { key: 'f92c2eb9f08bf7f13a7eaea287b80a233efd95ef', slot: "icon" }), "Visa diagram"), h("div", { key: 'ee5b3ad8cdcfcf00891f56f7a7e738adf76f36c1', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'cbc0c8724ac73a07a4f2d01044d4928214e63f43', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '52cb24ae1a29f5381860031513b7b9e835044935', class: "chartTooltip", id: this.afId }, h("div", { key: '17c4c08dcf63cd263db4f32fecae7ec5216e3014', class: "tooltipHead" }, h("digi-icon-x", { key: 'f44a9a534ae02fe674fc0f9161e5c4b5a3eecb30', class: "tooltipClose" })), h("div", { key: 'ffbe44f6a8db4dc67d6980bd69ca2209e4a75745', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '5d9cce591ea02a7b8ebdb42af55f378ee064a48a', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '8b8b7cd614e5d6202bfce04e57c98ee040f15dab', class: "legend" })), h("div", { key: '64a35d431e28638ffece4dd12bdf04678ed13768', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "afChartData": ["afChartDataUpdate"]
    }; }
    static get style() { return DigiBarChartStyle0; }
}, [2, "digi-bar-chart", {
        "afVariation": [1, "af-variation"],
        "afHeadingLevel": [1, "af-heading-level"],
        "afId": [1, "af-id"],
        "afChartData": [1025, "af-chart-data"]
    }, undefined, {
        "afChartData": ["afChartDataUpdate"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-bar-chart", "digi-button", "digi-icon-caret-down", "digi-icon-caret-up", "digi-icon-chart", "digi-icon-table", "digi-icon-x", "digi-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-bar-chart":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, barChart);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "digi-icon-caret-down":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "digi-icon-caret-up":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "digi-icon-chart":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "digi-icon-table":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-icon-x":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiBarChart = barChart;
const defineCustomElement = defineCustomElement$1;

export { DigiBarChart, defineCustomElement };
