@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
|
@@ -266,190 +266,31 @@ export class barChart {
|
|
|
266
266
|
this.barGroupID = (key) => {
|
|
267
267
|
return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
|
|
268
268
|
};
|
|
269
|
-
this.updateBars = (
|
|
270
|
-
this.barChartContainer
|
|
269
|
+
this.updateBars = () => {
|
|
270
|
+
this.barSelection = this.barChartContainer.select('.interactiveElements')
|
|
271
271
|
.selectAll('.barGroup')
|
|
272
272
|
.data(this.mappedData)
|
|
273
|
-
.join(
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
295
|
-
? this.yScale.bandwidth()
|
|
296
|
-
: 0)
|
|
297
|
-
.on('mouseenter', this.hover)
|
|
298
|
-
.on('mouseleave', this.hoverOut)
|
|
299
|
-
.on('click', this.openTooltip)
|
|
300
|
-
.transition()
|
|
301
|
-
.duration(this.defaultDuration)
|
|
302
|
-
.ease(d3.easePolyInOut)
|
|
303
|
-
.attr('width', this.widthFunction)
|
|
304
|
-
.attr('y', this.yFunction)
|
|
305
|
-
.attr('height', this.heightFunction)
|
|
306
|
-
.attr('fill', '#00005a');
|
|
307
|
-
if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
|
|
308
|
-
return tempSelection;
|
|
309
|
-
tempSelection
|
|
310
|
-
.append('text')
|
|
311
|
-
.text((d) => d.value.toLocaleString())
|
|
312
|
-
.attr('class', 'barText')
|
|
313
|
-
.attr('font-size', this.fontSize)
|
|
314
|
-
.attr('font-weight', '600')
|
|
315
|
-
.attr('text-anchor', 'end')
|
|
316
|
-
.style('pointer-events', 'none')
|
|
317
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
318
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
319
|
-
: this.dims.height - this.margin.bottom)
|
|
320
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
321
|
-
? 2
|
|
322
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
323
|
-
.transition()
|
|
324
|
-
.duration(this.defaultDuration)
|
|
325
|
-
.ease(d3.easePolyInOut)
|
|
326
|
-
.attr('font-size', this.fontSize)
|
|
327
|
-
.attr('font-weight', '600')
|
|
328
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
329
|
-
? this.xScale(d.value)
|
|
330
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
331
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
332
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
333
|
-
: this.yScale(d.value))
|
|
334
|
-
.attr('text-anchor', (d) => {
|
|
335
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
336
|
-
return 'middle';
|
|
337
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
338
|
-
? 'start'
|
|
339
|
-
: 'end';
|
|
340
|
-
})
|
|
341
|
-
.attr('dx', (d) => {
|
|
342
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
343
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
344
|
-
? this.tickPadding
|
|
345
|
-
: -this.tickPadding;
|
|
346
|
-
return 0;
|
|
347
|
-
})
|
|
348
|
-
.attr('fill', (d) => {
|
|
349
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
350
|
-
return 'black';
|
|
351
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
352
|
-
? 'black'
|
|
353
|
-
: 'white';
|
|
354
|
-
})
|
|
355
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
356
|
-
? '0.35em'
|
|
357
|
-
: '-0.25em')
|
|
358
|
-
.style('pointer-events', 'none')
|
|
359
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
360
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
361
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
362
|
-
: 0;
|
|
363
|
-
const interpolatedValue = d3.interpolate(oldnum, d.value);
|
|
364
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
365
|
-
});
|
|
366
|
-
return tempSelection;
|
|
367
|
-
}, (update) => {
|
|
368
|
-
// Update ids to bars
|
|
369
|
-
update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
|
|
370
|
-
// Mouse interaction to updated loading bars
|
|
371
|
-
if (fromLoading) {
|
|
372
|
-
update
|
|
373
|
-
.select('rect')
|
|
374
|
-
.on('mouseenter', this.hover)
|
|
375
|
-
.on('mouseleave', this.hoverOut)
|
|
376
|
-
.on('click', this.openTooltip)
|
|
377
|
-
.attr('x', this.xFunction)
|
|
378
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
379
|
-
? this.yScale(d.key)
|
|
380
|
-
: this.dims.height - this.margin.bottom)
|
|
381
|
-
.attr('width', this.widthFunction)
|
|
382
|
-
.attr('height', () => this.afVariation === BarChartVariation.Horizontal
|
|
383
|
-
? this.yScale.bandwidth()
|
|
384
|
-
: 0)
|
|
385
|
-
.attr('fill', '#00005a')
|
|
386
|
-
.transition()
|
|
387
|
-
.duration(this.defaultDuration)
|
|
388
|
-
.ease(d3.easePolyInOut)
|
|
389
|
-
.attr('y', this.yFunction)
|
|
390
|
-
.attr('height', this.heightFunction)
|
|
391
|
-
.on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
|
|
392
|
-
}
|
|
393
|
-
else {
|
|
394
|
-
update
|
|
395
|
-
.select('rect')
|
|
396
|
-
.transition()
|
|
397
|
-
.duration(this.defaultDuration)
|
|
398
|
-
.ease(d3.easePolyInOut)
|
|
399
|
-
.attr('x', this.xFunction)
|
|
400
|
-
.attr('y', this.yFunction)
|
|
401
|
-
.attr('width', this.widthFunction)
|
|
402
|
-
.attr('height', this.heightFunction)
|
|
403
|
-
.attr('fill', '#00005a');
|
|
404
|
-
}
|
|
405
|
-
return update
|
|
406
|
-
.select('text')
|
|
407
|
-
.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'; })
|
|
408
|
-
.transition()
|
|
409
|
-
.duration(this.defaultDuration)
|
|
410
|
-
.ease(d3.easePolyInOut)
|
|
411
|
-
.attr('font-size', this.fontSize)
|
|
412
|
-
.attr('font-weight', '600')
|
|
413
|
-
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
414
|
-
? this.yScale(d.key) + this.yScale.bandwidth() / 2
|
|
415
|
-
: this.yScale(d.value))
|
|
416
|
-
.attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
417
|
-
? this.xScale(d.value)
|
|
418
|
-
: this.xScale(d.key) + this.xScale.bandwidth() / 2)
|
|
419
|
-
.attr('text-anchor', (d) => {
|
|
420
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
421
|
-
return 'middle';
|
|
422
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
423
|
-
? 'start'
|
|
424
|
-
: 'end';
|
|
425
|
-
})
|
|
426
|
-
.attr('dx', (d) => {
|
|
427
|
-
if (this.afVariation === BarChartVariation.Horizontal)
|
|
428
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
429
|
-
? this.tickPadding
|
|
430
|
-
: -this.tickPadding;
|
|
431
|
-
return 0;
|
|
432
|
-
})
|
|
433
|
-
.attr('fill', (d) => {
|
|
434
|
-
if (this.afVariation === BarChartVariation.Vertical)
|
|
435
|
-
return 'black';
|
|
436
|
-
return this.xScale(d.value) < d.len + this.tickPadding * 2
|
|
437
|
-
? 'black'
|
|
438
|
-
: 'white';
|
|
439
|
-
})
|
|
440
|
-
.attr('dy', () => this.afVariation == BarChartVariation.Horizontal
|
|
441
|
-
? '0.35em'
|
|
442
|
-
: '-0.25em')
|
|
443
|
-
.style('pointer-events', 'none')
|
|
444
|
-
.attrTween('text', (d, i, nodelist) => {
|
|
445
|
-
const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
446
|
-
? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
|
|
447
|
-
: 0;
|
|
448
|
-
const interpolatedValue = d3.interpolate(oldnum, d.value);
|
|
449
|
-
return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
|
|
450
|
-
});
|
|
451
|
-
}, (exit) => exit.remove());
|
|
452
|
-
this.barSelection = this.barChartContainer.selectAll('rect');
|
|
273
|
+
.join('g')
|
|
274
|
+
.attr('class', 'barGroup')
|
|
275
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
276
|
+
this.barSelection.selectAll('.bar')
|
|
277
|
+
.data((d) => {
|
|
278
|
+
return d.series;
|
|
279
|
+
})
|
|
280
|
+
.join('rect')
|
|
281
|
+
.attr('class', 'bar')
|
|
282
|
+
.style('cursor', 'pointer')
|
|
283
|
+
.attr('x', this.xFunction)
|
|
284
|
+
.attr('y', this.yFunction)
|
|
285
|
+
.attr('ry', 4)
|
|
286
|
+
.attr('rx', 4)
|
|
287
|
+
.attr('width', this.widthFunction)
|
|
288
|
+
.attr('height', this.heightFunction)
|
|
289
|
+
.attr('fill', (d) => this.colorFunction(d.serie))
|
|
290
|
+
.on('mouseenter', this.hover)
|
|
291
|
+
.on('mouseleave', this.hoverOut)
|
|
292
|
+
.on('click', this.openTooltip);
|
|
293
|
+
this.barSelection = this.barChartContainer.selectAll('.barGroup');
|
|
453
294
|
this.textSelection = this.barChartContainer.selectAll('.barText');
|
|
454
295
|
};
|
|
455
296
|
// Setting position of text according to bar size
|
|
@@ -488,7 +329,7 @@ export class barChart {
|
|
|
488
329
|
};
|
|
489
330
|
this.reshapeData = () => {
|
|
490
331
|
const toReturn = [];
|
|
491
|
-
if (
|
|
332
|
+
if (!this.chartData) {
|
|
492
333
|
this.placeholderTicks.forEach((key) => {
|
|
493
334
|
const tick = { key: key, series: [] };
|
|
494
335
|
tick.series.push({
|
|
@@ -883,7 +724,7 @@ export class barChart {
|
|
|
883
724
|
this.tooltip
|
|
884
725
|
.select('digi-icon-caret-up')
|
|
885
726
|
.style('position', 'absolute')
|
|
886
|
-
.style('top', '-
|
|
727
|
+
.style('top', '-11px')
|
|
887
728
|
.style('left', '0')
|
|
888
729
|
.style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
|
|
889
730
|
}
|
|
@@ -906,7 +747,16 @@ export class barChart {
|
|
|
906
747
|
}
|
|
907
748
|
else {
|
|
908
749
|
if (this.afVariation === BarChartVariation.Horizontal) {
|
|
909
|
-
|
|
750
|
+
this.tooltip
|
|
751
|
+
.style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
|
|
752
|
+
);
|
|
753
|
+
this.tooltip
|
|
754
|
+
.select('digi-icon-caret-up')
|
|
755
|
+
.style('position', 'absolute')
|
|
756
|
+
.style('top', '-11px')
|
|
757
|
+
.style('left', '0')
|
|
758
|
+
.style('transform', `translate(50%,0)`);
|
|
759
|
+
//this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
|
|
910
760
|
}
|
|
911
761
|
else {
|
|
912
762
|
const xStart = this.margin.left + this.tickPadding + this.yTickSize;
|
|
@@ -1006,7 +856,7 @@ export class barChart {
|
|
|
1006
856
|
this.afChartData = undefined;
|
|
1007
857
|
}
|
|
1008
858
|
afChartDataUpdate(data) {
|
|
1009
|
-
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
|
|
859
|
+
if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
|
|
1010
860
|
if (typeof data != 'string')
|
|
1011
861
|
this.chartData = data;
|
|
1012
862
|
else
|
|
@@ -1110,6 +960,7 @@ export class barChart {
|
|
|
1110
960
|
.select('.tooltipHead')
|
|
1111
961
|
.insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
|
|
1112
962
|
.attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
|
|
963
|
+
.style('text-wrap', 'wrap')
|
|
1113
964
|
.style('font-size', '1rem')
|
|
1114
965
|
.style('margin', '0 0.75rem 0.25rem 0 ')
|
|
1115
966
|
.style('font-weight', '500');
|
|
@@ -1138,7 +989,7 @@ export class barChart {
|
|
|
1138
989
|
: 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
|
|
1139
990
|
// Hide unusable components
|
|
1140
991
|
d3.select(this.titleDiv)
|
|
1141
|
-
.
|
|
992
|
+
.select(this.afHeadingLevel)
|
|
1142
993
|
.html(`${_t.loading}...`);
|
|
1143
994
|
this.initYAxis(true);
|
|
1144
995
|
this.initXAxis(true);
|
|
@@ -1187,14 +1038,17 @@ export class barChart {
|
|
|
1187
1038
|
this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
|
|
1188
1039
|
}
|
|
1189
1040
|
const animateBars = () => {
|
|
1190
|
-
this.barChartContainer.selectAll('.
|
|
1041
|
+
this.barChartContainer.selectAll('.interactiveElements').remove();
|
|
1191
1042
|
this.barSelection = this.barChartContainer
|
|
1043
|
+
.append('g')
|
|
1044
|
+
.attr('class', 'interactiveElements')
|
|
1045
|
+
.style('isolation', 'isolate')
|
|
1192
1046
|
.selectAll('barGroup')
|
|
1193
1047
|
.data(this.mappedData)
|
|
1194
1048
|
.join('g')
|
|
1195
1049
|
.attr('class', 'barGroup')
|
|
1196
|
-
.attr('id', (d) =>
|
|
1197
|
-
this.barSelection.selectAll('
|
|
1050
|
+
.attr('id', (d) => this.barGroupID(d.key));
|
|
1051
|
+
this.barSelection.selectAll('bar')
|
|
1198
1052
|
.data((d) => {
|
|
1199
1053
|
return d.series;
|
|
1200
1054
|
})
|
|
@@ -1216,7 +1070,7 @@ export class barChart {
|
|
|
1216
1070
|
.attr('y', this.yFunction)
|
|
1217
1071
|
.attr('height', this.heightFunction);
|
|
1218
1072
|
this.barChartContainer.selectAll('.bar')
|
|
1219
|
-
.transition()
|
|
1073
|
+
.transition('animateBar')
|
|
1220
1074
|
.duration(400)
|
|
1221
1075
|
.ease(d3.easeLinear)
|
|
1222
1076
|
.delay((...[, i]) => i * 150 + 400)
|
|
@@ -1231,8 +1085,8 @@ export class barChart {
|
|
|
1231
1085
|
};
|
|
1232
1086
|
const flattenBars = () => {
|
|
1233
1087
|
this.barChartContainer
|
|
1234
|
-
.selectAll('
|
|
1235
|
-
.transition()
|
|
1088
|
+
.selectAll('.bar')
|
|
1089
|
+
.transition('animateBar')
|
|
1236
1090
|
.duration(200)
|
|
1237
1091
|
.ease(d3.easeLinear)
|
|
1238
1092
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
@@ -1410,6 +1264,7 @@ export class barChart {
|
|
|
1410
1264
|
d3.select(this.host).select('.tableButton').style('display', null);
|
|
1411
1265
|
d3.select(this.legendDiv).style('display', null);
|
|
1412
1266
|
this.initToolTip();
|
|
1267
|
+
this.initLegend();
|
|
1413
1268
|
}
|
|
1414
1269
|
// Disconnect resize observer while adjusting things
|
|
1415
1270
|
this.barChartObserver.disconnect();
|
|
@@ -1469,18 +1324,22 @@ export class barChart {
|
|
|
1469
1324
|
]);
|
|
1470
1325
|
this.setNamedTicks(true);
|
|
1471
1326
|
// Stop animation
|
|
1472
|
-
this.
|
|
1327
|
+
this.barChartContainer.selectAll('.barGroup').on('end', null);
|
|
1328
|
+
d3.select(this.titleDiv).select('.loadingHeader').remove();
|
|
1473
1329
|
this.loading = false;
|
|
1474
|
-
this.
|
|
1475
|
-
|
|
1330
|
+
this.barChartContainer.selectAll('.bar').interrupt('animateBar');
|
|
1331
|
+
this.barChartContainer.selectAll('.bar').transition()
|
|
1476
1332
|
.duration(this.defaultDuration)
|
|
1477
1333
|
.attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
|
|
1478
1334
|
? this.yScale(d.key)
|
|
1479
1335
|
: this.dims.height - this.margin.bottom)
|
|
1480
1336
|
.attr('height', () => 0)
|
|
1481
|
-
.on('end', (...[, i]) =>
|
|
1482
|
-
|
|
1483
|
-
|
|
1337
|
+
.on('end', (...[, i]) => {
|
|
1338
|
+
if (i === this.placeholderTicks.length - 1) {
|
|
1339
|
+
this.updateBars();
|
|
1340
|
+
this.barChartObserver.observe(this.chartDiv);
|
|
1341
|
+
}
|
|
1342
|
+
});
|
|
1484
1343
|
this.setTickInteraction();
|
|
1485
1344
|
}
|
|
1486
1345
|
else {
|
|
@@ -1662,7 +1521,7 @@ export class barChart {
|
|
|
1662
1521
|
<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>`;
|
|
1663
1522
|
}
|
|
1664
1523
|
}
|
|
1665
|
-
return (h(Host, { key: '
|
|
1524
|
+
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) }, ' ')));
|
|
1666
1525
|
}
|
|
1667
1526
|
static get is() { return "digi-bar-chart"; }
|
|
1668
1527
|
static get encapsulation() { return "scoped"; }
|