@akcelik/strct 4.2.1 → 4.3.0

package/fesm2022/akcelik-strct.mjs

@@ -21612,6 +21612,34 @@ class StrctHeatmap {
     /** Scale ceiling — the value that maps to full intensity. Auto (data max) when null. */
     max = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * Label every n-th column (1 = every column, today's behaviour). 24 hourly
+     * columns in a narrow card cannot all carry a readable label; labelling every
+     * third keeps "14:00" legible instead of forcing it down to "14".
+     */
+    colLabelEvery = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colLabelEvery" }] : /* istanbul ignore next */ []));
+    /**
+     * Column label text, so a column can be keyed by an ISO time and shown as
+     * "14:00". Return '' to drop a label. Applied after `colLabelEvery`.
+     */
+    colLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Cell tooltip text. Without it a cell reads `row × col: value`, which for a
+     * utilisation grid has no unit — `hv-05 · 14:00 — 47% CPU` is the readable form.
+     */
+    valueFormat = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /**
+     * Colour by band instead of one hue: `status` (accent by default) below
+     * `warning`, the warning hue from there, the critical hue from `critical`.
+     * Intensity is scaled by the value's position WITHIN its band, so a 96% cell
+     * reads darker than an 81% one and both read as critical/warning at a glance.
+     * Unset: today's single-hue ramp across the whole range.
+     */
+    thresholds = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thresholds" }] : /* istanbul ignore next */ []));
     /** Base color of the intensity ramp. */
     status = input('accent', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -21710,7 +21738,7 @@ class StrctHeatmap {
                     w: round(w),
                     h: ch,
                     fill: value === undefined ? 'var(--bg-2)' : this.fillFor(value),
-                    tip: value === undefined ? null : `${row} × ${col}: ${value}`,
+                    tip: value === undefined ? null : this.tipFor(value, row, col),
                 });
             });
         });
@@ -21732,9 +21760,24 @@ class StrctHeatmap {
         const gap = this.gap();
         const x0 = this.rowLabelWidth();
         const y = this.height() - 4;
-        return this.colOrder().map((text, c) => ({ text, x: round(x0 + c * (w + gap) + w / 2), y }));
+        const every = Math.max(1, Math.trunc(this.colLabelEvery()));
+        const format = this.colLabel();
+        const out = [];
+        this.colOrder().forEach((col, c) => {
+            if (c % every !== 0)
+                return;
+            const text = format ? format(col, c) : col;
+            if (text === '')
+                return;
+            out.push({ text, x: round(x0 + c * (w + gap) + w / 2), y });
+        });
+        return out;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colLabels" }] : /* istanbul ignore next */ []));
+    tipFor(value, row, col) {
+        const format = this.valueFormat();
+        return format ? format(value, row, col) : `${row} × ${col}: ${value}`;
+    }
     /** Screen-reader summary of the whole grid (role="img" name). */
     aria = computed(() => {
         const info = {
@@ -21752,17 +21795,41 @@ class StrctHeatmap {
     /**
      * Intensity ramp: 8% of the status hue for the smallest non-zero value up
      * to 100% at the ceiling; zero stays on the empty-cell surface.
+     *
+     * With `thresholds`, the hue comes from the value's band and the intensity
+     * from its position inside that band, floored at 45% — a band has to be
+     * recognisable as itself, and a pale cell must not read as "no data".
      */
     fillFor(value) {
         if (value <= 0)
             return 'var(--bg-2)';
         const maxV = this.maxVal();
-        const t = maxV > 0 ? Math.min(value / maxV, 1) : 0;
-        const pct = 8 + Math.round(t * 92);
+        const t = this.thresholds();
+        if (t) {
+            const { color, from, to } = this.bandFor(value, t, maxV);
+            const span = to - from;
+            const pos = span > 0 ? Math.min(Math.max((value - from) / span, 0), 1) : 1;
+            const pct = 45 + Math.round(pos * 55);
+            return `color-mix(in srgb, ${color} ${pct}%, var(--bg-1))`;
+        }
+        const ratio = maxV > 0 ? Math.min(value / maxV, 1) : 0;
+        const pct = 8 + Math.round(ratio * 92);
         return `color-mix(in srgb, ${this.color()} ${pct}%, var(--bg-1))`;
     }
+    /** The band a value falls in: its hue and the range intensity scales over. */
+    bandFor(value, t, maxV) {
+        const ceiling = Math.max(maxV, value);
+        if (t.critical != null && value >= t.critical) {
+            return { color: COLOR.critical, from: t.critical, to: ceiling };
+        }
+        if (t.warning != null && value >= t.warning) {
+            return { color: COLOR.warning, from: t.warning, to: t.critical ?? ceiling };
+        }
+        const upper = t.warning ?? t.critical ?? ceiling;
+        return { color: this.color(), from: 0, to: upper };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeatmap, isStandalone: true, selector: "strct-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormat: { classPropertyName: "summaryFormat", publicName: "summaryFormat", isSignal: true, isRequired: false, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowLabelWidth: { classPropertyName: "rowLabelWidth", publicName: "rowLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-heatmap" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeatmap, isStandalone: true, selector: "strct-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, colLabelEvery: { classPropertyName: "colLabelEvery", publicName: "colLabelEvery", isSignal: true, isRequired: false, transformFunction: null }, colLabel: { classPropertyName: "colLabel", publicName: "colLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormat: { classPropertyName: "summaryFormat", publicName: "summaryFormat", isSignal: true, isRequired: false, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowLabelWidth: { classPropertyName: "rowLabelWidth", publicName: "rowLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-heatmap" }, ngImport: i0, template: `
     @if (isEmpty()) {
       <div class="strct-heatmap__empty">{{ emptyText() }}</div>
     } @else {
@@ -21774,7 +21841,10 @@ class StrctHeatmap {
         [attr.width]="width()"
         [attr.height]="height()"
       >
-        @for (l of rowLabels(); track l.text) {
+        <!-- Tracked by index: label text is data and repeats legitimately (two
+             hosts with the same name, hour 02 twice at the DST fall-back), and
+             a thinned column axis repeats the empty string. -->
+        @for (l of rowLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--row"
             [attr.x]="l.x"
@@ -21785,7 +21855,7 @@ class StrctHeatmap {
             {{ l.text }}
           </text>
         }
-        @for (l of colLabels(); track l.text) {
+        @for (l of colLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--col"
             [attr.x]="l.x"
@@ -21829,7 +21899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         [attr.width]="width()"
         [attr.height]="height()"
       >
-        @for (l of rowLabels(); track l.text) {
+        <!-- Tracked by index: label text is data and repeats legitimately (two
+             hosts with the same name, hour 02 twice at the DST fall-back), and
+             a thinned column axis repeats the empty string. -->
+        @for (l of rowLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--row"
             [attr.x]="l.x"
@@ -21840,7 +21913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             {{ l.text }}
           </text>
         }
-        @for (l of colLabels(); track l.text) {
+        @for (l of colLabels(); track $index) {
           <text
             class="strct-heatmap__label strct-heatmap__label--col"
             [attr.x]="l.x"
@@ -21869,7 +21942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       </svg>
     }
   `, host: { class: 'strct-heatmap' }, styles: [".strct-heatmap{display:block}.strct-heatmap__svg{width:100%;display:block}.strct-heatmap__empty{display:flex;align-items:center;justify-content:center;min-height:60px;font-size:12px;color:var(--t3)}.strct-heatmap__label{fill:var(--t3);font-size:10px}.strct-heatmap__label--row{font-family:var(--font)}.strct-heatmap__label--col{font-family:var(--mono);font-variant-numeric:tabular-nums}.strct-heatmap__cell{stroke:var(--bg-1);stroke-width:1}@media(prefers-reduced-motion:no-preference){.strct-heatmap__cell{transition:opacity .12s ease}}.strct-heatmap__cell:hover{opacity:.75}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summaryFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryFormat", required: false }] }], cellHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], rowLabelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabelWidth", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], colLabelEvery: [{ type: i0.Input, args: [{ isSignal: true, alias: "colLabelEvery", required: false }] }], colLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "colLabel", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summaryFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryFormat", required: false }] }], cellHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], rowLabelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabelWidth", required: false }] }] } });
 
 /**
  * Public API surface of the strct UI library.