@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
|
@@ -213,8 +213,6 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
213
213
|
// Resizing chart while loading
|
|
214
214
|
this.loadingResize = () => {
|
|
215
215
|
const newHeight = this.setDims();
|
|
216
|
-
this.setMargins(true);
|
|
217
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
218
216
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
219
217
|
this.margin.right =
|
|
220
218
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -239,10 +237,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
239
237
|
0,
|
|
240
238
|
this.dims.width - this.margin.right - this.margin.left
|
|
241
239
|
]);
|
|
242
|
-
this.barSelection
|
|
243
|
-
.attr('x', this.xFunction)
|
|
244
|
-
.attr('width', this.widthFunction);
|
|
245
240
|
this.setValueTicks();
|
|
241
|
+
this.adjustBarSize();
|
|
246
242
|
};
|
|
247
243
|
this.highlightBarGroup = (_event, datum) => {
|
|
248
244
|
if (typeof datum === 'string') {
|
|
@@ -949,11 +945,11 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
949
945
|
.html((d) => {
|
|
950
946
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
951
947
|
});
|
|
952
|
-
this.tooltip.style('
|
|
948
|
+
this.tooltip.style('display', null);
|
|
953
949
|
this.positionTooltip(this.tooltipData);
|
|
954
950
|
};
|
|
955
951
|
this.closeTooltip = () => {
|
|
956
|
-
this.tooltip.style('
|
|
952
|
+
this.tooltip.style('display', 'none');
|
|
957
953
|
};
|
|
958
954
|
// Positions tooltip in horizontal mode
|
|
959
955
|
this.positionTooltip = (data) => {
|
|
@@ -1092,12 +1088,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1092
1088
|
this.afChartData = undefined;
|
|
1093
1089
|
}
|
|
1094
1090
|
afChartDataUpdate(data) {
|
|
1095
|
-
if (typeof data
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1091
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
1092
|
+
if (typeof data != 'string')
|
|
1093
|
+
this.chartData = data;
|
|
1094
|
+
else
|
|
1095
|
+
this.chartData = JSON.parse(data);
|
|
1100
1096
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1097
|
+
}
|
|
1101
1098
|
this.mappedData = this.reshapeData();
|
|
1102
1099
|
// checking for width of each tick
|
|
1103
1100
|
this.mappedData.forEach((elem) => {
|
|
@@ -1188,7 +1185,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1188
1185
|
// Getting handle for tooltip
|
|
1189
1186
|
this.tooltip = select('#' + this.afId);
|
|
1190
1187
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1191
|
-
|
|
1188
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
1192
1189
|
this.tooltip
|
|
1193
1190
|
.select('.tooltipHead')
|
|
1194
1191
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -1196,7 +1193,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1196
1193
|
.style('font-size', '1rem')
|
|
1197
1194
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1198
1195
|
.style('font-weight', '500');
|
|
1199
|
-
this.tooltip.style('
|
|
1196
|
+
this.tooltip.style('display', 'none');
|
|
1200
1197
|
}
|
|
1201
1198
|
initEmpty() {
|
|
1202
1199
|
select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -1216,20 +1213,19 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1216
1213
|
.attr('role', 'img')
|
|
1217
1214
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
1218
1215
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
1219
|
-
: 'Stapeldiagram');
|
|
1216
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1220
1217
|
// Hide unusable components
|
|
1221
1218
|
select(this.titleDiv)
|
|
1222
|
-
.
|
|
1219
|
+
.append(this.afHeadingLevel)
|
|
1223
1220
|
.html(`${_t.loading}...`);
|
|
1224
1221
|
this.initYAxis(true);
|
|
1225
1222
|
this.initXAxis(true);
|
|
1226
1223
|
this.tooltip = select('#' + this.afId);
|
|
1227
|
-
this.tooltip.style('
|
|
1224
|
+
this.tooltip.style('display', 'none');
|
|
1228
1225
|
this.loadingState(true);
|
|
1229
1226
|
}
|
|
1230
1227
|
loadingState(empty) {
|
|
1231
1228
|
this.loading = true;
|
|
1232
|
-
console.log('loading!');
|
|
1233
1229
|
// close potentially open tooltip
|
|
1234
1230
|
if (this.tooltip)
|
|
1235
1231
|
this.closeTooltip();
|
|
@@ -1623,7 +1619,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1623
1619
|
this.averageLine();
|
|
1624
1620
|
this.adjustBarSize();
|
|
1625
1621
|
this.adjustBarText();
|
|
1626
|
-
if (this.tooltip.style('
|
|
1622
|
+
if (this.tooltip.style('display') !== 'none')
|
|
1627
1623
|
this.positionTooltip(this.tooltipData);
|
|
1628
1624
|
}
|
|
1629
1625
|
// Returns the longest text from an array of strings
|
|
@@ -1743,7 +1739,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1743
1739
|
<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>`;
|
|
1744
1740
|
}
|
|
1745
1741
|
}
|
|
1746
|
-
return (h(Host, { key: '
|
|
1742
|
+
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) }, ' ')));
|
|
1747
1743
|
}
|
|
1748
1744
|
get hostElement() { return this; }
|
|
1749
1745
|
static get watchers() { return {
|
|
@@ -255,8 +255,6 @@ const barChart = class {
|
|
|
255
255
|
// Resizing chart while loading
|
|
256
256
|
this.loadingResize = () => {
|
|
257
257
|
const newHeight = this.setDims();
|
|
258
|
-
this.setMargins(true);
|
|
259
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
260
258
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
261
259
|
this.margin.right =
|
|
262
260
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -281,10 +279,8 @@ const barChart = class {
|
|
|
281
279
|
0,
|
|
282
280
|
this.dims.width - this.margin.right - this.margin.left
|
|
283
281
|
]);
|
|
284
|
-
this.barSelection
|
|
285
|
-
.attr('x', this.xFunction)
|
|
286
|
-
.attr('width', this.widthFunction);
|
|
287
282
|
this.setValueTicks();
|
|
283
|
+
this.adjustBarSize();
|
|
288
284
|
};
|
|
289
285
|
this.highlightBarGroup = (_event, datum) => {
|
|
290
286
|
if (typeof datum === 'string') {
|
|
@@ -991,11 +987,11 @@ const barChart = class {
|
|
|
991
987
|
.html((d) => {
|
|
992
988
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
993
989
|
});
|
|
994
|
-
this.tooltip.style('
|
|
990
|
+
this.tooltip.style('display', null);
|
|
995
991
|
this.positionTooltip(this.tooltipData);
|
|
996
992
|
};
|
|
997
993
|
this.closeTooltip = () => {
|
|
998
|
-
this.tooltip.style('
|
|
994
|
+
this.tooltip.style('display', 'none');
|
|
999
995
|
};
|
|
1000
996
|
// Positions tooltip in horizontal mode
|
|
1001
997
|
this.positionTooltip = (data) => {
|
|
@@ -1134,12 +1130,13 @@ const barChart = class {
|
|
|
1134
1130
|
this.afChartData = undefined;
|
|
1135
1131
|
}
|
|
1136
1132
|
afChartDataUpdate(data) {
|
|
1137
|
-
if (typeof data
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1133
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
1134
|
+
if (typeof data != 'string')
|
|
1135
|
+
this.chartData = data;
|
|
1136
|
+
else
|
|
1137
|
+
this.chartData = JSON.parse(data);
|
|
1142
1138
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1139
|
+
}
|
|
1143
1140
|
this.mappedData = this.reshapeData();
|
|
1144
1141
|
// checking for width of each tick
|
|
1145
1142
|
this.mappedData.forEach((elem) => {
|
|
@@ -1230,7 +1227,7 @@ const barChart = class {
|
|
|
1230
1227
|
// Getting handle for tooltip
|
|
1231
1228
|
this.tooltip = linear.select('#' + this.afId);
|
|
1232
1229
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1233
|
-
|
|
1230
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
1234
1231
|
this.tooltip
|
|
1235
1232
|
.select('.tooltipHead')
|
|
1236
1233
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -1238,7 +1235,7 @@ const barChart = class {
|
|
|
1238
1235
|
.style('font-size', '1rem')
|
|
1239
1236
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1240
1237
|
.style('font-weight', '500');
|
|
1241
|
-
this.tooltip.style('
|
|
1238
|
+
this.tooltip.style('display', 'none');
|
|
1242
1239
|
}
|
|
1243
1240
|
initEmpty() {
|
|
1244
1241
|
linear.select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -1258,20 +1255,19 @@ const barChart = class {
|
|
|
1258
1255
|
.attr('role', 'img')
|
|
1259
1256
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
1260
1257
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
1261
|
-
: 'Stapeldiagram');
|
|
1258
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1262
1259
|
// Hide unusable components
|
|
1263
1260
|
linear.select(this.titleDiv)
|
|
1264
|
-
.
|
|
1261
|
+
.append(this.afHeadingLevel)
|
|
1265
1262
|
.html(`${text._t.loading}...`);
|
|
1266
1263
|
this.initYAxis(true);
|
|
1267
1264
|
this.initXAxis(true);
|
|
1268
1265
|
this.tooltip = linear.select('#' + this.afId);
|
|
1269
|
-
this.tooltip.style('
|
|
1266
|
+
this.tooltip.style('display', 'none');
|
|
1270
1267
|
this.loadingState(true);
|
|
1271
1268
|
}
|
|
1272
1269
|
loadingState(empty) {
|
|
1273
1270
|
this.loading = true;
|
|
1274
|
-
console.log('loading!');
|
|
1275
1271
|
// close potentially open tooltip
|
|
1276
1272
|
if (this.tooltip)
|
|
1277
1273
|
this.closeTooltip();
|
|
@@ -1665,7 +1661,7 @@ const barChart = class {
|
|
|
1665
1661
|
this.averageLine();
|
|
1666
1662
|
this.adjustBarSize();
|
|
1667
1663
|
this.adjustBarText();
|
|
1668
|
-
if (this.tooltip.style('
|
|
1664
|
+
if (this.tooltip.style('display') !== 'none')
|
|
1669
1665
|
this.positionTooltip(this.tooltipData);
|
|
1670
1666
|
}
|
|
1671
1667
|
// Returns the longest text from an array of strings
|
|
@@ -1785,7 +1781,7 @@ const barChart = class {
|
|
|
1785
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>`;
|
|
1786
1782
|
}
|
|
1787
1783
|
}
|
|
1788
|
-
return (index.h(index.Host, { key: '
|
|
1784
|
+
return (index.h(index.Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, index.h("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, index.h("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), index.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() : ''}` }, index.h("digi-icon-table", { key: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), index.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() : ''}` }, index.h("digi-icon-chart", { key: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, index.h("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), index.h("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), index.h("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1789
1785
|
}
|
|
1790
1786
|
get hostElement() { return index.getElement(this); }
|
|
1791
1787
|
static get watchers() { return {
|
|
@@ -127,8 +127,6 @@ export class barChart {
|
|
|
127
127
|
// Resizing chart while loading
|
|
128
128
|
this.loadingResize = () => {
|
|
129
129
|
const newHeight = this.setDims();
|
|
130
|
-
this.setMargins(true);
|
|
131
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
132
130
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
133
131
|
this.margin.right =
|
|
134
132
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -153,10 +151,8 @@ export class barChart {
|
|
|
153
151
|
0,
|
|
154
152
|
this.dims.width - this.margin.right - this.margin.left
|
|
155
153
|
]);
|
|
156
|
-
this.barSelection
|
|
157
|
-
.attr('x', this.xFunction)
|
|
158
|
-
.attr('width', this.widthFunction);
|
|
159
154
|
this.setValueTicks();
|
|
155
|
+
this.adjustBarSize();
|
|
160
156
|
};
|
|
161
157
|
this.highlightBarGroup = (_event, datum) => {
|
|
162
158
|
if (typeof datum === 'string') {
|
|
@@ -867,11 +863,11 @@ export class barChart {
|
|
|
867
863
|
.html((d) => {
|
|
868
864
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
869
865
|
});
|
|
870
|
-
this.tooltip.style('
|
|
866
|
+
this.tooltip.style('display', null);
|
|
871
867
|
this.positionTooltip(this.tooltipData);
|
|
872
868
|
};
|
|
873
869
|
this.closeTooltip = () => {
|
|
874
|
-
this.tooltip.style('
|
|
870
|
+
this.tooltip.style('display', 'none');
|
|
875
871
|
};
|
|
876
872
|
// Positions tooltip in horizontal mode
|
|
877
873
|
this.positionTooltip = (data) => {
|
|
@@ -1010,12 +1006,13 @@ export class barChart {
|
|
|
1010
1006
|
this.afChartData = undefined;
|
|
1011
1007
|
}
|
|
1012
1008
|
afChartDataUpdate(data) {
|
|
1013
|
-
if (typeof data
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1009
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
1010
|
+
if (typeof data != 'string')
|
|
1011
|
+
this.chartData = data;
|
|
1012
|
+
else
|
|
1013
|
+
this.chartData = JSON.parse(data);
|
|
1018
1014
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
1015
|
+
}
|
|
1019
1016
|
this.mappedData = this.reshapeData();
|
|
1020
1017
|
// checking for width of each tick
|
|
1021
1018
|
this.mappedData.forEach((elem) => {
|
|
@@ -1108,7 +1105,7 @@ export class barChart {
|
|
|
1108
1105
|
// Getting handle for tooltip
|
|
1109
1106
|
this.tooltip = d3.select('#' + this.afId);
|
|
1110
1107
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1111
|
-
|
|
1108
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
1112
1109
|
this.tooltip
|
|
1113
1110
|
.select('.tooltipHead')
|
|
1114
1111
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -1116,7 +1113,7 @@ export class barChart {
|
|
|
1116
1113
|
.style('font-size', '1rem')
|
|
1117
1114
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1118
1115
|
.style('font-weight', '500');
|
|
1119
|
-
this.tooltip.style('
|
|
1116
|
+
this.tooltip.style('display', 'none');
|
|
1120
1117
|
}
|
|
1121
1118
|
initEmpty() {
|
|
1122
1119
|
d3.select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -1138,20 +1135,19 @@ export class barChart {
|
|
|
1138
1135
|
.attr('role', 'img')
|
|
1139
1136
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
1140
1137
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
1141
|
-
: 'Stapeldiagram');
|
|
1138
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1142
1139
|
// Hide unusable components
|
|
1143
1140
|
d3.select(this.titleDiv)
|
|
1144
|
-
.
|
|
1141
|
+
.append(this.afHeadingLevel)
|
|
1145
1142
|
.html(`${_t.loading}...`);
|
|
1146
1143
|
this.initYAxis(true);
|
|
1147
1144
|
this.initXAxis(true);
|
|
1148
1145
|
this.tooltip = d3.select('#' + this.afId);
|
|
1149
|
-
this.tooltip.style('
|
|
1146
|
+
this.tooltip.style('display', 'none');
|
|
1150
1147
|
this.loadingState(true);
|
|
1151
1148
|
}
|
|
1152
1149
|
loadingState(empty) {
|
|
1153
1150
|
this.loading = true;
|
|
1154
|
-
console.log('loading!');
|
|
1155
1151
|
// close potentially open tooltip
|
|
1156
1152
|
if (this.tooltip)
|
|
1157
1153
|
this.closeTooltip();
|
|
@@ -1546,7 +1542,7 @@ export class barChart {
|
|
|
1546
1542
|
this.averageLine();
|
|
1547
1543
|
this.adjustBarSize();
|
|
1548
1544
|
this.adjustBarText();
|
|
1549
|
-
if (this.tooltip.style('
|
|
1545
|
+
if (this.tooltip.style('display') !== 'none')
|
|
1550
1546
|
this.positionTooltip(this.tooltipData);
|
|
1551
1547
|
}
|
|
1552
1548
|
// Returns the longest text from an array of strings
|
|
@@ -1666,7 +1662,7 @@ export class barChart {
|
|
|
1666
1662
|
<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>`;
|
|
1667
1663
|
}
|
|
1668
1664
|
}
|
|
1669
|
-
return (h(Host, { key: '
|
|
1665
|
+
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) }, ' ')));
|
|
1670
1666
|
}
|
|
1671
1667
|
static get is() { return "digi-bar-chart"; }
|
|
1672
1668
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
--digi--
|
|
5
|
-
--digi--
|
|
6
|
-
--digi--
|
|
7
|
-
--digi--
|
|
8
|
-
|
|
9
|
-
--digi--
|
|
10
|
-
--digi--
|
|
11
|
-
--digi--
|
|
12
|
-
--digi--
|
|
13
|
-
|
|
14
|
-
--digi--
|
|
15
|
-
--digi--
|
|
16
|
-
|
|
1
|
+
@use '../../../../../../styles/src/digi-styles.utils' as *;
|
|
2
|
+
|
|
3
|
+
@mixin digi-logo--variables() {
|
|
4
|
+
--digi--logo--img--min-width: #{rem(256)};
|
|
5
|
+
--digi--logo--img--max-width:#{rem(292)};
|
|
6
|
+
--digi--logo--img--max-width--large: #{rem(368)};
|
|
7
|
+
--digi--logo--img--max-width--system: #{rem(44)};
|
|
8
|
+
|
|
9
|
+
--digi--logo--padding: 1.375rem;
|
|
10
|
+
--digi--logo--padding--wide: var(--digi--gutter--larger);
|
|
11
|
+
--digi--logo--padding--large: var(--digi--gutter--medium);
|
|
12
|
+
--digi--logo--padding--large--wide: var(--digi--gutter--larger);
|
|
13
|
+
|
|
14
|
+
--digi--logo--logotype-color: var(--digi--color--logotype-color);
|
|
15
|
+
--digi--logo--color--primary: var(--digi--color--text--interactive--brand-primary);
|
|
16
|
+
--digi--logo--color--secondary: var(--digi--color--text--secondary);
|
|
17
|
+
|
|
18
|
+
--digi--logo--color--border--primary: var(--digi--color--text--primary);
|
|
19
|
+
--digi--logo--color--border--secondary: var(--digi--color--text--secondary);
|
|
17
20
|
}
|