@designsystem-se/af 35.4.1-beta.2 → 35.4.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/digi-bar-chart.js +26 -14
- package/dist/cjs/digi-bar-chart_27.cjs.entry.js +26 -14
- package/dist/collection/components/_chart/bar-chart/bar-chart.css +4 -2
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +25 -13
- package/dist/collection/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +1 -0
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-0030ed70.entry.js +1 -0
- package/dist/esm/digi-bar-chart_27.entry.js +26 -14
- package/hydrate/index.js +26 -14
- package/hydrate/index.mjs +26 -14
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-44da2e39.entry.js +0 -1
|
@@ -130,7 +130,7 @@ function band() {
|
|
|
130
130
|
return initRange.apply(rescale(), arguments);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
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;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 .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}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{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 .
|
|
133
|
+
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 .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}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{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}";
|
|
134
134
|
const DigiBarChartStyle0 = barChartCss;
|
|
135
135
|
|
|
136
136
|
const barChart = class {
|
|
@@ -711,7 +711,10 @@ const barChart = class {
|
|
|
711
711
|
this.dims = select(this.chartDiv).node().getBoundingClientRect();
|
|
712
712
|
this.dims.height =
|
|
713
713
|
this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
|
|
714
|
-
|
|
714
|
+
// Making sure height and width are defined
|
|
715
|
+
this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
|
|
716
|
+
this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
|
|
717
|
+
return prevHeight !== this.dims.height;
|
|
715
718
|
};
|
|
716
719
|
// Setting margins given text size
|
|
717
720
|
this.setMargins = (fromLoading) => {
|
|
@@ -1131,7 +1134,8 @@ const barChart = class {
|
|
|
1131
1134
|
this.chartData = data;
|
|
1132
1135
|
else
|
|
1133
1136
|
this.chartData = JSON.parse(data);
|
|
1134
|
-
|
|
1137
|
+
if (this.chartData)
|
|
1138
|
+
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1135
1139
|
this.mappedData = this.reshapeData();
|
|
1136
1140
|
// checking for width of each tick
|
|
1137
1141
|
this.mappedData.forEach((elem) => {
|
|
@@ -1221,29 +1225,31 @@ const barChart = class {
|
|
|
1221
1225
|
initToolTip() {
|
|
1222
1226
|
// Getting handle for tooltip
|
|
1223
1227
|
this.tooltip = select('#' + this.afId);
|
|
1224
|
-
this.tooltip.select('.
|
|
1228
|
+
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1225
1229
|
// Add heading placeholder for heading
|
|
1226
1230
|
this.tooltip
|
|
1227
1231
|
.select('.tooltipHead')
|
|
1228
1232
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1229
1233
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1230
1234
|
.style('font-size', '1rem')
|
|
1231
|
-
.style('margin', '0 0.75rem 0.
|
|
1235
|
+
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1232
1236
|
.style('font-weight', '500');
|
|
1233
1237
|
this.tooltip.style('visibility', 'hidden');
|
|
1234
1238
|
}
|
|
1235
1239
|
initEmpty() {
|
|
1236
|
-
select(this.chartDiv).select('
|
|
1240
|
+
select(this.chartDiv).select('.chartSVG').remove();
|
|
1237
1241
|
this.maxHeight = select(this.host)
|
|
1238
1242
|
.node()
|
|
1239
1243
|
.parentNode.getBoundingClientRect().height;
|
|
1240
1244
|
this.barChartObserver.observe(this.chartDiv);
|
|
1245
|
+
this.setDims();
|
|
1241
1246
|
// Getting rem-size
|
|
1242
1247
|
this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
1243
1248
|
this.setMargins();
|
|
1244
1249
|
// Appending svg
|
|
1245
1250
|
this.svg = select(this.chartDiv)
|
|
1246
1251
|
.append('svg')
|
|
1252
|
+
.attr('class', 'chartSVG')
|
|
1247
1253
|
.attr('aria-hidden', true)
|
|
1248
1254
|
.attr('role', 'img')
|
|
1249
1255
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
@@ -1255,10 +1261,13 @@ const barChart = class {
|
|
|
1255
1261
|
.html(`${_t.loading}...`);
|
|
1256
1262
|
this.initYAxis(true);
|
|
1257
1263
|
this.initXAxis(true);
|
|
1264
|
+
this.tooltip = select('#' + this.afId);
|
|
1265
|
+
this.tooltip.style('visibility', 'hidden');
|
|
1258
1266
|
this.loadingState(true);
|
|
1259
1267
|
}
|
|
1260
1268
|
loadingState(empty) {
|
|
1261
1269
|
this.loading = true;
|
|
1270
|
+
console.log('loading!');
|
|
1262
1271
|
// close potentially open tooltip
|
|
1263
1272
|
if (this.tooltip)
|
|
1264
1273
|
this.closeTooltip();
|
|
@@ -1304,11 +1313,13 @@ const barChart = class {
|
|
|
1304
1313
|
.data(this.mappedData)
|
|
1305
1314
|
.join('g')
|
|
1306
1315
|
.attr('class', 'barGroup')
|
|
1307
|
-
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
|
|
1308
|
-
|
|
1316
|
+
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
1317
|
+
this.barSelection.selectAll('.barGroup')
|
|
1318
|
+
.data((d) => {
|
|
1319
|
+
return d.series;
|
|
1320
|
+
})
|
|
1321
|
+
.join('rect')
|
|
1309
1322
|
.attr('class', 'bar')
|
|
1310
|
-
.style('cursor', 'pointer');
|
|
1311
|
-
this.barSelection
|
|
1312
1323
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
1313
1324
|
? this.yScale(d.key)
|
|
1314
1325
|
: this.dims.height - this.margin.bottom)
|
|
@@ -1317,13 +1328,14 @@ const barChart = class {
|
|
|
1317
1328
|
.attr('rx', 4)
|
|
1318
1329
|
.attr('width', this.widthFunction)
|
|
1319
1330
|
.attr('height', () => 0)
|
|
1320
|
-
.attr('fill', 'gray')
|
|
1321
|
-
|
|
1331
|
+
.attr('fill', 'gray');
|
|
1332
|
+
this.barChartContainer.selectAll('.bar')
|
|
1333
|
+
.transition('animateBar')
|
|
1322
1334
|
.duration(400)
|
|
1323
1335
|
.delay((...[, i]) => i * 150)
|
|
1324
1336
|
.attr('y', this.yFunction)
|
|
1325
1337
|
.attr('height', this.heightFunction);
|
|
1326
|
-
this.
|
|
1338
|
+
this.barChartContainer.selectAll('.bar')
|
|
1327
1339
|
.transition()
|
|
1328
1340
|
.duration(400)
|
|
1329
1341
|
.ease(linear$1)
|
|
@@ -1769,7 +1781,7 @@ const barChart = class {
|
|
|
1769
1781
|
<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>`;
|
|
1770
1782
|
}
|
|
1771
1783
|
}
|
|
1772
|
-
return (h(Host, { key: '
|
|
1784
|
+
return (h(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1773
1785
|
}
|
|
1774
1786
|
get hostElement() { return getElement(this); }
|
|
1775
1787
|
static get watchers() { return {
|
package/hydrate/index.js
CHANGED
|
@@ -35686,7 +35686,7 @@ class UtilResizeObserver {
|
|
|
35686
35686
|
}; }
|
|
35687
35687
|
}
|
|
35688
35688
|
|
|
35689
|
-
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;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 .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}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{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 .
|
|
35689
|
+
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 .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}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{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}";
|
|
35690
35690
|
var DigiBarChartStyle0 = barChartCss;
|
|
35691
35691
|
|
|
35692
35692
|
/**
|
|
@@ -36273,7 +36273,10 @@ class barChart {
|
|
|
36273
36273
|
this.dims = select(this.chartDiv).node().getBoundingClientRect();
|
|
36274
36274
|
this.dims.height =
|
|
36275
36275
|
this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
|
|
36276
|
-
|
|
36276
|
+
// Making sure height and width are defined
|
|
36277
|
+
this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
|
|
36278
|
+
this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
|
|
36279
|
+
return prevHeight !== this.dims.height;
|
|
36277
36280
|
};
|
|
36278
36281
|
// Setting margins given text size
|
|
36279
36282
|
this.setMargins = (fromLoading) => {
|
|
@@ -36693,7 +36696,8 @@ class barChart {
|
|
|
36693
36696
|
this.chartData = data;
|
|
36694
36697
|
else
|
|
36695
36698
|
this.chartData = JSON.parse(data);
|
|
36696
|
-
|
|
36699
|
+
if (this.chartData)
|
|
36700
|
+
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
36697
36701
|
this.mappedData = this.reshapeData();
|
|
36698
36702
|
// checking for width of each tick
|
|
36699
36703
|
this.mappedData.forEach((elem) => {
|
|
@@ -36783,29 +36787,31 @@ class barChart {
|
|
|
36783
36787
|
initToolTip() {
|
|
36784
36788
|
// Getting handle for tooltip
|
|
36785
36789
|
this.tooltip = select('#' + this.afId);
|
|
36786
|
-
this.tooltip.select('.
|
|
36790
|
+
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
36787
36791
|
// Add heading placeholder for heading
|
|
36788
36792
|
this.tooltip
|
|
36789
36793
|
.select('.tooltipHead')
|
|
36790
36794
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
36791
36795
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
36792
36796
|
.style('font-size', '1rem')
|
|
36793
|
-
.style('margin', '0 0.75rem 0.
|
|
36797
|
+
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36794
36798
|
.style('font-weight', '500');
|
|
36795
36799
|
this.tooltip.style('visibility', 'hidden');
|
|
36796
36800
|
}
|
|
36797
36801
|
initEmpty() {
|
|
36798
|
-
select(this.chartDiv).select('
|
|
36802
|
+
select(this.chartDiv).select('.chartSVG').remove();
|
|
36799
36803
|
this.maxHeight = select(this.host)
|
|
36800
36804
|
.node()
|
|
36801
36805
|
.parentNode.getBoundingClientRect().height;
|
|
36802
36806
|
this.barChartObserver.observe(this.chartDiv);
|
|
36807
|
+
this.setDims();
|
|
36803
36808
|
// Getting rem-size
|
|
36804
36809
|
this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
36805
36810
|
this.setMargins();
|
|
36806
36811
|
// Appending svg
|
|
36807
36812
|
this.svg = select(this.chartDiv)
|
|
36808
36813
|
.append('svg')
|
|
36814
|
+
.attr('class', 'chartSVG')
|
|
36809
36815
|
.attr('aria-hidden', true)
|
|
36810
36816
|
.attr('role', 'img')
|
|
36811
36817
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
@@ -36817,10 +36823,13 @@ class barChart {
|
|
|
36817
36823
|
.html(`${_t.loading}...`);
|
|
36818
36824
|
this.initYAxis(true);
|
|
36819
36825
|
this.initXAxis(true);
|
|
36826
|
+
this.tooltip = select('#' + this.afId);
|
|
36827
|
+
this.tooltip.style('visibility', 'hidden');
|
|
36820
36828
|
this.loadingState(true);
|
|
36821
36829
|
}
|
|
36822
36830
|
loadingState(empty) {
|
|
36823
36831
|
this.loading = true;
|
|
36832
|
+
console.log('loading!');
|
|
36824
36833
|
// close potentially open tooltip
|
|
36825
36834
|
if (this.tooltip)
|
|
36826
36835
|
this.closeTooltip();
|
|
@@ -36866,11 +36875,13 @@ class barChart {
|
|
|
36866
36875
|
.data(this.mappedData)
|
|
36867
36876
|
.join('g')
|
|
36868
36877
|
.attr('class', 'barGroup')
|
|
36869
|
-
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
|
|
36870
|
-
|
|
36878
|
+
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
36879
|
+
this.barSelection.selectAll('.barGroup')
|
|
36880
|
+
.data((d) => {
|
|
36881
|
+
return d.series;
|
|
36882
|
+
})
|
|
36883
|
+
.join('rect')
|
|
36871
36884
|
.attr('class', 'bar')
|
|
36872
|
-
.style('cursor', 'pointer');
|
|
36873
|
-
this.barSelection
|
|
36874
36885
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36875
36886
|
? this.yScale(d.key)
|
|
36876
36887
|
: this.dims.height - this.margin.bottom)
|
|
@@ -36879,13 +36890,14 @@ class barChart {
|
|
|
36879
36890
|
.attr('rx', 4)
|
|
36880
36891
|
.attr('width', this.widthFunction)
|
|
36881
36892
|
.attr('height', () => 0)
|
|
36882
|
-
.attr('fill', 'gray')
|
|
36883
|
-
|
|
36893
|
+
.attr('fill', 'gray');
|
|
36894
|
+
this.barChartContainer.selectAll('.bar')
|
|
36895
|
+
.transition('animateBar')
|
|
36884
36896
|
.duration(400)
|
|
36885
36897
|
.delay((...[, i]) => i * 150)
|
|
36886
36898
|
.attr('y', this.yFunction)
|
|
36887
36899
|
.attr('height', this.heightFunction);
|
|
36888
|
-
this.
|
|
36900
|
+
this.barChartContainer.selectAll('.bar')
|
|
36889
36901
|
.transition()
|
|
36890
36902
|
.duration(400)
|
|
36891
36903
|
.ease(linear$1)
|
|
@@ -37331,7 +37343,7 @@ class barChart {
|
|
|
37331
37343
|
<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>`;
|
|
37332
37344
|
}
|
|
37333
37345
|
}
|
|
37334
|
-
return (hAsync(Host, { key: '
|
|
37346
|
+
return (hAsync(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, hAsync("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, hAsync("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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() : ''}` }, hAsync("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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() : ''}` }, hAsync("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), hAsync("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), hAsync("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37335
37347
|
}
|
|
37336
37348
|
get hostElement() { return getElement(this); }
|
|
37337
37349
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -35682,7 +35682,7 @@ class UtilResizeObserver {
|
|
|
35682
35682
|
}; }
|
|
35683
35683
|
}
|
|
35684
35684
|
|
|
35685
|
-
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;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 .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}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{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 .
|
|
35685
|
+
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 .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}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{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}";
|
|
35686
35686
|
var DigiBarChartStyle0 = barChartCss;
|
|
35687
35687
|
|
|
35688
35688
|
/**
|
|
@@ -36269,7 +36269,10 @@ class barChart {
|
|
|
36269
36269
|
this.dims = select(this.chartDiv).node().getBoundingClientRect();
|
|
36270
36270
|
this.dims.height =
|
|
36271
36271
|
this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
|
|
36272
|
-
|
|
36272
|
+
// Making sure height and width are defined
|
|
36273
|
+
this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
|
|
36274
|
+
this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
|
|
36275
|
+
return prevHeight !== this.dims.height;
|
|
36273
36276
|
};
|
|
36274
36277
|
// Setting margins given text size
|
|
36275
36278
|
this.setMargins = (fromLoading) => {
|
|
@@ -36689,7 +36692,8 @@ class barChart {
|
|
|
36689
36692
|
this.chartData = data;
|
|
36690
36693
|
else
|
|
36691
36694
|
this.chartData = JSON.parse(data);
|
|
36692
|
-
|
|
36695
|
+
if (this.chartData)
|
|
36696
|
+
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
36693
36697
|
this.mappedData = this.reshapeData();
|
|
36694
36698
|
// checking for width of each tick
|
|
36695
36699
|
this.mappedData.forEach((elem) => {
|
|
@@ -36779,29 +36783,31 @@ class barChart {
|
|
|
36779
36783
|
initToolTip() {
|
|
36780
36784
|
// Getting handle for tooltip
|
|
36781
36785
|
this.tooltip = select('#' + this.afId);
|
|
36782
|
-
this.tooltip.select('.
|
|
36786
|
+
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
36783
36787
|
// Add heading placeholder for heading
|
|
36784
36788
|
this.tooltip
|
|
36785
36789
|
.select('.tooltipHead')
|
|
36786
36790
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
36787
36791
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
36788
36792
|
.style('font-size', '1rem')
|
|
36789
|
-
.style('margin', '0 0.75rem 0.
|
|
36793
|
+
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36790
36794
|
.style('font-weight', '500');
|
|
36791
36795
|
this.tooltip.style('visibility', 'hidden');
|
|
36792
36796
|
}
|
|
36793
36797
|
initEmpty() {
|
|
36794
|
-
select(this.chartDiv).select('
|
|
36798
|
+
select(this.chartDiv).select('.chartSVG').remove();
|
|
36795
36799
|
this.maxHeight = select(this.host)
|
|
36796
36800
|
.node()
|
|
36797
36801
|
.parentNode.getBoundingClientRect().height;
|
|
36798
36802
|
this.barChartObserver.observe(this.chartDiv);
|
|
36803
|
+
this.setDims();
|
|
36799
36804
|
// Getting rem-size
|
|
36800
36805
|
this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
36801
36806
|
this.setMargins();
|
|
36802
36807
|
// Appending svg
|
|
36803
36808
|
this.svg = select(this.chartDiv)
|
|
36804
36809
|
.append('svg')
|
|
36810
|
+
.attr('class', 'chartSVG')
|
|
36805
36811
|
.attr('aria-hidden', true)
|
|
36806
36812
|
.attr('role', 'img')
|
|
36807
36813
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
@@ -36813,10 +36819,13 @@ class barChart {
|
|
|
36813
36819
|
.html(`${_t.loading}...`);
|
|
36814
36820
|
this.initYAxis(true);
|
|
36815
36821
|
this.initXAxis(true);
|
|
36822
|
+
this.tooltip = select('#' + this.afId);
|
|
36823
|
+
this.tooltip.style('visibility', 'hidden');
|
|
36816
36824
|
this.loadingState(true);
|
|
36817
36825
|
}
|
|
36818
36826
|
loadingState(empty) {
|
|
36819
36827
|
this.loading = true;
|
|
36828
|
+
console.log('loading!');
|
|
36820
36829
|
// close potentially open tooltip
|
|
36821
36830
|
if (this.tooltip)
|
|
36822
36831
|
this.closeTooltip();
|
|
@@ -36862,11 +36871,13 @@ class barChart {
|
|
|
36862
36871
|
.data(this.mappedData)
|
|
36863
36872
|
.join('g')
|
|
36864
36873
|
.attr('class', 'barGroup')
|
|
36865
|
-
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
|
|
36866
|
-
|
|
36874
|
+
.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
36875
|
+
this.barSelection.selectAll('.barGroup')
|
|
36876
|
+
.data((d) => {
|
|
36877
|
+
return d.series;
|
|
36878
|
+
})
|
|
36879
|
+
.join('rect')
|
|
36867
36880
|
.attr('class', 'bar')
|
|
36868
|
-
.style('cursor', 'pointer');
|
|
36869
|
-
this.barSelection
|
|
36870
36881
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36871
36882
|
? this.yScale(d.key)
|
|
36872
36883
|
: this.dims.height - this.margin.bottom)
|
|
@@ -36875,13 +36886,14 @@ class barChart {
|
|
|
36875
36886
|
.attr('rx', 4)
|
|
36876
36887
|
.attr('width', this.widthFunction)
|
|
36877
36888
|
.attr('height', () => 0)
|
|
36878
|
-
.attr('fill', 'gray')
|
|
36879
|
-
|
|
36889
|
+
.attr('fill', 'gray');
|
|
36890
|
+
this.barChartContainer.selectAll('.bar')
|
|
36891
|
+
.transition('animateBar')
|
|
36880
36892
|
.duration(400)
|
|
36881
36893
|
.delay((...[, i]) => i * 150)
|
|
36882
36894
|
.attr('y', this.yFunction)
|
|
36883
36895
|
.attr('height', this.heightFunction);
|
|
36884
|
-
this.
|
|
36896
|
+
this.barChartContainer.selectAll('.bar')
|
|
36885
36897
|
.transition()
|
|
36886
36898
|
.duration(400)
|
|
36887
36899
|
.ease(linear$1)
|
|
@@ -37327,7 +37339,7 @@ class barChart {
|
|
|
37327
37339
|
<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>`;
|
|
37328
37340
|
}
|
|
37329
37341
|
}
|
|
37330
|
-
return (hAsync(Host, { key: '
|
|
37342
|
+
return (hAsync(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, hAsync("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, hAsync("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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() : ''}` }, hAsync("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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() : ''}` }, hAsync("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), hAsync("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), hAsync("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37331
37343
|
}
|
|
37332
37344
|
get hostElement() { return getElement(this); }
|
|
37333
37345
|
static get watchers() { return {
|
package/package.json
CHANGED