@designsystem-se/af 35.4.1-beta.6 → 35.4.1-beta.7
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 +24 -14
- package/dist/cjs/digi-bar-chart_27.cjs.entry.js +24 -14
- package/dist/collection/components/_chart/bar-chart/bar-chart.css +4 -1
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +23 -13
- package/dist/collection/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-96534cbc.entry.js +1 -0
- package/dist/esm/digi-bar-chart_27.entry.js +24 -14
- package/hydrate/index.js +24 -14
- package/hydrate/index.mjs +24 -14
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-3e51b8bc.entry.js +0 -1
|
@@ -91,7 +91,7 @@ function band() {
|
|
|
91
91
|
return initRange.apply(rescale(), arguments);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
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:
|
|
94
|
+
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 .topWrapper.sc-digi-bar-chart{margin-bottom: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:0 0 0.75rem 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}";
|
|
95
95
|
const DigiBarChartStyle0 = barChartCss;
|
|
96
96
|
|
|
97
97
|
const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
@@ -348,7 +348,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
348
348
|
this.barGroupID = (key) => {
|
|
349
349
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
350
350
|
};
|
|
351
|
-
this.updateBars = (
|
|
351
|
+
this.updateBars = () => {
|
|
352
352
|
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
353
353
|
.selectAll('.barGroup')
|
|
354
354
|
.data(this.mappedData)
|
|
@@ -372,9 +372,6 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
372
372
|
.on('mouseenter', this.hover)
|
|
373
373
|
.on('mouseleave', this.hoverOut)
|
|
374
374
|
.on('click', this.openTooltip);
|
|
375
|
-
if (fromLoading) {
|
|
376
|
-
this.initLegend();
|
|
377
|
-
}
|
|
378
375
|
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
379
376
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
380
377
|
};
|
|
@@ -809,7 +806,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
809
806
|
this.tooltip
|
|
810
807
|
.select('digi-icon-caret-up')
|
|
811
808
|
.style('position', 'absolute')
|
|
812
|
-
.style('top', '-
|
|
809
|
+
.style('top', '-11px')
|
|
813
810
|
.style('left', '0')
|
|
814
811
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
815
812
|
}
|
|
@@ -832,7 +829,16 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
832
829
|
}
|
|
833
830
|
else {
|
|
834
831
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
835
|
-
|
|
832
|
+
this.tooltip
|
|
833
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
834
|
+
);
|
|
835
|
+
this.tooltip
|
|
836
|
+
.select('digi-icon-caret-up')
|
|
837
|
+
.style('position', 'absolute')
|
|
838
|
+
.style('top', '-11px')
|
|
839
|
+
.style('left', '0')
|
|
840
|
+
.style('transform', `translate(50%,0)`);
|
|
841
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
836
842
|
}
|
|
837
843
|
else {
|
|
838
844
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -932,7 +938,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
932
938
|
this.afChartData = undefined;
|
|
933
939
|
}
|
|
934
940
|
afChartDataUpdate(data) {
|
|
935
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
941
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
936
942
|
if (typeof data != 'string')
|
|
937
943
|
this.chartData = data;
|
|
938
944
|
else
|
|
@@ -1034,6 +1040,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1034
1040
|
.select('.tooltipHead')
|
|
1035
1041
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1036
1042
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1043
|
+
.style('text-wrap', 'wrap')
|
|
1037
1044
|
.style('font-size', '1rem')
|
|
1038
1045
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1039
1046
|
.style('font-weight', '500');
|
|
@@ -1060,8 +1067,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1060
1067
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1061
1068
|
// Hide unusable components
|
|
1062
1069
|
select(this.titleDiv)
|
|
1063
|
-
.
|
|
1064
|
-
.attr('class', 'loadingHeader')
|
|
1070
|
+
.select(this.afHeadingLevel)
|
|
1065
1071
|
.html(`${_t.loading}...`);
|
|
1066
1072
|
this.initYAxis(true);
|
|
1067
1073
|
this.initXAxis(true);
|
|
@@ -1335,6 +1341,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1335
1341
|
select(this.host).select('.tableButton').style('display', null);
|
|
1336
1342
|
select(this.legendDiv).style('display', null);
|
|
1337
1343
|
this.initToolTip();
|
|
1344
|
+
this.initLegend();
|
|
1338
1345
|
}
|
|
1339
1346
|
// Disconnect resize observer while adjusting things
|
|
1340
1347
|
this.barChartObserver.disconnect();
|
|
@@ -1404,9 +1411,12 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1404
1411
|
? this.yScale(d.key)
|
|
1405
1412
|
: this.dims.height - this.margin.bottom)
|
|
1406
1413
|
.attr('height', () => 0)
|
|
1407
|
-
.on('end', (...[, i]) =>
|
|
1408
|
-
|
|
1409
|
-
|
|
1414
|
+
.on('end', (...[, i]) => {
|
|
1415
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1416
|
+
this.updateBars();
|
|
1417
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1418
|
+
}
|
|
1419
|
+
});
|
|
1410
1420
|
this.setTickInteraction();
|
|
1411
1421
|
}
|
|
1412
1422
|
else {
|
|
@@ -1588,7 +1598,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1588
1598
|
<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>`;
|
|
1589
1599
|
}
|
|
1590
1600
|
}
|
|
1591
|
-
return (h(Host, { key: '
|
|
1601
|
+
return (h(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', 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: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', 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: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1592
1602
|
}
|
|
1593
1603
|
get hostElement() { return this; }
|
|
1594
1604
|
static get watchers() { return {
|
|
@@ -134,7 +134,7 @@ function band() {
|
|
|
134
134
|
return linear.initRange.apply(rescale(), arguments);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
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:
|
|
137
|
+
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 .topWrapper.sc-digi-bar-chart{margin-bottom: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:0 0 0.75rem 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}";
|
|
138
138
|
const DigiBarChartStyle0 = barChartCss;
|
|
139
139
|
|
|
140
140
|
const barChart = class {
|
|
@@ -390,7 +390,7 @@ const barChart = class {
|
|
|
390
390
|
this.barGroupID = (key) => {
|
|
391
391
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
392
392
|
};
|
|
393
|
-
this.updateBars = (
|
|
393
|
+
this.updateBars = () => {
|
|
394
394
|
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
395
395
|
.selectAll('.barGroup')
|
|
396
396
|
.data(this.mappedData)
|
|
@@ -414,9 +414,6 @@ const barChart = class {
|
|
|
414
414
|
.on('mouseenter', this.hover)
|
|
415
415
|
.on('mouseleave', this.hoverOut)
|
|
416
416
|
.on('click', this.openTooltip);
|
|
417
|
-
if (fromLoading) {
|
|
418
|
-
this.initLegend();
|
|
419
|
-
}
|
|
420
417
|
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
421
418
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
422
419
|
};
|
|
@@ -851,7 +848,7 @@ const barChart = class {
|
|
|
851
848
|
this.tooltip
|
|
852
849
|
.select('digi-icon-caret-up')
|
|
853
850
|
.style('position', 'absolute')
|
|
854
|
-
.style('top', '-
|
|
851
|
+
.style('top', '-11px')
|
|
855
852
|
.style('left', '0')
|
|
856
853
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
857
854
|
}
|
|
@@ -874,7 +871,16 @@ const barChart = class {
|
|
|
874
871
|
}
|
|
875
872
|
else {
|
|
876
873
|
if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
|
|
877
|
-
|
|
874
|
+
this.tooltip
|
|
875
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
876
|
+
);
|
|
877
|
+
this.tooltip
|
|
878
|
+
.select('digi-icon-caret-up')
|
|
879
|
+
.style('position', 'absolute')
|
|
880
|
+
.style('top', '-11px')
|
|
881
|
+
.style('left', '0')
|
|
882
|
+
.style('transform', `translate(50%,0)`);
|
|
883
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
878
884
|
}
|
|
879
885
|
else {
|
|
880
886
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -974,7 +980,7 @@ const barChart = class {
|
|
|
974
980
|
this.afChartData = undefined;
|
|
975
981
|
}
|
|
976
982
|
afChartDataUpdate(data) {
|
|
977
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
983
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
978
984
|
if (typeof data != 'string')
|
|
979
985
|
this.chartData = data;
|
|
980
986
|
else
|
|
@@ -1076,6 +1082,7 @@ const barChart = class {
|
|
|
1076
1082
|
.select('.tooltipHead')
|
|
1077
1083
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1078
1084
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1085
|
+
.style('text-wrap', 'wrap')
|
|
1079
1086
|
.style('font-size', '1rem')
|
|
1080
1087
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1081
1088
|
.style('font-weight', '500');
|
|
@@ -1102,8 +1109,7 @@ const barChart = class {
|
|
|
1102
1109
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1103
1110
|
// Hide unusable components
|
|
1104
1111
|
linear.select(this.titleDiv)
|
|
1105
|
-
.
|
|
1106
|
-
.attr('class', 'loadingHeader')
|
|
1112
|
+
.select(this.afHeadingLevel)
|
|
1107
1113
|
.html(`${text._t.loading}...`);
|
|
1108
1114
|
this.initYAxis(true);
|
|
1109
1115
|
this.initXAxis(true);
|
|
@@ -1377,6 +1383,7 @@ const barChart = class {
|
|
|
1377
1383
|
linear.select(this.host).select('.tableButton').style('display', null);
|
|
1378
1384
|
linear.select(this.legendDiv).style('display', null);
|
|
1379
1385
|
this.initToolTip();
|
|
1386
|
+
this.initLegend();
|
|
1380
1387
|
}
|
|
1381
1388
|
// Disconnect resize observer while adjusting things
|
|
1382
1389
|
this.barChartObserver.disconnect();
|
|
@@ -1446,9 +1453,12 @@ const barChart = class {
|
|
|
1446
1453
|
? this.yScale(d.key)
|
|
1447
1454
|
: this.dims.height - this.margin.bottom)
|
|
1448
1455
|
.attr('height', () => 0)
|
|
1449
|
-
.on('end', (...[, i]) =>
|
|
1450
|
-
|
|
1451
|
-
|
|
1456
|
+
.on('end', (...[, i]) => {
|
|
1457
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1458
|
+
this.updateBars();
|
|
1459
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1460
|
+
}
|
|
1461
|
+
});
|
|
1452
1462
|
this.setTickInteraction();
|
|
1453
1463
|
}
|
|
1454
1464
|
else {
|
|
@@ -1630,7 +1640,7 @@ const barChart = class {
|
|
|
1630
1640
|
<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>`;
|
|
1631
1641
|
}
|
|
1632
1642
|
}
|
|
1633
|
-
return (index.h(index.Host, { key: '
|
|
1643
|
+
return (index.h(index.Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, index.h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, index.h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', 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: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', 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: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, index.h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, index.h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), index.h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', 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: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), index.h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1634
1644
|
}
|
|
1635
1645
|
get hostElement() { return index.getElement(this); }
|
|
1636
1646
|
static get watchers() { return {
|
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
gap: 0.75rem;
|
|
25
25
|
}
|
|
26
|
+
:host .topWrapper {
|
|
27
|
+
margin-bottom: 0.75rem;
|
|
28
|
+
}
|
|
26
29
|
:host .chartTitle {
|
|
27
30
|
--MARGIN--HEADING-2: 0;
|
|
28
31
|
--MARGIN--HEADING-3: 0;
|
|
@@ -31,7 +34,7 @@
|
|
|
31
34
|
--MARGIN--HEADING-6: 0;
|
|
32
35
|
}
|
|
33
36
|
:host .buttonWrapper {
|
|
34
|
-
--digi--button--padding--medium:
|
|
37
|
+
--digi--button--padding--medium: 0 0 0.75rem 0;
|
|
35
38
|
}
|
|
36
39
|
:host .chartTooltip {
|
|
37
40
|
top: -5px;
|
|
@@ -266,7 +266,7 @@ export class barChart {
|
|
|
266
266
|
this.barGroupID = (key) => {
|
|
267
267
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
268
268
|
};
|
|
269
|
-
this.updateBars = (
|
|
269
|
+
this.updateBars = () => {
|
|
270
270
|
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
271
271
|
.selectAll('.barGroup')
|
|
272
272
|
.data(this.mappedData)
|
|
@@ -290,9 +290,6 @@ export class barChart {
|
|
|
290
290
|
.on('mouseenter', this.hover)
|
|
291
291
|
.on('mouseleave', this.hoverOut)
|
|
292
292
|
.on('click', this.openTooltip);
|
|
293
|
-
if (fromLoading) {
|
|
294
|
-
this.initLegend();
|
|
295
|
-
}
|
|
296
293
|
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
297
294
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
298
295
|
};
|
|
@@ -727,7 +724,7 @@ export class barChart {
|
|
|
727
724
|
this.tooltip
|
|
728
725
|
.select('digi-icon-caret-up')
|
|
729
726
|
.style('position', 'absolute')
|
|
730
|
-
.style('top', '-
|
|
727
|
+
.style('top', '-11px')
|
|
731
728
|
.style('left', '0')
|
|
732
729
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
733
730
|
}
|
|
@@ -750,7 +747,16 @@ export class barChart {
|
|
|
750
747
|
}
|
|
751
748
|
else {
|
|
752
749
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
753
|
-
|
|
750
|
+
this.tooltip
|
|
751
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
752
|
+
);
|
|
753
|
+
this.tooltip
|
|
754
|
+
.select('digi-icon-caret-up')
|
|
755
|
+
.style('position', 'absolute')
|
|
756
|
+
.style('top', '-11px')
|
|
757
|
+
.style('left', '0')
|
|
758
|
+
.style('transform', `translate(50%,0)`);
|
|
759
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
754
760
|
}
|
|
755
761
|
else {
|
|
756
762
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -850,7 +856,7 @@ export class barChart {
|
|
|
850
856
|
this.afChartData = undefined;
|
|
851
857
|
}
|
|
852
858
|
afChartDataUpdate(data) {
|
|
853
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
859
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
854
860
|
if (typeof data != 'string')
|
|
855
861
|
this.chartData = data;
|
|
856
862
|
else
|
|
@@ -954,6 +960,7 @@ export class barChart {
|
|
|
954
960
|
.select('.tooltipHead')
|
|
955
961
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
956
962
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
963
|
+
.style('text-wrap', 'wrap')
|
|
957
964
|
.style('font-size', '1rem')
|
|
958
965
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
959
966
|
.style('font-weight', '500');
|
|
@@ -982,8 +989,7 @@ export class barChart {
|
|
|
982
989
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
983
990
|
// Hide unusable components
|
|
984
991
|
d3.select(this.titleDiv)
|
|
985
|
-
.
|
|
986
|
-
.attr('class', 'loadingHeader')
|
|
992
|
+
.select(this.afHeadingLevel)
|
|
987
993
|
.html(`${_t.loading}...`);
|
|
988
994
|
this.initYAxis(true);
|
|
989
995
|
this.initXAxis(true);
|
|
@@ -1258,6 +1264,7 @@ export class barChart {
|
|
|
1258
1264
|
d3.select(this.host).select('.tableButton').style('display', null);
|
|
1259
1265
|
d3.select(this.legendDiv).style('display', null);
|
|
1260
1266
|
this.initToolTip();
|
|
1267
|
+
this.initLegend();
|
|
1261
1268
|
}
|
|
1262
1269
|
// Disconnect resize observer while adjusting things
|
|
1263
1270
|
this.barChartObserver.disconnect();
|
|
@@ -1327,9 +1334,12 @@ export class barChart {
|
|
|
1327
1334
|
? this.yScale(d.key)
|
|
1328
1335
|
: this.dims.height - this.margin.bottom)
|
|
1329
1336
|
.attr('height', () => 0)
|
|
1330
|
-
.on('end', (...[, i]) =>
|
|
1331
|
-
|
|
1332
|
-
|
|
1337
|
+
.on('end', (...[, i]) => {
|
|
1338
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1339
|
+
this.updateBars();
|
|
1340
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1341
|
+
}
|
|
1342
|
+
});
|
|
1333
1343
|
this.setTickInteraction();
|
|
1334
1344
|
}
|
|
1335
1345
|
else {
|
|
@@ -1511,7 +1521,7 @@ export class barChart {
|
|
|
1511
1521
|
<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>`;
|
|
1512
1522
|
}
|
|
1513
1523
|
}
|
|
1514
|
-
return (h(Host, { key: '
|
|
1524
|
+
return (h(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', 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: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', 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: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1515
1525
|
}
|
|
1516
1526
|
static get is() { return "digi-bar-chart"; }
|
|
1517
1527
|
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
|
}
|