@designsystem-se/af 32.3.0 → 32.3.1-beta.1

package/components/digi-bar-chart.js

@@ -603,7 +603,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                             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)) + '...');
+                        return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
                     }));
                 }
                 else {
@@ -624,13 +624,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         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)) + '...');
+                        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)) + '...');
+                        return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
                     }));
                 }
             }
@@ -1476,7 +1476,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
         }
-        return (h(Host, { key: '6542bfbcbf8ab501505bbbb8de22e2f974199c17', ref: (el) => (this._host = el) }, h("div", { key: '545d724643358ff83253d7851aee53fd552d1bd2', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'e6405ea7d4ab0f499db6b7c3bf9fb1d0b9d8ba2a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'a51a759093334d02ed4f85374b7c7f6645d26f09', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '0531f03eaae69b9209be45523d00aeed203d3f6c', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '3db29cd19057f2f441183f91eaee4bae49502f76', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'f95b9969e3516e0ef1d03152644b56009e583e1f', slot: "icon" }), "Visa diagram"), h("div", { key: '154173339889b8ae0187491b2392ed45ed6dceca', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '7d01d6003d06b03a5b3005b641f76e658876b688', class: "chartTooltip", id: this.afId }, h("div", { key: '643206324382099ce1acee66b8c409048b736755', class: "tooltipBody" }), h("digi-icon-x", { key: '70a296e1278e914d46c80ae84132dbc4fba5e6d4', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '4af7c0b6fbcf3b08694b9b500cb09f1f2433598a', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '5ea7297db866d101b0872d34d28a0c6bf91459ee', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'db2fc9424b364b092ce5f323717d70713d86fd6a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/digi-chart-line.js

@@ -2163,9 +2163,10 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             .data([text])
             .join('text')
             .attr('font-size', this.fontSize)
+            .attr('font-family', 'sans-serif')
             .text((d) => d)
             .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength();
+            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life 
             textWidth.push(thisWidth);
             nodelist[i].remove();
         });
@@ -2174,16 +2175,18 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
     }
     // Goes through all tick values and checks the biggest in size, this one will decide the default tick-size
     setTickSize() {
+        // Padding on both sides comined
+        const textPadding = 25; // 12.5 pixel padding on each side
         if (this._chartData.data.xValueNames) {
             for (const elem of this._chartData.data.xValueNames) {
-                const size = this.getTextSize(elem);
+                const size = this.getTextSize(elem) + textPadding;
                 if (size > this._tickSize)
                     this._tickSize = size;
             }
         }
         else {
             for (const elem of this._chartData.data.xValues) {
-                const size = this.getTextSize(elem.toString());
+                const size = this.getTextSize(elem.toString()) + textPadding;
                 if (size > this._tickSize)
                     this._tickSize = size;
             }
@@ -2301,7 +2304,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: '599b0ceed35f5372d1fbab921a637e9435273014', ref: (el) => (this._host = el) }, h("div", { key: '7d30965d31f83efe4a5595b6d1142bc0367f0663', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '3de359b224ed3bba175db33e5aec7216b8994e48', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'd63d39502bb4f527f80873acf1dc9b6aa83d9b32', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '59bc7601399c0dd03f29b490e627b4b489f2ce47', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '43cd8c5f4d3e75b05dfaec827803e5f0e026cdfe', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'b7ee0fda3ec7d3a484edefba7013b2228d5fb13b', slot: "icon" }), "Visa diagram"), h("div", { key: '3e218f0ae719329d770bbf40015d14b7eea69030', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '81180bbc15847c234f28b197747e4b7f49ba249a', class: "chartTooltip", id: this.afId }, h("div", { key: '0a35223f2243858cd475d21918ed42d28f84e51f', class: "tooltipBody" }), h("digi-icon-x", { key: 'dfd78720458cde92bc08839d6d158709466feb8c', class: "close" }), ' '), h("div", { key: 'b6170e2955828a957f1f2b34dc3c9f1ef7ee2e2f', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'c2f92a38360c0f33464948ae3deea1e3a73d37c8', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '0f8dee442695c4de67f35b574c06a89f1835c9b9', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return this; }
     static get watchers() { return {