@designsystem-se/af 35.4.1-beta.4 → 35.4.1-beta.5
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 +16 -20
- package/dist/cjs/digi-bar-chart_27.cjs.entry.js +16 -20
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +16 -20
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-42db04e4.entry.js +1 -0
- package/dist/esm/digi-bar-chart_27.entry.js +16 -20
- package/hydrate/index.js +16 -20
- package/hydrate/index.mjs +16 -20
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-0030ed70.entry.js +0 -1
|
@@ -251,8 +251,6 @@ const barChart = class {
|
|
|
251
251
|
// Resizing chart while loading
|
|
252
252
|
this.loadingResize = () => {
|
|
253
253
|
const newHeight = this.setDims();
|
|
254
|
-
this.setMargins(true);
|
|
255
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
256
254
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
257
255
|
this.margin.right =
|
|
258
256
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -277,10 +275,8 @@ const barChart = class {
|
|
|
277
275
|
0,
|
|
278
276
|
this.dims.width - this.margin.right - this.margin.left
|
|
279
277
|
]);
|
|
280
|
-
this.barSelection
|
|
281
|
-
.attr('x', this.xFunction)
|
|
282
|
-
.attr('width', this.widthFunction);
|
|
283
278
|
this.setValueTicks();
|
|
279
|
+
this.adjustBarSize();
|
|
284
280
|
};
|
|
285
281
|
this.highlightBarGroup = (_event, datum) => {
|
|
286
282
|
if (typeof datum === 'string') {
|
|
@@ -987,11 +983,11 @@ const barChart = class {
|
|
|
987
983
|
.html((d) => {
|
|
988
984
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
989
985
|
});
|
|
990
|
-
this.tooltip.style('
|
|
986
|
+
this.tooltip.style('display', null);
|
|
991
987
|
this.positionTooltip(this.tooltipData);
|
|
992
988
|
};
|
|
993
989
|
this.closeTooltip = () => {
|
|
994
|
-
this.tooltip.style('
|
|
990
|
+
this.tooltip.style('display', 'none');
|
|
995
991
|
};
|
|
996
992
|
// Positions tooltip in horizontal mode
|
|
997
993
|
this.positionTooltip = (data) => {
|
|
@@ -1130,12 +1126,13 @@ const barChart = class {
|
|
|
1130
1126
|
this.afChartData = undefined;
|
|
1131
1127
|
}
|
|
1132
1128
|
afChartDataUpdate(data) {
|
|
1133
|
-
if (typeof data
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1129
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
1130
|
+
if (typeof data != 'string')
|
|
1131
|
+
this.chartData = data;
|
|
1132
|
+
else
|
|
1133
|
+
this.chartData = JSON.parse(data);
|
|
1138
1134
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1135
|
+
}
|
|
1139
1136
|
this.mappedData = this.reshapeData();
|
|
1140
1137
|
// checking for width of each tick
|
|
1141
1138
|
this.mappedData.forEach((elem) => {
|
|
@@ -1226,7 +1223,7 @@ const barChart = class {
|
|
|
1226
1223
|
// Getting handle for tooltip
|
|
1227
1224
|
this.tooltip = select('#' + this.afId);
|
|
1228
1225
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1229
|
-
|
|
1226
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
1230
1227
|
this.tooltip
|
|
1231
1228
|
.select('.tooltipHead')
|
|
1232
1229
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -1234,7 +1231,7 @@ const barChart = class {
|
|
|
1234
1231
|
.style('font-size', '1rem')
|
|
1235
1232
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1236
1233
|
.style('font-weight', '500');
|
|
1237
|
-
this.tooltip.style('
|
|
1234
|
+
this.tooltip.style('display', 'none');
|
|
1238
1235
|
}
|
|
1239
1236
|
initEmpty() {
|
|
1240
1237
|
select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -1254,20 +1251,19 @@ const barChart = class {
|
|
|
1254
1251
|
.attr('role', 'img')
|
|
1255
1252
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
1256
1253
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
1257
|
-
: 'Stapeldiagram');
|
|
1254
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1258
1255
|
// Hide unusable components
|
|
1259
1256
|
select(this.titleDiv)
|
|
1260
|
-
.
|
|
1257
|
+
.append(this.afHeadingLevel)
|
|
1261
1258
|
.html(`${_t.loading}...`);
|
|
1262
1259
|
this.initYAxis(true);
|
|
1263
1260
|
this.initXAxis(true);
|
|
1264
1261
|
this.tooltip = select('#' + this.afId);
|
|
1265
|
-
this.tooltip.style('
|
|
1262
|
+
this.tooltip.style('display', 'none');
|
|
1266
1263
|
this.loadingState(true);
|
|
1267
1264
|
}
|
|
1268
1265
|
loadingState(empty) {
|
|
1269
1266
|
this.loading = true;
|
|
1270
|
-
console.log('loading!');
|
|
1271
1267
|
// close potentially open tooltip
|
|
1272
1268
|
if (this.tooltip)
|
|
1273
1269
|
this.closeTooltip();
|
|
@@ -1661,7 +1657,7 @@ const barChart = class {
|
|
|
1661
1657
|
this.averageLine();
|
|
1662
1658
|
this.adjustBarSize();
|
|
1663
1659
|
this.adjustBarText();
|
|
1664
|
-
if (this.tooltip.style('
|
|
1660
|
+
if (this.tooltip.style('display') !== 'none')
|
|
1665
1661
|
this.positionTooltip(this.tooltipData);
|
|
1666
1662
|
}
|
|
1667
1663
|
// Returns the longest text from an array of strings
|
|
@@ -1781,7 +1777,7 @@ const barChart = class {
|
|
|
1781
1777
|
<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>`;
|
|
1782
1778
|
}
|
|
1783
1779
|
}
|
|
1784
|
-
return (h(Host, { key: '
|
|
1780
|
+
return (h(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, h("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, h("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', 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: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', 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: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), h("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, h("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, h("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), h("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), h("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1785
1781
|
}
|
|
1786
1782
|
get hostElement() { return getElement(this); }
|
|
1787
1783
|
static get watchers() { return {
|
package/hydrate/index.js
CHANGED
|
@@ -35813,8 +35813,6 @@ class barChart {
|
|
|
35813
35813
|
// Resizing chart while loading
|
|
35814
35814
|
this.loadingResize = () => {
|
|
35815
35815
|
const newHeight = this.setDims();
|
|
35816
|
-
this.setMargins(true);
|
|
35817
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
35818
35816
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
35819
35817
|
this.margin.right =
|
|
35820
35818
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -35839,10 +35837,8 @@ class barChart {
|
|
|
35839
35837
|
0,
|
|
35840
35838
|
this.dims.width - this.margin.right - this.margin.left
|
|
35841
35839
|
]);
|
|
35842
|
-
this.barSelection
|
|
35843
|
-
.attr('x', this.xFunction)
|
|
35844
|
-
.attr('width', this.widthFunction);
|
|
35845
35840
|
this.setValueTicks();
|
|
35841
|
+
this.adjustBarSize();
|
|
35846
35842
|
};
|
|
35847
35843
|
this.highlightBarGroup = (_event, datum) => {
|
|
35848
35844
|
if (typeof datum === 'string') {
|
|
@@ -36549,11 +36545,11 @@ class barChart {
|
|
|
36549
36545
|
.html((d) => {
|
|
36550
36546
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
36551
36547
|
});
|
|
36552
|
-
this.tooltip.style('
|
|
36548
|
+
this.tooltip.style('display', null);
|
|
36553
36549
|
this.positionTooltip(this.tooltipData);
|
|
36554
36550
|
};
|
|
36555
36551
|
this.closeTooltip = () => {
|
|
36556
|
-
this.tooltip.style('
|
|
36552
|
+
this.tooltip.style('display', 'none');
|
|
36557
36553
|
};
|
|
36558
36554
|
// Positions tooltip in horizontal mode
|
|
36559
36555
|
this.positionTooltip = (data) => {
|
|
@@ -36692,12 +36688,13 @@ class barChart {
|
|
|
36692
36688
|
this.afChartData = undefined;
|
|
36693
36689
|
}
|
|
36694
36690
|
afChartDataUpdate(data) {
|
|
36695
|
-
if (typeof data
|
|
36696
|
-
|
|
36697
|
-
|
|
36698
|
-
|
|
36699
|
-
|
|
36691
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
36692
|
+
if (typeof data != 'string')
|
|
36693
|
+
this.chartData = data;
|
|
36694
|
+
else
|
|
36695
|
+
this.chartData = JSON.parse(data);
|
|
36700
36696
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
36697
|
+
}
|
|
36701
36698
|
this.mappedData = this.reshapeData();
|
|
36702
36699
|
// checking for width of each tick
|
|
36703
36700
|
this.mappedData.forEach((elem) => {
|
|
@@ -36788,7 +36785,7 @@ class barChart {
|
|
|
36788
36785
|
// Getting handle for tooltip
|
|
36789
36786
|
this.tooltip = select('#' + this.afId);
|
|
36790
36787
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
36791
|
-
|
|
36788
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
36792
36789
|
this.tooltip
|
|
36793
36790
|
.select('.tooltipHead')
|
|
36794
36791
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -36796,7 +36793,7 @@ class barChart {
|
|
|
36796
36793
|
.style('font-size', '1rem')
|
|
36797
36794
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36798
36795
|
.style('font-weight', '500');
|
|
36799
|
-
this.tooltip.style('
|
|
36796
|
+
this.tooltip.style('display', 'none');
|
|
36800
36797
|
}
|
|
36801
36798
|
initEmpty() {
|
|
36802
36799
|
select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -36816,20 +36813,19 @@ class barChart {
|
|
|
36816
36813
|
.attr('role', 'img')
|
|
36817
36814
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
36818
36815
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
36819
|
-
: 'Stapeldiagram');
|
|
36816
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
36820
36817
|
// Hide unusable components
|
|
36821
36818
|
select(this.titleDiv)
|
|
36822
|
-
.
|
|
36819
|
+
.append(this.afHeadingLevel)
|
|
36823
36820
|
.html(`${_t.loading}...`);
|
|
36824
36821
|
this.initYAxis(true);
|
|
36825
36822
|
this.initXAxis(true);
|
|
36826
36823
|
this.tooltip = select('#' + this.afId);
|
|
36827
|
-
this.tooltip.style('
|
|
36824
|
+
this.tooltip.style('display', 'none');
|
|
36828
36825
|
this.loadingState(true);
|
|
36829
36826
|
}
|
|
36830
36827
|
loadingState(empty) {
|
|
36831
36828
|
this.loading = true;
|
|
36832
|
-
console.log('loading!');
|
|
36833
36829
|
// close potentially open tooltip
|
|
36834
36830
|
if (this.tooltip)
|
|
36835
36831
|
this.closeTooltip();
|
|
@@ -37223,7 +37219,7 @@ class barChart {
|
|
|
37223
37219
|
this.averageLine();
|
|
37224
37220
|
this.adjustBarSize();
|
|
37225
37221
|
this.adjustBarText();
|
|
37226
|
-
if (this.tooltip.style('
|
|
37222
|
+
if (this.tooltip.style('display') !== 'none')
|
|
37227
37223
|
this.positionTooltip(this.tooltipData);
|
|
37228
37224
|
}
|
|
37229
37225
|
// Returns the longest text from an array of strings
|
|
@@ -37343,7 +37339,7 @@ class barChart {
|
|
|
37343
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>`;
|
|
37344
37340
|
}
|
|
37345
37341
|
}
|
|
37346
|
-
return (hAsync(Host, { key: '
|
|
37342
|
+
return (hAsync(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, hAsync("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, hAsync("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', 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: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', 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: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), hAsync("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), hAsync("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37347
37343
|
}
|
|
37348
37344
|
get hostElement() { return getElement(this); }
|
|
37349
37345
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -35809,8 +35809,6 @@ class barChart {
|
|
|
35809
35809
|
// Resizing chart while loading
|
|
35810
35810
|
this.loadingResize = () => {
|
|
35811
35811
|
const newHeight = this.setDims();
|
|
35812
|
-
this.setMargins(true);
|
|
35813
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
35814
35812
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
35815
35813
|
this.margin.right =
|
|
35816
35814
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -35835,10 +35833,8 @@ class barChart {
|
|
|
35835
35833
|
0,
|
|
35836
35834
|
this.dims.width - this.margin.right - this.margin.left
|
|
35837
35835
|
]);
|
|
35838
|
-
this.barSelection
|
|
35839
|
-
.attr('x', this.xFunction)
|
|
35840
|
-
.attr('width', this.widthFunction);
|
|
35841
35836
|
this.setValueTicks();
|
|
35837
|
+
this.adjustBarSize();
|
|
35842
35838
|
};
|
|
35843
35839
|
this.highlightBarGroup = (_event, datum) => {
|
|
35844
35840
|
if (typeof datum === 'string') {
|
|
@@ -36545,11 +36541,11 @@ class barChart {
|
|
|
36545
36541
|
.html((d) => {
|
|
36546
36542
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
36547
36543
|
});
|
|
36548
|
-
this.tooltip.style('
|
|
36544
|
+
this.tooltip.style('display', null);
|
|
36549
36545
|
this.positionTooltip(this.tooltipData);
|
|
36550
36546
|
};
|
|
36551
36547
|
this.closeTooltip = () => {
|
|
36552
|
-
this.tooltip.style('
|
|
36548
|
+
this.tooltip.style('display', 'none');
|
|
36553
36549
|
};
|
|
36554
36550
|
// Positions tooltip in horizontal mode
|
|
36555
36551
|
this.positionTooltip = (data) => {
|
|
@@ -36688,12 +36684,13 @@ class barChart {
|
|
|
36688
36684
|
this.afChartData = undefined;
|
|
36689
36685
|
}
|
|
36690
36686
|
afChartDataUpdate(data) {
|
|
36691
|
-
if (typeof data
|
|
36692
|
-
|
|
36693
|
-
|
|
36694
|
-
|
|
36695
|
-
|
|
36687
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
36688
|
+
if (typeof data != 'string')
|
|
36689
|
+
this.chartData = data;
|
|
36690
|
+
else
|
|
36691
|
+
this.chartData = JSON.parse(data);
|
|
36696
36692
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
36693
|
+
}
|
|
36697
36694
|
this.mappedData = this.reshapeData();
|
|
36698
36695
|
// checking for width of each tick
|
|
36699
36696
|
this.mappedData.forEach((elem) => {
|
|
@@ -36784,7 +36781,7 @@ class barChart {
|
|
|
36784
36781
|
// Getting handle for tooltip
|
|
36785
36782
|
this.tooltip = select('#' + this.afId);
|
|
36786
36783
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
36787
|
-
|
|
36784
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
36788
36785
|
this.tooltip
|
|
36789
36786
|
.select('.tooltipHead')
|
|
36790
36787
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -36792,7 +36789,7 @@ class barChart {
|
|
|
36792
36789
|
.style('font-size', '1rem')
|
|
36793
36790
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36794
36791
|
.style('font-weight', '500');
|
|
36795
|
-
this.tooltip.style('
|
|
36792
|
+
this.tooltip.style('display', 'none');
|
|
36796
36793
|
}
|
|
36797
36794
|
initEmpty() {
|
|
36798
36795
|
select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -36812,20 +36809,19 @@ class barChart {
|
|
|
36812
36809
|
.attr('role', 'img')
|
|
36813
36810
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
36814
36811
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
36815
|
-
: 'Stapeldiagram');
|
|
36812
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
36816
36813
|
// Hide unusable components
|
|
36817
36814
|
select(this.titleDiv)
|
|
36818
|
-
.
|
|
36815
|
+
.append(this.afHeadingLevel)
|
|
36819
36816
|
.html(`${_t.loading}...`);
|
|
36820
36817
|
this.initYAxis(true);
|
|
36821
36818
|
this.initXAxis(true);
|
|
36822
36819
|
this.tooltip = select('#' + this.afId);
|
|
36823
|
-
this.tooltip.style('
|
|
36820
|
+
this.tooltip.style('display', 'none');
|
|
36824
36821
|
this.loadingState(true);
|
|
36825
36822
|
}
|
|
36826
36823
|
loadingState(empty) {
|
|
36827
36824
|
this.loading = true;
|
|
36828
|
-
console.log('loading!');
|
|
36829
36825
|
// close potentially open tooltip
|
|
36830
36826
|
if (this.tooltip)
|
|
36831
36827
|
this.closeTooltip();
|
|
@@ -37219,7 +37215,7 @@ class barChart {
|
|
|
37219
37215
|
this.averageLine();
|
|
37220
37216
|
this.adjustBarSize();
|
|
37221
37217
|
this.adjustBarText();
|
|
37222
|
-
if (this.tooltip.style('
|
|
37218
|
+
if (this.tooltip.style('display') !== 'none')
|
|
37223
37219
|
this.positionTooltip(this.tooltipData);
|
|
37224
37220
|
}
|
|
37225
37221
|
// Returns the longest text from an array of strings
|
|
@@ -37339,7 +37335,7 @@ class barChart {
|
|
|
37339
37335
|
<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>`;
|
|
37340
37336
|
}
|
|
37341
37337
|
}
|
|
37342
|
-
return (hAsync(Host, { key: '
|
|
37338
|
+
return (hAsync(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, hAsync("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, hAsync("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', 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: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', 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: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), hAsync("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), hAsync("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37343
37339
|
}
|
|
37344
37340
|
get hostElement() { return getElement(this); }
|
|
37345
37341
|
static get watchers() { return {
|
package/package.json
CHANGED