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

package/components/digi-bar-chart.js

@@ -101,6 +101,9 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         // 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;
+        this.barGap = 0;
         this._dims = {};
         this._margin = {
             bottom: 0,
@@ -118,6 +121,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         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(() => {
@@ -163,12 +167,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 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());
+                .attr('x', this.xFunction)
+                .attr('width', this.widthFunction);
             this.setValueTicks();
         };
         // Adding click listener for tool tip text
@@ -257,7 +257,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         this.updateBars = (fromLoading) => {
             this._barChartContainer
                 .selectAll('.barGroup')
-                .data(this.reshapeData)
+                .data(this.mappedData)
                 .join((enter) => {
                 var _a, _b;
                 const tempSelection = enter
@@ -288,17 +288,9 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                     .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('width', this.widthFunction)
+                    .attr('y', this.yFunction)
+                    .attr('height', this.heightFunction)
                     .attr('fill', '#00005a');
                 if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
                     return tempSelection;
@@ -370,15 +362,11 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         .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('x', this.xFunction)
                         .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('width', this.widthFunction)
                         .attr('height', () => this.afVariation === BarChartVariation.Horizontal
                         ? this._yScale.bandwidth()
                         : 0)
@@ -386,14 +374,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         .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))
+                        .attr('y', this.yFunction)
+                        .attr('height', this.heightFunction)
                         .on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
                 }
                 else {
@@ -402,20 +384,10 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         .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('x', this.xFunction)
+                        .attr('y', this.yFunction)
+                        .attr('width', this.widthFunction)
+                        .attr('height', this.heightFunction)
                         .attr('fill', '#00005a');
                 }
                 return update
@@ -506,37 +478,67 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             const toReturn = [];
             if (this._loading) {
                 this._placeholderTicks.forEach((key) => {
-                    toReturn.push({
+                    const tick = { key: key, series: [] };
+                    tick.series.push({
                         key: key,
+                        serie: '',
                         value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
-                        len: '1'
+                        len: 0
                     });
+                    toReturn.push(tick);
                 });
                 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())
+                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);
             });
             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));
+            this._barSelection.selectAll('.bar')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction);
+        };
+        // 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);
         };
         // Resize table
         this.resizeTable = () => {
@@ -776,16 +778,16 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             select(event.target)
                 .transition('hover')
                 .duration(20)
-                .attr('fill', event.target.tagName === 'rect'
-                ? '#4C4C8B'
-                : 'var(--digi--color--text--link-hover)');
+                .attr('fill', (d) => event.target.tagName === 'rect'
+                ? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
+                : 'var(--digi--color--background--interactive--hover--tertiary)');
         };
         // Removing highlight from bar
         this.hoverOut = (event) => {
             select(event.target)
                 .transition('hover')
                 .duration(this.defaultDuration)
-                .attr('fill', event.target.tagName === 'rect' ? '#00005a' : '#333333');
+                .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
         };
         this.openTooltip = (...[, d]) => {
             // If type is string, the user has clicked on a y-axis tick
@@ -854,7 +856,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             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);
+            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();
@@ -925,6 +927,14 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             this._chartData = data;
         else
             this._chartData = JSON.parse(data);
+        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;
@@ -1044,7 +1054,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             this._barChartContainer.selectAll('.barGroup').remove();
             this._barSelection = this._barChartContainer
                 .selectAll('barGroup')
-                .data(this.reshapeData)
+                .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
                 .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
@@ -1055,26 +1065,17 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .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('x', this.xFunction)
                 .attr('ry', 4)
                 .attr('rx', 4)
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
+                .attr('width', this.widthFunction)
                 .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));
+                .attr('y', this.yFunction)
+                .attr('height', this.heightFunction);
             this._barSelection
                 .transition()
                 .duration(400)
@@ -1164,7 +1165,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.setValueTicks();
             // Removing first tick, because it aligns with y-axis domain
-            this._xAxisHandle.select('.tick').select('line').remove();
+            //this._xAxisHandle.select('.tick').select('line').remove();
         }
         else {
             if (!empty) {
@@ -1178,39 +1179,41 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     initBars() {
         this._barSelection = this._barChartContainer
             .selectAll('barGroup')
-            .data(this.reshapeData)
+            .data(this.mappedData)
             .join('g')
             .attr('class', 'barGroup')
-            .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
-            .append('rect')
+            .attr('id', (d) => {
+            return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
+        });
+        this._barSelection.selectAll('.barGroup')
+            .data((d) => {
+            return d.series;
+        })
+            .join('rect')
             .attr('class', 'bar')
-            .style('cursor', 'pointer');
-        this._barSelection
-            .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale(d.key)
-            : this._yScale(d.value))
-            .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? 2
-            : this._xScale(d.key))
+            .style('cursor', 'pointer')
+            .attr('x', this.xFunction)
+            .attr('y', this.yFunction)
             .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')
+            .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) => d.value.toLocaleString(undefined, this._numberFormat))
+            .text((d) => {
+            return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
+        })
             .attr('class', 'barText')
             .attr('font-size', this.fontSize)
             .attr('font-weight', '600')
@@ -1348,6 +1351,18 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             }
         }
     }
+    // Getting correct color given index or name of data serie
+    colorFunction(input) {
+        if (typeof input === 'number')
+            return `var(${this.colorPalettes[input]})`;
+        else {
+            const index = this._chartData.data.series.findIndex((serie) => serie.title === input);
+            if (index > 0)
+                return `var(${this.colorPalettes[index]})`;
+            else
+                return `var(${this.colorPalettes[0]})`;
+        }
+    }
     // Resizing bar chart
     resize() {
         var _a;
@@ -1428,11 +1443,11 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     }
     // Not currently used
     /*get cssModifiers() {
-          return {
-              'digi-bar-chart--vertical': this.afVariation == 'vertical',
-              'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
-          };
-      }*/
+      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 = [];
@@ -1502,7 +1517,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
 				<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) }, ' ')));
+        return (h(Host, { key: 'a1e4aaa788766d54c691e95b7e70932b0e7d2b05', ref: (el) => (this._host = el) }, h("div", { key: '2fac926d196acaa20ab5f438968e3c98c08dd104', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '16d8cbd0f03a2a2d24d3366ab1b3eaed797dd361', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '22a93add4a7f1ea3965ce496f2b5cbf488b01314', 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: '152938d206dc00e2fb88b52d332960cbeda2c045', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '66db213ee1c4cb169c7c257853a15a468bf2a83e', 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: 'ac4b8adad6ace97f50591cd39b8b0082d067f069', slot: "icon" }), "Visa diagram"), h("div", { key: 'b28e00a40b5c1a2919146ec4815f23a14fdfac50', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '63f80744faa1d4b3d7d62bece3b5c446eda3ae7b', class: "chartTooltip", id: this.afId }, h("div", { key: '8c9fa9388b9bfc071c4a594275159eb36a8ec43b', class: "tooltipBody" }), h("digi-icon-x", { key: '252d12a937e5276381fa40ec3bb4e77c259da9c1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '9b70433c310882bd0a06784ca1fa21c5b2dd9e52', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '459e38448e29eea1fa7a10de7f3f1f06b6404eab', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'cc655054cb3c3688c75060ebbdf6c3f8ea4ad712', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get hostElement() { return this; }
     static get watchers() { return {