@magmonium/one 0.4.59 → 0.4.61
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/magmonium-one.mjs +119 -31
- package/fesm2022/magmonium-one.mjs.map +1 -1
- package/package.json +1 -1
- package/types/magmonium-one.d.ts +53 -7
|
@@ -18164,6 +18164,34 @@ const linePath = (t, y, sx, sy) => {
|
|
|
18164
18164
|
for (let i = 0; i < t.length; i++) d += `${i ? "L" : "M"}${sx(t[i]).toFixed(1)} ${sy(y[i]).toFixed(1)}`;
|
|
18165
18165
|
return d;
|
|
18166
18166
|
};
|
|
18167
|
+
const smoothPath = (t, y, sx, sy) => {
|
|
18168
|
+
const n = t.length;
|
|
18169
|
+
if (n < 3) return linePath(t, y, sx, sy);
|
|
18170
|
+
const xs = t.map(sx);
|
|
18171
|
+
const ys = y.map(sy);
|
|
18172
|
+
const h = xs.slice(1).map((x, i) => x - xs[i]);
|
|
18173
|
+
const d = h.map((w, i) => w ? (ys[i + 1] - ys[i]) / w : 0);
|
|
18174
|
+
const m = new Array(n);
|
|
18175
|
+
for (let i = 1; i < n - 1; i++) {
|
|
18176
|
+
const [h0, h1, d0, d1] = [
|
|
18177
|
+
h[i - 1],
|
|
18178
|
+
h[i],
|
|
18179
|
+
d[i - 1],
|
|
18180
|
+
d[i]
|
|
18181
|
+
];
|
|
18182
|
+
const p = h0 + h1 ? (d0 * h1 + d1 * h0) / (h0 + h1) : 0;
|
|
18183
|
+
m[i] = (Math.sign(d0) + Math.sign(d1)) * Math.min(Math.abs(d0), Math.abs(d1), .5 * Math.abs(p)) || 0;
|
|
18184
|
+
}
|
|
18185
|
+
m[0] = h[0] ? (3 * d[0] - m[1]) / 2 : m[1];
|
|
18186
|
+
m[n - 1] = h[n - 2] ? (3 * d[n - 2] - m[n - 2]) / 2 : m[n - 2];
|
|
18187
|
+
const f = (v) => v.toFixed(1);
|
|
18188
|
+
let path = `M${f(xs[0])} ${f(ys[0])}`;
|
|
18189
|
+
for (let i = 0; i < n - 1; i++) {
|
|
18190
|
+
const third = h[i] / 3;
|
|
18191
|
+
path += `C${f(xs[i] + third)} ${f(ys[i] + m[i] * third)} ${f(xs[i + 1] - third)} ${f(ys[i + 1] - m[i + 1] * third)} ${f(xs[i + 1])} ${f(ys[i + 1])}`;
|
|
18192
|
+
}
|
|
18193
|
+
return path;
|
|
18194
|
+
};
|
|
18167
18195
|
const sampleChartPoints = (index, end = Date.UTC(2026, 0, 2)) => {
|
|
18168
18196
|
const weeks = 52;
|
|
18169
18197
|
const t = [];
|
|
@@ -18185,8 +18213,15 @@ const MARGIN = {
|
|
|
18185
18213
|
bottom: 28,
|
|
18186
18214
|
left: 52
|
|
18187
18215
|
};
|
|
18216
|
+
const MINIMAL_MARGIN = {
|
|
18217
|
+
top: 4,
|
|
18218
|
+
right: 4,
|
|
18219
|
+
bottom: 4,
|
|
18220
|
+
left: 4
|
|
18221
|
+
};
|
|
18188
18222
|
const FALLBACK_WIDTH = 640;
|
|
18189
18223
|
const DEFAULT_HEIGHT = 320;
|
|
18224
|
+
const DEFAULT_MINIMAL_HEIGHT = 120;
|
|
18190
18225
|
const DEFAULT_RANGE = "max";
|
|
18191
18226
|
const OVERFLOW_COLOR = "var(--m-text-tertiary)";
|
|
18192
18227
|
const TOOLTIP_ROOM = 220;
|
|
@@ -18201,6 +18236,8 @@ let nextId = 0;
|
|
|
18201
18236
|
var SectionChartComponent = class SectionChartComponent extends ConfigComponent {
|
|
18202
18237
|
subFolder = LAYOUT_ASSET_FOLDER.section_chart;
|
|
18203
18238
|
scale = input(void 0, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
|
|
18239
|
+
variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
18240
|
+
displayPeriod = input(void 0, ...ngDevMode ? [{ debugName: "displayPeriod" }] : /* istanbul ignore next */ []);
|
|
18204
18241
|
height = input(void 0, {
|
|
18205
18242
|
...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
|
|
18206
18243
|
transform: optionalNumber
|
|
@@ -18217,9 +18254,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18217
18254
|
window = model(void 0, ...ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []);
|
|
18218
18255
|
members = signal([], ...ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []);
|
|
18219
18256
|
locale = inject(LOCALE_ID);
|
|
18220
|
-
|
|
18221
|
-
|
|
18222
|
-
top = MARGIN.top;
|
|
18257
|
+
uid = nextId++;
|
|
18258
|
+
tableId = `m-section-chart-table-${this.uid}`;
|
|
18223
18259
|
width = signal(FALLBACK_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
|
|
18224
18260
|
dateFormat = new Intl.DateTimeFormat(this.locale, {
|
|
18225
18261
|
day: "numeric",
|
|
@@ -18245,11 +18281,13 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18245
18281
|
notation: "compact",
|
|
18246
18282
|
maximumFractionDigits: 1
|
|
18247
18283
|
});
|
|
18248
|
-
resolvedHeight = computed(() => this.height() ?? this.config()?.height ?? DEFAULT_HEIGHT, ...ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []);
|
|
18284
|
+
resolvedHeight = computed(() => this.height() ?? this.config()?.height ?? (this.minimal() ? DEFAULT_MINIMAL_HEIGHT : DEFAULT_HEIGHT), ...ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []);
|
|
18249
18285
|
resolvedScale = computed(() => this.scale() ?? this.config()?.scale ?? "auto", ...ngDevMode ? [{ debugName: "resolvedScale" }] : /* istanbul ignore next */ []);
|
|
18250
18286
|
resolvedRange = computed(() => this.range() ?? this.config()?.range ?? DEFAULT_RANGE, ...ngDevMode ? [{ debugName: "resolvedRange" }] : /* istanbul ignore next */ []);
|
|
18251
|
-
|
|
18252
|
-
|
|
18287
|
+
minimal = computed(() => (this.variant() ?? this.config()?.variant) === "minimal", ...ngDevMode ? [{ debugName: "minimal" }] : /* istanbul ignore next */ []);
|
|
18288
|
+
margin = computed(() => this.minimal() ? MINIMAL_MARGIN : MARGIN, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
|
|
18289
|
+
showNavigator = computed(() => !this.minimal() && (this.navigator() ?? this.config()?.navigator ?? false), ...ngDevMode ? [{ debugName: "showNavigator" }] : /* istanbul ignore next */ []);
|
|
18290
|
+
canMeasure = computed(() => !this.minimal() && (this.measure() ?? this.config()?.measure ?? false), ...ngDevMode ? [{ debugName: "canMeasure" }] : /* istanbul ignore next */ []);
|
|
18253
18291
|
presets = computed(() => {
|
|
18254
18292
|
const authored = this.config()?.ranges;
|
|
18255
18293
|
const ids = (authored?.length ? authored : DEFAULT_SECTION_CHART_RANGES).filter(isPresetId).map((id) => id.trim().toLowerCase());
|
|
@@ -18325,10 +18363,12 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18325
18363
|
}));
|
|
18326
18364
|
}, ...ngDevMode ? [{ debugName: "windowed" }] : /* istanbul ignore next */ []);
|
|
18327
18365
|
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
|
-
|
|
18366
|
+
plotWidth = computed(() => Math.max(1, this.width() - this.margin().left - this.margin().right), ...ngDevMode ? [{ debugName: "plotWidth" }] : /* istanbul ignore next */ []);
|
|
18367
|
+
plotHeight = computed(() => Math.max(1, this.resolvedHeight() - this.margin().top - this.margin().bottom), ...ngDevMode ? [{ debugName: "plotHeight" }] : /* istanbul ignore next */ []);
|
|
18368
|
+
left = computed(() => this.margin().left, ...ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []);
|
|
18369
|
+
top = computed(() => this.margin().top, ...ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []);
|
|
18370
|
+
right = computed(() => this.left() + this.plotWidth(), ...ngDevMode ? [{ debugName: "right" }] : /* istanbul ignore next */ []);
|
|
18371
|
+
bottom = computed(() => this.top() + this.plotHeight(), ...ngDevMode ? [{ debugName: "bottom" }] : /* istanbul ignore next */ []);
|
|
18332
18372
|
viewBox = computed(() => `0 0 ${this.width()} ${this.resolvedHeight()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
|
|
18333
18373
|
plotted = computed(() => {
|
|
18334
18374
|
const pct = this.percent();
|
|
@@ -18364,26 +18404,37 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18364
18404
|
sx = computed(() => {
|
|
18365
18405
|
const extent = this.extent();
|
|
18366
18406
|
const width = this.plotWidth();
|
|
18367
|
-
|
|
18407
|
+
const left = this.left();
|
|
18408
|
+
return (t) => extent ? left + (t - extent.t0) / (extent.t1 - extent.t0) * width : left;
|
|
18368
18409
|
}, ...ngDevMode ? [{ debugName: "sx" }] : /* istanbul ignore next */ []);
|
|
18369
18410
|
sy = computed(() => {
|
|
18370
18411
|
const extent = this.extent();
|
|
18371
18412
|
const height = this.plotHeight();
|
|
18372
|
-
|
|
18413
|
+
const top = this.top();
|
|
18414
|
+
return (v) => extent ? top + (1 - (v - extent.min) / (extent.max - extent.min)) * height : top + height;
|
|
18373
18415
|
}, ...ngDevMode ? [{ debugName: "sy" }] : /* istanbul ignore next */ []);
|
|
18374
18416
|
paths = computed(() => {
|
|
18375
18417
|
const sx = this.sx();
|
|
18376
18418
|
const sy = this.sy();
|
|
18377
|
-
|
|
18378
|
-
|
|
18379
|
-
|
|
18380
|
-
|
|
18381
|
-
|
|
18382
|
-
|
|
18419
|
+
const minimal = this.minimal();
|
|
18420
|
+
const bottom = this.bottom().toFixed(1);
|
|
18421
|
+
return this.plotted().map(({ line, shown, ds }, i) => {
|
|
18422
|
+
const d = (minimal ? smoothPath : linePath)(ds.t, ds.y, sx, sy);
|
|
18423
|
+
const fillId = `m-section-chart-fill-${this.uid}-${i}`;
|
|
18424
|
+
return {
|
|
18425
|
+
d,
|
|
18426
|
+
color: line.color,
|
|
18427
|
+
endX: sx(line.t[line.t.length - 1]),
|
|
18428
|
+
endY: sy(shown[shown.length - 1]),
|
|
18429
|
+
area: minimal ? `${d}L${sx(ds.t[ds.t.length - 1]).toFixed(1)} ${bottom}L${sx(ds.t[0]).toFixed(1)} ${bottom}Z` : null,
|
|
18430
|
+
fillId,
|
|
18431
|
+
fill: `url(#${fillId})`
|
|
18432
|
+
};
|
|
18433
|
+
});
|
|
18383
18434
|
}, ...ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []);
|
|
18384
18435
|
yTicks = computed(() => {
|
|
18385
18436
|
const extent = this.extent();
|
|
18386
|
-
if (!extent) return [];
|
|
18437
|
+
if (!extent || this.minimal()) return [];
|
|
18387
18438
|
const sy = this.sy();
|
|
18388
18439
|
const pct = this.percent();
|
|
18389
18440
|
return extent.ticks.map((v) => ({
|
|
@@ -18394,7 +18445,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18394
18445
|
}, ...ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []);
|
|
18395
18446
|
xTicks = computed(() => {
|
|
18396
18447
|
const extent = this.extent();
|
|
18397
|
-
if (!extent) return [];
|
|
18448
|
+
if (!extent || this.minimal()) return [];
|
|
18398
18449
|
const sx = this.sx();
|
|
18399
18450
|
return timeTicks(extent.t0, extent.t1, this.plotWidth() / 80).map((tick) => ({
|
|
18400
18451
|
x: sx(tick.t),
|
|
@@ -18405,6 +18456,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18405
18456
|
const span = this.drawnSpan();
|
|
18406
18457
|
return span ? `${this.dateFormat.format(span[0])} – ${this.dateFormat.format(span[1])}` : "";
|
|
18407
18458
|
}, ...ngDevMode ? [{ debugName: "windowLabel" }] : /* istanbul ignore next */ []);
|
|
18459
|
+
periodLabel = computed(() => this.displayPeriod() || this.config()?.displayPeriod || this.windowLabel(), ...ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []);
|
|
18408
18460
|
legendRows = computed(() => {
|
|
18409
18461
|
const changes = /* @__PURE__ */ new Map();
|
|
18410
18462
|
for (const line of this.windowed()) if (line.member) changes.set(line.member, chartChange(line.y));
|
|
@@ -18468,7 +18520,7 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18468
18520
|
hover = computed(() => {
|
|
18469
18521
|
const index = this.hoverIndex();
|
|
18470
18522
|
const times = this.times();
|
|
18471
|
-
if (index === null || !times.length) return null;
|
|
18523
|
+
if (index === null || !times.length || this.minimal()) return null;
|
|
18472
18524
|
const t = times[Math.min(index, times.length - 1)];
|
|
18473
18525
|
const sx = this.sx();
|
|
18474
18526
|
const sy = this.sy();
|
|
@@ -18500,11 +18552,12 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18500
18552
|
const data = this.dataSpan();
|
|
18501
18553
|
if (!data) return null;
|
|
18502
18554
|
const width = this.plotWidth();
|
|
18555
|
+
const left = this.left();
|
|
18503
18556
|
const length = data[1] - data[0] || 1;
|
|
18504
18557
|
return {
|
|
18505
18558
|
data,
|
|
18506
|
-
x: (t) =>
|
|
18507
|
-
t: (px) => data[0] + (px -
|
|
18559
|
+
x: (t) => left + (t - data[0]) / length * width,
|
|
18560
|
+
t: (px) => data[0] + (px - left) / width * length,
|
|
18508
18561
|
slop: GRIP_SLOP / width * length,
|
|
18509
18562
|
minWidth: length * MIN_WINDOW_SHARE
|
|
18510
18563
|
};
|
|
@@ -18671,8 +18724,9 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18671
18724
|
if (!extent || !times.length) return null;
|
|
18672
18725
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
18673
18726
|
const px = event.clientX - rect.left;
|
|
18674
|
-
|
|
18675
|
-
|
|
18727
|
+
const left = this.left();
|
|
18728
|
+
if (px < left || px > left + this.plotWidth()) return null;
|
|
18729
|
+
const t = extent.t0 + (px - left) / this.plotWidth() * (extent.t1 - extent.t0);
|
|
18676
18730
|
return times[nearestIndex(times, t)];
|
|
18677
18731
|
};
|
|
18678
18732
|
onPointerMove = (event) => {
|
|
@@ -18798,6 +18852,20 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18798
18852
|
isRequired: false,
|
|
18799
18853
|
transformFunction: null
|
|
18800
18854
|
},
|
|
18855
|
+
variant: {
|
|
18856
|
+
classPropertyName: "variant",
|
|
18857
|
+
publicName: "variant",
|
|
18858
|
+
isSignal: true,
|
|
18859
|
+
isRequired: false,
|
|
18860
|
+
transformFunction: null
|
|
18861
|
+
},
|
|
18862
|
+
displayPeriod: {
|
|
18863
|
+
classPropertyName: "displayPeriod",
|
|
18864
|
+
publicName: "displayPeriod",
|
|
18865
|
+
isSignal: true,
|
|
18866
|
+
isRequired: false,
|
|
18867
|
+
transformFunction: null
|
|
18868
|
+
},
|
|
18801
18869
|
height: {
|
|
18802
18870
|
classPropertyName: "height",
|
|
18803
18871
|
publicName: "height",
|
|
@@ -18839,7 +18907,10 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18839
18907
|
window: "windowChange"
|
|
18840
18908
|
},
|
|
18841
18909
|
host: {
|
|
18842
|
-
properties: {
|
|
18910
|
+
properties: {
|
|
18911
|
+
"class.is-design-mode": "isDesignMode",
|
|
18912
|
+
"class.m-section-chart--minimal": "minimal()"
|
|
18913
|
+
},
|
|
18843
18914
|
classAttribute: "m-section-chart"
|
|
18844
18915
|
},
|
|
18845
18916
|
providers: [{
|
|
@@ -18855,8 +18926,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18855
18926
|
}],
|
|
18856
18927
|
usesInheritance: true,
|
|
18857
18928
|
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"],
|
|
18929
|
+
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 @if (path.area; as area) {\n <svg:defs>\n <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n </svg:linearGradient>\n </svg:defs>\n <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\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",
|
|
18930
|
+
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__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.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
18931
|
dependencies: [
|
|
18861
18932
|
{
|
|
18862
18933
|
kind: "component",
|
|
@@ -18902,7 +18973,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18902
18973
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
18903
18974
|
host: {
|
|
18904
18975
|
class: "m-section-chart",
|
|
18905
|
-
"[class.is-design-mode]": "isDesignMode"
|
|
18976
|
+
"[class.is-design-mode]": "isDesignMode",
|
|
18977
|
+
"[class.m-section-chart--minimal]": "minimal()"
|
|
18906
18978
|
},
|
|
18907
18979
|
providers: [{
|
|
18908
18980
|
provide: SECTION_CHART_CONTEXT,
|
|
@@ -18915,8 +18987,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18915
18987
|
};
|
|
18916
18988
|
}
|
|
18917
18989
|
}],
|
|
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"]
|
|
18990
|
+
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 @if (path.area; as area) {\n <svg:defs>\n <svg:linearGradient [attr.id]=\"path.fillId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <svg:stop offset=\"0\" stop-opacity=\"0.22\" [attr.stop-color]=\"path.color\" />\n <svg:stop offset=\"1\" stop-opacity=\"0\" [attr.stop-color]=\"path.color\" />\n </svg:linearGradient>\n </svg:defs>\n <svg:path class=\"m-section-chart__area\" [attr.d]=\"area\" [attr.fill]=\"path.fill\" />\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",
|
|
18991
|
+
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__svg{cursor:default}:host(.m-section-chart--minimal) .m-section-chart__line{stroke-width:2.25}.m-section-chart__area{stroke:none}.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
18992
|
}]
|
|
18921
18993
|
}],
|
|
18922
18994
|
ctorParameters: () => [],
|
|
@@ -18929,6 +19001,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18929
19001
|
required: false
|
|
18930
19002
|
}]
|
|
18931
19003
|
}],
|
|
19004
|
+
variant: [{
|
|
19005
|
+
type: i0.Input,
|
|
19006
|
+
args: [{
|
|
19007
|
+
isSignal: true,
|
|
19008
|
+
alias: "variant",
|
|
19009
|
+
required: false
|
|
19010
|
+
}]
|
|
19011
|
+
}],
|
|
19012
|
+
displayPeriod: [{
|
|
19013
|
+
type: i0.Input,
|
|
19014
|
+
args: [{
|
|
19015
|
+
isSignal: true,
|
|
19016
|
+
alias: "displayPeriod",
|
|
19017
|
+
required: false
|
|
19018
|
+
}]
|
|
19019
|
+
}],
|
|
18932
19020
|
height: [{
|
|
18933
19021
|
type: i0.Input,
|
|
18934
19022
|
args: [{
|