@designsystem-se/af 35.4.1-beta.6 → 35.4.1-beta.8
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/components/digi-chart-line.js +1 -1
- package/dist/cjs/digi-bar-chart_27.cjs.entry.js +24 -14
- package/dist/cjs/digi-chart-line.cjs.entry.js +1 -1
- 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/components/_chart/chart-line/chart-line.css +1 -2
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-96534cbc.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-ccf78233.entry.js → p-9bf1a8fe.entry.js} +1 -1
- package/dist/esm/digi-bar-chart_27.entry.js +24 -14
- package/dist/esm/digi-chart-line.entry.js +1 -1
- package/hydrate/index.js +25 -15
- package/hydrate/index.mjs +25 -15
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-3e51b8bc.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -14796,7 +14796,7 @@ function basis(context) {
|
|
|
14796
14796
|
return new Basis(context);
|
|
14797
14797
|
}
|
|
14798
14798
|
|
|
14799
|
-
const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0
|
|
14799
|
+
const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0 0.25rem 0;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{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}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;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}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n --digi--global--color--neutral--grayscale--darkest-3\n )}.tooltipHead.sc-digi-chart-line{display:flex;width:100%;justify-content:space-between;margin-bottom:0.25rem;flex-direction:row}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;padding-right:5px;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(245, 245, 245) transparent}";
|
|
14800
14800
|
var DigiChartLineStyle0 = chartLineCss;
|
|
14801
14801
|
|
|
14802
14802
|
/**
|
|
@@ -35686,7 +35686,7 @@ class UtilResizeObserver {
|
|
|
35686
35686
|
}; }
|
|
35687
35687
|
}
|
|
35688
35688
|
|
|
35689
|
-
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;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:
|
|
35689
|
+
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .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}";
|
|
35690
35690
|
var DigiBarChartStyle0 = barChartCss;
|
|
35691
35691
|
|
|
35692
35692
|
/**
|
|
@@ -35948,7 +35948,7 @@ class barChart {
|
|
|
35948
35948
|
this.barGroupID = (key) => {
|
|
35949
35949
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
35950
35950
|
};
|
|
35951
|
-
this.updateBars = (
|
|
35951
|
+
this.updateBars = () => {
|
|
35952
35952
|
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
35953
35953
|
.selectAll('.barGroup')
|
|
35954
35954
|
.data(this.mappedData)
|
|
@@ -35972,9 +35972,6 @@ class barChart {
|
|
|
35972
35972
|
.on('mouseenter', this.hover)
|
|
35973
35973
|
.on('mouseleave', this.hoverOut)
|
|
35974
35974
|
.on('click', this.openTooltip);
|
|
35975
|
-
if (fromLoading) {
|
|
35976
|
-
this.initLegend();
|
|
35977
|
-
}
|
|
35978
35975
|
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
35979
35976
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
35980
35977
|
};
|
|
@@ -36409,7 +36406,7 @@ class barChart {
|
|
|
36409
36406
|
this.tooltip
|
|
36410
36407
|
.select('digi-icon-caret-up')
|
|
36411
36408
|
.style('position', 'absolute')
|
|
36412
|
-
.style('top', '-
|
|
36409
|
+
.style('top', '-11px')
|
|
36413
36410
|
.style('left', '0')
|
|
36414
36411
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
36415
36412
|
}
|
|
@@ -36432,7 +36429,16 @@ class barChart {
|
|
|
36432
36429
|
}
|
|
36433
36430
|
else {
|
|
36434
36431
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
36435
|
-
|
|
36432
|
+
this.tooltip
|
|
36433
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
36434
|
+
);
|
|
36435
|
+
this.tooltip
|
|
36436
|
+
.select('digi-icon-caret-up')
|
|
36437
|
+
.style('position', 'absolute')
|
|
36438
|
+
.style('top', '-11px')
|
|
36439
|
+
.style('left', '0')
|
|
36440
|
+
.style('transform', `translate(50%,0)`);
|
|
36441
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
36436
36442
|
}
|
|
36437
36443
|
else {
|
|
36438
36444
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -36532,7 +36538,7 @@ class barChart {
|
|
|
36532
36538
|
this.afChartData = undefined;
|
|
36533
36539
|
}
|
|
36534
36540
|
afChartDataUpdate(data) {
|
|
36535
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
36541
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
36536
36542
|
if (typeof data != 'string')
|
|
36537
36543
|
this.chartData = data;
|
|
36538
36544
|
else
|
|
@@ -36634,6 +36640,7 @@ class barChart {
|
|
|
36634
36640
|
.select('.tooltipHead')
|
|
36635
36641
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
36636
36642
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
36643
|
+
.style('text-wrap', 'wrap')
|
|
36637
36644
|
.style('font-size', '1rem')
|
|
36638
36645
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36639
36646
|
.style('font-weight', '500');
|
|
@@ -36660,8 +36667,7 @@ class barChart {
|
|
|
36660
36667
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
36661
36668
|
// Hide unusable components
|
|
36662
36669
|
select(this.titleDiv)
|
|
36663
|
-
.
|
|
36664
|
-
.attr('class', 'loadingHeader')
|
|
36670
|
+
.select(this.afHeadingLevel)
|
|
36665
36671
|
.html(`${_t.loading}...`);
|
|
36666
36672
|
this.initYAxis(true);
|
|
36667
36673
|
this.initXAxis(true);
|
|
@@ -36935,6 +36941,7 @@ class barChart {
|
|
|
36935
36941
|
select(this.host).select('.tableButton').style('display', null);
|
|
36936
36942
|
select(this.legendDiv).style('display', null);
|
|
36937
36943
|
this.initToolTip();
|
|
36944
|
+
this.initLegend();
|
|
36938
36945
|
}
|
|
36939
36946
|
// Disconnect resize observer while adjusting things
|
|
36940
36947
|
this.barChartObserver.disconnect();
|
|
@@ -37004,9 +37011,12 @@ class barChart {
|
|
|
37004
37011
|
? this.yScale(d.key)
|
|
37005
37012
|
: this.dims.height - this.margin.bottom)
|
|
37006
37013
|
.attr('height', () => 0)
|
|
37007
|
-
.on('end', (...[, i]) =>
|
|
37008
|
-
|
|
37009
|
-
|
|
37014
|
+
.on('end', (...[, i]) => {
|
|
37015
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
37016
|
+
this.updateBars();
|
|
37017
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
37018
|
+
}
|
|
37019
|
+
});
|
|
37010
37020
|
this.setTickInteraction();
|
|
37011
37021
|
}
|
|
37012
37022
|
else {
|
|
@@ -37188,7 +37198,7 @@ class barChart {
|
|
|
37188
37198
|
<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>`;
|
|
37189
37199
|
}
|
|
37190
37200
|
}
|
|
37191
|
-
return (hAsync(Host, { key: '
|
|
37201
|
+
return (hAsync(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, hAsync("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), hAsync("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() : ''}` }, hAsync("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), hAsync("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() : ''}` }, hAsync("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), hAsync("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), hAsync("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37192
37202
|
}
|
|
37193
37203
|
get hostElement() { return getElement(this); }
|
|
37194
37204
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -14792,7 +14792,7 @@ function basis(context) {
|
|
|
14792
14792
|
return new Basis(context);
|
|
14793
14793
|
}
|
|
14794
14794
|
|
|
14795
|
-
const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0
|
|
14795
|
+
const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0 0.25rem 0;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{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}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;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}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n --digi--global--color--neutral--grayscale--darkest-3\n )}.tooltipHead.sc-digi-chart-line{display:flex;width:100%;justify-content:space-between;margin-bottom:0.25rem;flex-direction:row}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;padding-right:5px;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(245, 245, 245) transparent}";
|
|
14796
14796
|
var DigiChartLineStyle0 = chartLineCss;
|
|
14797
14797
|
|
|
14798
14798
|
/**
|
|
@@ -35682,7 +35682,7 @@ class UtilResizeObserver {
|
|
|
35682
35682
|
}; }
|
|
35683
35683
|
}
|
|
35684
35684
|
|
|
35685
|
-
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;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:
|
|
35685
|
+
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .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}";
|
|
35686
35686
|
var DigiBarChartStyle0 = barChartCss;
|
|
35687
35687
|
|
|
35688
35688
|
/**
|
|
@@ -35944,7 +35944,7 @@ class barChart {
|
|
|
35944
35944
|
this.barGroupID = (key) => {
|
|
35945
35945
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
35946
35946
|
};
|
|
35947
|
-
this.updateBars = (
|
|
35947
|
+
this.updateBars = () => {
|
|
35948
35948
|
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
35949
35949
|
.selectAll('.barGroup')
|
|
35950
35950
|
.data(this.mappedData)
|
|
@@ -35968,9 +35968,6 @@ class barChart {
|
|
|
35968
35968
|
.on('mouseenter', this.hover)
|
|
35969
35969
|
.on('mouseleave', this.hoverOut)
|
|
35970
35970
|
.on('click', this.openTooltip);
|
|
35971
|
-
if (fromLoading) {
|
|
35972
|
-
this.initLegend();
|
|
35973
|
-
}
|
|
35974
35971
|
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
35975
35972
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
35976
35973
|
};
|
|
@@ -36405,7 +36402,7 @@ class barChart {
|
|
|
36405
36402
|
this.tooltip
|
|
36406
36403
|
.select('digi-icon-caret-up')
|
|
36407
36404
|
.style('position', 'absolute')
|
|
36408
|
-
.style('top', '-
|
|
36405
|
+
.style('top', '-11px')
|
|
36409
36406
|
.style('left', '0')
|
|
36410
36407
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
36411
36408
|
}
|
|
@@ -36428,7 +36425,16 @@ class barChart {
|
|
|
36428
36425
|
}
|
|
36429
36426
|
else {
|
|
36430
36427
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
36431
|
-
|
|
36428
|
+
this.tooltip
|
|
36429
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
36430
|
+
);
|
|
36431
|
+
this.tooltip
|
|
36432
|
+
.select('digi-icon-caret-up')
|
|
36433
|
+
.style('position', 'absolute')
|
|
36434
|
+
.style('top', '-11px')
|
|
36435
|
+
.style('left', '0')
|
|
36436
|
+
.style('transform', `translate(50%,0)`);
|
|
36437
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
36432
36438
|
}
|
|
36433
36439
|
else {
|
|
36434
36440
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -36528,7 +36534,7 @@ class barChart {
|
|
|
36528
36534
|
this.afChartData = undefined;
|
|
36529
36535
|
}
|
|
36530
36536
|
afChartDataUpdate(data) {
|
|
36531
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
36537
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
36532
36538
|
if (typeof data != 'string')
|
|
36533
36539
|
this.chartData = data;
|
|
36534
36540
|
else
|
|
@@ -36630,6 +36636,7 @@ class barChart {
|
|
|
36630
36636
|
.select('.tooltipHead')
|
|
36631
36637
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
36632
36638
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
36639
|
+
.style('text-wrap', 'wrap')
|
|
36633
36640
|
.style('font-size', '1rem')
|
|
36634
36641
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36635
36642
|
.style('font-weight', '500');
|
|
@@ -36656,8 +36663,7 @@ class barChart {
|
|
|
36656
36663
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
36657
36664
|
// Hide unusable components
|
|
36658
36665
|
select(this.titleDiv)
|
|
36659
|
-
.
|
|
36660
|
-
.attr('class', 'loadingHeader')
|
|
36666
|
+
.select(this.afHeadingLevel)
|
|
36661
36667
|
.html(`${_t.loading}...`);
|
|
36662
36668
|
this.initYAxis(true);
|
|
36663
36669
|
this.initXAxis(true);
|
|
@@ -36931,6 +36937,7 @@ class barChart {
|
|
|
36931
36937
|
select(this.host).select('.tableButton').style('display', null);
|
|
36932
36938
|
select(this.legendDiv).style('display', null);
|
|
36933
36939
|
this.initToolTip();
|
|
36940
|
+
this.initLegend();
|
|
36934
36941
|
}
|
|
36935
36942
|
// Disconnect resize observer while adjusting things
|
|
36936
36943
|
this.barChartObserver.disconnect();
|
|
@@ -37000,9 +37007,12 @@ class barChart {
|
|
|
37000
37007
|
? this.yScale(d.key)
|
|
37001
37008
|
: this.dims.height - this.margin.bottom)
|
|
37002
37009
|
.attr('height', () => 0)
|
|
37003
|
-
.on('end', (...[, i]) =>
|
|
37004
|
-
|
|
37005
|
-
|
|
37010
|
+
.on('end', (...[, i]) => {
|
|
37011
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
37012
|
+
this.updateBars();
|
|
37013
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
37014
|
+
}
|
|
37015
|
+
});
|
|
37006
37016
|
this.setTickInteraction();
|
|
37007
37017
|
}
|
|
37008
37018
|
else {
|
|
@@ -37184,7 +37194,7 @@ class barChart {
|
|
|
37184
37194
|
<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>`;
|
|
37185
37195
|
}
|
|
37186
37196
|
}
|
|
37187
|
-
return (hAsync(Host, { key: '
|
|
37197
|
+
return (hAsync(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, hAsync("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), hAsync("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() : ''}` }, hAsync("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), hAsync("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() : ''}` }, hAsync("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), hAsync("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), hAsync("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37188
37198
|
}
|
|
37189
37199
|
get hostElement() { return getElement(this); }
|
|
37190
37200
|
static get watchers() { return {
|
package/package.json
CHANGED