@designsystem-se/af 35.4.1-beta.4 → 35.4.1-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/digi-bar-chart.js +57 -212
- 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 +56 -211
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +56 -211
- package/dist/collection/design-tokens/components/_logo.variables.scss +16 -19
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-3e51b8bc.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-ccf78233.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-a47b6b5c.js → p-f9a1a787.js} +1 -1
- package/dist/esm/digi-bar-chart_27.entry.js +57 -212
- 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 +56 -211
- package/hydrate/index.mjs +56 -211
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-0030ed70.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-10dd9a49.entry.js +0 -1
|
@@ -255,8 +255,6 @@ const barChart = class {
|
|
|
255
255
|
// Resizing chart while loading
|
|
256
256
|
this.loadingResize = () => {
|
|
257
257
|
const newHeight = this.setDims();
|
|
258
|
-
this.setMargins(true);
|
|
259
|
-
this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
|
|
260
258
|
this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
|
|
261
259
|
this.margin.right =
|
|
262
260
|
this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
|
|
@@ -281,10 +279,8 @@ const barChart = class {
|
|
|
281
279
|
0,
|
|
282
280
|
this.dims.width - this.margin.right - this.margin.left
|
|
283
281
|
]);
|
|
284
|
-
this.barSelection
|
|
285
|
-
.attr('x', this.xFunction)
|
|
286
|
-
.attr('width', this.widthFunction);
|
|
287
282
|
this.setValueTicks();
|
|
283
|
+
this.adjustBarSize();
|
|
288
284
|
};
|
|
289
285
|
this.highlightBarGroup = (_event, datum) => {
|
|
290
286
|
if (typeof datum === 'string') {
|
|
@@ -395,189 +391,33 @@ const barChart = class {
|
|
|
395
391
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
396
392
|
};
|
|
397
393
|
this.updateBars = (fromLoading) => {
|
|
398
|
-
this.barChartContainer
|
|
394
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
399
395
|
.selectAll('.barGroup')
|
|
400
396
|
.data(this.mappedData)
|
|
401
|
-
.join(
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
.on('mouseenter', this.hover)
|
|
426
|
-
.on('mouseleave', this.hoverOut)
|
|
427
|
-
.on('click', this.openTooltip)
|
|
428
|
-
.transition()
|
|
429
|
-
.duration(this.defaultDuration)
|
|
430
|
-
.ease(linear.polyInOut)
|
|
431
|
-
.attr('width', this.widthFunction)
|
|
432
|
-
.attr('y', this.yFunction)
|
|
433
|
-
.attr('height', this.heightFunction)
|
|
434
|
-
.attr('fill', '#00005a');
|
|
435
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
436
|
-
return tempSelection;
|
|
437
|
-
tempSelection
|
|
438
|
-
.append('text')
|
|
439
|
-
.text((d) => d.value.toLocaleString())
|
|
440
|
-
.attr('class', 'barText')
|
|
441
|
-
.attr('font-size', this.fontSize)
|
|
442
|
-
.attr('font-weight', '600')
|
|
443
|
-
.attr('text-anchor', 'end')
|
|
444
|
-
.style('pointer-events', 'none')
|
|
445
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
446
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
447
|
-
: this.dims.height - this.margin.bottom)
|
|
448
|
-
.attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
449
|
-
? 2
|
|
450
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
451
|
-
.transition()
|
|
452
|
-
.duration(this.defaultDuration)
|
|
453
|
-
.ease(linear.polyInOut)
|
|
454
|
-
.attr('font-size', this.fontSize)
|
|
455
|
-
.attr('font-weight', '600')
|
|
456
|
-
.attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
457
|
-
? this.xScale(d.value)
|
|
458
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
459
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
460
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
461
|
-
: this.yScale(d.value))
|
|
462
|
-
.attr('text-anchor', (d) => {
|
|
463
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
464
|
-
return 'middle';
|
|
465
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
466
|
-
? 'start'
|
|
467
|
-
: 'end';
|
|
468
|
-
})
|
|
469
|
-
.attr('dx', (d) => {
|
|
470
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
|
|
471
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
472
|
-
? this.tickPadding
|
|
473
|
-
: -this.tickPadding;
|
|
474
|
-
return 0;
|
|
475
|
-
})
|
|
476
|
-
.attr('fill', (d) => {
|
|
477
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
478
|
-
return 'black';
|
|
479
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
480
|
-
? 'black'
|
|
481
|
-
: 'white';
|
|
482
|
-
})
|
|
483
|
-
.attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
|
|
484
|
-
? '0.35em'
|
|
485
|
-
: '-0.25em')
|
|
486
|
-
.style('pointer-events', 'none')
|
|
487
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
488
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
489
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
490
|
-
: 0;
|
|
491
|
-
const interpolatedValue = linear.interpolate(oldnum, d.value);
|
|
492
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
493
|
-
});
|
|
494
|
-
return tempSelection;
|
|
495
|
-
}, (update) => {
|
|
496
|
-
// Update ids to bars
|
|
497
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
498
|
-
// Mouse interaction to updated loading bars
|
|
499
|
-
if (fromLoading) {
|
|
500
|
-
update
|
|
501
|
-
.select('rect')
|
|
502
|
-
.on('mouseenter', this.hover)
|
|
503
|
-
.on('mouseleave', this.hoverOut)
|
|
504
|
-
.on('click', this.openTooltip)
|
|
505
|
-
.attr('x', this.xFunction)
|
|
506
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
507
|
-
? this.yScale(d.key)
|
|
508
|
-
: this.dims.height - this.margin.bottom)
|
|
509
|
-
.attr('width', this.widthFunction)
|
|
510
|
-
.attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
511
|
-
? this.yScale.bandwidth()
|
|
512
|
-
: 0)
|
|
513
|
-
.attr('fill', '#00005a')
|
|
514
|
-
.transition()
|
|
515
|
-
.duration(this.defaultDuration)
|
|
516
|
-
.ease(linear.polyInOut)
|
|
517
|
-
.attr('y', this.yFunction)
|
|
518
|
-
.attr('height', this.heightFunction)
|
|
519
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
520
|
-
}
|
|
521
|
-
else {
|
|
522
|
-
update
|
|
523
|
-
.select('rect')
|
|
524
|
-
.transition()
|
|
525
|
-
.duration(this.defaultDuration)
|
|
526
|
-
.ease(linear.polyInOut)
|
|
527
|
-
.attr('x', this.xFunction)
|
|
528
|
-
.attr('y', this.yFunction)
|
|
529
|
-
.attr('width', this.widthFunction)
|
|
530
|
-
.attr('height', this.heightFunction)
|
|
531
|
-
.attr('fill', '#00005a');
|
|
532
|
-
}
|
|
533
|
-
return update
|
|
534
|
-
.select('text')
|
|
535
|
-
.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'; })
|
|
536
|
-
.transition()
|
|
537
|
-
.duration(this.defaultDuration)
|
|
538
|
-
.ease(linear.polyInOut)
|
|
539
|
-
.attr('font-size', this.fontSize)
|
|
540
|
-
.attr('font-weight', '600')
|
|
541
|
-
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
542
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
543
|
-
: this.yScale(d.value))
|
|
544
|
-
.attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
545
|
-
? this.xScale(d.value)
|
|
546
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
547
|
-
.attr('text-anchor', (d) => {
|
|
548
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
549
|
-
return 'middle';
|
|
550
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
551
|
-
? 'start'
|
|
552
|
-
: 'end';
|
|
553
|
-
})
|
|
554
|
-
.attr('dx', (d) => {
|
|
555
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
|
|
556
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
557
|
-
? this.tickPadding
|
|
558
|
-
: -this.tickPadding;
|
|
559
|
-
return 0;
|
|
560
|
-
})
|
|
561
|
-
.attr('fill', (d) => {
|
|
562
|
-
if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
|
|
563
|
-
return 'black';
|
|
564
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
565
|
-
? 'black'
|
|
566
|
-
: 'white';
|
|
567
|
-
})
|
|
568
|
-
.attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
|
|
569
|
-
? '0.35em'
|
|
570
|
-
: '-0.25em')
|
|
571
|
-
.style('pointer-events', 'none')
|
|
572
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
573
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
574
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
575
|
-
: 0;
|
|
576
|
-
const interpolatedValue = linear.interpolate(oldnum, d.value);
|
|
577
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
578
|
-
});
|
|
579
|
-
}, (exit) => exit.remove());
|
|
580
|
-
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
|
+
if (fromLoading) {
|
|
418
|
+
this.initLegend();
|
|
419
|
+
}
|
|
420
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
581
421
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
582
422
|
};
|
|
583
423
|
// Setting position of text according to bar size
|
|
@@ -616,7 +456,7 @@ const barChart = class {
|
|
|
616
456
|
};
|
|
617
457
|
this.reshapeData = () => {
|
|
618
458
|
const toReturn = [];
|
|
619
|
-
if (
|
|
459
|
+
if (!this.chartData) {
|
|
620
460
|
this.placeholderTicks.forEach((key) => {
|
|
621
461
|
const tick = { key: key, series: [] };
|
|
622
462
|
tick.series.push({
|
|
@@ -991,11 +831,11 @@ const barChart = class {
|
|
|
991
831
|
.html((d) => {
|
|
992
832
|
return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
|
|
993
833
|
});
|
|
994
|
-
this.tooltip.style('
|
|
834
|
+
this.tooltip.style('display', null);
|
|
995
835
|
this.positionTooltip(this.tooltipData);
|
|
996
836
|
};
|
|
997
837
|
this.closeTooltip = () => {
|
|
998
|
-
this.tooltip.style('
|
|
838
|
+
this.tooltip.style('display', 'none');
|
|
999
839
|
};
|
|
1000
840
|
// Positions tooltip in horizontal mode
|
|
1001
841
|
this.positionTooltip = (data) => {
|
|
@@ -1134,12 +974,13 @@ const barChart = class {
|
|
|
1134
974
|
this.afChartData = undefined;
|
|
1135
975
|
}
|
|
1136
976
|
afChartDataUpdate(data) {
|
|
1137
|
-
if (typeof data
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
977
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
978
|
+
if (typeof data != 'string')
|
|
979
|
+
this.chartData = data;
|
|
980
|
+
else
|
|
981
|
+
this.chartData = JSON.parse(data);
|
|
1142
982
|
this.series = this.chartData.data.series.map(serie => serie.title);
|
|
983
|
+
}
|
|
1143
984
|
this.mappedData = this.reshapeData();
|
|
1144
985
|
// checking for width of each tick
|
|
1145
986
|
this.mappedData.forEach((elem) => {
|
|
@@ -1230,7 +1071,7 @@ const barChart = class {
|
|
|
1230
1071
|
// Getting handle for tooltip
|
|
1231
1072
|
this.tooltip = linear.select('#' + this.afId);
|
|
1232
1073
|
this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
|
|
1233
|
-
|
|
1074
|
+
this.tooltip.selectAll('.tooltipHeading').remove();
|
|
1234
1075
|
this.tooltip
|
|
1235
1076
|
.select('.tooltipHead')
|
|
1236
1077
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
@@ -1238,7 +1079,7 @@ const barChart = class {
|
|
|
1238
1079
|
.style('font-size', '1rem')
|
|
1239
1080
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1240
1081
|
.style('font-weight', '500');
|
|
1241
|
-
this.tooltip.style('
|
|
1082
|
+
this.tooltip.style('display', 'none');
|
|
1242
1083
|
}
|
|
1243
1084
|
initEmpty() {
|
|
1244
1085
|
linear.select(this.chartDiv).select('.chartSVG').remove();
|
|
@@ -1258,20 +1099,20 @@ const barChart = class {
|
|
|
1258
1099
|
.attr('role', 'img')
|
|
1259
1100
|
.attr('aria-label', this.chartData && this.chartData.title
|
|
1260
1101
|
? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
|
|
1261
|
-
: 'Stapeldiagram');
|
|
1102
|
+
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1262
1103
|
// Hide unusable components
|
|
1263
1104
|
linear.select(this.titleDiv)
|
|
1264
|
-
.
|
|
1105
|
+
.append(this.afHeadingLevel)
|
|
1106
|
+
.attr('class', 'loadingHeader')
|
|
1265
1107
|
.html(`${text._t.loading}...`);
|
|
1266
1108
|
this.initYAxis(true);
|
|
1267
1109
|
this.initXAxis(true);
|
|
1268
1110
|
this.tooltip = linear.select('#' + this.afId);
|
|
1269
|
-
this.tooltip.style('
|
|
1111
|
+
this.tooltip.style('display', 'none');
|
|
1270
1112
|
this.loadingState(true);
|
|
1271
1113
|
}
|
|
1272
1114
|
loadingState(empty) {
|
|
1273
1115
|
this.loading = true;
|
|
1274
|
-
console.log('loading!');
|
|
1275
1116
|
// close potentially open tooltip
|
|
1276
1117
|
if (this.tooltip)
|
|
1277
1118
|
this.closeTooltip();
|
|
@@ -1311,14 +1152,17 @@ const barChart = class {
|
|
|
1311
1152
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
1312
1153
|
}
|
|
1313
1154
|
const animateBars = () => {
|
|
1314
|
-
this.barChartContainer.selectAll('.
|
|
1155
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
1315
1156
|
this.barSelection = this.barChartContainer
|
|
1157
|
+
.append('g')
|
|
1158
|
+
.attr('class', 'interactiveElements')
|
|
1159
|
+
.style('isolation', 'isolate')
|
|
1316
1160
|
.selectAll('barGroup')
|
|
1317
1161
|
.data(this.mappedData)
|
|
1318
1162
|
.join('g')
|
|
1319
1163
|
.attr('class', 'barGroup')
|
|
1320
|
-
.attr('id', (d) =>
|
|
1321
|
-
this.barSelection.selectAll('
|
|
1164
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
1165
|
+
this.barSelection.selectAll('bar')
|
|
1322
1166
|
.data((d) => {
|
|
1323
1167
|
return d.series;
|
|
1324
1168
|
})
|
|
@@ -1340,7 +1184,7 @@ const barChart = class {
|
|
|
1340
1184
|
.attr('y', this.yFunction)
|
|
1341
1185
|
.attr('height', this.heightFunction);
|
|
1342
1186
|
this.barChartContainer.selectAll('.bar')
|
|
1343
|
-
.transition()
|
|
1187
|
+
.transition('animateBar')
|
|
1344
1188
|
.duration(400)
|
|
1345
1189
|
.ease(linear.linear$1)
|
|
1346
1190
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -1355,8 +1199,8 @@ const barChart = class {
|
|
|
1355
1199
|
};
|
|
1356
1200
|
const flattenBars = () => {
|
|
1357
1201
|
this.barChartContainer
|
|
1358
|
-
.selectAll('
|
|
1359
|
-
.transition()
|
|
1202
|
+
.selectAll('.bar')
|
|
1203
|
+
.transition('animateBar')
|
|
1360
1204
|
.duration(200)
|
|
1361
1205
|
.ease(linear.linear$1)
|
|
1362
1206
|
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
@@ -1592,10 +1436,11 @@ const barChart = class {
|
|
|
1592
1436
|
]);
|
|
1593
1437
|
this.setNamedTicks(true);
|
|
1594
1438
|
// Stop animation
|
|
1595
|
-
this.
|
|
1439
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
1440
|
+
linear.select(this.titleDiv).select('.loadingHeader').remove();
|
|
1596
1441
|
this.loading = false;
|
|
1597
|
-
this.
|
|
1598
|
-
|
|
1442
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
1443
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
1599
1444
|
.duration(this.defaultDuration)
|
|
1600
1445
|
.attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
|
|
1601
1446
|
? this.yScale(d.key)
|
|
@@ -1665,7 +1510,7 @@ const barChart = class {
|
|
|
1665
1510
|
this.averageLine();
|
|
1666
1511
|
this.adjustBarSize();
|
|
1667
1512
|
this.adjustBarText();
|
|
1668
|
-
if (this.tooltip.style('
|
|
1513
|
+
if (this.tooltip.style('display') !== 'none')
|
|
1669
1514
|
this.positionTooltip(this.tooltipData);
|
|
1670
1515
|
}
|
|
1671
1516
|
// Returns the longest text from an array of strings
|
|
@@ -1785,7 +1630,7 @@ const barChart = class {
|
|
|
1785
1630
|
<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>`;
|
|
1786
1631
|
}
|
|
1787
1632
|
}
|
|
1788
|
-
return (index.h(index.Host, { key: '
|
|
1633
|
+
return (index.h(index.Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, index.h("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, index.h("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, index.h("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), index.h("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', 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: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), index.h("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
|
|
1789
1634
|
}
|
|
1790
1635
|
get hostElement() { return index.getElement(this); }
|
|
1791
1636
|
static get watchers() { return {
|