@designsystem-se/af 35.4.1-beta.5 → 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 +61 -202
- 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 +60 -201
- package/dist/collection/components/_chart/bar-chart/bar-chart.css +4 -1
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +59 -200
- 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 +1 -0
- package/dist/digi-arbetsformedlingen/{p-a47b6b5c.js → p-f9a1a787.js} +1 -1
- package/dist/esm/digi-bar-chart_27.entry.js +61 -202
- 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 +60 -201
- package/hydrate/index.mjs +60 -201
- 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
|
@@ -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,190 +35948,31 @@ class barChart {
|
|
|
35948
35948
|
this.barGroupID = (key) => {
|
|
35949
35949
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
35950
35950
|
};
|
|
35951
|
-
this.updateBars = (
|
|
35952
|
-
this.barChartContainer
|
|
35951
|
+
this.updateBars = () => {
|
|
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
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
35977
|
-
? this.yScale.bandwidth()
|
|
35978
|
-
: 0)
|
|
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
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
36135
35976
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
36136
35977
|
};
|
|
36137
35978
|
// Setting position of text according to bar size
|
|
@@ -36170,7 +36011,7 @@ class barChart {
|
|
|
36170
36011
|
};
|
|
36171
36012
|
this.reshapeData = () => {
|
|
36172
36013
|
const toReturn = [];
|
|
36173
|
-
if (
|
|
36014
|
+
if (!this.chartData) {
|
|
36174
36015
|
this.placeholderTicks.forEach((key) => {
|
|
36175
36016
|
const tick = { key: key, series: [] };
|
|
36176
36017
|
tick.series.push({
|
|
@@ -36565,7 +36406,7 @@ class barChart {
|
|
|
36565
36406
|
this.tooltip
|
|
36566
36407
|
.select('digi-icon-caret-up')
|
|
36567
36408
|
.style('position', 'absolute')
|
|
36568
|
-
.style('top', '-
|
|
36409
|
+
.style('top', '-11px')
|
|
36569
36410
|
.style('left', '0')
|
|
36570
36411
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
36571
36412
|
}
|
|
@@ -36588,7 +36429,16 @@ class barChart {
|
|
|
36588
36429
|
}
|
|
36589
36430
|
else {
|
|
36590
36431
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
36591
|
-
|
|
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))
|
|
36592
36442
|
}
|
|
36593
36443
|
else {
|
|
36594
36444
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -36688,7 +36538,7 @@ class barChart {
|
|
|
36688
36538
|
this.afChartData = undefined;
|
|
36689
36539
|
}
|
|
36690
36540
|
afChartDataUpdate(data) {
|
|
36691
|
-
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) {
|
|
36692
36542
|
if (typeof data != 'string')
|
|
36693
36543
|
this.chartData = data;
|
|
36694
36544
|
else
|
|
@@ -36790,6 +36640,7 @@ class barChart {
|
|
|
36790
36640
|
.select('.tooltipHead')
|
|
36791
36641
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
36792
36642
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
36643
|
+
.style('text-wrap', 'wrap')
|
|
36793
36644
|
.style('font-size', '1rem')
|
|
36794
36645
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
36795
36646
|
.style('font-weight', '500');
|
|
@@ -36816,7 +36667,7 @@ class barChart {
|
|
|
36816
36667
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
36817
36668
|
// Hide unusable components
|
|
36818
36669
|
select(this.titleDiv)
|
|
36819
|
-
.
|
|
36670
|
+
.select(this.afHeadingLevel)
|
|
36820
36671
|
.html(`${_t.loading}...`);
|
|
36821
36672
|
this.initYAxis(true);
|
|
36822
36673
|
this.initXAxis(true);
|
|
@@ -36865,14 +36716,17 @@ class barChart {
|
|
|
36865
36716
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
36866
36717
|
}
|
|
36867
36718
|
const animateBars = () => {
|
|
36868
|
-
this.barChartContainer.selectAll('.
|
|
36719
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
36869
36720
|
this.barSelection = this.barChartContainer
|
|
36721
|
+
.append('g')
|
|
36722
|
+
.attr('class', 'interactiveElements')
|
|
36723
|
+
.style('isolation', 'isolate')
|
|
36870
36724
|
.selectAll('barGroup')
|
|
36871
36725
|
.data(this.mappedData)
|
|
36872
36726
|
.join('g')
|
|
36873
36727
|
.attr('class', 'barGroup')
|
|
36874
|
-
.attr('id', (d) =>
|
|
36875
|
-
this.barSelection.selectAll('
|
|
36728
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
36729
|
+
this.barSelection.selectAll('bar')
|
|
36876
36730
|
.data((d) => {
|
|
36877
36731
|
return d.series;
|
|
36878
36732
|
})
|
|
@@ -36894,7 +36748,7 @@ class barChart {
|
|
|
36894
36748
|
.attr('y', this.yFunction)
|
|
36895
36749
|
.attr('height', this.heightFunction);
|
|
36896
36750
|
this.barChartContainer.selectAll('.bar')
|
|
36897
|
-
.transition()
|
|
36751
|
+
.transition('animateBar')
|
|
36898
36752
|
.duration(400)
|
|
36899
36753
|
.ease(linear$1)
|
|
36900
36754
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -36909,8 +36763,8 @@ class barChart {
|
|
|
36909
36763
|
};
|
|
36910
36764
|
const flattenBars = () => {
|
|
36911
36765
|
this.barChartContainer
|
|
36912
|
-
.selectAll('
|
|
36913
|
-
.transition()
|
|
36766
|
+
.selectAll('.bar')
|
|
36767
|
+
.transition('animateBar')
|
|
36914
36768
|
.duration(200)
|
|
36915
36769
|
.ease(linear$1)
|
|
36916
36770
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
@@ -37087,6 +36941,7 @@ class barChart {
|
|
|
37087
36941
|
select(this.host).select('.tableButton').style('display', null);
|
|
37088
36942
|
select(this.legendDiv).style('display', null);
|
|
37089
36943
|
this.initToolTip();
|
|
36944
|
+
this.initLegend();
|
|
37090
36945
|
}
|
|
37091
36946
|
// Disconnect resize observer while adjusting things
|
|
37092
36947
|
this.barChartObserver.disconnect();
|
|
@@ -37146,18 +37001,22 @@ class barChart {
|
|
|
37146
37001
|
]);
|
|
37147
37002
|
this.setNamedTicks(true);
|
|
37148
37003
|
// Stop animation
|
|
37149
|
-
this.
|
|
37004
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
37005
|
+
select(this.titleDiv).select('.loadingHeader').remove();
|
|
37150
37006
|
this.loading = false;
|
|
37151
|
-
this.
|
|
37152
|
-
|
|
37007
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
37008
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
37153
37009
|
.duration(this.defaultDuration)
|
|
37154
37010
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
37155
37011
|
? this.yScale(d.key)
|
|
37156
37012
|
: this.dims.height - this.margin.bottom)
|
|
37157
37013
|
.attr('height', () => 0)
|
|
37158
|
-
.on('end', (...[, i]) =>
|
|
37159
|
-
|
|
37160
|
-
|
|
37014
|
+
.on('end', (...[, i]) => {
|
|
37015
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
37016
|
+
this.updateBars();
|
|
37017
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
37018
|
+
}
|
|
37019
|
+
});
|
|
37161
37020
|
this.setTickInteraction();
|
|
37162
37021
|
}
|
|
37163
37022
|
else {
|
|
@@ -37339,7 +37198,7 @@ class barChart {
|
|
|
37339
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>`;
|
|
37340
37199
|
}
|
|
37341
37200
|
}
|
|
37342
|
-
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) }, ' ')));
|
|
37343
37202
|
}
|
|
37344
37203
|
get hostElement() { return getElement(this); }
|
|
37345
37204
|
static get watchers() { return {
|