@magmonium/one 0.4.59 → 0.4.60
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.
|
@@ -18185,8 +18185,15 @@ const MARGIN = {
|
|
|
18185
18185
|
bottom: 28,
|
|
18186
18186
|
left: 52
|
|
18187
18187
|
};
|
|
18188
|
+
const MINIMAL_MARGIN = {
|
|
18189
|
+
top: 4,
|
|
18190
|
+
right: 4,
|
|
18191
|
+
bottom: 4,
|
|
18192
|
+
left: 4
|
|
18193
|
+
};
|
|
18188
18194
|
const FALLBACK_WIDTH = 640;
|
|
18189
18195
|
const DEFAULT_HEIGHT = 320;
|
|
18196
|
+
const DEFAULT_MINIMAL_HEIGHT = 120;
|
|
18190
18197
|
const DEFAULT_RANGE = "max";
|
|
18191
18198
|
const OVERFLOW_COLOR = "var(--m-text-tertiary)";
|
|
18192
18199
|
const TOOLTIP_ROOM = 220;
|
|
@@ -18201,6 +18208,8 @@ let nextId = 0;
|
|
|
18201
18208
|
var SectionChartComponent = class SectionChartComponent extends ConfigComponent {
|
|
18202
18209
|
subFolder = LAYOUT_ASSET_FOLDER.section_chart;
|
|
18203
18210
|
scale = input(void 0, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
|
|
18211
|
+
variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
18212
|
+
displayPeriod = input(void 0, ...ngDevMode ? [{ debugName: "displayPeriod" }] : /* istanbul ignore next */ []);
|
|
18204
18213
|
height = input(void 0, {
|
|
18205
18214
|
...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
|
|
18206
18215
|
transform: optionalNumber
|
|
@@ -18218,8 +18227,6 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18218
18227
|
members = signal([], ...ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []);
|
|
18219
18228
|
locale = inject(LOCALE_ID);
|
|
18220
18229
|
tableId = `m-section-chart-table-${nextId++}`;
|
|
18221
|
-
left = MARGIN.left;
|
|
18222
|
-
top = MARGIN.top;
|
|
18223
18230
|
width = signal(FALLBACK_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
|
|
18224
18231
|
dateFormat = new Intl.DateTimeFormat(this.locale, {
|
|
18225
18232
|
day: "numeric",
|
|
@@ -18245,11 +18252,13 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18245
18252
|
notation: "compact",
|
|
18246
18253
|
maximumFractionDigits: 1
|
|
18247
18254
|
});
|
|
18248
|
-
resolvedHeight = computed(() => this.height() ?? this.config()?.height ?? DEFAULT_HEIGHT, ...ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []);
|
|
18255
|
+
resolvedHeight = computed(() => this.height() ?? this.config()?.height ?? (this.minimal() ? DEFAULT_MINIMAL_HEIGHT : DEFAULT_HEIGHT), ...ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []);
|
|
18249
18256
|
resolvedScale = computed(() => this.scale() ?? this.config()?.scale ?? "auto", ...ngDevMode ? [{ debugName: "resolvedScale" }] : /* istanbul ignore next */ []);
|
|
18250
18257
|
resolvedRange = computed(() => this.range() ?? this.config()?.range ?? DEFAULT_RANGE, ...ngDevMode ? [{ debugName: "resolvedRange" }] : /* istanbul ignore next */ []);
|
|
18251
|
-
|
|
18252
|
-
|
|
18258
|
+
minimal = computed(() => (this.variant() ?? this.config()?.variant) === "minimal", ...ngDevMode ? [{ debugName: "minimal" }] : /* istanbul ignore next */ []);
|
|
18259
|
+
margin = computed(() => this.minimal() ? MINIMAL_MARGIN : MARGIN, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
|
|
18260
|
+
showNavigator = computed(() => !this.minimal() && (this.navigator() ?? this.config()?.navigator ?? false), ...ngDevMode ? [{ debugName: "showNavigator" }] : /* istanbul ignore next */ []);
|
|
18261
|
+
canMeasure = computed(() => !this.minimal() && (this.measure() ?? this.config()?.measure ?? false), ...ngDevMode ? [{ debugName: "canMeasure" }] : /* istanbul ignore next */ []);
|
|
18253
18262
|
presets = computed(() => {
|
|
18254
18263
|
const authored = this.config()?.ranges;
|
|
18255
18264
|
const ids = (authored?.length ? authored : DEFAULT_SECTION_CHART_RANGES).filter(isPresetId).map((id) => id.trim().toLowerCase());
|
|
@@ -18325,10 +18334,12 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18325
18334
|
}));
|
|
18326
18335
|
}, ...ngDevMode ? [{ debugName: "windowed" }] : /* istanbul ignore next */ []);
|
|
18327
18336
|
percent = computed(() => this.resolvedScale() === "percent" || this.lines().length > 1, ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
|
|
18328
|
-
plotWidth = computed(() => Math.max(1, this.width() -
|
|
18329
|
-
plotHeight = computed(() => Math.max(1, this.resolvedHeight() -
|
|
18330
|
-
|
|
18331
|
-
|
|
18337
|
+
plotWidth = computed(() => Math.max(1, this.width() - this.margin().left - this.margin().right), ...ngDevMode ? [{ debugName: "plotWidth" }] : /* istanbul ignore next */ []);
|
|
18338
|
+
plotHeight = computed(() => Math.max(1, this.resolvedHeight() - this.margin().top - this.margin().bottom), ...ngDevMode ? [{ debugName: "plotHeight" }] : /* istanbul ignore next */ []);
|
|
18339
|
+
left = computed(() => this.margin().left, ...ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []);
|
|
18340
|
+
top = computed(() => this.margin().top, ...ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []);
|
|
18341
|
+
right = computed(() => this.left() + this.plotWidth(), ...ngDevMode ? [{ debugName: "right" }] : /* istanbul ignore next */ []);
|
|
18342
|
+
bottom = computed(() => this.top() + this.plotHeight(), ...ngDevMode ? [{ debugName: "bottom" }] : /* istanbul ignore next */ []);
|
|
18332
18343
|
viewBox = computed(() => `0 0 ${this.width()} ${this.resolvedHeight()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
|
|
18333
18344
|
plotted = computed(() => {
|
|
18334
18345
|
const pct = this.percent();
|
|
@@ -18364,12 +18375,14 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18364
18375
|
sx = computed(() => {
|
|
18365
18376
|
const extent = this.extent();
|
|
18366
18377
|
const width = this.plotWidth();
|
|
18367
|
-
|
|
18378
|
+
const left = this.left();
|
|
18379
|
+
return (t) => extent ? left + (t - extent.t0) / (extent.t1 - extent.t0) * width : left;
|
|
18368
18380
|
}, ...ngDevMode ? [{ debugName: "sx" }] : /* istanbul ignore next */ []);
|
|
18369
18381
|
sy = computed(() => {
|
|
18370
18382
|
const extent = this.extent();
|
|
18371
18383
|
const height = this.plotHeight();
|
|
18372
|
-
|
|
18384
|
+
const top = this.top();
|
|
18385
|
+
return (v) => extent ? top + (1 - (v - extent.min) / (extent.max - extent.min)) * height : top + height;
|
|
18373
18386
|
}, ...ngDevMode ? [{ debugName: "sy" }] : /* istanbul ignore next */ []);
|
|
18374
18387
|
paths = computed(() => {
|
|
18375
18388
|
const sx = this.sx();
|
|
@@ -18383,7 +18396,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18383
18396
|
}, ...ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []);
|
|
18384
18397
|
yTicks = computed(() => {
|
|
18385
18398
|
const extent = this.extent();
|
|
18386
|
-
if (!extent) return [];
|
|
18399
|
+
if (!extent || this.minimal()) return [];
|
|
18387
18400
|
const sy = this.sy();
|
|
18388
18401
|
const pct = this.percent();
|
|
18389
18402
|
return extent.ticks.map((v) => ({
|
|
@@ -18394,7 +18407,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18394
18407
|
}, ...ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []);
|
|
18395
18408
|
xTicks = computed(() => {
|
|
18396
18409
|
const extent = this.extent();
|
|
18397
|
-
if (!extent) return [];
|
|
18410
|
+
if (!extent || this.minimal()) return [];
|
|
18398
18411
|
const sx = this.sx();
|
|
18399
18412
|
return timeTicks(extent.t0, extent.t1, this.plotWidth() / 80).map((tick) => ({
|
|
18400
18413
|
x: sx(tick.t),
|
|
@@ -18405,6 +18418,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18405
18418
|
const span = this.drawnSpan();
|
|
18406
18419
|
return span ? `${this.dateFormat.format(span[0])} – ${this.dateFormat.format(span[1])}` : "";
|
|
18407
18420
|
}, ...ngDevMode ? [{ debugName: "windowLabel" }] : /* istanbul ignore next */ []);
|
|
18421
|
+
periodLabel = computed(() => this.displayPeriod() || this.config()?.displayPeriod || this.windowLabel(), ...ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []);
|
|
18408
18422
|
legendRows = computed(() => {
|
|
18409
18423
|
const changes = /* @__PURE__ */ new Map();
|
|
18410
18424
|
for (const line of this.windowed()) if (line.member) changes.set(line.member, chartChange(line.y));
|
|
@@ -18468,7 +18482,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18468
18482
|
hover = computed(() => {
|
|
18469
18483
|
const index = this.hoverIndex();
|
|
18470
18484
|
const times = this.times();
|
|
18471
|
-
if (index === null || !times.length) return null;
|
|
18485
|
+
if (index === null || !times.length || this.minimal()) return null;
|
|
18472
18486
|
const t = times[Math.min(index, times.length - 1)];
|
|
18473
18487
|
const sx = this.sx();
|
|
18474
18488
|
const sy = this.sy();
|
|
@@ -18500,11 +18514,12 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18500
18514
|
const data = this.dataSpan();
|
|
18501
18515
|
if (!data) return null;
|
|
18502
18516
|
const width = this.plotWidth();
|
|
18517
|
+
const left = this.left();
|
|
18503
18518
|
const length = data[1] - data[0] || 1;
|
|
18504
18519
|
return {
|
|
18505
18520
|
data,
|
|
18506
|
-
x: (t) =>
|
|
18507
|
-
t: (px) => data[0] + (px -
|
|
18521
|
+
x: (t) => left + (t - data[0]) / length * width,
|
|
18522
|
+
t: (px) => data[0] + (px - left) / width * length,
|
|
18508
18523
|
slop: GRIP_SLOP / width * length,
|
|
18509
18524
|
minWidth: length * MIN_WINDOW_SHARE
|
|
18510
18525
|
};
|
|
@@ -18671,8 +18686,9 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18671
18686
|
if (!extent || !times.length) return null;
|
|
18672
18687
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
18673
18688
|
const px = event.clientX - rect.left;
|
|
18674
|
-
|
|
18675
|
-
|
|
18689
|
+
const left = this.left();
|
|
18690
|
+
if (px < left || px > left + this.plotWidth()) return null;
|
|
18691
|
+
const t = extent.t0 + (px - left) / this.plotWidth() * (extent.t1 - extent.t0);
|
|
18676
18692
|
return times[nearestIndex(times, t)];
|
|
18677
18693
|
};
|
|
18678
18694
|
onPointerMove = (event) => {
|
|
@@ -18798,6 +18814,20 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18798
18814
|
isRequired: false,
|
|
18799
18815
|
transformFunction: null
|
|
18800
18816
|
},
|
|
18817
|
+
variant: {
|
|
18818
|
+
classPropertyName: "variant",
|
|
18819
|
+
publicName: "variant",
|
|
18820
|
+
isSignal: true,
|
|
18821
|
+
isRequired: false,
|
|
18822
|
+
transformFunction: null
|
|
18823
|
+
},
|
|
18824
|
+
displayPeriod: {
|
|
18825
|
+
classPropertyName: "displayPeriod",
|
|
18826
|
+
publicName: "displayPeriod",
|
|
18827
|
+
isSignal: true,
|
|
18828
|
+
isRequired: false,
|
|
18829
|
+
transformFunction: null
|
|
18830
|
+
},
|
|
18801
18831
|
height: {
|
|
18802
18832
|
classPropertyName: "height",
|
|
18803
18833
|
publicName: "height",
|
|
@@ -18839,7 +18869,10 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18839
18869
|
window: "windowChange"
|
|
18840
18870
|
},
|
|
18841
18871
|
host: {
|
|
18842
|
-
properties: {
|
|
18872
|
+
properties: {
|
|
18873
|
+
"class.is-design-mode": "isDesignMode",
|
|
18874
|
+
"class.m-section-chart--minimal": "minimal()"
|
|
18875
|
+
},
|
|
18843
18876
|
classAttribute: "m-section-chart"
|
|
18844
18877
|
},
|
|
18845
18878
|
providers: [{
|
|
@@ -18855,8 +18888,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18855
18888
|
}],
|
|
18856
18889
|
usesInheritance: true,
|
|
18857
18890
|
ngImport: i0,
|
|
18858
|
-
template: "<div class=\"m-section-chart__top\">\n <!-- Each series draws its own legend row: the row is the series' element,\n which is what the editor's Canvas selects it by. -->\n <div class=\"m-section-chart__legend\" role=\"list\">\n <ng-content />\n </div>\n @if (
|
|
18859
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"],
|
|
18891
|
+
template: "<div class=\"m-section-chart__top\">\n <!-- Each series draws its own legend row: the row is the series' element,\n which is what the editor's Canvas selects it by. -->\n <div class=\"m-section-chart__legend\" role=\"list\">\n <ng-content />\n </div>\n @if (periodLabel(); as label) {\n <span class=\"m-section-chart__window\">{{ label }}</span>\n }\n</div>\n\n<div class=\"m-section-chart__plot\">\n <svg\n class=\"m-section-chart__svg\"\n role=\"img\"\n tabindex=\"0\"\n [class.is-measurable]=\"canMeasure()\"\n [attr.width]=\"width()\"\n [attr.height]=\"resolvedHeight()\"\n [attr.viewBox]=\"viewBox()\"\n [attr.aria-label]=\"windowLabel()\"\n [attr.aria-describedby]=\"tableId\"\n (pointerdown)=\"onPlotDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPlotUp()\"\n (pointercancel)=\"onPlotUp()\"\n (pointerleave)=\"clearHover()\"\n (blur)=\"clearHover()\"\n (keydown)=\"onKeydown($event)\"\n >\n @for (tick of yTicks(); track $index) {\n <svg:line\n class=\"m-section-chart__grid\"\n [class.m-section-chart__grid--zero]=\"tick.zero\"\n [attr.x1]=\"left()\"\n [attr.x2]=\"right()\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n />\n <svg:text\n class=\"m-section-chart__tick\"\n text-anchor=\"end\"\n [attr.x]=\"left() - 8\"\n [attr.y]=\"tick.y + 4\"\n >\n {{ tick.label }}\n </svg:text>\n }\n @if (!minimal()) {\n <svg:line\n class=\"m-section-chart__axis\"\n [attr.x1]=\"left()\"\n [attr.x2]=\"right()\"\n [attr.y1]=\"bottom()\"\n [attr.y2]=\"bottom()\"\n />\n }\n @for (tick of xTicks(); track $index) {\n <svg:text\n class=\"m-section-chart__tick\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"bottom() + 18\"\n >\n {{ tick.label }}\n </svg:text>\n }\n @if (measureView(); as band) {\n <svg:rect\n class=\"m-section-chart__band\"\n [attr.x]=\"band.start\"\n [attr.y]=\"top()\"\n [attr.width]=\"band.width\"\n [attr.height]=\"bottom() - top()\"\n />\n <svg:line\n class=\"m-section-chart__band-edge\"\n [attr.x1]=\"band.start\"\n [attr.x2]=\"band.start\"\n [attr.y1]=\"top()\"\n [attr.y2]=\"bottom()\"\n />\n <svg:line\n class=\"m-section-chart__band-edge\"\n [attr.x1]=\"band.start + band.width\"\n [attr.x2]=\"band.start + band.width\"\n [attr.y1]=\"top()\"\n [attr.y2]=\"bottom()\"\n />\n }\n @for (path of paths(); track $index) {\n <svg:path\n class=\"m-section-chart__line\"\n [attr.d]=\"path.d\"\n [style.stroke]=\"path.color\"\n />\n }\n @if (!minimal()) {\n @for (path of paths(); track $index) {\n <svg:circle\n class=\"m-section-chart__dot\"\n r=\"4\"\n [attr.cx]=\"path.endX\"\n [attr.cy]=\"path.endY\"\n [style.fill]=\"path.color\"\n />\n }\n }\n @if (hover(); as h) {\n <svg:line\n class=\"m-section-chart__cross\"\n [attr.x1]=\"h.x\"\n [attr.x2]=\"h.x\"\n [attr.y1]=\"top()\"\n [attr.y2]=\"bottom()\"\n />\n @for (row of h.rows; track $index) {\n <svg:circle\n class=\"m-section-chart__dot\"\n r=\"4\"\n [attr.cx]=\"row.cx\"\n [attr.cy]=\"row.cy\"\n [style.fill]=\"row.color\"\n />\n }\n }\n </svg>\n\n @if (hover(); as h) {\n <div\n class=\"m-section-chart__tip\"\n role=\"status\"\n [class.m-section-chart__tip--flip]=\"h.flip\"\n [style.left.px]=\"h.x\"\n >\n <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n @for (row of h.rows; track $index) {\n <span class=\"m-section-chart__tip-row\">\n <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n <span class=\"m-section-chart__tip-label\">{{\n row.noTranslate ? row.label : (row.label | translate: row.params)\n }}</span>\n <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n </span>\n }\n </div>\n }\n\n @if (measureView()?.card; as card) {\n <div\n class=\"m-section-chart__measure\"\n role=\"status\"\n [class.m-section-chart__measure--flip]=\"card.flip\"\n [style.left.px]=\"card.x\"\n >\n <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n @for (row of card.rows; track $index) {\n <span class=\"m-section-chart__tip-row\">\n <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n <span class=\"m-section-chart__tip-label\">{{\n row.noTranslate ? row.label : (row.label | translate: row.params)\n }}</span>\n <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n </span>\n }\n </div>\n }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n <div class=\"m-section-chart__presets\">\n <m-section-toggle\n [items]=\"presets()\"\n [selectedIndex]=\"presetIndex()\"\n [border]=\"false\"\n (action)=\"selectPreset($event)\"\n >\n <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n </ng-template>\n </m-section-toggle>\n </div>\n}\n\n@if (navigatorView(); as nav) {\n <svg\n class=\"m-section-chart__navigator\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-label]=\"'zoom' | translate\"\n [attr.aria-valuenow]=\"nav.position\"\n [attr.aria-valuetext]=\"windowLabel()\"\n [attr.width]=\"width()\"\n [attr.height]=\"navHeight\"\n [attr.viewBox]=\"navViewBox()\"\n (pointerdown)=\"onNavigatorDown($event)\"\n (pointermove)=\"onNavigatorMove($event)\"\n (pointerup)=\"onNavigatorUp()\"\n (pointercancel)=\"onNavigatorUp()\"\n (keydown)=\"onNavigatorKeydown($event)\"\n >\n <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n <svg:line\n class=\"m-section-chart__axis\"\n [attr.x1]=\"left()\"\n [attr.x2]=\"right()\"\n [attr.y1]=\"nav.base\"\n [attr.y2]=\"nav.base\"\n />\n @for (tick of nav.ticks; track $index) {\n <svg:text\n class=\"m-section-chart__tick\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"nav.base + 15\"\n >\n {{ tick.label }}\n </svg:text>\n }\n <svg:rect\n class=\"m-section-chart__nav-dim\"\n [attr.x]=\"left()\"\n [attr.y]=\"navTop\"\n [attr.width]=\"nav.start - left()\"\n [attr.height]=\"nav.base - navTop\"\n />\n <svg:rect\n class=\"m-section-chart__nav-dim\"\n [attr.x]=\"nav.end\"\n [attr.y]=\"navTop\"\n [attr.width]=\"right() - nav.end\"\n [attr.height]=\"nav.base - navTop\"\n />\n <svg:rect\n class=\"m-section-chart__nav-window\"\n [attr.x]=\"nav.start\"\n [attr.y]=\"navTop\"\n [attr.width]=\"nav.end - nav.start\"\n [attr.height]=\"nav.base - navTop\"\n />\n <svg:rect\n class=\"m-section-chart__nav-handle\"\n rx=\"2\"\n width=\"6\"\n height=\"20\"\n [attr.x]=\"nav.start - 3\"\n [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n />\n <svg:rect\n class=\"m-section-chart__nav-handle\"\n rx=\"2\"\n width=\"6\"\n height=\"20\"\n [attr.x]=\"nav.end - 3\"\n [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n />\n </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n <thead>\n <tr>\n <th scope=\"col\">{{ 'date' | translate }}</th>\n @for (column of table().columns; track $index) {\n <th scope=\"col\">\n {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of table().rows; track $index) {\n <tr>\n <td>{{ row.date }}</td>\n @for (cell of row.cells; track $index) {\n <td>{{ cell }}</td>\n }\n </tr>\n }\n </tbody>\n</table>\n",
|
|
18892
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__top{flex-direction:column;gap:.15rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"],
|
|
18860
18893
|
dependencies: [
|
|
18861
18894
|
{
|
|
18862
18895
|
kind: "component",
|
|
@@ -18902,7 +18935,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18902
18935
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
18903
18936
|
host: {
|
|
18904
18937
|
class: "m-section-chart",
|
|
18905
|
-
"[class.is-design-mode]": "isDesignMode"
|
|
18938
|
+
"[class.is-design-mode]": "isDesignMode",
|
|
18939
|
+
"[class.m-section-chart--minimal]": "minimal()"
|
|
18906
18940
|
},
|
|
18907
18941
|
providers: [{
|
|
18908
18942
|
provide: SECTION_CHART_CONTEXT,
|
|
@@ -18915,8 +18949,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18915
18949
|
};
|
|
18916
18950
|
}
|
|
18917
18951
|
}],
|
|
18918
|
-
template: "<div class=\"m-section-chart__top\">\n <!-- Each series draws its own legend row: the row is the series' element,\n which is what the editor's Canvas selects it by. -->\n <div class=\"m-section-chart__legend\" role=\"list\">\n <ng-content />\n </div>\n @if (
|
|
18919
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"]
|
|
18952
|
+
template: "<div class=\"m-section-chart__top\">\n <!-- Each series draws its own legend row: the row is the series' element,\n which is what the editor's Canvas selects it by. -->\n <div class=\"m-section-chart__legend\" role=\"list\">\n <ng-content />\n </div>\n @if (periodLabel(); as label) {\n <span class=\"m-section-chart__window\">{{ label }}</span>\n }\n</div>\n\n<div class=\"m-section-chart__plot\">\n <svg\n class=\"m-section-chart__svg\"\n role=\"img\"\n tabindex=\"0\"\n [class.is-measurable]=\"canMeasure()\"\n [attr.width]=\"width()\"\n [attr.height]=\"resolvedHeight()\"\n [attr.viewBox]=\"viewBox()\"\n [attr.aria-label]=\"windowLabel()\"\n [attr.aria-describedby]=\"tableId\"\n (pointerdown)=\"onPlotDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPlotUp()\"\n (pointercancel)=\"onPlotUp()\"\n (pointerleave)=\"clearHover()\"\n (blur)=\"clearHover()\"\n (keydown)=\"onKeydown($event)\"\n >\n @for (tick of yTicks(); track $index) {\n <svg:line\n class=\"m-section-chart__grid\"\n [class.m-section-chart__grid--zero]=\"tick.zero\"\n [attr.x1]=\"left()\"\n [attr.x2]=\"right()\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n />\n <svg:text\n class=\"m-section-chart__tick\"\n text-anchor=\"end\"\n [attr.x]=\"left() - 8\"\n [attr.y]=\"tick.y + 4\"\n >\n {{ tick.label }}\n </svg:text>\n }\n @if (!minimal()) {\n <svg:line\n class=\"m-section-chart__axis\"\n [attr.x1]=\"left()\"\n [attr.x2]=\"right()\"\n [attr.y1]=\"bottom()\"\n [attr.y2]=\"bottom()\"\n />\n }\n @for (tick of xTicks(); track $index) {\n <svg:text\n class=\"m-section-chart__tick\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"bottom() + 18\"\n >\n {{ tick.label }}\n </svg:text>\n }\n @if (measureView(); as band) {\n <svg:rect\n class=\"m-section-chart__band\"\n [attr.x]=\"band.start\"\n [attr.y]=\"top()\"\n [attr.width]=\"band.width\"\n [attr.height]=\"bottom() - top()\"\n />\n <svg:line\n class=\"m-section-chart__band-edge\"\n [attr.x1]=\"band.start\"\n [attr.x2]=\"band.start\"\n [attr.y1]=\"top()\"\n [attr.y2]=\"bottom()\"\n />\n <svg:line\n class=\"m-section-chart__band-edge\"\n [attr.x1]=\"band.start + band.width\"\n [attr.x2]=\"band.start + band.width\"\n [attr.y1]=\"top()\"\n [attr.y2]=\"bottom()\"\n />\n }\n @for (path of paths(); track $index) {\n <svg:path\n class=\"m-section-chart__line\"\n [attr.d]=\"path.d\"\n [style.stroke]=\"path.color\"\n />\n }\n @if (!minimal()) {\n @for (path of paths(); track $index) {\n <svg:circle\n class=\"m-section-chart__dot\"\n r=\"4\"\n [attr.cx]=\"path.endX\"\n [attr.cy]=\"path.endY\"\n [style.fill]=\"path.color\"\n />\n }\n }\n @if (hover(); as h) {\n <svg:line\n class=\"m-section-chart__cross\"\n [attr.x1]=\"h.x\"\n [attr.x2]=\"h.x\"\n [attr.y1]=\"top()\"\n [attr.y2]=\"bottom()\"\n />\n @for (row of h.rows; track $index) {\n <svg:circle\n class=\"m-section-chart__dot\"\n r=\"4\"\n [attr.cx]=\"row.cx\"\n [attr.cy]=\"row.cy\"\n [style.fill]=\"row.color\"\n />\n }\n }\n </svg>\n\n @if (hover(); as h) {\n <div\n class=\"m-section-chart__tip\"\n role=\"status\"\n [class.m-section-chart__tip--flip]=\"h.flip\"\n [style.left.px]=\"h.x\"\n >\n <span class=\"m-section-chart__tip-title\">{{ h.title }}</span>\n @for (row of h.rows; track $index) {\n <span class=\"m-section-chart__tip-row\">\n <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n <span class=\"m-section-chart__tip-label\">{{\n row.noTranslate ? row.label : (row.label | translate: row.params)\n }}</span>\n <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n </span>\n }\n </div>\n }\n\n @if (measureView()?.card; as card) {\n <div\n class=\"m-section-chart__measure\"\n role=\"status\"\n [class.m-section-chart__measure--flip]=\"card.flip\"\n [style.left.px]=\"card.x\"\n >\n <span class=\"m-section-chart__tip-title\">{{ card.title }}</span>\n @for (row of card.rows; track $index) {\n <span class=\"m-section-chart__tip-row\">\n <span class=\"m-section-chart__tip-key\" [style.background]=\"row.color\"></span>\n <span class=\"m-section-chart__tip-value\">{{ row.value }}</span>\n <span class=\"m-section-chart__tip-label\">{{\n row.noTranslate ? row.label : (row.label | translate: row.params)\n }}</span>\n <span class=\"m-section-chart__tip-sub\">{{ row.sub }}</span>\n </span>\n }\n </div>\n }\n</div>\n\n@if (presets().length > 1 && !minimal()) {\n <div class=\"m-section-chart__presets\">\n <m-section-toggle\n [items]=\"presets()\"\n [selectedIndex]=\"presetIndex()\"\n [border]=\"false\"\n (action)=\"selectPreset($event)\"\n >\n <ng-template [mSectionToggleItem]=\"presets()\" let-preset>\n <span class=\"m-section-chart__preset\">{{ preset.label }}</span>\n </ng-template>\n </m-section-toggle>\n </div>\n}\n\n@if (navigatorView(); as nav) {\n <svg\n class=\"m-section-chart__navigator\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-label]=\"'zoom' | translate\"\n [attr.aria-valuenow]=\"nav.position\"\n [attr.aria-valuetext]=\"windowLabel()\"\n [attr.width]=\"width()\"\n [attr.height]=\"navHeight\"\n [attr.viewBox]=\"navViewBox()\"\n (pointerdown)=\"onNavigatorDown($event)\"\n (pointermove)=\"onNavigatorMove($event)\"\n (pointerup)=\"onNavigatorUp()\"\n (pointercancel)=\"onNavigatorUp()\"\n (keydown)=\"onNavigatorKeydown($event)\"\n >\n <svg:path class=\"m-section-chart__nav-area\" [attr.d]=\"nav.area\" />\n <svg:path class=\"m-section-chart__nav-line\" [attr.d]=\"nav.d\" />\n <svg:line\n class=\"m-section-chart__axis\"\n [attr.x1]=\"left()\"\n [attr.x2]=\"right()\"\n [attr.y1]=\"nav.base\"\n [attr.y2]=\"nav.base\"\n />\n @for (tick of nav.ticks; track $index) {\n <svg:text\n class=\"m-section-chart__tick\"\n text-anchor=\"middle\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"nav.base + 15\"\n >\n {{ tick.label }}\n </svg:text>\n }\n <svg:rect\n class=\"m-section-chart__nav-dim\"\n [attr.x]=\"left()\"\n [attr.y]=\"navTop\"\n [attr.width]=\"nav.start - left()\"\n [attr.height]=\"nav.base - navTop\"\n />\n <svg:rect\n class=\"m-section-chart__nav-dim\"\n [attr.x]=\"nav.end\"\n [attr.y]=\"navTop\"\n [attr.width]=\"right() - nav.end\"\n [attr.height]=\"nav.base - navTop\"\n />\n <svg:rect\n class=\"m-section-chart__nav-window\"\n [attr.x]=\"nav.start\"\n [attr.y]=\"navTop\"\n [attr.width]=\"nav.end - nav.start\"\n [attr.height]=\"nav.base - navTop\"\n />\n <svg:rect\n class=\"m-section-chart__nav-handle\"\n rx=\"2\"\n width=\"6\"\n height=\"20\"\n [attr.x]=\"nav.start - 3\"\n [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n />\n <svg:rect\n class=\"m-section-chart__nav-handle\"\n rx=\"2\"\n width=\"6\"\n height=\"20\"\n [attr.x]=\"nav.end - 3\"\n [attr.y]=\"(nav.base + navTop) / 2 - 10\"\n />\n </svg>\n}\n\n<table class=\"m-section-chart__table\" [id]=\"tableId\">\n <thead>\n <tr>\n <th scope=\"col\">{{ 'date' | translate }}</th>\n @for (column of table().columns; track $index) {\n <th scope=\"col\">\n {{ column.noTranslate ? column.label : (column.label | translate: column.params) }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of table().rows; track $index) {\n <tr>\n <td>{{ row.date }}</td>\n @for (cell of row.cells; track $index) {\n <td>{{ cell }}</td>\n }\n </tr>\n }\n </tbody>\n</table>\n",
|
|
18953
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;position:relative;width:100%;min-width:0}.m-section-chart__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 1rem;margin-bottom:.5rem}.m-section-chart__legend{display:grid;gap:.15rem;min-width:0}.m-section-chart__tip-key{display:inline-block;width:.75rem;height:2px;border-radius:1px}.m-section-chart__window{color:var(--m-text-tertiary);font-size:.8rem}:host(.m-section-chart--minimal) .m-section-chart__top{flex-direction:column;gap:.15rem}:host(.m-section-chart--minimal) .m-section-chart__svg{cursor:default}.m-section-chart__plot{position:relative}.m-section-chart__svg{display:block;overflow:visible}.m-section-chart__svg:focus{outline:none}.m-section-chart__svg:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__svg.is-measurable{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.m-section-chart__band{fill:var(--m-text);opacity:.06}.m-section-chart__band-edge{stroke:var(--m-text-secondary);stroke-width:1}.m-section-chart__grid{stroke:var(--m-text-septenary);stroke-width:1}.m-section-chart__grid--zero{stroke:var(--m-text-quinary);stroke-width:1.5}.m-section-chart__axis{stroke:var(--m-text-quinary);stroke-width:1}.m-section-chart__tick{fill:var(--m-text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}.m-section-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.m-section-chart__dot{stroke:var(--m-background);stroke-width:2}.m-section-chart__cross{stroke:var(--m-text-secondary);stroke-width:1;opacity:.55}.m-section-chart__tip,.m-section-chart__measure{position:absolute;z-index:2;display:grid;gap:.25rem;min-width:10rem;padding:.5rem .625rem;border:1px solid var(--m-backdrop-border);border-radius:.5rem;background:var(--m-background);box-shadow:0 6px 20px var(--m-backdrop-shadow);font-size:.75rem;pointer-events:none}.m-section-chart__tip{top:0;margin-left:.875rem}.m-section-chart__tip--flip{transform:translate(calc(-100% - 1.75rem))}.m-section-chart__measure{bottom:2.25rem}.m-section-chart__measure--flip{transform:translate(-100%)}.m-section-chart__tip-title{color:var(--m-text-secondary);font-weight:600}.m-section-chart__tip-row{display:grid;grid-template-columns:.75rem auto 1fr auto;align-items:center;gap:.5rem}.m-section-chart__tip-value{color:var(--m-text);font-weight:650;font-variant-numeric:tabular-nums}.m-section-chart__tip-label{color:var(--m-text-secondary);white-space:nowrap}.m-section-chart__tip-sub{color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.m-section-chart__presets{--section-px: 0;margin-top:.5rem}.m-section-chart__preset{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}.m-section-chart__navigator{display:block;margin-top:.25rem;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.m-section-chart__navigator:focus{outline:none}.m-section-chart__navigator:focus-visible{outline:2px solid var(--m-focus);outline-offset:4px;border-radius:4px}.m-section-chart__nav-area{fill:var(--m-text-tertiary);opacity:.12}.m-section-chart__nav-line{fill:none;stroke:var(--m-text-tertiary);stroke-width:1.25}.m-section-chart__nav-dim{fill:var(--m-background);opacity:.6}.m-section-chart__nav-window{fill:transparent;stroke:var(--m-text-secondary);stroke-width:1;cursor:grab}.m-section-chart__nav-handle{fill:var(--m-text-secondary);cursor:ew-resize}.m-section-chart__table{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"]
|
|
18920
18954
|
}]
|
|
18921
18955
|
}],
|
|
18922
18956
|
ctorParameters: () => [],
|
|
@@ -18929,6 +18963,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18929
18963
|
required: false
|
|
18930
18964
|
}]
|
|
18931
18965
|
}],
|
|
18966
|
+
variant: [{
|
|
18967
|
+
type: i0.Input,
|
|
18968
|
+
args: [{
|
|
18969
|
+
isSignal: true,
|
|
18970
|
+
alias: "variant",
|
|
18971
|
+
required: false
|
|
18972
|
+
}]
|
|
18973
|
+
}],
|
|
18974
|
+
displayPeriod: [{
|
|
18975
|
+
type: i0.Input,
|
|
18976
|
+
args: [{
|
|
18977
|
+
isSignal: true,
|
|
18978
|
+
alias: "displayPeriod",
|
|
18979
|
+
required: false
|
|
18980
|
+
}]
|
|
18981
|
+
}],
|
|
18932
18982
|
height: [{
|
|
18933
18983
|
type: i0.Input,
|
|
18934
18984
|
args: [{
|