@akcelik/strct 1.2.0 → 1.3.0
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/fesm2022/akcelik-strct.mjs +90 -12
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_tokens.scss +66 -0
- package/types/akcelik-strct.d.ts +33 -2
|
@@ -9138,6 +9138,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
9138
9138
|
`, host: { class: 'strct-spark' }, styles: [".strct-spark{display:inline-block;line-height:0}.strct-spark__line{stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-spark__area{opacity:.14}\n"] }]
|
|
9139
9139
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
9140
9140
|
|
|
9141
|
+
/** Resolve a color role to its CSS value. */
|
|
9142
|
+
function colorOf(role) {
|
|
9143
|
+
return role.startsWith('chart-') ? `var(--${role})` : COLOR$1[role];
|
|
9144
|
+
}
|
|
9141
9145
|
const COLOR$1 = {
|
|
9142
9146
|
accent: 'var(--acc)',
|
|
9143
9147
|
success: 'var(--success)',
|
|
@@ -9644,7 +9648,7 @@ class StrctChart {
|
|
|
9644
9648
|
}
|
|
9645
9649
|
const curve = x.curve ?? this.curve();
|
|
9646
9650
|
return {
|
|
9647
|
-
color:
|
|
9651
|
+
color: colorOf(x.color ?? x.status ?? this.status()),
|
|
9648
9652
|
label: x.label ?? '',
|
|
9649
9653
|
area: false,
|
|
9650
9654
|
dash: x.dash ? (typeof x.dash === 'string' ? x.dash : '5 4') : null,
|
|
@@ -9670,7 +9674,7 @@ class StrctChart {
|
|
|
9670
9674
|
? bandPath(x.upper.map((v, i) => ptOf(v, i)), x.lower.map((v, i) => ptOf(v, i)), curve)
|
|
9671
9675
|
: '';
|
|
9672
9676
|
return {
|
|
9673
|
-
color:
|
|
9677
|
+
color: colorOf(x.color ?? x.status ?? this.status()),
|
|
9674
9678
|
label: x.label ?? '',
|
|
9675
9679
|
area,
|
|
9676
9680
|
dash: x.dash ? (typeof x.dash === 'string' ? x.dash : '5 4') : null,
|
|
@@ -9784,6 +9788,50 @@ class StrctChart {
|
|
|
9784
9788
|
return null;
|
|
9785
9789
|
return this.xOf(i);
|
|
9786
9790
|
}, ...(ngDevMode ? [{ debugName: "hoverX" }] : /* istanbul ignore next */ []));
|
|
9791
|
+
/**
|
|
9792
|
+
* Tooltip edge-flip (FR-CHART-14): near the left edge the balloon
|
|
9793
|
+
* left-aligns, near the right edge it right-aligns, otherwise it stays
|
|
9794
|
+
* centered — so the first/last point's values are never clipped by an
|
|
9795
|
+
* `overflow: hidden` ancestor. Only the balloon shifts; the crosshair
|
|
9796
|
+
* stays on the true point-X.
|
|
9797
|
+
*/
|
|
9798
|
+
tipAlign = computed(() => {
|
|
9799
|
+
const x = this.hoverX();
|
|
9800
|
+
const w = this.width();
|
|
9801
|
+
if (x == null || !w)
|
|
9802
|
+
return 'center';
|
|
9803
|
+
if (x < w * 0.12)
|
|
9804
|
+
return 'start';
|
|
9805
|
+
if (x > w * 0.88)
|
|
9806
|
+
return 'end';
|
|
9807
|
+
return 'center';
|
|
9808
|
+
}, ...(ngDevMode ? [{ debugName: "tipAlign" }] : /* istanbul ignore next */ []));
|
|
9809
|
+
/** Horizontal-only shift (multi / gap tips, anchored below the plot top). */
|
|
9810
|
+
tipShift = computed(() => {
|
|
9811
|
+
switch (this.tipAlign()) {
|
|
9812
|
+
case 'start':
|
|
9813
|
+
return 'translate(8px, 0)';
|
|
9814
|
+
case 'end':
|
|
9815
|
+
return 'translate(calc(-100% - 8px), 0)';
|
|
9816
|
+
default:
|
|
9817
|
+
return 'translate(-50%, 0)';
|
|
9818
|
+
}
|
|
9819
|
+
}, ...(ngDevMode ? [{ debugName: "tipShift" }] : /* istanbul ignore next */ []));
|
|
9820
|
+
/** Shift incl. the single tip's vertical lift above the hover point. */
|
|
9821
|
+
tipShiftRaised = computed(() => {
|
|
9822
|
+
switch (this.tipAlign()) {
|
|
9823
|
+
case 'start':
|
|
9824
|
+
return 'translate(8px, calc(-100% - 10px))';
|
|
9825
|
+
case 'end':
|
|
9826
|
+
return 'translate(calc(-100% - 8px), calc(-100% - 10px))';
|
|
9827
|
+
default:
|
|
9828
|
+
return 'translate(-50%, calc(-100% - 10px))';
|
|
9829
|
+
}
|
|
9830
|
+
}, ...(ngDevMode ? [{ debugName: "tipShiftRaised" }] : /* istanbul ignore next */ []));
|
|
9831
|
+
/** Keep the y-axis value chip vertically inside the plot box. */
|
|
9832
|
+
axisChipY(y) {
|
|
9833
|
+
return Math.max(12, Math.min(this.height() - 12, y));
|
|
9834
|
+
}
|
|
9787
9835
|
hoverPt = computed(() => {
|
|
9788
9836
|
const i = this.dispIdx();
|
|
9789
9837
|
const p = this.points();
|
|
@@ -10441,7 +10489,11 @@ class StrctChart {
|
|
|
10441
10489
|
|
|
10442
10490
|
@if (interactive() && hoverX() !== null) {
|
|
10443
10491
|
@if (isMulti()) {
|
|
10444
|
-
<div
|
|
10492
|
+
<div
|
|
10493
|
+
class="strct-chart__tip strct-chart__tip--multi"
|
|
10494
|
+
[style.left.px]="hoverX()"
|
|
10495
|
+
[style.transform]="tipShift()"
|
|
10496
|
+
>
|
|
10445
10497
|
@if (hoverMeta()) {
|
|
10446
10498
|
<span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
|
|
10447
10499
|
}
|
|
@@ -10459,8 +10511,15 @@ class StrctChart {
|
|
|
10459
10511
|
}
|
|
10460
10512
|
</div>
|
|
10461
10513
|
} @else if (hoverPt(); as hp) {
|
|
10462
|
-
<div class="strct-chart__axis-y" [style.top.px]="hp.y">
|
|
10463
|
-
|
|
10514
|
+
<div class="strct-chart__axis-y" [style.top.px]="axisChipY(hp.y)">
|
|
10515
|
+
{{ hoverValueText() }}
|
|
10516
|
+
</div>
|
|
10517
|
+
<div
|
|
10518
|
+
class="strct-chart__tip"
|
|
10519
|
+
[style.left.px]="hp.x"
|
|
10520
|
+
[style.top.px]="hp.y"
|
|
10521
|
+
[style.transform]="tipShiftRaised()"
|
|
10522
|
+
>
|
|
10464
10523
|
<span class="strct-chart__tip-v">{{ hoverValueText() }}</span>
|
|
10465
10524
|
@if (hoverDelta() !== null || hoverMeta()) {
|
|
10466
10525
|
<span class="strct-chart__tip-meta">
|
|
@@ -10485,7 +10544,11 @@ class StrctChart {
|
|
|
10485
10544
|
</div>
|
|
10486
10545
|
} @else if (hoverGap()) {
|
|
10487
10546
|
<!-- A gap point: keep the time slot, say "no data" instead of a value. -->
|
|
10488
|
-
<div
|
|
10547
|
+
<div
|
|
10548
|
+
class="strct-chart__tip strct-chart__tip--gap"
|
|
10549
|
+
[style.left.px]="hoverX()"
|
|
10550
|
+
[style.transform]="tipShift()"
|
|
10551
|
+
>
|
|
10489
10552
|
<span class="strct-chart__tip-v">{{ gapText() }}</span>
|
|
10490
10553
|
@if (hoverMeta()) {
|
|
10491
10554
|
<span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
|
|
@@ -10512,7 +10575,7 @@ class StrctChart {
|
|
|
10512
10575
|
</div>
|
|
10513
10576
|
}
|
|
10514
10577
|
}
|
|
10515
|
-
`, isInline: true, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart__band{opacity:.13;stroke:none}.strct-chart__band--stack{opacity:.32}.strct-chart__ann{stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}.strct-chart__ann--dashed{stroke-dasharray:4 3}.strct-chart__ann-label{position:absolute;top:0;transform:translate(-50%);pointer-events:none;font-size:12px;font-weight:600;background:var(--bg-1);padding:0 3px;border-radius:3px;white-space:nowrap}.strct-chart--brush .strct-chart__svg{cursor:crosshair}.strct-chart__brush{fill:var(--acc);opacity:.16;stroke:var(--acc50);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__reset{position:absolute;top:6px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--bg-a);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}.strct-chart__reset:hover{color:var(--t1);border-color:var(--acc50)}.strct-chart__reset:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-chart__tip--gap{top:6px
|
|
10578
|
+
`, isInline: true, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart__band{opacity:.13;stroke:none}.strct-chart__band--stack{opacity:.32}.strct-chart__ann{stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}.strct-chart__ann--dashed{stroke-dasharray:4 3}.strct-chart__ann-label{position:absolute;top:0;transform:translate(-50%);pointer-events:none;font-size:12px;font-weight:600;background:var(--bg-1);padding:0 3px;border-radius:3px;white-space:nowrap}.strct-chart--brush .strct-chart__svg{cursor:crosshair}.strct-chart__brush{fill:var(--acc);opacity:.16;stroke:var(--acc50);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__reset{position:absolute;top:6px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--bg-a);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}.strct-chart__reset:hover{color:var(--t1);border-color:var(--acc50)}.strct-chart__reset:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-chart__tip--gap{top:6px}.strct-chart__tip-ann{font-size:12px;font-weight:600}.strct-chart--glow .strct-chart__line{filter:drop-shadow(0 0 1.5px var(--strct-chart-c)) drop-shadow(0 0 5px var(--strct-chart-c))}.strct-chart--glow .strct-chart__head-dot{filter:drop-shadow(0 0 2px var(--strct-chart-c)) drop-shadow(0 0 6px var(--strct-chart-c))}.strct-chart--glow .strct-chart__hoverdot{filter:drop-shadow(0 0 4px var(--strct-chart-c))}.strct-chart__ytick{position:absolute;left:0;width:34px;text-align:end;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__thr{position:absolute;right:2px;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-1);padding:0 3px;border-radius:3px}.strct-chart__axis-y{position:absolute;left:0;transform:translateY(-50%);pointer-events:none;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;z-index:2}.strct-chart__label--active{color:var(--t1);font-weight:700}.strct-chart__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12px;color:var(--t2)}.strct-chart__leg{display:inline-flex;align-items:center;gap:6px}.strct-chart__leg-sw{width:9px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip{position:absolute;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);box-shadow:var(--shadow-elevated);white-space:nowrap;z-index:2}.strct-chart__tip--multi{top:6px;align-items:stretch;gap:3px}.strct-chart__tip-v{font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}.strct-chart__tip-meta{display:inline-flex;align-items:center;gap:5px}.strct-chart__tip-delta{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__tip-delta--up{color:var(--success)}.strct-chart__tip-delta--down{color:var(--critical)}.strct-chart__tip-l{font-size:12px;color:var(--t3)}.strct-chart__tip-row{display:inline-flex;align-items:center;gap:6px;font-size:12px}.strct-chart__tip-sw{width:8px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip-rl{color:var(--t3);margin-inline-end:auto}.strct-chart__tip-rv{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}.strct-chart__labels{position:relative;height:15px;margin-top:6px;font-size:12px;color:var(--t3)}.strct-chart__labels span{position:absolute;transform:translate(-50%);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.strct-chart__line--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:strct-chart-draw .9s ease forwards}.strct-chart__pulse{transform-box:fill-box;transform-origin:center;animation:strct-chart-pulse 2.4s ease-out infinite}}@keyframes strct-chart-draw{to{stroke-dashoffset:0}}@keyframes strct-chart-pulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}to{transform:scale(2.5);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10516
10579
|
}
|
|
10517
10580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctChart, decorators: [{
|
|
10518
10581
|
type: Component,
|
|
@@ -10769,7 +10832,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
10769
10832
|
|
|
10770
10833
|
@if (interactive() && hoverX() !== null) {
|
|
10771
10834
|
@if (isMulti()) {
|
|
10772
|
-
<div
|
|
10835
|
+
<div
|
|
10836
|
+
class="strct-chart__tip strct-chart__tip--multi"
|
|
10837
|
+
[style.left.px]="hoverX()"
|
|
10838
|
+
[style.transform]="tipShift()"
|
|
10839
|
+
>
|
|
10773
10840
|
@if (hoverMeta()) {
|
|
10774
10841
|
<span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
|
|
10775
10842
|
}
|
|
@@ -10787,8 +10854,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
10787
10854
|
}
|
|
10788
10855
|
</div>
|
|
10789
10856
|
} @else if (hoverPt(); as hp) {
|
|
10790
|
-
<div class="strct-chart__axis-y" [style.top.px]="hp.y">
|
|
10791
|
-
|
|
10857
|
+
<div class="strct-chart__axis-y" [style.top.px]="axisChipY(hp.y)">
|
|
10858
|
+
{{ hoverValueText() }}
|
|
10859
|
+
</div>
|
|
10860
|
+
<div
|
|
10861
|
+
class="strct-chart__tip"
|
|
10862
|
+
[style.left.px]="hp.x"
|
|
10863
|
+
[style.top.px]="hp.y"
|
|
10864
|
+
[style.transform]="tipShiftRaised()"
|
|
10865
|
+
>
|
|
10792
10866
|
<span class="strct-chart__tip-v">{{ hoverValueText() }}</span>
|
|
10793
10867
|
@if (hoverDelta() !== null || hoverMeta()) {
|
|
10794
10868
|
<span class="strct-chart__tip-meta">
|
|
@@ -10813,7 +10887,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
10813
10887
|
</div>
|
|
10814
10888
|
} @else if (hoverGap()) {
|
|
10815
10889
|
<!-- A gap point: keep the time slot, say "no data" instead of a value. -->
|
|
10816
|
-
<div
|
|
10890
|
+
<div
|
|
10891
|
+
class="strct-chart__tip strct-chart__tip--gap"
|
|
10892
|
+
[style.left.px]="hoverX()"
|
|
10893
|
+
[style.transform]="tipShift()"
|
|
10894
|
+
>
|
|
10817
10895
|
<span class="strct-chart__tip-v">{{ gapText() }}</span>
|
|
10818
10896
|
@if (hoverMeta()) {
|
|
10819
10897
|
<span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
|
|
@@ -10845,7 +10923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
10845
10923
|
'[class.strct-chart--glow]': 'glow()',
|
|
10846
10924
|
'[class.strct-chart--brush]': 'brush() || zoom()',
|
|
10847
10925
|
'[style.--strct-chart-c]': 'color()',
|
|
10848
|
-
}, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart__band{opacity:.13;stroke:none}.strct-chart__band--stack{opacity:.32}.strct-chart__ann{stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}.strct-chart__ann--dashed{stroke-dasharray:4 3}.strct-chart__ann-label{position:absolute;top:0;transform:translate(-50%);pointer-events:none;font-size:12px;font-weight:600;background:var(--bg-1);padding:0 3px;border-radius:3px;white-space:nowrap}.strct-chart--brush .strct-chart__svg{cursor:crosshair}.strct-chart__brush{fill:var(--acc);opacity:.16;stroke:var(--acc50);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__reset{position:absolute;top:6px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--bg-a);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}.strct-chart__reset:hover{color:var(--t1);border-color:var(--acc50)}.strct-chart__reset:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-chart__tip--gap{top:6px
|
|
10926
|
+
}, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart__band{opacity:.13;stroke:none}.strct-chart__band--stack{opacity:.32}.strct-chart__ann{stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}.strct-chart__ann--dashed{stroke-dasharray:4 3}.strct-chart__ann-label{position:absolute;top:0;transform:translate(-50%);pointer-events:none;font-size:12px;font-weight:600;background:var(--bg-1);padding:0 3px;border-radius:3px;white-space:nowrap}.strct-chart--brush .strct-chart__svg{cursor:crosshair}.strct-chart__brush{fill:var(--acc);opacity:.16;stroke:var(--acc50);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__reset{position:absolute;top:6px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--bg-a);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}.strct-chart__reset:hover{color:var(--t1);border-color:var(--acc50)}.strct-chart__reset:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-chart__tip--gap{top:6px}.strct-chart__tip-ann{font-size:12px;font-weight:600}.strct-chart--glow .strct-chart__line{filter:drop-shadow(0 0 1.5px var(--strct-chart-c)) drop-shadow(0 0 5px var(--strct-chart-c))}.strct-chart--glow .strct-chart__head-dot{filter:drop-shadow(0 0 2px var(--strct-chart-c)) drop-shadow(0 0 6px var(--strct-chart-c))}.strct-chart--glow .strct-chart__hoverdot{filter:drop-shadow(0 0 4px var(--strct-chart-c))}.strct-chart__ytick{position:absolute;left:0;width:34px;text-align:end;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__thr{position:absolute;right:2px;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-1);padding:0 3px;border-radius:3px}.strct-chart__axis-y{position:absolute;left:0;transform:translateY(-50%);pointer-events:none;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;z-index:2}.strct-chart__label--active{color:var(--t1);font-weight:700}.strct-chart__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12px;color:var(--t2)}.strct-chart__leg{display:inline-flex;align-items:center;gap:6px}.strct-chart__leg-sw{width:9px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip{position:absolute;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);box-shadow:var(--shadow-elevated);white-space:nowrap;z-index:2}.strct-chart__tip--multi{top:6px;align-items:stretch;gap:3px}.strct-chart__tip-v{font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}.strct-chart__tip-meta{display:inline-flex;align-items:center;gap:5px}.strct-chart__tip-delta{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__tip-delta--up{color:var(--success)}.strct-chart__tip-delta--down{color:var(--critical)}.strct-chart__tip-l{font-size:12px;color:var(--t3)}.strct-chart__tip-row{display:inline-flex;align-items:center;gap:6px;font-size:12px}.strct-chart__tip-sw{width:8px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip-rl{color:var(--t3);margin-inline-end:auto}.strct-chart__tip-rv{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}.strct-chart__labels{position:relative;height:15px;margin-top:6px;font-size:12px;color:var(--t3)}.strct-chart__labels span{position:absolute;transform:translate(-50%);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.strct-chart__line--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:strct-chart-draw .9s ease forwards}.strct-chart__pulse{transform-box:fill-box;transform-origin:center;animation:strct-chart-pulse 2.4s ease-out infinite}}@keyframes strct-chart-draw{to{stroke-dashoffset:0}}@keyframes strct-chart-pulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}to{transform:scale(2.5);opacity:0}}\n"] }]
|
|
10849
10927
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], glow: [{ type: i0.Input, args: [{ isSignal: true, alias: "glow", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], xTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTicks", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], yTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTicks", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], agoFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "agoFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], brush: [{ type: i0.Input, args: [{ isSignal: true, alias: "brush", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], times: [{ type: i0.Input, args: [{ isSignal: true, alias: "times", required: false }] }], gapText: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapText", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], hoverIndex: [{ type: i0.Output, args: ["hoverIndex"] }], brushChange: [{ type: i0.Output, args: ["brushChange"] }], svgRef: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
|
|
10850
10928
|
|
|
10851
10929
|
const PALETTE = [
|