@meshmakers/octo-meshboard 3.4.260 → 3.4.280

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -15577,6 +15577,15 @@ const COLOR_SCHEMES = {
     blue: (min, max) => buildGradientRanges(min, max, ['#e3f2fd', '#90caf9', '#42a5f5', '#1565c0', '#0d47a1']),
     heat: (min, max) => buildGradientRanges(min, max, ['#fff9c4', '#ffcc02', '#ff9800', '#f44336', '#b71c1c'])
 };
+/**
+ * Fixed band colors for the `threshold` color mode: a cell equal to the target
+ * is "ok" (green), below it "warn" (amber), above it "high" (red).
+ */
+const THRESHOLD_COLORS = Object.freeze({
+    ok: '#2e7d32',
+    warn: '#ffb300',
+    high: '#c62828'
+});
 function buildGradientRanges(min, max, colors) {
     if (max <= min) {
         return [{ from: min, to: min + 1, color: colors[0] }];
@@ -15927,6 +15936,17 @@ class HeatmapWidgetComponent {
      * Assigns colors to heatmap data items based on value range and color scheme.
      */
     assignColors(data) {
+        // Threshold mode: absolute ok/warn/high bands around an expected target.
+        // Falls back to gradient when no target can be resolved (so the widget never
+        // renders blank just because no scope/target is configured).
+        if ((this.config?.colorMode ?? 'gradient') === 'threshold') {
+            const target = this.resolveThresholdTarget();
+            if (target != null && target > 0) {
+                for (const item of data)
+                    item.color = this.getThresholdColor(item.value, target);
+                return;
+            }
+        }
         const scheme = this.config?.colorScheme ?? 'green';
         const nonZeroValues = data.filter(d => d.value !== 0).map(d => d.value);
         if (nonZeroValues.length === 0) {
@@ -15941,6 +15961,31 @@ class HeatmapWidgetComponent {
             item.color = this.getColorForValue(item.value, ranges);
         }
     }
+    /**
+     * Resolves the expected value per cell for `threshold` color mode. Uses the
+     * explicit {@link HeatmapWidgetConfig.thresholdTarget} when set; otherwise
+     * auto-derives it from the number of asset-scoped source rtIds (each scoped
+     * source contributes one value per interval, so a "healthy" cell equals the
+     * number of scoped sources — e.g. the EnergyMeasurements under a MeteringPoint).
+     * Returns `null` when neither is available.
+     */
+    resolveThresholdTarget() {
+        const manual = this.config?.thresholdTarget;
+        if (manual != null && manual > 0)
+            return manual;
+        const ds = this.config?.dataSource;
+        const rtIds = this.stateService.resolveStreamDataRtIds(ds?.entitySelectorId);
+        return rtIds && rtIds.length > 0 ? rtIds.length : null;
+    }
+    /**
+     * Bands a value around the target: equal → green, below (incl. empty 0-cells)
+     * → amber, above → red.
+     */
+    getThresholdColor(value, target) {
+        if (value === target)
+            return THRESHOLD_COLORS.ok;
+        return value < target ? THRESHOLD_COLORS.warn : THRESHOLD_COLORS.high;
+    }
     aggregate(values, aggregation) {
         if (values.length === 0)
             return 0;
@@ -16112,6 +16157,8 @@ class HeatmapConfigDialogComponent {
     initialValueField;
     initialAggregation;
     initialColorScheme;
+    initialColorMode;
+    initialThresholdTarget;
     initialShowLegend;
     initialLegendPosition;
     initialDecimalPlaces;
@@ -16137,6 +16184,11 @@ class HeatmapConfigDialogComponent {
         { value: 'sum', label: 'Sum (total of values)' },
         { value: 'avg', label: 'Average (mean of values)' }
     ];
+    // Color mode options
+    colorModeOptions = [
+        { value: 'gradient', label: 'Gradient' },
+        { value: 'threshold', label: 'Threshold' }
+    ];
     // Color scheme options
     colorSchemeOptions = [
         { value: 'green', label: 'Green', previewColor: '#66bb6a' },
@@ -16164,6 +16216,8 @@ class HeatmapConfigDialogComponent {
         valueField: '',
         aggregation: 'count',
         colorScheme: 'green',
+        colorMode: 'gradient',
+        thresholdTarget: undefined,
         showLegend: true,
         legendPosition: 'bottom',
         decimalPlaces: 2,
@@ -16193,6 +16247,8 @@ class HeatmapConfigDialogComponent {
         this.form.valueField = this.initialValueField;
         this.form.aggregation = this.initialAggregation ?? 'count';
         this.form.colorScheme = this.initialColorScheme ?? 'green';
+        this.form.colorMode = this.initialColorMode ?? 'gradient';
+        this.form.thresholdTarget = this.initialThresholdTarget;
         this.form.showLegend = this.initialShowLegend ?? true;
         this.form.legendPosition = this.initialLegendPosition ?? 'bottom';
         this.form.decimalPlaces = this.initialDecimalPlaces ?? 2;
@@ -16323,6 +16379,8 @@ class HeatmapConfigDialogComponent {
             valueField: this.form.valueField || undefined,
             aggregation: this.form.aggregation,
             colorScheme: this.form.colorScheme,
+            colorMode: this.form.colorMode,
+            thresholdTarget: this.form.colorMode === 'threshold' ? (this.form.thresholdTarget ?? undefined) : undefined,
             showLegend: this.form.showLegend,
             legendPosition: this.form.legendPosition,
             decimalPlaces: this.form.decimalPlaces,
@@ -16336,7 +16394,7 @@ class HeatmapConfigDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: HeatmapConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: HeatmapConfigDialogComponent, isStandalone: true, selector: "mm-heatmap-config-dialog", inputs: { initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialQueryFamily: "initialQueryFamily", initialIgnoreTimeFilter: "initialIgnoreTimeFilter", initialEntitySelectorId: "initialEntitySelectorId", initialDateField: "initialDateField", initialDateEndField: "initialDateEndField", initialValueField: "initialValueField", initialAggregation: "initialAggregation", initialColorScheme: "initialColorScheme", initialShowLegend: "initialShowLegend", initialLegendPosition: "initialLegendPosition", initialDecimalPlaces: "initialDecimalPlaces", initialCompactNumbers: "initialCompactNumbers", initialValueMultiplier: "initialValueMultiplier", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: HeatmapConfigDialogComponent, isStandalone: true, selector: "mm-heatmap-config-dialog", inputs: { initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialQueryFamily: "initialQueryFamily", initialIgnoreTimeFilter: "initialIgnoreTimeFilter", initialEntitySelectorId: "initialEntitySelectorId", initialDateField: "initialDateField", initialDateEndField: "initialDateEndField", initialValueField: "initialValueField", initialAggregation: "initialAggregation", initialColorScheme: "initialColorScheme", initialColorMode: "initialColorMode", initialThresholdTarget: "initialThresholdTarget", initialShowLegend: "initialShowLegend", initialLegendPosition: "initialLegendPosition", initialDecimalPlaces: "initialDecimalPlaces", initialCompactNumbers: "initialCompactNumbers", initialValueMultiplier: "initialValueMultiplier", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
     <div class="config-container">
 
       <div class="config-form" [class.loading]="isLoadingInitial">
@@ -16467,24 +16525,63 @@ class HeatmapConfigDialogComponent {
           <h3 class="section-title">Display Options</h3>
 
           <div class="form-field">
-            <label>Color Scheme</label>
+            <label>Color Mode</label>
             <div class="color-scheme-grid">
-              @for (scheme of colorSchemeOptions; track scheme.value) {
+              @for (mode of colorModeOptions; track mode.value) {
                 <label class="radio-label">
                   <input type="radio"
-                         name="colorScheme"
-                         [value]="scheme.value"
-                         [(ngModel)]="form.colorScheme"
+                         name="colorMode"
+                         [value]="mode.value"
+                         [(ngModel)]="form.colorMode"
                          kendoRadioButton />
-                  <span class="color-scheme-preview">
-                    <span class="color-swatch" [style.background]="scheme.previewColor"></span>
-                    {{ scheme.label }}
-                  </span>
+                  <span class="color-scheme-preview">{{ mode.label }}</span>
                 </label>
               }
             </div>
+            <p class="field-hint">
+              Gradient colors relative to the data's min/max. Threshold colors each cell
+              against an expected count: equal = green, below (incl. empty) = amber, above = red.
+            </p>
           </div>
 
+          @if (form.colorMode === 'gradient') {
+            <div class="form-field">
+              <label>Color Scheme</label>
+              <div class="color-scheme-grid">
+                @for (scheme of colorSchemeOptions; track scheme.value) {
+                  <label class="radio-label">
+                    <input type="radio"
+                           name="colorScheme"
+                           [value]="scheme.value"
+                           [(ngModel)]="form.colorScheme"
+                           kendoRadioButton />
+                    <span class="color-scheme-preview">
+                      <span class="color-swatch" [style.background]="scheme.previewColor"></span>
+                      {{ scheme.label }}
+                    </span>
+                  </label>
+                }
+              </div>
+            </div>
+          } @else {
+            <div class="form-field">
+              <label>Target Value</label>
+              <kendo-numerictextbox
+                [(ngModel)]="form.thresholdTarget"
+                [min]="0"
+                [step]="1"
+                [decimals]="0"
+                format="n0"
+                placeholder="Auto (number of scoped sources)">
+              </kendo-numerictextbox>
+              <p class="field-hint">
+                Expected value per cell. Leave empty to auto-derive it from the number of
+                asset-scoped sources (e.g. the EnergyMeasurements under the picked MeteringPoint),
+                which requires a "Scope to entity selector" binding above.
+              </p>
+            </div>
+          }
+
           <div class="form-field">
             <label>Decimal Places</label>
             <kendo-numerictextbox
@@ -16703,24 +16800,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           <h3 class="section-title">Display Options</h3>
 
           <div class="form-field">
-            <label>Color Scheme</label>
+            <label>Color Mode</label>
             <div class="color-scheme-grid">
-              @for (scheme of colorSchemeOptions; track scheme.value) {
+              @for (mode of colorModeOptions; track mode.value) {
                 <label class="radio-label">
                   <input type="radio"
-                         name="colorScheme"
-                         [value]="scheme.value"
-                         [(ngModel)]="form.colorScheme"
+                         name="colorMode"
+                         [value]="mode.value"
+                         [(ngModel)]="form.colorMode"
                          kendoRadioButton />
-                  <span class="color-scheme-preview">
-                    <span class="color-swatch" [style.background]="scheme.previewColor"></span>
-                    {{ scheme.label }}
-                  </span>
+                  <span class="color-scheme-preview">{{ mode.label }}</span>
                 </label>
               }
             </div>
+            <p class="field-hint">
+              Gradient colors relative to the data's min/max. Threshold colors each cell
+              against an expected count: equal = green, below (incl. empty) = amber, above = red.
+            </p>
           </div>
 
+          @if (form.colorMode === 'gradient') {
+            <div class="form-field">
+              <label>Color Scheme</label>
+              <div class="color-scheme-grid">
+                @for (scheme of colorSchemeOptions; track scheme.value) {
+                  <label class="radio-label">
+                    <input type="radio"
+                           name="colorScheme"
+                           [value]="scheme.value"
+                           [(ngModel)]="form.colorScheme"
+                           kendoRadioButton />
+                    <span class="color-scheme-preview">
+                      <span class="color-swatch" [style.background]="scheme.previewColor"></span>
+                      {{ scheme.label }}
+                    </span>
+                  </label>
+                }
+              </div>
+            </div>
+          } @else {
+            <div class="form-field">
+              <label>Target Value</label>
+              <kendo-numerictextbox
+                [(ngModel)]="form.thresholdTarget"
+                [min]="0"
+                [step]="1"
+                [decimals]="0"
+                format="n0"
+                placeholder="Auto (number of scoped sources)">
+              </kendo-numerictextbox>
+              <p class="field-hint">
+                Expected value per cell. Leave empty to auto-derive it from the number of
+                asset-scoped sources (e.g. the EnergyMeasurements under the picked MeteringPoint),
+                which requires a "Scope to entity selector" binding above.
+              </p>
+            </div>
+          }
+
           <div class="form-field">
             <label>Decimal Places</label>
             <kendo-numerictextbox
@@ -16816,6 +16952,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }], initialColorScheme: [{
                 type: Input
+            }], initialColorMode: [{
+                type: Input
+            }], initialThresholdTarget: [{
+                type: Input
             }], initialShowLegend: [{
                 type: Input
             }], initialLegendPosition: [{
@@ -29051,6 +29191,8 @@ function registerDefaultWidgets(registry) {
                 initialValueField: heatmapWidget.valueField,
                 initialAggregation: heatmapWidget.aggregation,
                 initialColorScheme: heatmapWidget.colorScheme,
+                initialColorMode: heatmapWidget.colorMode,
+                initialThresholdTarget: heatmapWidget.thresholdTarget,
                 initialShowLegend: heatmapWidget.showLegend,
                 initialLegendPosition: heatmapWidget.legendPosition,
                 initialDecimalPlaces: heatmapWidget.decimalPlaces,
@@ -29081,6 +29223,8 @@ function registerDefaultWidgets(registry) {
                 valueField: result.valueField,
                 aggregation: result.aggregation,
                 colorScheme: result.colorScheme,
+                colorMode: result.colorMode,
+                thresholdTarget: result.thresholdTarget,
                 showLegend: result.showLegend,
                 legendPosition: result.legendPosition,
                 decimalPlaces: result.decimalPlaces,
@@ -29112,6 +29256,8 @@ function registerDefaultWidgets(registry) {
                 valueField: widget.valueField,
                 aggregation: widget.aggregation,
                 colorScheme: widget.colorScheme,
+                ...(widget.colorMode && { colorMode: widget.colorMode }),
+                ...(widget.thresholdTarget != null && { thresholdTarget: widget.thresholdTarget }),
                 showLegend: widget.showLegend,
                 legendPosition: widget.legendPosition,
                 decimalPlaces: widget.decimalPlaces,
@@ -29145,6 +29291,8 @@ function registerDefaultWidgets(registry) {
                 valueField: config['valueField'],
                 aggregation: config['aggregation'] ?? 'count',
                 colorScheme: config['colorScheme'] ?? 'green',
+                colorMode: config['colorMode'],
+                thresholdTarget: config['thresholdTarget'],
                 showLegend: config['showLegend'] ?? true,
                 legendPosition: config['legendPosition'] ?? 'bottom',
                 decimalPlaces: config['decimalPlaces'],