@designsystem-se/af 35.4.1-beta.5 → 35.4.1-beta.6
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 +42 -193
- package/components/digi-chart-line.js +1 -1
- package/components/{p-a47b6b5c.js → p-f9a1a787.js} +1 -1
- package/dist/cjs/digi-bar-chart_27.cjs.entry.js +41 -192
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +41 -192
- package/dist/collection/design-tokens/components/_logo.variables.scss +16 -19
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-3e51b8bc.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ccf78233.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-a47b6b5c.js → p-f9a1a787.js} +1 -1
- package/dist/esm/digi-bar-chart_27.entry.js +42 -193
- package/dist/esm/digi-chart-line.entry.js +1 -1
- package/dist/esm/{linear-0246aaea.js → linear-78b9219d.js} +1 -1
- package/hydrate/index.js +41 -192
- package/hydrate/index.mjs +41 -192
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-10dd9a49.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-42db04e4.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -35949,189 +35949,33 @@ class barChart {
|
|
|
35949
35949
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
35950
35950
|
};
|
|
35951
35951
|
this.updateBars = (fromLoading) => {
|
|
35952
|
-
this.barChartContainer
|
|
35952
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
35953
35953
|
.selectAll('.barGroup')
|
|
35954
35954
|
.data(this.mappedData)
|
|
35955
|
-
.join(
|
|
35956
|
-
|
|
35957
|
-
|
|
35958
|
-
|
|
35959
|
-
|
|
35960
|
-
|
|
35961
|
-
|
|
35962
|
-
|
|
35963
|
-
|
|
35964
|
-
|
|
35965
|
-
|
|
35966
|
-
|
|
35967
|
-
|
|
35968
|
-
|
|
35969
|
-
|
|
35970
|
-
|
|
35971
|
-
|
|
35972
|
-
|
|
35973
|
-
|
|
35974
|
-
|
|
35975
|
-
|
|
35976
|
-
|
|
35977
|
-
|
|
35978
|
-
|
|
35979
|
-
.on('mouseenter', this.hover)
|
|
35980
|
-
.on('mouseleave', this.hoverOut)
|
|
35981
|
-
.on('click', this.openTooltip)
|
|
35982
|
-
.transition()
|
|
35983
|
-
.duration(this.defaultDuration)
|
|
35984
|
-
.ease(polyInOut)
|
|
35985
|
-
.attr('width', this.widthFunction)
|
|
35986
|
-
.attr('y', this.yFunction)
|
|
35987
|
-
.attr('height', this.heightFunction)
|
|
35988
|
-
.attr('fill', '#00005a');
|
|
35989
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
35990
|
-
return tempSelection;
|
|
35991
|
-
tempSelection
|
|
35992
|
-
.append('text')
|
|
35993
|
-
.text((d) => d.value.toLocaleString())
|
|
35994
|
-
.attr('class', 'barText')
|
|
35995
|
-
.attr('font-size', this.fontSize)
|
|
35996
|
-
.attr('font-weight', '600')
|
|
35997
|
-
.attr('text-anchor', 'end')
|
|
35998
|
-
.style('pointer-events', 'none')
|
|
35999
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36000
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
36001
|
-
: this.dims.height - this.margin.bottom)
|
|
36002
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36003
|
-
? 2
|
|
36004
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
36005
|
-
.transition()
|
|
36006
|
-
.duration(this.defaultDuration)
|
|
36007
|
-
.ease(polyInOut)
|
|
36008
|
-
.attr('font-size', this.fontSize)
|
|
36009
|
-
.attr('font-weight', '600')
|
|
36010
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36011
|
-
? this.xScale(d.value)
|
|
36012
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
36013
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36014
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
36015
|
-
: this.yScale(d.value))
|
|
36016
|
-
.attr('text-anchor', (d) => {
|
|
36017
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36018
|
-
return 'middle';
|
|
36019
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36020
|
-
? 'start'
|
|
36021
|
-
: 'end';
|
|
36022
|
-
})
|
|
36023
|
-
.attr('dx', (d) => {
|
|
36024
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
36025
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36026
|
-
? this.tickPadding
|
|
36027
|
-
: -this.tickPadding;
|
|
36028
|
-
return 0;
|
|
36029
|
-
})
|
|
36030
|
-
.attr('fill', (d) => {
|
|
36031
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36032
|
-
return 'black';
|
|
36033
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36034
|
-
? 'black'
|
|
36035
|
-
: 'white';
|
|
36036
|
-
})
|
|
36037
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
36038
|
-
? '0.35em'
|
|
36039
|
-
: '-0.25em')
|
|
36040
|
-
.style('pointer-events', 'none')
|
|
36041
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
36042
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36043
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36044
|
-
: 0;
|
|
36045
|
-
const interpolatedValue = interpolate$1(oldnum, d.value);
|
|
36046
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
36047
|
-
});
|
|
36048
|
-
return tempSelection;
|
|
36049
|
-
}, (update) => {
|
|
36050
|
-
// Update ids to bars
|
|
36051
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
36052
|
-
// Mouse interaction to updated loading bars
|
|
36053
|
-
if (fromLoading) {
|
|
36054
|
-
update
|
|
36055
|
-
.select('rect')
|
|
36056
|
-
.on('mouseenter', this.hover)
|
|
36057
|
-
.on('mouseleave', this.hoverOut)
|
|
36058
|
-
.on('click', this.openTooltip)
|
|
36059
|
-
.attr('x', this.xFunction)
|
|
36060
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36061
|
-
? this.yScale(d.key)
|
|
36062
|
-
: this.dims.height - this.margin.bottom)
|
|
36063
|
-
.attr('width', this.widthFunction)
|
|
36064
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
36065
|
-
? this.yScale.bandwidth()
|
|
36066
|
-
: 0)
|
|
36067
|
-
.attr('fill', '#00005a')
|
|
36068
|
-
.transition()
|
|
36069
|
-
.duration(this.defaultDuration)
|
|
36070
|
-
.ease(polyInOut)
|
|
36071
|
-
.attr('y', this.yFunction)
|
|
36072
|
-
.attr('height', this.heightFunction)
|
|
36073
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
36074
|
-
}
|
|
36075
|
-
else {
|
|
36076
|
-
update
|
|
36077
|
-
.select('rect')
|
|
36078
|
-
.transition()
|
|
36079
|
-
.duration(this.defaultDuration)
|
|
36080
|
-
.ease(polyInOut)
|
|
36081
|
-
.attr('x', this.xFunction)
|
|
36082
|
-
.attr('y', this.yFunction)
|
|
36083
|
-
.attr('width', this.widthFunction)
|
|
36084
|
-
.attr('height', this.heightFunction)
|
|
36085
|
-
.attr('fill', '#00005a');
|
|
36086
|
-
}
|
|
36087
|
-
return update
|
|
36088
|
-
.select('text')
|
|
36089
|
-
.style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
|
|
36090
|
-
.transition()
|
|
36091
|
-
.duration(this.defaultDuration)
|
|
36092
|
-
.ease(polyInOut)
|
|
36093
|
-
.attr('font-size', this.fontSize)
|
|
36094
|
-
.attr('font-weight', '600')
|
|
36095
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36096
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
36097
|
-
: this.yScale(d.value))
|
|
36098
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36099
|
-
? this.xScale(d.value)
|
|
36100
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
36101
|
-
.attr('text-anchor', (d) => {
|
|
36102
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36103
|
-
return 'middle';
|
|
36104
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36105
|
-
? 'start'
|
|
36106
|
-
: 'end';
|
|
36107
|
-
})
|
|
36108
|
-
.attr('dx', (d) => {
|
|
36109
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
36110
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36111
|
-
? this.tickPadding
|
|
36112
|
-
: -this.tickPadding;
|
|
36113
|
-
return 0;
|
|
36114
|
-
})
|
|
36115
|
-
.attr('fill', (d) => {
|
|
36116
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36117
|
-
return 'black';
|
|
36118
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36119
|
-
? 'black'
|
|
36120
|
-
: 'white';
|
|
36121
|
-
})
|
|
36122
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
36123
|
-
? '0.35em'
|
|
36124
|
-
: '-0.25em')
|
|
36125
|
-
.style('pointer-events', 'none')
|
|
36126
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
36127
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36128
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36129
|
-
: 0;
|
|
36130
|
-
const interpolatedValue = interpolate$1(oldnum, d.value);
|
|
36131
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
36132
|
-
});
|
|
36133
|
-
}, (exit) => exit.remove());
|
|
36134
|
-
this.barSelection = this.barChartContainer.selectAll('rect');
|
|
35955
|
+
.join('g')
|
|
35956
|
+
.attr('class', 'barGroup')
|
|
35957
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
35958
|
+
this.barSelection.selectAll('.bar')
|
|
35959
|
+
.data((d) => {
|
|
35960
|
+
return d.series;
|
|
35961
|
+
})
|
|
35962
|
+
.join('rect')
|
|
35963
|
+
.attr('class', 'bar')
|
|
35964
|
+
.style('cursor', 'pointer')
|
|
35965
|
+
.attr('x', this.xFunction)
|
|
35966
|
+
.attr('y', this.yFunction)
|
|
35967
|
+
.attr('ry', 4)
|
|
35968
|
+
.attr('rx', 4)
|
|
35969
|
+
.attr('width', this.widthFunction)
|
|
35970
|
+
.attr('height', this.heightFunction)
|
|
35971
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
35972
|
+
.on('mouseenter', this.hover)
|
|
35973
|
+
.on('mouseleave', this.hoverOut)
|
|
35974
|
+
.on('click', this.openTooltip);
|
|
35975
|
+
if (fromLoading) {
|
|
35976
|
+
this.initLegend();
|
|
35977
|
+
}
|
|
35978
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
36135
35979
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
36136
35980
|
};
|
|
36137
35981
|
// Setting position of text according to bar size
|
|
@@ -36170,7 +36014,7 @@ class barChart {
|
|
|
36170
36014
|
};
|
|
36171
36015
|
this.reshapeData = () => {
|
|
36172
36016
|
const toReturn = [];
|
|
36173
|
-
if (
|
|
36017
|
+
if (!this.chartData) {
|
|
36174
36018
|
this.placeholderTicks.forEach((key) => {
|
|
36175
36019
|
const tick = { key: key, series: [] };
|
|
36176
36020
|
tick.series.push({
|
|
@@ -36817,6 +36661,7 @@ class barChart {
|
|
|
36817
36661
|
// Hide unusable components
|
|
36818
36662
|
select(this.titleDiv)
|
|
36819
36663
|
.append(this.afHeadingLevel)
|
|
36664
|
+
.attr('class', 'loadingHeader')
|
|
36820
36665
|
.html(`${_t.loading}...`);
|
|
36821
36666
|
this.initYAxis(true);
|
|
36822
36667
|
this.initXAxis(true);
|
|
@@ -36865,14 +36710,17 @@ class barChart {
|
|
|
36865
36710
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
36866
36711
|
}
|
|
36867
36712
|
const animateBars = () => {
|
|
36868
|
-
this.barChartContainer.selectAll('.
|
|
36713
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
36869
36714
|
this.barSelection = this.barChartContainer
|
|
36715
|
+
.append('g')
|
|
36716
|
+
.attr('class', 'interactiveElements')
|
|
36717
|
+
.style('isolation', 'isolate')
|
|
36870
36718
|
.selectAll('barGroup')
|
|
36871
36719
|
.data(this.mappedData)
|
|
36872
36720
|
.join('g')
|
|
36873
36721
|
.attr('class', 'barGroup')
|
|
36874
|
-
.attr('id', (d) =>
|
|
36875
|
-
this.barSelection.selectAll('
|
|
36722
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
36723
|
+
this.barSelection.selectAll('bar')
|
|
36876
36724
|
.data((d) => {
|
|
36877
36725
|
return d.series;
|
|
36878
36726
|
})
|
|
@@ -36894,7 +36742,7 @@ class barChart {
|
|
|
36894
36742
|
.attr('y', this.yFunction)
|
|
36895
36743
|
.attr('height', this.heightFunction);
|
|
36896
36744
|
this.barChartContainer.selectAll('.bar')
|
|
36897
|
-
.transition()
|
|
36745
|
+
.transition('animateBar')
|
|
36898
36746
|
.duration(400)
|
|
36899
36747
|
.ease(linear$1)
|
|
36900
36748
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -36909,8 +36757,8 @@ class barChart {
|
|
|
36909
36757
|
};
|
|
36910
36758
|
const flattenBars = () => {
|
|
36911
36759
|
this.barChartContainer
|
|
36912
|
-
.selectAll('
|
|
36913
|
-
.transition()
|
|
36760
|
+
.selectAll('.bar')
|
|
36761
|
+
.transition('animateBar')
|
|
36914
36762
|
.duration(200)
|
|
36915
36763
|
.ease(linear$1)
|
|
36916
36764
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
@@ -37146,10 +36994,11 @@ class barChart {
|
|
|
37146
36994
|
]);
|
|
37147
36995
|
this.setNamedTicks(true);
|
|
37148
36996
|
// Stop animation
|
|
37149
|
-
this.
|
|
36997
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
36998
|
+
select(this.titleDiv).select('.loadingHeader').remove();
|
|
37150
36999
|
this.loading = false;
|
|
37151
|
-
this.
|
|
37152
|
-
|
|
37000
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
37001
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
37153
37002
|
.duration(this.defaultDuration)
|
|
37154
37003
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
37155
37004
|
? this.yScale(d.key)
|
|
@@ -37339,7 +37188,7 @@ class barChart {
|
|
|
37339
37188
|
<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
|
|
37340
37189
|
}
|
|
37341
37190
|
}
|
|
37342
|
-
return (hAsync(Host, { key: '
|
|
37191
|
+
return (hAsync(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, hAsync("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), hAsync("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), hAsync("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37343
37192
|
}
|
|
37344
37193
|
get hostElement() { return getElement(this); }
|
|
37345
37194
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -35945,189 +35945,33 @@ class barChart {
|
|
|
35945
35945
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
35946
35946
|
};
|
|
35947
35947
|
this.updateBars = (fromLoading) => {
|
|
35948
|
-
this.barChartContainer
|
|
35948
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
35949
35949
|
.selectAll('.barGroup')
|
|
35950
35950
|
.data(this.mappedData)
|
|
35951
|
-
.join(
|
|
35952
|
-
|
|
35953
|
-
|
|
35954
|
-
|
|
35955
|
-
|
|
35956
|
-
|
|
35957
|
-
|
|
35958
|
-
|
|
35959
|
-
|
|
35960
|
-
|
|
35961
|
-
|
|
35962
|
-
|
|
35963
|
-
|
|
35964
|
-
|
|
35965
|
-
|
|
35966
|
-
|
|
35967
|
-
|
|
35968
|
-
|
|
35969
|
-
|
|
35970
|
-
|
|
35971
|
-
|
|
35972
|
-
|
|
35973
|
-
|
|
35974
|
-
|
|
35975
|
-
.on('mouseenter', this.hover)
|
|
35976
|
-
.on('mouseleave', this.hoverOut)
|
|
35977
|
-
.on('click', this.openTooltip)
|
|
35978
|
-
.transition()
|
|
35979
|
-
.duration(this.defaultDuration)
|
|
35980
|
-
.ease(polyInOut)
|
|
35981
|
-
.attr('width', this.widthFunction)
|
|
35982
|
-
.attr('y', this.yFunction)
|
|
35983
|
-
.attr('height', this.heightFunction)
|
|
35984
|
-
.attr('fill', '#00005a');
|
|
35985
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
35986
|
-
return tempSelection;
|
|
35987
|
-
tempSelection
|
|
35988
|
-
.append('text')
|
|
35989
|
-
.text((d) => d.value.toLocaleString())
|
|
35990
|
-
.attr('class', 'barText')
|
|
35991
|
-
.attr('font-size', this.fontSize)
|
|
35992
|
-
.attr('font-weight', '600')
|
|
35993
|
-
.attr('text-anchor', 'end')
|
|
35994
|
-
.style('pointer-events', 'none')
|
|
35995
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35996
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
35997
|
-
: this.dims.height - this.margin.bottom)
|
|
35998
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
35999
|
-
? 2
|
|
36000
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
36001
|
-
.transition()
|
|
36002
|
-
.duration(this.defaultDuration)
|
|
36003
|
-
.ease(polyInOut)
|
|
36004
|
-
.attr('font-size', this.fontSize)
|
|
36005
|
-
.attr('font-weight', '600')
|
|
36006
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36007
|
-
? this.xScale(d.value)
|
|
36008
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
36009
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36010
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
36011
|
-
: this.yScale(d.value))
|
|
36012
|
-
.attr('text-anchor', (d) => {
|
|
36013
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36014
|
-
return 'middle';
|
|
36015
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36016
|
-
? 'start'
|
|
36017
|
-
: 'end';
|
|
36018
|
-
})
|
|
36019
|
-
.attr('dx', (d) => {
|
|
36020
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
36021
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36022
|
-
? this.tickPadding
|
|
36023
|
-
: -this.tickPadding;
|
|
36024
|
-
return 0;
|
|
36025
|
-
})
|
|
36026
|
-
.attr('fill', (d) => {
|
|
36027
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36028
|
-
return 'black';
|
|
36029
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36030
|
-
? 'black'
|
|
36031
|
-
: 'white';
|
|
36032
|
-
})
|
|
36033
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
36034
|
-
? '0.35em'
|
|
36035
|
-
: '-0.25em')
|
|
36036
|
-
.style('pointer-events', 'none')
|
|
36037
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
36038
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36039
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36040
|
-
: 0;
|
|
36041
|
-
const interpolatedValue = interpolate$1(oldnum, d.value);
|
|
36042
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
36043
|
-
});
|
|
36044
|
-
return tempSelection;
|
|
36045
|
-
}, (update) => {
|
|
36046
|
-
// Update ids to bars
|
|
36047
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
36048
|
-
// Mouse interaction to updated loading bars
|
|
36049
|
-
if (fromLoading) {
|
|
36050
|
-
update
|
|
36051
|
-
.select('rect')
|
|
36052
|
-
.on('mouseenter', this.hover)
|
|
36053
|
-
.on('mouseleave', this.hoverOut)
|
|
36054
|
-
.on('click', this.openTooltip)
|
|
36055
|
-
.attr('x', this.xFunction)
|
|
36056
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36057
|
-
? this.yScale(d.key)
|
|
36058
|
-
: this.dims.height - this.margin.bottom)
|
|
36059
|
-
.attr('width', this.widthFunction)
|
|
36060
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
36061
|
-
? this.yScale.bandwidth()
|
|
36062
|
-
: 0)
|
|
36063
|
-
.attr('fill', '#00005a')
|
|
36064
|
-
.transition()
|
|
36065
|
-
.duration(this.defaultDuration)
|
|
36066
|
-
.ease(polyInOut)
|
|
36067
|
-
.attr('y', this.yFunction)
|
|
36068
|
-
.attr('height', this.heightFunction)
|
|
36069
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
36070
|
-
}
|
|
36071
|
-
else {
|
|
36072
|
-
update
|
|
36073
|
-
.select('rect')
|
|
36074
|
-
.transition()
|
|
36075
|
-
.duration(this.defaultDuration)
|
|
36076
|
-
.ease(polyInOut)
|
|
36077
|
-
.attr('x', this.xFunction)
|
|
36078
|
-
.attr('y', this.yFunction)
|
|
36079
|
-
.attr('width', this.widthFunction)
|
|
36080
|
-
.attr('height', this.heightFunction)
|
|
36081
|
-
.attr('fill', '#00005a');
|
|
36082
|
-
}
|
|
36083
|
-
return update
|
|
36084
|
-
.select('text')
|
|
36085
|
-
.style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
|
|
36086
|
-
.transition()
|
|
36087
|
-
.duration(this.defaultDuration)
|
|
36088
|
-
.ease(polyInOut)
|
|
36089
|
-
.attr('font-size', this.fontSize)
|
|
36090
|
-
.attr('font-weight', '600')
|
|
36091
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36092
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
36093
|
-
: this.yScale(d.value))
|
|
36094
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
36095
|
-
? this.xScale(d.value)
|
|
36096
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
36097
|
-
.attr('text-anchor', (d) => {
|
|
36098
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36099
|
-
return 'middle';
|
|
36100
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36101
|
-
? 'start'
|
|
36102
|
-
: 'end';
|
|
36103
|
-
})
|
|
36104
|
-
.attr('dx', (d) => {
|
|
36105
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
36106
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36107
|
-
? this.tickPadding
|
|
36108
|
-
: -this.tickPadding;
|
|
36109
|
-
return 0;
|
|
36110
|
-
})
|
|
36111
|
-
.attr('fill', (d) => {
|
|
36112
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
36113
|
-
return 'black';
|
|
36114
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
36115
|
-
? 'black'
|
|
36116
|
-
: 'white';
|
|
36117
|
-
})
|
|
36118
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
36119
|
-
? '0.35em'
|
|
36120
|
-
: '-0.25em')
|
|
36121
|
-
.style('pointer-events', 'none')
|
|
36122
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
36123
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36124
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
36125
|
-
: 0;
|
|
36126
|
-
const interpolatedValue = interpolate$1(oldnum, d.value);
|
|
36127
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
36128
|
-
});
|
|
36129
|
-
}, (exit) => exit.remove());
|
|
36130
|
-
this.barSelection = this.barChartContainer.selectAll('rect');
|
|
35951
|
+
.join('g')
|
|
35952
|
+
.attr('class', 'barGroup')
|
|
35953
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
35954
|
+
this.barSelection.selectAll('.bar')
|
|
35955
|
+
.data((d) => {
|
|
35956
|
+
return d.series;
|
|
35957
|
+
})
|
|
35958
|
+
.join('rect')
|
|
35959
|
+
.attr('class', 'bar')
|
|
35960
|
+
.style('cursor', 'pointer')
|
|
35961
|
+
.attr('x', this.xFunction)
|
|
35962
|
+
.attr('y', this.yFunction)
|
|
35963
|
+
.attr('ry', 4)
|
|
35964
|
+
.attr('rx', 4)
|
|
35965
|
+
.attr('width', this.widthFunction)
|
|
35966
|
+
.attr('height', this.heightFunction)
|
|
35967
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
35968
|
+
.on('mouseenter', this.hover)
|
|
35969
|
+
.on('mouseleave', this.hoverOut)
|
|
35970
|
+
.on('click', this.openTooltip);
|
|
35971
|
+
if (fromLoading) {
|
|
35972
|
+
this.initLegend();
|
|
35973
|
+
}
|
|
35974
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
36131
35975
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
36132
35976
|
};
|
|
36133
35977
|
// Setting position of text according to bar size
|
|
@@ -36166,7 +36010,7 @@ class barChart {
|
|
|
36166
36010
|
};
|
|
36167
36011
|
this.reshapeData = () => {
|
|
36168
36012
|
const toReturn = [];
|
|
36169
|
-
if (
|
|
36013
|
+
if (!this.chartData) {
|
|
36170
36014
|
this.placeholderTicks.forEach((key) => {
|
|
36171
36015
|
const tick = { key: key, series: [] };
|
|
36172
36016
|
tick.series.push({
|
|
@@ -36813,6 +36657,7 @@ class barChart {
|
|
|
36813
36657
|
// Hide unusable components
|
|
36814
36658
|
select(this.titleDiv)
|
|
36815
36659
|
.append(this.afHeadingLevel)
|
|
36660
|
+
.attr('class', 'loadingHeader')
|
|
36816
36661
|
.html(`${_t.loading}...`);
|
|
36817
36662
|
this.initYAxis(true);
|
|
36818
36663
|
this.initXAxis(true);
|
|
@@ -36861,14 +36706,17 @@ class barChart {
|
|
|
36861
36706
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
36862
36707
|
}
|
|
36863
36708
|
const animateBars = () => {
|
|
36864
|
-
this.barChartContainer.selectAll('.
|
|
36709
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
36865
36710
|
this.barSelection = this.barChartContainer
|
|
36711
|
+
.append('g')
|
|
36712
|
+
.attr('class', 'interactiveElements')
|
|
36713
|
+
.style('isolation', 'isolate')
|
|
36866
36714
|
.selectAll('barGroup')
|
|
36867
36715
|
.data(this.mappedData)
|
|
36868
36716
|
.join('g')
|
|
36869
36717
|
.attr('class', 'barGroup')
|
|
36870
|
-
.attr('id', (d) =>
|
|
36871
|
-
this.barSelection.selectAll('
|
|
36718
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
36719
|
+
this.barSelection.selectAll('bar')
|
|
36872
36720
|
.data((d) => {
|
|
36873
36721
|
return d.series;
|
|
36874
36722
|
})
|
|
@@ -36890,7 +36738,7 @@ class barChart {
|
|
|
36890
36738
|
.attr('y', this.yFunction)
|
|
36891
36739
|
.attr('height', this.heightFunction);
|
|
36892
36740
|
this.barChartContainer.selectAll('.bar')
|
|
36893
|
-
.transition()
|
|
36741
|
+
.transition('animateBar')
|
|
36894
36742
|
.duration(400)
|
|
36895
36743
|
.ease(linear$1)
|
|
36896
36744
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -36905,8 +36753,8 @@ class barChart {
|
|
|
36905
36753
|
};
|
|
36906
36754
|
const flattenBars = () => {
|
|
36907
36755
|
this.barChartContainer
|
|
36908
|
-
.selectAll('
|
|
36909
|
-
.transition()
|
|
36756
|
+
.selectAll('.bar')
|
|
36757
|
+
.transition('animateBar')
|
|
36910
36758
|
.duration(200)
|
|
36911
36759
|
.ease(linear$1)
|
|
36912
36760
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
@@ -37142,10 +36990,11 @@ class barChart {
|
|
|
37142
36990
|
]);
|
|
37143
36991
|
this.setNamedTicks(true);
|
|
37144
36992
|
// Stop animation
|
|
37145
|
-
this.
|
|
36993
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
36994
|
+
select(this.titleDiv).select('.loadingHeader').remove();
|
|
37146
36995
|
this.loading = false;
|
|
37147
|
-
this.
|
|
37148
|
-
|
|
36996
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
36997
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
37149
36998
|
.duration(this.defaultDuration)
|
|
37150
36999
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
37151
37000
|
? this.yScale(d.key)
|
|
@@ -37335,7 +37184,7 @@ class barChart {
|
|
|
37335
37184
|
<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>`;
|
|
37336
37185
|
}
|
|
37337
37186
|
}
|
|
37338
|
-
return (hAsync(Host, { key: '
|
|
37187
|
+
return (hAsync(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, hAsync("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), hAsync("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), hAsync("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
37339
37188
|
}
|
|
37340
37189
|
get hostElement() { return getElement(this); }
|
|
37341
37190
|
static get watchers() { return {
|
package/package.json
CHANGED