@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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-148a7577.js';
|
|
2
|
-
import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom,
|
|
2
|
+
import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, m as max, p as polyInOut, c as min, d as linear$1 } from './linear-78b9219d.js';
|
|
3
3
|
import { _ as _t } from './text-26e02c8d.js';
|
|
4
4
|
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
|
|
5
5
|
import { a as BarChartVariation, H as HeaderCenterContentWidth, L as LayoutBlockContainer, p as LayoutContainerVariation, q as LayoutContainerMaxWidth, r as NavigationVerticalMenuVariation, N as NavigationVerticalMenuActiveIndicatorSize, T as TitleLogoVariation } from './typography-variation.enum-531cdf64.js';
|
|
@@ -130,7 +130,7 @@ function band() {
|
|
|
130
130
|
return initRange.apply(rescale(), arguments);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
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:
|
|
133
|
+
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}";
|
|
134
134
|
const DigiBarChartStyle0 = barChartCss;
|
|
135
135
|
|
|
136
136
|
const barChart = class {
|
|
@@ -386,190 +386,31 @@ const barChart = class {
|
|
|
386
386
|
this.barGroupID = (key) => {
|
|
387
387
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
388
388
|
};
|
|
389
|
-
this.updateBars = (
|
|
390
|
-
this.barChartContainer
|
|
389
|
+
this.updateBars = () => {
|
|
390
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
391
391
|
.selectAll('.barGroup')
|
|
392
392
|
.data(this.mappedData)
|
|
393
|
-
.join(
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
415
|
-
? this.yScale.bandwidth()
|
|
416
|
-
: 0)
|
|
417
|
-
.on('mouseenter', this.hover)
|
|
418
|
-
.on('mouseleave', this.hoverOut)
|
|
419
|
-
.on('click', this.openTooltip)
|
|
420
|
-
.transition()
|
|
421
|
-
.duration(this.defaultDuration)
|
|
422
|
-
.ease(polyInOut)
|
|
423
|
-
.attr('width', this.widthFunction)
|
|
424
|
-
.attr('y', this.yFunction)
|
|
425
|
-
.attr('height', this.heightFunction)
|
|
426
|
-
.attr('fill', '#00005a');
|
|
427
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
428
|
-
return tempSelection;
|
|
429
|
-
tempSelection
|
|
430
|
-
.append('text')
|
|
431
|
-
.text((d) => d.value.toLocaleString())
|
|
432
|
-
.attr('class', 'barText')
|
|
433
|
-
.attr('font-size', this.fontSize)
|
|
434
|
-
.attr('font-weight', '600')
|
|
435
|
-
.attr('text-anchor', 'end')
|
|
436
|
-
.style('pointer-events', 'none')
|
|
437
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
438
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
439
|
-
: this.dims.height - this.margin.bottom)
|
|
440
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
441
|
-
? 2
|
|
442
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
443
|
-
.transition()
|
|
444
|
-
.duration(this.defaultDuration)
|
|
445
|
-
.ease(polyInOut)
|
|
446
|
-
.attr('font-size', this.fontSize)
|
|
447
|
-
.attr('font-weight', '600')
|
|
448
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
449
|
-
? this.xScale(d.value)
|
|
450
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
451
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
452
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
453
|
-
: this.yScale(d.value))
|
|
454
|
-
.attr('text-anchor', (d) => {
|
|
455
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
456
|
-
return 'middle';
|
|
457
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
458
|
-
? 'start'
|
|
459
|
-
: 'end';
|
|
460
|
-
})
|
|
461
|
-
.attr('dx', (d) => {
|
|
462
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
463
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
464
|
-
? this.tickPadding
|
|
465
|
-
: -this.tickPadding;
|
|
466
|
-
return 0;
|
|
467
|
-
})
|
|
468
|
-
.attr('fill', (d) => {
|
|
469
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
470
|
-
return 'black';
|
|
471
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
472
|
-
? 'black'
|
|
473
|
-
: 'white';
|
|
474
|
-
})
|
|
475
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
476
|
-
? '0.35em'
|
|
477
|
-
: '-0.25em')
|
|
478
|
-
.style('pointer-events', 'none')
|
|
479
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
480
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
481
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
482
|
-
: 0;
|
|
483
|
-
const interpolatedValue = interpolate(oldnum, d.value);
|
|
484
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
485
|
-
});
|
|
486
|
-
return tempSelection;
|
|
487
|
-
}, (update) => {
|
|
488
|
-
// Update ids to bars
|
|
489
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
490
|
-
// Mouse interaction to updated loading bars
|
|
491
|
-
if (fromLoading) {
|
|
492
|
-
update
|
|
493
|
-
.select('rect')
|
|
494
|
-
.on('mouseenter', this.hover)
|
|
495
|
-
.on('mouseleave', this.hoverOut)
|
|
496
|
-
.on('click', this.openTooltip)
|
|
497
|
-
.attr('x', this.xFunction)
|
|
498
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
499
|
-
? this.yScale(d.key)
|
|
500
|
-
: this.dims.height - this.margin.bottom)
|
|
501
|
-
.attr('width', this.widthFunction)
|
|
502
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
503
|
-
? this.yScale.bandwidth()
|
|
504
|
-
: 0)
|
|
505
|
-
.attr('fill', '#00005a')
|
|
506
|
-
.transition()
|
|
507
|
-
.duration(this.defaultDuration)
|
|
508
|
-
.ease(polyInOut)
|
|
509
|
-
.attr('y', this.yFunction)
|
|
510
|
-
.attr('height', this.heightFunction)
|
|
511
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
512
|
-
}
|
|
513
|
-
else {
|
|
514
|
-
update
|
|
515
|
-
.select('rect')
|
|
516
|
-
.transition()
|
|
517
|
-
.duration(this.defaultDuration)
|
|
518
|
-
.ease(polyInOut)
|
|
519
|
-
.attr('x', this.xFunction)
|
|
520
|
-
.attr('y', this.yFunction)
|
|
521
|
-
.attr('width', this.widthFunction)
|
|
522
|
-
.attr('height', this.heightFunction)
|
|
523
|
-
.attr('fill', '#00005a');
|
|
524
|
-
}
|
|
525
|
-
return update
|
|
526
|
-
.select('text')
|
|
527
|
-
.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'; })
|
|
528
|
-
.transition()
|
|
529
|
-
.duration(this.defaultDuration)
|
|
530
|
-
.ease(polyInOut)
|
|
531
|
-
.attr('font-size', this.fontSize)
|
|
532
|
-
.attr('font-weight', '600')
|
|
533
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
534
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
535
|
-
: this.yScale(d.value))
|
|
536
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
537
|
-
? this.xScale(d.value)
|
|
538
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
539
|
-
.attr('text-anchor', (d) => {
|
|
540
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
541
|
-
return 'middle';
|
|
542
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
543
|
-
? 'start'
|
|
544
|
-
: 'end';
|
|
545
|
-
})
|
|
546
|
-
.attr('dx', (d) => {
|
|
547
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
548
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
549
|
-
? this.tickPadding
|
|
550
|
-
: -this.tickPadding;
|
|
551
|
-
return 0;
|
|
552
|
-
})
|
|
553
|
-
.attr('fill', (d) => {
|
|
554
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
555
|
-
return 'black';
|
|
556
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
557
|
-
? 'black'
|
|
558
|
-
: 'white';
|
|
559
|
-
})
|
|
560
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
561
|
-
? '0.35em'
|
|
562
|
-
: '-0.25em')
|
|
563
|
-
.style('pointer-events', 'none')
|
|
564
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
565
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
566
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
567
|
-
: 0;
|
|
568
|
-
const interpolatedValue = interpolate(oldnum, d.value);
|
|
569
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
570
|
-
});
|
|
571
|
-
}, (exit) => exit.remove());
|
|
572
|
-
this.barSelection = this.barChartContainer.selectAll('rect');
|
|
393
|
+
.join('g')
|
|
394
|
+
.attr('class', 'barGroup')
|
|
395
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
396
|
+
this.barSelection.selectAll('.bar')
|
|
397
|
+
.data((d) => {
|
|
398
|
+
return d.series;
|
|
399
|
+
})
|
|
400
|
+
.join('rect')
|
|
401
|
+
.attr('class', 'bar')
|
|
402
|
+
.style('cursor', 'pointer')
|
|
403
|
+
.attr('x', this.xFunction)
|
|
404
|
+
.attr('y', this.yFunction)
|
|
405
|
+
.attr('ry', 4)
|
|
406
|
+
.attr('rx', 4)
|
|
407
|
+
.attr('width', this.widthFunction)
|
|
408
|
+
.attr('height', this.heightFunction)
|
|
409
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
410
|
+
.on('mouseenter', this.hover)
|
|
411
|
+
.on('mouseleave', this.hoverOut)
|
|
412
|
+
.on('click', this.openTooltip);
|
|
413
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
573
414
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
574
415
|
};
|
|
575
416
|
// Setting position of text according to bar size
|
|
@@ -608,7 +449,7 @@ const barChart = class {
|
|
|
608
449
|
};
|
|
609
450
|
this.reshapeData = () => {
|
|
610
451
|
const toReturn = [];
|
|
611
|
-
if (
|
|
452
|
+
if (!this.chartData) {
|
|
612
453
|
this.placeholderTicks.forEach((key) => {
|
|
613
454
|
const tick = { key: key, series: [] };
|
|
614
455
|
tick.series.push({
|
|
@@ -1003,7 +844,7 @@ const barChart = class {
|
|
|
1003
844
|
this.tooltip
|
|
1004
845
|
.select('digi-icon-caret-up')
|
|
1005
846
|
.style('position', 'absolute')
|
|
1006
|
-
.style('top', '-
|
|
847
|
+
.style('top', '-11px')
|
|
1007
848
|
.style('left', '0')
|
|
1008
849
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
1009
850
|
}
|
|
@@ -1026,7 +867,16 @@ const barChart = class {
|
|
|
1026
867
|
}
|
|
1027
868
|
else {
|
|
1028
869
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
1029
|
-
|
|
870
|
+
this.tooltip
|
|
871
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
872
|
+
);
|
|
873
|
+
this.tooltip
|
|
874
|
+
.select('digi-icon-caret-up')
|
|
875
|
+
.style('position', 'absolute')
|
|
876
|
+
.style('top', '-11px')
|
|
877
|
+
.style('left', '0')
|
|
878
|
+
.style('transform', `translate(50%,0)`);
|
|
879
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
1030
880
|
}
|
|
1031
881
|
else {
|
|
1032
882
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -1126,7 +976,7 @@ const barChart = class {
|
|
|
1126
976
|
this.afChartData = undefined;
|
|
1127
977
|
}
|
|
1128
978
|
afChartDataUpdate(data) {
|
|
1129
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
979
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
1130
980
|
if (typeof data != 'string')
|
|
1131
981
|
this.chartData = data;
|
|
1132
982
|
else
|
|
@@ -1228,6 +1078,7 @@ const barChart = class {
|
|
|
1228
1078
|
.select('.tooltipHead')
|
|
1229
1079
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1230
1080
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1081
|
+
.style('text-wrap', 'wrap')
|
|
1231
1082
|
.style('font-size', '1rem')
|
|
1232
1083
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1233
1084
|
.style('font-weight', '500');
|
|
@@ -1254,7 +1105,7 @@ const barChart = class {
|
|
|
1254
1105
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1255
1106
|
// Hide unusable components
|
|
1256
1107
|
select(this.titleDiv)
|
|
1257
|
-
.
|
|
1108
|
+
.select(this.afHeadingLevel)
|
|
1258
1109
|
.html(`${_t.loading}...`);
|
|
1259
1110
|
this.initYAxis(true);
|
|
1260
1111
|
this.initXAxis(true);
|
|
@@ -1303,14 +1154,17 @@ const barChart = class {
|
|
|
1303
1154
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
1304
1155
|
}
|
|
1305
1156
|
const animateBars = () => {
|
|
1306
|
-
this.barChartContainer.selectAll('.
|
|
1157
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
1307
1158
|
this.barSelection = this.barChartContainer
|
|
1159
|
+
.append('g')
|
|
1160
|
+
.attr('class', 'interactiveElements')
|
|
1161
|
+
.style('isolation', 'isolate')
|
|
1308
1162
|
.selectAll('barGroup')
|
|
1309
1163
|
.data(this.mappedData)
|
|
1310
1164
|
.join('g')
|
|
1311
1165
|
.attr('class', 'barGroup')
|
|
1312
|
-
.attr('id', (d) =>
|
|
1313
|
-
this.barSelection.selectAll('
|
|
1166
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
1167
|
+
this.barSelection.selectAll('bar')
|
|
1314
1168
|
.data((d) => {
|
|
1315
1169
|
return d.series;
|
|
1316
1170
|
})
|
|
@@ -1332,7 +1186,7 @@ const barChart = class {
|
|
|
1332
1186
|
.attr('y', this.yFunction)
|
|
1333
1187
|
.attr('height', this.heightFunction);
|
|
1334
1188
|
this.barChartContainer.selectAll('.bar')
|
|
1335
|
-
.transition()
|
|
1189
|
+
.transition('animateBar')
|
|
1336
1190
|
.duration(400)
|
|
1337
1191
|
.ease(linear$1)
|
|
1338
1192
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -1347,8 +1201,8 @@ const barChart = class {
|
|
|
1347
1201
|
};
|
|
1348
1202
|
const flattenBars = () => {
|
|
1349
1203
|
this.barChartContainer
|
|
1350
|
-
.selectAll('
|
|
1351
|
-
.transition()
|
|
1204
|
+
.selectAll('.bar')
|
|
1205
|
+
.transition('animateBar')
|
|
1352
1206
|
.duration(200)
|
|
1353
1207
|
.ease(linear$1)
|
|
1354
1208
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
@@ -1525,6 +1379,7 @@ const barChart = class {
|
|
|
1525
1379
|
select(this.host).select('.tableButton').style('display', null);
|
|
1526
1380
|
select(this.legendDiv).style('display', null);
|
|
1527
1381
|
this.initToolTip();
|
|
1382
|
+
this.initLegend();
|
|
1528
1383
|
}
|
|
1529
1384
|
// Disconnect resize observer while adjusting things
|
|
1530
1385
|
this.barChartObserver.disconnect();
|
|
@@ -1584,18 +1439,22 @@ const barChart = class {
|
|
|
1584
1439
|
]);
|
|
1585
1440
|
this.setNamedTicks(true);
|
|
1586
1441
|
// Stop animation
|
|
1587
|
-
this.
|
|
1442
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
1443
|
+
select(this.titleDiv).select('.loadingHeader').remove();
|
|
1588
1444
|
this.loading = false;
|
|
1589
|
-
this.
|
|
1590
|
-
|
|
1445
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
1446
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
1591
1447
|
.duration(this.defaultDuration)
|
|
1592
1448
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
1593
1449
|
? this.yScale(d.key)
|
|
1594
1450
|
: this.dims.height - this.margin.bottom)
|
|
1595
1451
|
.attr('height', () => 0)
|
|
1596
|
-
.on('end', (...[, i]) =>
|
|
1597
|
-
|
|
1598
|
-
|
|
1452
|
+
.on('end', (...[, i]) => {
|
|
1453
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1454
|
+
this.updateBars();
|
|
1455
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1456
|
+
}
|
|
1457
|
+
});
|
|
1599
1458
|
this.setTickInteraction();
|
|
1600
1459
|
}
|
|
1601
1460
|
else {
|
|
@@ -1777,7 +1636,7 @@ const barChart = class {
|
|
|
1777
1636
|
<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>`;
|
|
1778
1637
|
}
|
|
1779
1638
|
}
|
|
1780
|
-
return (h(Host, { key: '
|
|
1639
|
+
return (h(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1781
1640
|
}
|
|
1782
1641
|
get hostElement() { return getElement(this); }
|
|
1783
1642
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
|
|
2
2
|
import { _ as _t } from './text-26e02c8d.js';
|
|
3
|
-
import { s as select,
|
|
3
|
+
import { s as select, e as dispatch, r as range, a as axisLeft, f as formatLocale, p as polyInOut, b as axisBottom, l as linear, m as max, c as min, o as ordinal, g as interpolate, d as linear$1 } from './linear-78b9219d.js';
|
|
4
4
|
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
|
|
5
5
|
|
|
6
6
|
function sourceEvent(event) {
|
|
@@ -3719,4 +3719,4 @@ function linear() {
|
|
|
3719
3719
|
return linearish(scale);
|
|
3720
3720
|
}
|
|
3721
3721
|
|
|
3722
|
-
export { axisLeft as a, axisBottom as b,
|
|
3722
|
+
export { axisLeft as a, axisBottom as b, min as c, linear$1 as d, dispatch as e, formatLocale as f, interpolate$1 as g, initRange as i, linear as l, max as m, ordinal as o, polyInOut as p, range as r, select as s };
|