@magmonium/one 0.4.60 → 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.
|
@@ -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 = [];
|
|
@@ -18226,7 +18254,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18226
18254
|
window = model(void 0, ...ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []);
|
|
18227
18255
|
members = signal([], ...ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []);
|
|
18228
18256
|
locale = inject(LOCALE_ID);
|
|
18229
|
-
|
|
18257
|
+
uid = nextId++;
|
|
18258
|
+
tableId = `m-section-chart-table-${this.uid}`;
|
|
18230
18259
|
width = signal(FALLBACK_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
|
|
18231
18260
|
dateFormat = new Intl.DateTimeFormat(this.locale, {
|
|
18232
18261
|
day: "numeric",
|
|
@@ -18387,12 +18416,21 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18387
18416
|
paths = computed(() => {
|
|
18388
18417
|
const sx = this.sx();
|
|
18389
18418
|
const sy = this.sy();
|
|
18390
|
-
|
|
18391
|
-
|
|
18392
|
-
|
|
18393
|
-
|
|
18394
|
-
|
|
18395
|
-
|
|
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
|
+
});
|
|
18396
18434
|
}, ...ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []);
|
|
18397
18435
|
yTicks = computed(() => {
|
|
18398
18436
|
const extent = this.extent();
|
|
@@ -18888,8 +18926,8 @@ var SectionChartComponent = class SectionChartComponent extends ConfigComponent
|
|
|
18888
18926
|
}],
|
|
18889
18927
|
usesInheritance: true,
|
|
18890
18928
|
ngImport: i0,
|
|
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-
|
|
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"],
|
|
18893
18931
|
dependencies: [
|
|
18894
18932
|
{
|
|
18895
18933
|
kind: "component",
|
|
@@ -18949,8 +18987,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
18949
18987
|
};
|
|
18950
18988
|
}
|
|
18951
18989
|
}],
|
|
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-
|
|
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"]
|
|
18954
18992
|
}]
|
|
18955
18993
|
}],
|
|
18956
18994
|
ctorParameters: () => [],
|