@firestitch/report 18.8.0 → 18.8.1

package/fesm2022/{firestitch-report-firestitch-report-DbsWbE-j.mjs → firestitch-report-firestitch-report-CSylkyko.mjs}

@@ -32,7 +32,7 @@ import { FsApi, StreamEventType } from '@firestitch/api';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i3 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import { parseISO, isValid, format, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek, addDays, min, max, startOfDay, isLastDayOfMonth, endOfMonth, addMonths, addYears, addQuarters, addWeeks, formatISO } from 'date-fns';
+import { parseISO, isValid, addDays, format, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek, min, max, startOfDay, isLastDayOfMonth, endOfMonth, addMonths, addYears, addQuarters, addWeeks, formatISO } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@firestitch/list';
@@ -1338,6 +1338,34 @@ function formatDayWindow(meta, timezone, locale) {
     const time = formatThroughTime(meta.through, timezone, locale);
     return days && time ? `${days}, until ${time}` : days;
 }
+// Whether a comparison is read on one day: a comparison of values read at
+// the end of each period, with no time axis of its own (a KPI, a one-row
+// list), whose value is read today and whose prior is read at the end of
+// the period before. Its two windows are those periods, back to back, and
+// each value is read on its window's last day, so the windows are written as
+// those days (formatReadingDay). A spine of several periods sets each period
+// against an earlier one, and its windows are spans like any other
+// comparison's.
+function isReadOnOneDay(comparison) {
+    const current = comparison?.current;
+    const prior = comparison?.priors?.[0];
+    if (comparison?.mode !== 'period_end' || !current || !prior) {
+        return false;
+    }
+    const priorEnd = parseDay(prior.end);
+    const currentStart = parseDay(current.start);
+    return !!priorEnd && !!currentStart && addDays(priorEnd, 1).getTime() === currentStart.getTime();
+}
+// The day a value is read on: 'on Sep 15, 2026' ('On …' to open a line), as
+// a chart's tooltip names a prior point read at the end of its period. ''
+// for a day that is not a real one.
+function formatReadingDay(window, locale, lead = false) {
+    const day = formatDay(window.end, locale);
+    if (!day) {
+        return '';
+    }
+    return lead ? `On ${day}` : `on ${day}`;
+}
 // One 'yyyy-MM-dd' day in the locale, written with no zone: 'Sep 1, 2026'.
 function formatDay(day, locale) {
     const date = parseDay(day);
@@ -1695,23 +1723,36 @@ function deltaTone(trend, increaseIs) {
     return rise === (polarity === ReportChangePolarity.Good) ? ReportChangePolarity.Good : ReportChangePolarity.Bad;
 }
 // 'vs $1,139 (Aug 1 – 31, 2026)': the prior value and its window, either
-// alone when the other is missing.
+// alone when the other is missing. A value read on one day is compared with
+// the value on the prior window's last day: 'vs 20 (on Aug 31, 2026)', or
+// 'vs Aug 31, 2026' with no prior value.
 function comparedText(config, data, context) {
     const comparison = data.comparison;
     const prior = comparison.priors?.[0];
-    const days = prior ? formatDayWindow(prior, comparison.timezone, context.format.locale) : '';
     const value = data.kpi.prior === null ? '' : formatNumber(data.kpi.prior, config?.measure, context.format);
+    const days = prior ? priorWindowText$1(comparison, prior, context.format.locale, !!value) : '';
     if (value && days) {
         return `vs ${value} (${days})`;
     }
     return value || days ? `vs ${value || days}` : '';
 }
+// The prior window in the compared text: its days, or the day its value is
+// read on ('on Aug 31, 2026' beside the value, the bare day without one).
+function priorWindowText$1(comparison, prior, locale, withValue) {
+    if (!isReadOnOneDay(comparison)) {
+        return formatDayWindow(prior, comparison.timezone, locale);
+    }
+    return withValue ? formatReadingDay(prior, locale) : formatDayRange(prior.end, prior.end, locale);
+}
 // The days the value covers: the comparison's current window, else the
-// timeframe's. '' when the data has neither.
+// timeframe's. A value read on one day names that day ('On Sep 15, 2026').
+// '' when the data has neither.
 function windowLine(data, context) {
     const comparison = data?.comparison;
     if (comparison?.current) {
-        return formatDayWindow(comparison.current, comparison.timezone, context.format.locale);
+        return isReadOnOneDay(comparison)
+            ? formatReadingDay(comparison.current, context.format.locale, true)
+            : formatDayWindow(comparison.current, comparison.timezone, context.format.locale);
     }
     return data?.timeframe ? formatDayWindow(data.timeframe, context.timezone, context.format.locale) : '';
 }
@@ -3435,6 +3476,9 @@ const REPORT_WATERFALL_COLORS = {
     fall: REPORT_CHART_COLORS[1],
     total: REPORT_CHART_COLORS[9],
 };
+// The slate of a tile's small print in both exports: a KPI's label, its
+// window and target lines, a component's notes.
+const REPORT_MUTED_TEXT_COLOR = '7b8794';
 // A KPI's change is colored by what it means rather than by its sign: green
 // when it is good news, red when it is bad news, slate when it is neither (a
 // flat change, or a value whose increaseIs is neutral). The same three colors
@@ -3445,8 +3489,10 @@ const REPORT_WATERFALL_COLORS = {
 const REPORT_KPI_CHANGE_COLORS = {
     [ReportChangePolarity.Good]: REPORT_CHART_COLORS[4],
     [ReportChangePolarity.Bad]: REPORT_CHART_COLORS[2],
-    [ReportChangePolarity.Neutral]: '7b8794',
+    [ReportChangePolarity.Neutral]: REPORT_MUTED_TEXT_COLOR,
 };
+// The track a KPI target's progress bar fills, in both exports.
+const REPORT_KPI_TRACK_COLOR = 'e4e7eb';
 // A KPI's sparkline takes the first series color, as a one-measure chart of
 // the same values would (--report-kpi-sparkline-color overrides it).
 const REPORT_KPI_SPARKLINE_COLOR = REPORT_CHART_COLORS[0];
@@ -4362,7 +4408,7 @@ function seriesDetail(source, index, dataIndex) {
 }
 // A prior value's days. A range comparison compares every point with the
 // same window. A series comparison compares each period with the period its
-// lane's offset back; an as_of comparison reads the value at the end of that
+// lane's offset back; a period_end comparison reads the value at the end of that
 // period ('on Aug 31, 2026').
 function priorDetail(source, output, dataIndex) {
     const comparison = source.annotations.comparison;
@@ -4382,9 +4428,22 @@ function priorDetail(source, output, dataIndex) {
     if (!window) {
         return '';
     }
-    return comparison.mode === 'as_of'
-        ? `on ${formatDayRange(window.end, window.end, locale)}`
-        : formatDayWindow({ ...window, through: partial ? comparison.current?.through ?? null : null }, comparison.timezone, locale);
+    if (comparison.mode === 'period_end') {
+        return `on ${formatDayRange(window.end, window.end, locale)}`;
+    }
+    return formatDayWindow({ ...withinLaneSpan(window, comparison.priors?.[lane]), through: partial ? comparison.current?.through ?? null : null }, comparison.timezone, locale);
+}
+// A series lane reads the span shown moved back by its offset (the server's
+// comparison.priors[lane]), so the earlier copy of a period the span starts
+// or ends inside holds only the days within it: a span from Mar 15 sets
+// March against Feb 15 – 28, not the whole of February.
+function withinLaneSpan(window, span) {
+    if (!span) {
+        return window;
+    }
+    const start = window.start < span.start ? span.start : window.start;
+    const end = window.end > span.end ? span.end : window.end;
+    return start <= end ? { start, end } : window;
 }
 // The days one period of the axis is compared with: the period moved back by
 // the lane's offset. A period not over yet, compared to date, runs only to
@@ -5403,8 +5462,8 @@ function outputColumnNote(column, data, locale) {
     }
     return [
         comparisonSentence(output, data.comparison, locale),
-        rankSentence(output),
-        shareSentence(output),
+        rankSentence(output, data.outputs),
+        shareSentence(output, data.outputs),
         windowSentences(data.windows?.[alias], locale, data),
     ]
         .filter((sentence) => !!sentence)
@@ -5422,7 +5481,19 @@ function componentWindowsLine(data, context) {
     }
     return data.timeframe ? formatDayWindow(data.timeframe, context.timezone, context.locale) : '';
 }
+// Read on one day, the line names the days the values are read on: 'On Sep
+// 15, 2026 · vs previous month: Aug 31, 2026'.
 function comparisonWindowsLine(comparison, currentWindow, locale) {
+    if (isReadOnOneDay(comparison)) {
+        const priors = (comparison.offsets ?? []).map((offset, index) => {
+            const prior = comparison.priors?.[index];
+            const day = prior ? formatDayRange(prior.end, prior.end, locale) : '';
+            return day ? `${comparisonOffsetLabel(offset)}: ${day}` : comparisonOffsetLabel(offset);
+        });
+        return [formatReadingDay(currentWindow, locale, true), ...priors]
+            .filter((part) => !!part)
+            .join(WINDOWS_SEPARATOR);
+    }
     const current = formatDayWindow(currentWindow, comparison.timezone, locale);
     const priors = (comparison.offsets ?? []).map((offset, index) => {
         return priorWindowText(offset, comparison.priors?.[index], comparison.timezone, locale);
@@ -5459,8 +5530,9 @@ function windowNotes(data, locale) {
         .flatMap((meta) => (meta.notes ?? []).map((code) => windowNoteText(code, meta, locale, data.granularity)));
 }
 // A compared column's windows. In range mode every row compares the same two
-// windows, so they are named; in series and as-of modes each row compares its
-// own period, so only the lane is.
+// windows, so they are named, and read on one day the days the values are
+// read on are; over a series or a spine of periods each row compares its own
+// period, so only the lane is.
 function comparisonSentence(output, comparison, locale) {
     if (!output.role || !comparison) {
         return '';
@@ -5472,6 +5544,9 @@ function comparisonSentence(output, comparison, locale) {
     if (comparison.mode === 'range' && current && (output.role === 'current' || prior)) {
         return rangeSentence(output.role, current, prior, offset);
     }
+    if (isReadOnOneDay(comparison) && comparison.current && priorWindow) {
+        return readingDaySentence(output.role, comparison.current, priorWindow, offset, locale);
+    }
     return output.role === 'current' || !offset ? '' : `${ROLE_LEADS[output.role]} ${comparisonOffsetLabel(offset)}.`;
 }
 function rangeSentence(role, current, prior, offset) {
@@ -5484,9 +5559,25 @@ function rangeSentence(role, current, prior, offset) {
             return `${ROLE_LEADS[role]} from ${prior} to ${current}.`;
     }
 }
+// A column of a comparison read on one day, named by the days its values are
+// read on: 'Prior value on Aug 31, 2026 (vs previous month).'
+function readingDaySentence(role, currentWindow, priorWindow, offset, locale) {
+    const current = formatReadingDay(currentWindow, locale);
+    const prior = formatReadingDay(priorWindow, locale);
+    switch (role) {
+        case 'current':
+            return `Value ${current}.`;
+        case 'prior':
+            return offset ? `Prior value ${prior} (${comparisonOffsetLabel(offset)}).` : `Prior value ${prior}.`;
+        default:
+            return `${ROLE_LEADS[role]} from the value ${prior} to the value ${current}.`;
+    }
+}
 // 'Rank by Revenue, 1 being the largest, within each Region. Tied values share
-// a rank (1, 1, 3).'
-function rankSentence(output) {
+// a rank (1, 1, 3).' A measure written as its own rank ranks by the value it
+// would otherwise show, so it names no other measure ('Rank, 1 being the
+// largest, across all rows.').
+function rankSentence(output, outputs) {
     const rank = output.kind === 'rank' ? output.rank : null;
     if (!rank) {
         return '';
@@ -5494,18 +5585,32 @@ function rankSentence(output) {
     const end = rank.direction === 'asc' ? 'smallest' : 'largest';
     const scope = rank.within?.length ? `within each ${joinNames(rank.within)}` : 'across all rows';
     const ties = rank.method === 'dense' ? '1, 1, 2' : '1, 1, 3';
-    return `Rank by ${output.measure}, 1 being the ${end}, ${scope}. Tied values share a rank (${ties}). `
+    const by = isOwnOutput(output, outputs) ? '' : ` by ${output.measure}`;
+    return `Rank${by}, 1 being the ${end}, ${scope}. Tied values share a rank (${ties}). `
         + FILTERED_ROWS_SENTENCE;
 }
-// 'Share of the total Revenue within each Region.'
-function shareSentence(output) {
+// 'Share of the total Revenue within each Region.' A measure written as its
+// own share names no other measure ('Share of the total within each
+// Region.', 'Share of the total across all rows.').
+function shareSentence(output, outputs) {
     const share = output.kind === 'share' ? output.share : null;
     if (!share) {
         return '';
     }
+    if (isOwnOutput(output, outputs)) {
+        const scope = share.within?.length ? `within each ${joinNames(share.within)}` : 'across all rows';
+        return `Share of the total ${scope}. ${FILTERED_ROWS_SENTENCE}`;
+    }
     const scope = share.within?.length ? ` within each ${joinNames(share.within)}` : '';
     return `Share of the total ${output.measure}${scope}. ${FILTERED_ROWS_SENTENCE}`;
 }
+// Whether a rank or a share is its measure's own output: the server writes a
+// measure with a rank or a share as that rank or share, so its measure is a
+// column of the same kind (itself, or for a prior or a change the current
+// column), never a value of its own to name.
+function isOwnOutput(output, outputs) {
+    return outputs?.[output.measure]?.kind === output.kind;
+}
 // A windowed column: what it is, then why it reads as it does.
 function windowSentences(meta, locale, data) {
     if (!meta) {
@@ -8105,6 +8210,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <!-- One skeleton over the whole body until the locale list is in. -->\n      <ng-container *fsSkeletonForm=\"ready() || null\">\n        <mat-tab-group [(selected)]=\"selectedTab\">\n          <mat-tab\n              label=\"Settings\"\n              name=\"settings\">\n            <div class=\"fs-column tab-body\">\n              <mat-form-field>\n                <mat-label>\n                  Name\n                </mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"name\"\n                  name=\"name\"\n                  [fsFormRequired]=\"true\">\n              </mat-form-field>\n              <!--\n                The page, typed in inches. Orientation is not asked for because it\n                is not an independent choice - a page wider than it is tall IS\n                landscape - so the two numbers say everything there is to say.\n              -->\n              <div class=\"fs-row.gap-sm.align-start\">\n                <mat-form-field class=\"fs-flex\">\n                  <mat-label>\n                    Width\n                  </mat-label>\n                  <input\n                      matInput\n                      fsMaskNumber\n                      [scale]=\"1\"\n                      [(ngModel)]=\"pageWidth\"\n                      name=\"pageWidth\"\n                      [fsFormRequired]=\"true\"\n                      [fsFormMin]=\"pageDimensionMin\"\n                      [fsFormMax]=\"pageDimensionMax\">\n                  <div matTextSuffix>\n                    inches\n                  </div>\n                </mat-form-field>\n                <mat-form-field class=\"fs-flex\">\n                  <mat-label>\n                    Height\n                  </mat-label>\n                  <input\n                      matInput\n                      fsMaskNumber\n                      [scale]=\"1\"\n                      [(ngModel)]=\"pageHeight\"\n                      name=\"pageHeight\"\n                      [fsFormRequired]=\"true\"\n                      [fsFormMin]=\"pageDimensionMin\"\n                      [fsFormMax]=\"pageDimensionMax\">\n                  <div matTextSuffix>\n                    inches\n                  </div>\n                </mat-form-field>\n              </div>\n              <!--\n                How deep the header and footer bands are. Their content is edited\n                on the canvas (Edit layout \u2192 Header & footer); these reserve the\n                space for it, and 0 means no band.\n              -->\n              <mat-form-field class=\"full-width\">\n                <mat-label>\n                  Header height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"2\"\n                    [(ngModel)]=\"headerHeight\"\n                    name=\"headerHeight\"\n                    [fsFormMin]=\"0\"\n                    [fsFormMax]=\"headerFooterMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>\n                  Footer height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"2\"\n                    [(ngModel)]=\"footerHeight\"\n                    name=\"footerHeight\"\n                    [fsFormMin]=\"0\"\n                    [fsFormMax]=\"headerFooterMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n              <!--\n                How numbers and dates are written (formatting only: no text is\n                translated) and which currency money is labeled in. Hidden on a\n                server too old to resolve a report's locale.\n              -->\n              @if (locales()) {\n                <mat-form-field class=\"full-width\">\n                  <mat-label>\n                    Locale\n                  </mat-label>\n                  <mat-select\n                      [ngModel]=\"locale()\"\n                      (ngModelChange)=\"locale.set($event)\"\n                      name=\"locale\">\n                    @for (option of localeOptions(); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>\n                    {{ formatExample() }}\n                  </mat-hint>\n                </mat-form-field>\n                <mat-form-field class=\"full-width\">\n                  <mat-label>\n                    Currency\n                  </mat-label>\n                  <mat-select\n                      [ngModel]=\"currency()\"\n                      (ngModelChange)=\"currency.set($event)\"\n                      name=\"currency\">\n                    @for (option of currencyOptions(); track option.value) {\n                      <mat-option [value]=\"option.value\">\n                        {{ option.label }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>\n                    Names the currency amounts are in; it does not convert them.\n                  </mat-hint>\n                </mat-form-field>\n              }\n            </div>\n          </mat-tab>\n          <mat-tab\n              label=\"Styles\"\n              name=\"styles\">\n            <div class=\"fs-column tab-body\">\n              <mat-form-field>\n                <mat-label>\n                  Heading Size\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"1\"\n                  min=\"6\"\n                  max=\"96\"\n                  [(ngModel)]=\"headingSize\"\n                  name=\"headingSize\"\n                  [fsFormMin]=\"6\"\n                  [fsFormMax]=\"96\">\n                <span matTextSuffix>\n                  pt\n                </span>\n                <mat-hint>\n                  Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          </mat-tab>\n          <mat-tab\n              label=\"Filters\"\n              name=\"filters\">\n            <div class=\"fs-column tab-body\">\n              @if (filterRows().length) {\n                @for (row of filterRows(); track row.group.id) {\n                  @switch (row.group.type) {\n                    @case ('dateRange') {\n                      <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                        <mat-form-field class=\"fs-flex\">\n                          <mat-label>\n                            Default From {{ row.label }}\n                          </mat-label>\n                          <input\n                            matInput\n                            fsDatePicker\n                            [(ngModel)]=\"row.start\"\n                            [name]=\"'start' + row.group.id\">\n                        </mat-form-field>\n                        <mat-form-field class=\"fs-flex\">\n                          <mat-label>\n                            Default To {{ row.label }}\n                          </mat-label>\n                          <input\n                            matInput\n                            fsDatePicker\n                            [(ngModel)]=\"row.end\"\n                            [name]=\"'end' + row.group.id\">\n                        </mat-form-field>\n                      </div>\n                      <!-- A stored rolling preset cannot be authored here, only\n                           kept, replaced by picking dates, or cleared. type=\"button\"\n                           keeps Clear from submitting the form. -->\n                      @if (row.relative && !row.start && !row.end) {\n                        <div class=\"fs-row.gap-sm.align-center\">\n                          <mat-hint class=\"fs-flex\">\n                            Rolling default: {{ relativeLabel(row.relative) }}. Pick dates to replace it.\n                          </mat-hint>\n                          <button\n                              mat-button\n                              type=\"button\"\n                              (click)=\"clearRelative(row)\">\n                            Clear\n                          </button>\n                        </div>\n                      }\n                    }\n                    @case ('select') {\n                      <fs-autocomplete-chips\n                          class=\"fs-flex\"\n                          [label]=\"'Default ' + row.label\"\n                          [fetch]=\"row.fetch\"\n                          [(ngModel)]=\"row.values\"\n                          [name]=\"'values' + row.group.id\"\n                          [multiple]=\"true\"\n                          [fetchOnFocus]=\"true\">\n                        <ng-template\n                            fsAutocompleteChipsTemplate\n                            let-object=\"object\">\n                          {{ object.name }}\n                        </ng-template>\n                      </fs-autocomplete-chips>\n                    }\n                    @default {\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          [(ngModel)]=\"row.value\"\n                          [name]=\"'value' + row.group.id\">\n                      </mat-form-field>\n                    }\n                  }\n                }\n              } @else {\n                <fs-message-info>\n                  This report has no report-level filters yet. Add a filter to a\n                  component (its settings \u2192 Filters) and show it in the report bar,\n                  then set its default here.\n                </fs-message-info>\n              }\n            </div>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-container>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"] }]
         }] });
 
+// How far a KPI card's rows shrink to fit a short tile. A tile shorter still
+// lets the card run past its foot rather than print it unreadably small.
+const KPI_EXPORT_MIN_SCALE = 0.5;
 // How many tile queries an export runs at once.
 //
 // Not a politeness setting — it is the difference between a deck and a broken
@@ -8264,7 +8372,9 @@ function kpiCardHasExtras(view, notes) {
 // sparkline first, then the target line, then the notes; the value, its label
 // and the delta row always stay, and the window line stays whenever the card
 // shows a comparison (its days are what the delta is measured over). The
-// sparkline needs values to draw.
+// sparkline needs values to draw. When what stays is still too tall, every
+// row shrinks by the same scale, down to KPI_EXPORT_MIN_SCALE; by then the
+// sparkline, the target and the notes are gone.
 function kpiExportParts(view, notes, available, heights) {
     const parts = {
         delta: !!view.delta,
@@ -8272,6 +8382,7 @@ function kpiExportParts(view, notes, available, heights) {
         target: !!view.target,
         sparkline: !!view.sparkline?.values.some((value) => value !== null),
         notes: [...notes],
+        scale: 1,
     };
     const height = () => kpiExportHeight(view, parts, heights);
     if (height() > available) {
@@ -8286,8 +8397,24 @@ function kpiExportParts(view, notes, available, heights) {
     if (height() > available && !parts.delta) {
         parts.window = false;
     }
+    if (height() > available) {
+        parts.scale = Math.max(KPI_EXPORT_MIN_SCALE, Math.max(0, available) / height());
+    }
     return parts;
 }
+// The heights scaled by the parts' scale: what the renderer lays the card
+// out with, its text sized by the same scale.
+function scaledKpiHeights(heights, scale) {
+    return {
+        value: heights.value * scale,
+        label: heights.label * scale,
+        delta: heights.delta * scale,
+        window: heights.window * scale,
+        target: heights.target * scale,
+        sparkline: heights.sparkline * scale,
+        note: heights.note * scale,
+    };
+}
 // How tall the card's drawn parts stand together, in the heights' unit.
 function kpiExportHeight(view, parts, heights) {
     return heights.value
@@ -8485,7 +8612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // in the report's format context, as on screen.
 async function renderChartImage(component, data, width, height, context, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-qCBE3LqM.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-CFnbJx44.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -8522,7 +8649,7 @@ const SMALL_SIZE = 7.5;
 const SUBTITLE_H$1 = 11;
 const NOTE_LINE_H$1 = 10;
 const MIN_BODY_H$1 = 40;
-const MUTED_COLOR$1 = '#7b8794';
+const MUTED_COLOR$1 = `#${REPORT_MUTED_TEXT_COLOR}`;
 // A KPI card's parts, top to bottom, points (kpiExportParts sheds the
 // sparkline, then the target, then the notes on a short tile). The value's
 // baseline sits KPI_VALUE_BASELINE under its top.
@@ -8543,7 +8670,7 @@ const KPI_ARROW_GAP$1 = 3;
 // The target's progress bar, and the track it fills.
 const KPI_BAR_W$1 = 120;
 const KPI_BAR_H$1 = 3;
-const KPI_TRACK_COLOR$1 = '#e4e7eb';
+const KPI_TRACK_COLOR$1 = `#${REPORT_KPI_TRACK_COLOR}`;
 // The sparkline's widest box, its top and bottom inset, and its dots' radius.
 const KPI_SPARKLINE_W$1 = 140;
 const KPI_SPARKLINE_INSET = 3;
@@ -8835,12 +8962,12 @@ class ReportPdfService {
     }
     // One line of small grey print, cut to the width with an ellipsis: a
     // subtitle, a note or a line of a KPI card. y is the line's top; the line is
-    // NOTE_LINE_H tall.
-    _smallLine(doc, text, x, y, w, align, style) {
+    // NOTE_LINE_H tall, times the scale a short KPI tile shrinks its lines by.
+    _smallLine(doc, text, x, y, w, align, style, scale = 1) {
         doc.setFont('helvetica', style);
-        doc.setFontSize(SMALL_SIZE);
+        doc.setFontSize(SMALL_SIZE * scale);
         doc.setTextColor(MUTED_COLOR$1);
-        doc.text(this._fit(doc, text, w), align === 'center' ? x + w / 2 : x, y + SMALL_SIZE, { align });
+        doc.text(this._fit(doc, text, w), align === 'center' ? x + w / 2 : x, y + SMALL_SIZE * scale, { align });
     }
     // The text, ellipsized to the width in the doc's current font.
     _fit(doc, text, width) {
@@ -8865,7 +8992,7 @@ class ReportPdfService {
     _boxNote(doc, text, x, y, w, h) {
         doc.setFont('helvetica', 'italic');
         doc.setFontSize(9);
-        doc.setTextColor('#7b8794');
+        doc.setTextColor(MUTED_COLOR$1);
         doc.text(text, x + w / 2, y + h / 2, { align: 'center' });
     }
     // A list's on-page table. All of its fetched rows are laid out once to learn
@@ -8963,7 +9090,7 @@ class ReportPdfService {
                 // takes columnStyles[0], right-aligned when that column is numeric.
                 styles: {
                     fontStyle: 'italic',
-                    textColor: '#7b8794',
+                    textColor: MUTED_COLOR$1,
                     halign: 'left',
                     ...(singleLine ? { overflow: 'ellipsize' } : {}),
                 },
@@ -9075,69 +9202,73 @@ class ReportPdfService {
             if (view.label) {
                 doc.setFont('helvetica', 'normal');
                 doc.setFontSize(9);
-                doc.setTextColor('#7b8794');
+                doc.setTextColor(MUTED_COLOR$1);
                 doc.text(view.label, x + w / 2, y + h / 2 + 16, { align: 'center' });
             }
             return;
         }
+        // A tile too short for the card's lines shrinks them all alike.
         const parts = kpiExportParts(view, notes, h, KPI_HEIGHTS$1);
-        let top = y + Math.max(0, (h - kpiExportHeight(view, parts, KPI_HEIGHTS$1)) / 2);
+        const heights = scaledKpiHeights(KPI_HEIGHTS$1, parts.scale);
+        let top = y + Math.max(0, (h - kpiExportHeight(view, parts, heights)) / 2);
         doc.setFont('helvetica', 'bold');
-        doc.setFontSize(26);
+        doc.setFontSize(26 * parts.scale);
         doc.setTextColor('#1f2933');
-        doc.text(value, x + w / 2, top + KPI_VALUE_BASELINE, { align: 'center' });
-        top += KPI_HEIGHTS$1.value;
+        doc.text(value, x + w / 2, top + KPI_VALUE_BASELINE * parts.scale, { align: 'center' });
+        top += heights.value;
         if (view.label) {
             doc.setFont('helvetica', 'normal');
-            doc.setFontSize(9);
+            doc.setFontSize(9 * parts.scale);
             doc.setTextColor(MUTED_COLOR$1);
-            doc.text(this._fit(doc, this._pdfText(view.label), w), x + w / 2, top + 9, { align: 'center' });
-            top += KPI_HEIGHTS$1.label;
+            doc.text(this._fit(doc, this._pdfText(view.label), w), x + w / 2, top + 9 * parts.scale, { align: 'center' });
+            top += heights.label;
         }
         if (parts.delta && view.delta) {
-            this._kpiDelta(doc, view.delta, x, top, w);
-            top += KPI_HEIGHTS$1.delta;
+            this._kpiDelta(doc, view.delta, x, top, w, parts.scale);
+            top += heights.delta;
         }
         if (parts.window) {
-            this._smallLine(doc, this._pdfText(view.window), x, top, w, 'center', 'normal');
-            top += KPI_HEIGHTS$1.window;
+            this._smallLine(doc, this._pdfText(view.window), x, top, w, 'center', 'normal', parts.scale);
+            top += heights.window;
         }
         if (parts.target && view.target) {
             this._kpiTarget(doc, view.target, x, top, w);
-            top += KPI_HEIGHTS$1.target;
+            top += heights.target;
         }
         if (parts.sparkline && view.sparkline) {
             this._kpiSparkline(doc, view.sparkline.values, view.sparkline.partial, x, top, w);
-            top += KPI_HEIGHTS$1.sparkline;
+            top += heights.sparkline;
         }
         for (const line of parts.notes) {
             this._smallLine(doc, this._pdfText(line), x, top, w, 'center', 'italic');
-            top += KPI_HEIGHTS$1.note;
+            top += heights.note;
         }
     }
     // The delta row, centered as one group: a triangle pointing the way the
     // value moved (none when the shown change rounds to zero) and the change in
     // the color of what it means, then what it is compared with in grey.
-    _kpiDelta(doc, delta, x, top, w) {
+    _kpiDelta(doc, delta, x, top, w, scale = 1) {
         const color = `#${REPORT_KPI_CHANGE_COLORS[delta.tone]}`;
         const change = this._pdfText(delta.text);
-        const arrow = delta.trend === ReportKpiTrend.Flat ? 0 : KPI_ARROW$1 + KPI_ARROW_GAP$1;
+        const size = KPI_DELTA_SIZE * scale;
+        const side = KPI_ARROW$1 * scale;
+        const arrow = delta.trend === ReportKpiTrend.Flat ? 0 : side + KPI_ARROW_GAP$1 * scale;
         doc.setFont('helvetica', 'bold');
-        doc.setFontSize(KPI_DELTA_SIZE);
+        doc.setFontSize(size);
         const changeWidth = doc.getTextWidth(change);
         doc.setFont('helvetica', 'normal');
         const compared = delta.compared
             ? this._fit(doc, ` ${this._pdfText(delta.compared)}`, Math.max(0, w - arrow - changeWidth))
             : '';
         const width = arrow + changeWidth + (compared ? doc.getTextWidth(compared) : 0);
-        const baseline = top + KPI_DELTA_SIZE;
+        const baseline = top + size;
         let left = x + Math.max(0, (w - width) / 2);
         if (arrow) {
             const up = delta.trend === ReportKpiTrend.Up;
-            const tip = up ? baseline - KPI_ARROW$1 : baseline;
-            const base = up ? baseline : baseline - KPI_ARROW$1;
+            const tip = up ? baseline - side : baseline;
+            const base = up ? baseline : baseline - side;
             doc.setFillColor(color);
-            doc.triangle(left, base, left + KPI_ARROW$1, base, left + KPI_ARROW$1 / 2, tip, 'F');
+            doc.triangle(left, base, left + side, base, left + side / 2, tip, 'F');
             left += arrow;
         }
         doc.setFont('helvetica', 'bold');
@@ -9245,7 +9376,7 @@ const SMALL_FONT_SIZE = 8;
 const SUBTITLE_H = 0.18;
 const NOTE_LINE_H = 0.16;
 const MIN_BODY_H = 0.6;
-const MUTED_COLOR = '7B8794';
+const MUTED_COLOR = REPORT_MUTED_TEXT_COLOR;
 // A KPI card's parts, top to bottom, inches (kpiExportParts sheds the
 // sparkline, then the target, then the notes on a short tile).
 const KPI_TARGET_TEXT_H = 0.18;
@@ -9270,7 +9401,7 @@ const KPI_ARROW_GAP = 0.04;
 const PPTX_CHAR_WIDTH = 0.42;
 // The target's progress bar, and the track it fills.
 const KPI_BAR_W = 1.7;
-const KPI_TRACK_COLOR = 'E4E7EB';
+const KPI_TRACK_COLOR = REPORT_KPI_TRACK_COLOR;
 // The sparkline's widest box, and its series name in the data sheet when the
 // measure has no label.
 const KPI_SPARKLINE_W = 2;
@@ -9500,7 +9631,7 @@ class ReportPptxService {
         if (!item.data || !item.data.rows?.length) {
             slide.addText(emptyLabel(item), {
                 x, y: bodyY, w, h: bodyH,
-                fontSize: 10, italic: true, color: '7B8794', align: 'center', valign: 'middle',
+                fontSize: 10, italic: true, color: MUTED_COLOR, align: 'center', valign: 'middle',
             });
             return;
         }
@@ -10085,7 +10216,7 @@ class ReportPptxService {
         if (remaining > 0) {
             body.push([{
                     text: moreRowsNotice(remaining),
-                    options: { colspan: columns.length, italic: true, color: '7B8794' },
+                    options: { colspan: columns.length, italic: true, color: MUTED_COLOR },
                 }]);
         }
         // The label is interface text, so it keeps the default proofing language.
@@ -10120,7 +10251,7 @@ class ReportPptxService {
                     text: view.value,
                     options: pptxRunOptions({ fontSize: 28, bold: true, color: '1F2933', breakLine: true }, context.locale),
                 },
-                { text: view.label, options: { fontSize: 10, color: '7B8794' } },
+                { text: view.label, options: { fontSize: 10, color: MUTED_COLOR } },
             ], {
                 x, y, w, h,
                 align: 'center',
@@ -10128,8 +10259,11 @@ class ReportPptxService {
             });
             return;
         }
+        // A tile too short for the card's lines shrinks them all alike.
         const parts = kpiExportParts(view, notes, h, KPI_HEIGHTS);
-        let top = y + Math.max(0, (h - kpiExportHeight(view, parts, KPI_HEIGHTS)) / 2);
+        const heights = scaledKpiHeights(KPI_HEIGHTS, parts.scale);
+        const lineFontSize = KPI_LINE_FONT_SIZE * parts.scale;
+        let top = y + Math.max(0, (h - kpiExportHeight(view, parts, heights)) / 2);
         const line = (runs, rowH, options) => {
             slide.addText(runs, {
                 x, y: top, w, h: rowH,
@@ -10137,31 +10271,31 @@ class ReportPptxService {
             });
             top += rowH;
         };
-        line([{ text: view.value, options: pptxRunOptions({ bold: true, color: '1F2933' }, context.locale) }], KPI_HEIGHTS.value, { fontSize: 28 });
+        line([{ text: view.value, options: pptxRunOptions({ bold: true, color: '1F2933' }, context.locale) }], heights.value, { fontSize: 28 * parts.scale });
         if (view.label) {
-            line(view.label, KPI_HEIGHTS.label, { fontSize: 10, color: MUTED_COLOR });
+            line(view.label, heights.label, { fontSize: 10 * parts.scale, color: MUTED_COLOR });
         }
         if (parts.delta && view.delta) {
-            this._kpiDelta(pptx, slide, view.delta, context, x, top, w);
-            top += KPI_HEIGHTS.delta;
+            this._kpiDelta(pptx, slide, view.delta, context, x, top, w, parts.scale);
+            top += heights.delta;
         }
         if (parts.window) {
-            const days = this._fitEstimate(view.window, KPI_LINE_FONT_SIZE, w);
-            line([{ text: days, options: pptxRunOptions({}, context.locale) }], KPI_HEIGHTS.window, {
-                fontSize: KPI_LINE_FONT_SIZE, color: MUTED_COLOR,
+            const days = this._fitEstimate(view.window, lineFontSize, w);
+            line([{ text: days, options: pptxRunOptions({}, context.locale) }], heights.window, {
+                fontSize: lineFontSize, color: MUTED_COLOR,
             });
         }
         if (parts.target && view.target) {
             this._kpiTarget(pptx, slide, view.target, x, top, w);
-            top += KPI_HEIGHTS.target;
+            top += heights.target;
         }
         if (parts.sparkline && view.sparkline) {
             this._kpiSparkline(pptx, slide, item, view.sparkline.values, view.label, x, top, w);
-            top += KPI_HEIGHTS.sparkline;
+            top += heights.sparkline;
         }
         if (parts.notes.length) {
             const fitted = parts.notes.map((note) => this._fitEstimate(note, SMALL_FONT_SIZE, w));
-            line(this._lineRuns(fitted, { italic: true }), parts.notes.length * KPI_HEIGHTS.note, {
+            line(this._lineRuns(fitted, { italic: true }), parts.notes.length * heights.note, {
                 fontSize: SMALL_FONT_SIZE, color: MUTED_COLOR,
             });
         }
@@ -10171,28 +10305,31 @@ class ReportPptxService {
     // it pointing the way the value moved (none when the shown change rounds to
     // zero). PowerPoint lays the text out itself, so the triangle sits where
     // the text's estimated width puts its start.
-    _kpiDelta(pptx, slide, delta, context, x, top, w) {
+    _kpiDelta(pptx, slide, delta, context, x, top, w, scale = 1) {
         const color = REPORT_KPI_CHANGE_COLORS[delta.tone];
-        const arrow = delta.trend === ReportKpiTrend.Flat ? 0 : KPI_ARROW + KPI_ARROW_GAP;
-        const changeW = this._estimatedWidth(delta.text, KPI_LINE_FONT_SIZE);
+        const fontSize = KPI_LINE_FONT_SIZE * scale;
+        const rowH = KPI_HEIGHTS.delta * scale;
+        const side = KPI_ARROW * scale;
+        const arrow = delta.trend === ReportKpiTrend.Flat ? 0 : side + KPI_ARROW_GAP * scale;
+        const changeW = this._estimatedWidth(delta.text, fontSize);
         const compared = delta.compared
-            ? this._fitEstimate(` ${delta.compared}`, KPI_LINE_FONT_SIZE, w - arrow - changeW)
+            ? this._fitEstimate(` ${delta.compared}`, fontSize, w - arrow - changeW)
             : '';
-        const textW = Math.min(w - arrow, changeW + this._estimatedWidth(compared, KPI_LINE_FONT_SIZE));
+        const textW = Math.min(w - arrow, changeW + this._estimatedWidth(compared, fontSize));
         const runs = [
             { text: delta.text, options: pptxRunOptions({ bold: true, color }, context.locale) },
             ...(compared ? [{ text: compared, options: { color: MUTED_COLOR } }] : []),
         ];
         slide.addText(runs, {
-            x: x + arrow, y: top, w: Math.max(0.1, w - arrow), h: KPI_HEIGHTS.delta,
-            fontSize: KPI_LINE_FONT_SIZE, align: 'center', valign: 'middle', margin: 0, fit: 'none',
+            x: x + arrow, y: top, w: Math.max(0.1, w - arrow), h: rowH,
+            fontSize, align: 'center', valign: 'middle', margin: 0, fit: 'none',
         });
         if (arrow) {
             slide.addShape(pptx.ShapeType.triangle, {
                 x: Math.max(x, x + (w - arrow - textW) / 2),
-                y: top + (KPI_HEIGHTS.delta - KPI_ARROW) / 2,
-                w: KPI_ARROW,
-                h: KPI_ARROW,
+                y: top + (rowH - side) / 2,
+                w: side,
+                h: side,
                 fill: { color },
                 line: { color, width: 0 },
                 flipV: delta.trend === ReportKpiTrend.Down,
@@ -10238,8 +10375,8 @@ class ReportPptxService {
     // The sparkline as a native line chart with its axes, gridlines and legend
     // hidden, scaled from its lowest value to its highest as on screen, its
     // periods and values in the chart's data sheet. A gap stays a gap. Markers
-    // show only when a value stands alone between gaps, which a line cannot
-    // draw.
+    // show only when a value stands alone between gaps (the last one too),
+    // which a line cannot draw.
     _kpiSparkline(pptx, slide, item, values, label, x, top, w) {
         const numbers = values.filter((value) => value !== null);
         const low = Math.min(...numbers);
@@ -10247,6 +10384,10 @@ class ReportPptxService {
         const pad = high === low ? Math.max(1, Math.abs(high)) : 0;
         const boxW = Math.min(w * 0.7, KPI_SPARKLINE_W);
         const geometry = kpiSparklineGeometry(values, false);
+        // kpiSparklineGeometry keeps the last point out of the dots, as the
+        // screen marks it apart; a last value after a gap is a lone point too.
+        const lastStandsAlone = values[values.length - 1] !== null
+            && (values.length === 1 || values[values.length - 2] === null);
         const periods = item.data?.kpi?.sparkline?.points?.map((point) => point.period) ?? [];
         const color = REPORT_KPI_SPARKLINE_COLOR;
         this._addChart(slide, { line: pptx.ChartType.line }, [{
@@ -10256,7 +10397,7 @@ class ReportPptxService {
                 options: {
                     chartColors: [color],
                     lineSize: 1.5,
-                    lineDataSymbol: geometry.dots.length ? 'circle' : 'none',
+                    lineDataSymbol: geometry.dots.length || lastStandsAlone ? 'circle' : 'none',
                     lineDataSymbolSize: 4,
                 },
             }], [{
@@ -10762,7 +10903,7 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-qCBE3LqM.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CFnbJx44.mjs').then((module) => module.default) }),
         ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected()?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports()\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report() && editMode()) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\n      @if (report()) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode()\">\n            <mat-icon>\n              dashboard_customize\n            </mat-icon>\n            {{ editMode() ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report()?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report()) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig()\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report()\"\n        [editMode]=\"editMode()\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}.master-toggle.active{background:#eceff3}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$2.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$2.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
@@ -10777,7 +10918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
                         // this route's chunk.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-qCBE3LqM.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CFnbJx44.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -12464,7 +12605,7 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-qCBE3LqM.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CFnbJx44.mjs').then((module) => module.default) }),
         ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report()?.name }}</h2>\n\n    @if (report()) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters()) {\n        @for (key of [reportFilterKey()]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig()\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- The zone every date in this report is filtered and grouped in, the\n           same for every viewer. Shown only when the server sends it; a click\n           opens Report settings, where it is changed. -->\n      @if (report()?.effectiveTimezone; as effectiveTimezone) {\n        <button\n            mat-button\n            type=\"button\"\n            class=\"fs-ai-report__timezone\"\n            [matTooltip]=\"'Dates are filtered and grouped in ' + effectiveTimezone + ' for everyone. Change it in Report settings.'\"\n            (click)=\"reportSettings()\">\n          <mat-icon>schedule</mat-icon>\n          {{ timezoneLabel() }}\n        </button>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report()?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report()) {\n        <app-report-canvas\n            [report]=\"report()\"\n            [editMode]=\"editMode()\"\n            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__timezone{--mat-button-text-label-text-color: var(--fs-color-text-muted, light-dark(rgba(0, 0, 0, .54), rgba(255, 255, 255, .6)));color:var(--fs-color-text-muted, light-dark(rgba(0, 0, 0, .54), rgba(255, 255, 255, .6)));white-space:nowrap;flex:0 0 auto}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
@@ -12482,7 +12623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportAiChatData,
                         { provide: FsAiChatData, useExisting: ReportAiChatData },
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-qCBE3LqM.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CFnbJx44.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -12516,4 +12657,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, REPORT_CHART_FONT_FAMILY as a, REPORT_AXIS_LABEL_FONT_SIZE as b, ReportComponent as c, FsAiReportComponent as d, ReportData as e, ReportService as f, ReportFilterStateService as g, ReportNodeType as h, ReportState as i, ReportValueFormat as j, ReportListColumnFormat as k, ReportNumberUnits as l, ReportChartDataLabels as m, ReportChartColor as n, ReportChartLineStyle as o, ReportChartMarkStat as p, ReportChartDateLabel as q, ReportChangePolarity as r };
-//# sourceMappingURL=firestitch-report-firestitch-report-DbsWbE-j.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-CSylkyko.mjs.map