@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 { p as proxyCustomElement, H, h, d as Host } from './p-a53686b3.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 './p-f9a1a787.js';
|
|
3
3
|
import { _ as _t } from './p-08cf2c0e.js';
|
|
4
4
|
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
|
|
5
5
|
import { B as BarChartVariation } from './p-dcdffb3c.js';
|
|
@@ -91,7 +91,7 @@ function band() {
|
|
|
91
91
|
return initRange.apply(rescale(), arguments);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
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:
|
|
94
|
+
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}";
|
|
95
95
|
const DigiBarChartStyle0 = barChartCss;
|
|
96
96
|
|
|
97
97
|
const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
@@ -348,190 +348,31 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
348
348
|
this.barGroupID = (key) => {
|
|
349
349
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
350
350
|
};
|
|
351
|
-
this.updateBars = (
|
|
352
|
-
this.barChartContainer
|
|
351
|
+
this.updateBars = () => {
|
|
352
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
353
353
|
.selectAll('.barGroup')
|
|
354
354
|
.data(this.mappedData)
|
|
355
|
-
.join(
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
377
|
-
? this.yScale.bandwidth()
|
|
378
|
-
: 0)
|
|
379
|
-
.on('mouseenter', this.hover)
|
|
380
|
-
.on('mouseleave', this.hoverOut)
|
|
381
|
-
.on('click', this.openTooltip)
|
|
382
|
-
.transition()
|
|
383
|
-
.duration(this.defaultDuration)
|
|
384
|
-
.ease(polyInOut)
|
|
385
|
-
.attr('width', this.widthFunction)
|
|
386
|
-
.attr('y', this.yFunction)
|
|
387
|
-
.attr('height', this.heightFunction)
|
|
388
|
-
.attr('fill', '#00005a');
|
|
389
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
390
|
-
return tempSelection;
|
|
391
|
-
tempSelection
|
|
392
|
-
.append('text')
|
|
393
|
-
.text((d) => d.value.toLocaleString())
|
|
394
|
-
.attr('class', 'barText')
|
|
395
|
-
.attr('font-size', this.fontSize)
|
|
396
|
-
.attr('font-weight', '600')
|
|
397
|
-
.attr('text-anchor', 'end')
|
|
398
|
-
.style('pointer-events', 'none')
|
|
399
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
400
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
401
|
-
: this.dims.height - this.margin.bottom)
|
|
402
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
403
|
-
? 2
|
|
404
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
405
|
-
.transition()
|
|
406
|
-
.duration(this.defaultDuration)
|
|
407
|
-
.ease(polyInOut)
|
|
408
|
-
.attr('font-size', this.fontSize)
|
|
409
|
-
.attr('font-weight', '600')
|
|
410
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
411
|
-
? this.xScale(d.value)
|
|
412
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
413
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
414
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
415
|
-
: this.yScale(d.value))
|
|
416
|
-
.attr('text-anchor', (d) => {
|
|
417
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
418
|
-
return 'middle';
|
|
419
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
420
|
-
? 'start'
|
|
421
|
-
: 'end';
|
|
422
|
-
})
|
|
423
|
-
.attr('dx', (d) => {
|
|
424
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
425
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
426
|
-
? this.tickPadding
|
|
427
|
-
: -this.tickPadding;
|
|
428
|
-
return 0;
|
|
429
|
-
})
|
|
430
|
-
.attr('fill', (d) => {
|
|
431
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
432
|
-
return 'black';
|
|
433
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
434
|
-
? 'black'
|
|
435
|
-
: 'white';
|
|
436
|
-
})
|
|
437
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
438
|
-
? '0.35em'
|
|
439
|
-
: '-0.25em')
|
|
440
|
-
.style('pointer-events', 'none')
|
|
441
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
442
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
443
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
444
|
-
: 0;
|
|
445
|
-
const interpolatedValue = interpolate(oldnum, d.value);
|
|
446
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
447
|
-
});
|
|
448
|
-
return tempSelection;
|
|
449
|
-
}, (update) => {
|
|
450
|
-
// Update ids to bars
|
|
451
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
452
|
-
// Mouse interaction to updated loading bars
|
|
453
|
-
if (fromLoading) {
|
|
454
|
-
update
|
|
455
|
-
.select('rect')
|
|
456
|
-
.on('mouseenter', this.hover)
|
|
457
|
-
.on('mouseleave', this.hoverOut)
|
|
458
|
-
.on('click', this.openTooltip)
|
|
459
|
-
.attr('x', this.xFunction)
|
|
460
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
461
|
-
? this.yScale(d.key)
|
|
462
|
-
: this.dims.height - this.margin.bottom)
|
|
463
|
-
.attr('width', this.widthFunction)
|
|
464
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
465
|
-
? this.yScale.bandwidth()
|
|
466
|
-
: 0)
|
|
467
|
-
.attr('fill', '#00005a')
|
|
468
|
-
.transition()
|
|
469
|
-
.duration(this.defaultDuration)
|
|
470
|
-
.ease(polyInOut)
|
|
471
|
-
.attr('y', this.yFunction)
|
|
472
|
-
.attr('height', this.heightFunction)
|
|
473
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
474
|
-
}
|
|
475
|
-
else {
|
|
476
|
-
update
|
|
477
|
-
.select('rect')
|
|
478
|
-
.transition()
|
|
479
|
-
.duration(this.defaultDuration)
|
|
480
|
-
.ease(polyInOut)
|
|
481
|
-
.attr('x', this.xFunction)
|
|
482
|
-
.attr('y', this.yFunction)
|
|
483
|
-
.attr('width', this.widthFunction)
|
|
484
|
-
.attr('height', this.heightFunction)
|
|
485
|
-
.attr('fill', '#00005a');
|
|
486
|
-
}
|
|
487
|
-
return update
|
|
488
|
-
.select('text')
|
|
489
|
-
.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'; })
|
|
490
|
-
.transition()
|
|
491
|
-
.duration(this.defaultDuration)
|
|
492
|
-
.ease(polyInOut)
|
|
493
|
-
.attr('font-size', this.fontSize)
|
|
494
|
-
.attr('font-weight', '600')
|
|
495
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
496
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
497
|
-
: this.yScale(d.value))
|
|
498
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
499
|
-
? this.xScale(d.value)
|
|
500
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
501
|
-
.attr('text-anchor', (d) => {
|
|
502
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
503
|
-
return 'middle';
|
|
504
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
505
|
-
? 'start'
|
|
506
|
-
: 'end';
|
|
507
|
-
})
|
|
508
|
-
.attr('dx', (d) => {
|
|
509
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
510
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
511
|
-
? this.tickPadding
|
|
512
|
-
: -this.tickPadding;
|
|
513
|
-
return 0;
|
|
514
|
-
})
|
|
515
|
-
.attr('fill', (d) => {
|
|
516
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
517
|
-
return 'black';
|
|
518
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
519
|
-
? 'black'
|
|
520
|
-
: 'white';
|
|
521
|
-
})
|
|
522
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
523
|
-
? '0.35em'
|
|
524
|
-
: '-0.25em')
|
|
525
|
-
.style('pointer-events', 'none')
|
|
526
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
527
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
528
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
529
|
-
: 0;
|
|
530
|
-
const interpolatedValue = interpolate(oldnum, d.value);
|
|
531
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
532
|
-
});
|
|
533
|
-
}, (exit) => exit.remove());
|
|
534
|
-
this.barSelection = this.barChartContainer.selectAll('rect');
|
|
355
|
+
.join('g')
|
|
356
|
+
.attr('class', 'barGroup')
|
|
357
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
358
|
+
this.barSelection.selectAll('.bar')
|
|
359
|
+
.data((d) => {
|
|
360
|
+
return d.series;
|
|
361
|
+
})
|
|
362
|
+
.join('rect')
|
|
363
|
+
.attr('class', 'bar')
|
|
364
|
+
.style('cursor', 'pointer')
|
|
365
|
+
.attr('x', this.xFunction)
|
|
366
|
+
.attr('y', this.yFunction)
|
|
367
|
+
.attr('ry', 4)
|
|
368
|
+
.attr('rx', 4)
|
|
369
|
+
.attr('width', this.widthFunction)
|
|
370
|
+
.attr('height', this.heightFunction)
|
|
371
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
372
|
+
.on('mouseenter', this.hover)
|
|
373
|
+
.on('mouseleave', this.hoverOut)
|
|
374
|
+
.on('click', this.openTooltip);
|
|
375
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
535
376
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
536
377
|
};
|
|
537
378
|
// Setting position of text according to bar size
|
|
@@ -570,7 +411,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
570
411
|
};
|
|
571
412
|
this.reshapeData = () => {
|
|
572
413
|
const toReturn = [];
|
|
573
|
-
if (
|
|
414
|
+
if (!this.chartData) {
|
|
574
415
|
this.placeholderTicks.forEach((key) => {
|
|
575
416
|
const tick = { key: key, series: [] };
|
|
576
417
|
tick.series.push({
|
|
@@ -965,7 +806,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
965
806
|
this.tooltip
|
|
966
807
|
.select('digi-icon-caret-up')
|
|
967
808
|
.style('position', 'absolute')
|
|
968
|
-
.style('top', '-
|
|
809
|
+
.style('top', '-11px')
|
|
969
810
|
.style('left', '0')
|
|
970
811
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
971
812
|
}
|
|
@@ -988,7 +829,16 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
988
829
|
}
|
|
989
830
|
else {
|
|
990
831
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
991
|
-
|
|
832
|
+
this.tooltip
|
|
833
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
834
|
+
);
|
|
835
|
+
this.tooltip
|
|
836
|
+
.select('digi-icon-caret-up')
|
|
837
|
+
.style('position', 'absolute')
|
|
838
|
+
.style('top', '-11px')
|
|
839
|
+
.style('left', '0')
|
|
840
|
+
.style('transform', `translate(50%,0)`);
|
|
841
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
992
842
|
}
|
|
993
843
|
else {
|
|
994
844
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -1088,7 +938,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1088
938
|
this.afChartData = undefined;
|
|
1089
939
|
}
|
|
1090
940
|
afChartDataUpdate(data) {
|
|
1091
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
941
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
1092
942
|
if (typeof data != 'string')
|
|
1093
943
|
this.chartData = data;
|
|
1094
944
|
else
|
|
@@ -1190,6 +1040,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1190
1040
|
.select('.tooltipHead')
|
|
1191
1041
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1192
1042
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
1043
|
+
.style('text-wrap', 'wrap')
|
|
1193
1044
|
.style('font-size', '1rem')
|
|
1194
1045
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1195
1046
|
.style('font-weight', '500');
|
|
@@ -1216,7 +1067,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1216
1067
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1217
1068
|
// Hide unusable components
|
|
1218
1069
|
select(this.titleDiv)
|
|
1219
|
-
.
|
|
1070
|
+
.select(this.afHeadingLevel)
|
|
1220
1071
|
.html(`${_t.loading}...`);
|
|
1221
1072
|
this.initYAxis(true);
|
|
1222
1073
|
this.initXAxis(true);
|
|
@@ -1265,14 +1116,17 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1265
1116
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
1266
1117
|
}
|
|
1267
1118
|
const animateBars = () => {
|
|
1268
|
-
this.barChartContainer.selectAll('.
|
|
1119
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
1269
1120
|
this.barSelection = this.barChartContainer
|
|
1121
|
+
.append('g')
|
|
1122
|
+
.attr('class', 'interactiveElements')
|
|
1123
|
+
.style('isolation', 'isolate')
|
|
1270
1124
|
.selectAll('barGroup')
|
|
1271
1125
|
.data(this.mappedData)
|
|
1272
1126
|
.join('g')
|
|
1273
1127
|
.attr('class', 'barGroup')
|
|
1274
|
-
.attr('id', (d) =>
|
|
1275
|
-
this.barSelection.selectAll('
|
|
1128
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
1129
|
+
this.barSelection.selectAll('bar')
|
|
1276
1130
|
.data((d) => {
|
|
1277
1131
|
return d.series;
|
|
1278
1132
|
})
|
|
@@ -1294,7 +1148,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1294
1148
|
.attr('y', this.yFunction)
|
|
1295
1149
|
.attr('height', this.heightFunction);
|
|
1296
1150
|
this.barChartContainer.selectAll('.bar')
|
|
1297
|
-
.transition()
|
|
1151
|
+
.transition('animateBar')
|
|
1298
1152
|
.duration(400)
|
|
1299
1153
|
.ease(linear$1)
|
|
1300
1154
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -1309,8 +1163,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1309
1163
|
};
|
|
1310
1164
|
const flattenBars = () => {
|
|
1311
1165
|
this.barChartContainer
|
|
1312
|
-
.selectAll('
|
|
1313
|
-
.transition()
|
|
1166
|
+
.selectAll('.bar')
|
|
1167
|
+
.transition('animateBar')
|
|
1314
1168
|
.duration(200)
|
|
1315
1169
|
.ease(linear$1)
|
|
1316
1170
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
@@ -1487,6 +1341,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1487
1341
|
select(this.host).select('.tableButton').style('display', null);
|
|
1488
1342
|
select(this.legendDiv).style('display', null);
|
|
1489
1343
|
this.initToolTip();
|
|
1344
|
+
this.initLegend();
|
|
1490
1345
|
}
|
|
1491
1346
|
// Disconnect resize observer while adjusting things
|
|
1492
1347
|
this.barChartObserver.disconnect();
|
|
@@ -1546,18 +1401,22 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1546
1401
|
]);
|
|
1547
1402
|
this.setNamedTicks(true);
|
|
1548
1403
|
// Stop animation
|
|
1549
|
-
this.
|
|
1404
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
1405
|
+
select(this.titleDiv).select('.loadingHeader').remove();
|
|
1550
1406
|
this.loading = false;
|
|
1551
|
-
this.
|
|
1552
|
-
|
|
1407
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
1408
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
1553
1409
|
.duration(this.defaultDuration)
|
|
1554
1410
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
1555
1411
|
? this.yScale(d.key)
|
|
1556
1412
|
: this.dims.height - this.margin.bottom)
|
|
1557
1413
|
.attr('height', () => 0)
|
|
1558
|
-
.on('end', (...[, i]) =>
|
|
1559
|
-
|
|
1560
|
-
|
|
1414
|
+
.on('end', (...[, i]) => {
|
|
1415
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1416
|
+
this.updateBars();
|
|
1417
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1418
|
+
}
|
|
1419
|
+
});
|
|
1561
1420
|
this.setTickInteraction();
|
|
1562
1421
|
}
|
|
1563
1422
|
else {
|
|
@@ -1739,7 +1598,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1739
1598
|
<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>`;
|
|
1740
1599
|
}
|
|
1741
1600
|
}
|
|
1742
|
-
return (h(Host, { key: '
|
|
1601
|
+
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) }, ' ')));
|
|
1743
1602
|
}
|
|
1744
1603
|
get hostElement() { return this; }
|
|
1745
1604
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
|
|
2
2
|
import { _ as _t } from './p-08cf2c0e.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 './p-f9a1a787.js';
|
|
4
4
|
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-e8fc33ed.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-3c9cea93.js';
|
|
@@ -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 };
|