@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
|
@@ -134,7 +134,7 @@ function band() {
|
|
|
134
134
|
return linear.initRange.apply(rescale(), arguments);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:
|
|
137
|
+
const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
|
|
138
138
|
const DigiBarChartStyle0 = barChartCss;
|
|
139
139
|
|
|
140
140
|
const barChart = class {
|
|
@@ -390,190 +390,31 @@ const barChart = class {
|
|
|
390
390
|
this.barGroupID = (key) => {
|
|
391
391
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
392
392
|
};
|
|
393
|
-
this.updateBars = (
|
|
394
|
-
this.barChartContainer
|
|
393
|
+
this.updateBars = () => {
|
|
394
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
395
395
|
.selectAll('.barGroup')
|
|
396
396
|
.data(this.mappedData)
|
|
397
|
-
.join(
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
.attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
419
|
-
? this.yScale.bandwidth()
|
|
420
|
-
: 0)
|
|
421
|
-
.on('mouseenter', this.hover)
|
|
422
|
-
.on('mouseleave', this.hoverOut)
|
|
423
|
-
.on('click', this.openTooltip)
|
|
424
|
-
.transition()
|
|
425
|
-
.duration(this.defaultDuration)
|
|
426
|
-
.ease(linear.polyInOut)
|
|
427
|
-
.attr('width', this.widthFunction)
|
|
428
|
-
.attr('y', this.yFunction)
|
|
429
|
-
.attr('height', this.heightFunction)
|
|
430
|
-
.attr('fill', '#00005a');
|
|
431
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
432
|
-
return tempSelection;
|
|
433
|
-
tempSelection
|
|
434
|
-
.append('text')
|
|
435
|
-
.text((d) => d.value.toLocaleString())
|
|
436
|
-
.attr('class', 'barText')
|
|
437
|
-
.attr('font-size', this.fontSize)
|
|
438
|
-
.attr('font-weight', '600')
|
|
439
|
-
.attr('text-anchor', 'end')
|
|
440
|
-
.style('pointer-events', 'none')
|
|
441
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
442
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
443
|
-
: this.dims.height - this.margin.bottom)
|
|
444
|
-
.attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
445
|
-
? 2
|
|
446
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
447
|
-
.transition()
|
|
448
|
-
.duration(this.defaultDuration)
|
|
449
|
-
.ease(linear.polyInOut)
|
|
450
|
-
.attr('font-size', this.fontSize)
|
|
451
|
-
.attr('font-weight', '600')
|
|
452
|
-
.attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
453
|
-
? this.xScale(d.value)
|
|
454
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
455
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
456
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
457
|
-
: this.yScale(d.value))
|
|
458
|
-
.attr('text-anchor', (d) => {
|
|
459
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
460
|
-
return 'middle';
|
|
461
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
462
|
-
? 'start'
|
|
463
|
-
: 'end';
|
|
464
|
-
})
|
|
465
|
-
.attr('dx', (d) => {
|
|
466
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
|
|
467
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
468
|
-
? this.tickPadding
|
|
469
|
-
: -this.tickPadding;
|
|
470
|
-
return 0;
|
|
471
|
-
})
|
|
472
|
-
.attr('fill', (d) => {
|
|
473
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
474
|
-
return 'black';
|
|
475
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
476
|
-
? 'black'
|
|
477
|
-
: 'white';
|
|
478
|
-
})
|
|
479
|
-
.attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
|
|
480
|
-
? '0.35em'
|
|
481
|
-
: '-0.25em')
|
|
482
|
-
.style('pointer-events', 'none')
|
|
483
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
484
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
485
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
486
|
-
: 0;
|
|
487
|
-
const interpolatedValue = linear.interpolate(oldnum, d.value);
|
|
488
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
489
|
-
});
|
|
490
|
-
return tempSelection;
|
|
491
|
-
}, (update) => {
|
|
492
|
-
// Update ids to bars
|
|
493
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
494
|
-
// Mouse interaction to updated loading bars
|
|
495
|
-
if (fromLoading) {
|
|
496
|
-
update
|
|
497
|
-
.select('rect')
|
|
498
|
-
.on('mouseenter', this.hover)
|
|
499
|
-
.on('mouseleave', this.hoverOut)
|
|
500
|
-
.on('click', this.openTooltip)
|
|
501
|
-
.attr('x', this.xFunction)
|
|
502
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
503
|
-
? this.yScale(d.key)
|
|
504
|
-
: this.dims.height - this.margin.bottom)
|
|
505
|
-
.attr('width', this.widthFunction)
|
|
506
|
-
.attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
507
|
-
? this.yScale.bandwidth()
|
|
508
|
-
: 0)
|
|
509
|
-
.attr('fill', '#00005a')
|
|
510
|
-
.transition()
|
|
511
|
-
.duration(this.defaultDuration)
|
|
512
|
-
.ease(linear.polyInOut)
|
|
513
|
-
.attr('y', this.yFunction)
|
|
514
|
-
.attr('height', this.heightFunction)
|
|
515
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
516
|
-
}
|
|
517
|
-
else {
|
|
518
|
-
update
|
|
519
|
-
.select('rect')
|
|
520
|
-
.transition()
|
|
521
|
-
.duration(this.defaultDuration)
|
|
522
|
-
.ease(linear.polyInOut)
|
|
523
|
-
.attr('x', this.xFunction)
|
|
524
|
-
.attr('y', this.yFunction)
|
|
525
|
-
.attr('width', this.widthFunction)
|
|
526
|
-
.attr('height', this.heightFunction)
|
|
527
|
-
.attr('fill', '#00005a');
|
|
528
|
-
}
|
|
529
|
-
return update
|
|
530
|
-
.select('text')
|
|
531
|
-
.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'; })
|
|
532
|
-
.transition()
|
|
533
|
-
.duration(this.defaultDuration)
|
|
534
|
-
.ease(linear.polyInOut)
|
|
535
|
-
.attr('font-size', this.fontSize)
|
|
536
|
-
.attr('font-weight', '600')
|
|
537
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
538
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
539
|
-
: this.yScale(d.value))
|
|
540
|
-
.attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
541
|
-
? this.xScale(d.value)
|
|
542
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
543
|
-
.attr('text-anchor', (d) => {
|
|
544
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
545
|
-
return 'middle';
|
|
546
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
547
|
-
? 'start'
|
|
548
|
-
: 'end';
|
|
549
|
-
})
|
|
550
|
-
.attr('dx', (d) => {
|
|
551
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
|
|
552
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
553
|
-
? this.tickPadding
|
|
554
|
-
: -this.tickPadding;
|
|
555
|
-
return 0;
|
|
556
|
-
})
|
|
557
|
-
.attr('fill', (d) => {
|
|
558
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
559
|
-
return 'black';
|
|
560
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
561
|
-
? 'black'
|
|
562
|
-
: 'white';
|
|
563
|
-
})
|
|
564
|
-
.attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
|
|
565
|
-
? '0.35em'
|
|
566
|
-
: '-0.25em')
|
|
567
|
-
.style('pointer-events', 'none')
|
|
568
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
569
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
570
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
571
|
-
: 0;
|
|
572
|
-
const interpolatedValue = linear.interpolate(oldnum, d.value);
|
|
573
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
574
|
-
});
|
|
575
|
-
}, (exit) => exit.remove());
|
|
576
|
-
this.barSelection = this.barChartContainer.selectAll('rect');
|
|
397
|
+
.join('g')
|
|
398
|
+
.attr('class', 'barGroup')
|
|
399
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
400
|
+
this.barSelection.selectAll('.bar')
|
|
401
|
+
.data((d) => {
|
|
402
|
+
return d.series;
|
|
403
|
+
})
|
|
404
|
+
.join('rect')
|
|
405
|
+
.attr('class', 'bar')
|
|
406
|
+
.style('cursor', 'pointer')
|
|
407
|
+
.attr('x', this.xFunction)
|
|
408
|
+
.attr('y', this.yFunction)
|
|
409
|
+
.attr('ry', 4)
|
|
410
|
+
.attr('rx', 4)
|
|
411
|
+
.attr('width', this.widthFunction)
|
|
412
|
+
.attr('height', this.heightFunction)
|
|
413
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
414
|
+
.on('mouseenter', this.hover)
|
|
415
|
+
.on('mouseleave', this.hoverOut)
|
|
416
|
+
.on('click', this.openTooltip);
|
|
417
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
577
418
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
578
419
|
};
|
|
579
420
|
// Setting position of text according to bar size
|
|
@@ -612,7 +453,7 @@ const barChart = class {
|
|
|
612
453
|
};
|
|
613
454
|
this.reshapeData = () => {
|
|
614
455
|
const toReturn = [];
|
|
615
|
-
if (
|
|
456
|
+
if (!this.chartData) {
|
|
616
457
|
this.placeholderTicks.forEach((key) => {
|
|
617
458
|
const tick = { key: key, series: [] };
|
|
618
459
|
tick.series.push({
|
|
@@ -1007,7 +848,7 @@ const barChart = class {
|
|
|
1007
848
|
this.tooltip
|
|
1008
849
|
.select('digi-icon-caret-up')
|
|
1009
850
|
.style('position', 'absolute')
|
|
1010
|
-
.style('top', '-
|
|
851
|
+
.style('top', '-11px')
|
|
1011
852
|
.style('left', '0')
|
|
1012
853
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
1013
854
|
}
|
|
@@ -1030,7 +871,16 @@ const barChart = class {
|
|
|
1030
871
|
}
|
|
1031
872
|
else {
|
|
1032
873
|
if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
|
|
1033
|
-
|
|
874
|
+
this.tooltip
|
|
875
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
876
|
+
);
|
|
877
|
+
this.tooltip
|
|
878
|
+
.select('digi-icon-caret-up')
|
|
879
|
+
.style('position', 'absolute')
|
|
880
|
+
.style('top', '-11px')
|
|
881
|
+
.style('left', '0')
|
|
882
|
+
.style('transform', `translate(50%,0)`);
|
|
883
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
1034
884
|
}
|
|
1035
885
|
else {
|
|
1036
886
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -1130,7 +980,7 @@ const barChart = class {
|
|
|
1130
980
|
this.afChartData = undefined;
|
|
1131
981
|
}
|
|
1132
982
|
afChartDataUpdate(data) {
|
|
1133
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
983
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
1134
984
|
if (typeof data != 'string')
|
|
1135
985
|
this.chartData = data;
|
|
1136
986
|
else
|
|
@@ -1232,6 +1082,7 @@ const barChart = class {
|
|
|
1232
1082
|
.select('.tooltipHead')
|
|
1233
1083
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1234
1084
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1085
|
+
.style('text-wrap', 'wrap')
|
|
1235
1086
|
.style('font-size', '1rem')
|
|
1236
1087
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1237
1088
|
.style('font-weight', '500');
|
|
@@ -1258,7 +1109,7 @@ const barChart = class {
|
|
|
1258
1109
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1259
1110
|
// Hide unusable components
|
|
1260
1111
|
linear.select(this.titleDiv)
|
|
1261
|
-
.
|
|
1112
|
+
.select(this.afHeadingLevel)
|
|
1262
1113
|
.html(`${text._t.loading}...`);
|
|
1263
1114
|
this.initYAxis(true);
|
|
1264
1115
|
this.initXAxis(true);
|
|
@@ -1307,14 +1158,17 @@ const barChart = class {
|
|
|
1307
1158
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
1308
1159
|
}
|
|
1309
1160
|
const animateBars = () => {
|
|
1310
|
-
this.barChartContainer.selectAll('.
|
|
1161
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
1311
1162
|
this.barSelection = this.barChartContainer
|
|
1163
|
+
.append('g')
|
|
1164
|
+
.attr('class', 'interactiveElements')
|
|
1165
|
+
.style('isolation', 'isolate')
|
|
1312
1166
|
.selectAll('barGroup')
|
|
1313
1167
|
.data(this.mappedData)
|
|
1314
1168
|
.join('g')
|
|
1315
1169
|
.attr('class', 'barGroup')
|
|
1316
|
-
.attr('id', (d) =>
|
|
1317
|
-
this.barSelection.selectAll('
|
|
1170
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
1171
|
+
this.barSelection.selectAll('bar')
|
|
1318
1172
|
.data((d) => {
|
|
1319
1173
|
return d.series;
|
|
1320
1174
|
})
|
|
@@ -1336,7 +1190,7 @@ const barChart = class {
|
|
|
1336
1190
|
.attr('y', this.yFunction)
|
|
1337
1191
|
.attr('height', this.heightFunction);
|
|
1338
1192
|
this.barChartContainer.selectAll('.bar')
|
|
1339
|
-
.transition()
|
|
1193
|
+
.transition('animateBar')
|
|
1340
1194
|
.duration(400)
|
|
1341
1195
|
.ease(linear.linear$1)
|
|
1342
1196
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -1351,8 +1205,8 @@ const barChart = class {
|
|
|
1351
1205
|
};
|
|
1352
1206
|
const flattenBars = () => {
|
|
1353
1207
|
this.barChartContainer
|
|
1354
|
-
.selectAll('
|
|
1355
|
-
.transition()
|
|
1208
|
+
.selectAll('.bar')
|
|
1209
|
+
.transition('animateBar')
|
|
1356
1210
|
.duration(200)
|
|
1357
1211
|
.ease(linear.linear$1)
|
|
1358
1212
|
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
@@ -1529,6 +1383,7 @@ const barChart = class {
|
|
|
1529
1383
|
linear.select(this.host).select('.tableButton').style('display', null);
|
|
1530
1384
|
linear.select(this.legendDiv).style('display', null);
|
|
1531
1385
|
this.initToolTip();
|
|
1386
|
+
this.initLegend();
|
|
1532
1387
|
}
|
|
1533
1388
|
// Disconnect resize observer while adjusting things
|
|
1534
1389
|
this.barChartObserver.disconnect();
|
|
@@ -1588,18 +1443,22 @@ const barChart = class {
|
|
|
1588
1443
|
]);
|
|
1589
1444
|
this.setNamedTicks(true);
|
|
1590
1445
|
// Stop animation
|
|
1591
|
-
this.
|
|
1446
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
1447
|
+
linear.select(this.titleDiv).select('.loadingHeader').remove();
|
|
1592
1448
|
this.loading = false;
|
|
1593
|
-
this.
|
|
1594
|
-
|
|
1449
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
1450
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
1595
1451
|
.duration(this.defaultDuration)
|
|
1596
1452
|
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
1597
1453
|
? this.yScale(d.key)
|
|
1598
1454
|
: this.dims.height - this.margin.bottom)
|
|
1599
1455
|
.attr('height', () => 0)
|
|
1600
|
-
.on('end', (...[, i]) =>
|
|
1601
|
-
|
|
1602
|
-
|
|
1456
|
+
.on('end', (...[, i]) => {
|
|
1457
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1458
|
+
this.updateBars();
|
|
1459
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1460
|
+
}
|
|
1461
|
+
});
|
|
1603
1462
|
this.setTickInteraction();
|
|
1604
1463
|
}
|
|
1605
1464
|
else {
|
|
@@ -1781,7 +1640,7 @@ const barChart = class {
|
|
|
1781
1640
|
<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
|
|
1782
1641
|
}
|
|
1783
1642
|
}
|
|
1784
|
-
return (index.h(index.Host, { key: '
|
|
1643
|
+
return (index.h(index.Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, index.h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, index.h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, index.h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, index.h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), index.h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), index.h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1785
1644
|
}
|
|
1786
1645
|
get hostElement() { return index.getElement(this); }
|
|
1787
1646
|
static get watchers() { return {
|
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
gap: 0.75rem;
|
|
25
25
|
}
|
|
26
|
+
:host .topWrapper {
|
|
27
|
+
margin-bottom: 0.75rem;
|
|
28
|
+
}
|
|
26
29
|
:host .chartTitle {
|
|
27
30
|
--MARGIN--HEADING-2: 0;
|
|
28
31
|
--MARGIN--HEADING-3: 0;
|
|
@@ -31,7 +34,7 @@
|
|
|
31
34
|
--MARGIN--HEADING-6: 0;
|
|
32
35
|
}
|
|
33
36
|
:host .buttonWrapper {
|
|
34
|
-
--digi--button--padding--medium:
|
|
37
|
+
--digi--button--padding--medium: 0 0 0.75rem 0;
|
|
35
38
|
}
|
|
36
39
|
:host .chartTooltip {
|
|
37
40
|
top: -5px;
|