@openremote/or-dashboard-builder 1.2.0-snapshot.20240512154942

package/src/util/settings-panel.ts

@@ -0,0 +1,93 @@
+import {css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+import {style} from "../style";
+
+const styling = css`
+  :host {
+    height: auto !important;
+  }
+  
+  #panel-wrapper {
+    border-top: 1px solid #E0E0E0;
+    border-bottom: 1px solid #E0E0E0;
+  }
+
+  #panel-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 12px;
+    gap: 8px;
+  }
+
+  #panel-title {
+    line-height: 100%;
+    font-weight: 700;
+  }
+
+  .panel-content {
+    padding: 0 16px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, visibility 0s 0.2s; /* expanded -> collapsed */
+  }
+
+  .panel-content--expanded {
+    max-height: 100vh;
+    overflow: visible;
+    transition: max-height 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 0s; /* collapsed -> expanded */
+  }
+`;
+
+@customElement("settings-panel")
+export class SettingsPanel extends LitElement {
+
+    @property()
+    protected expanded: boolean = false;
+
+    @property()
+    protected displayName?: string;
+
+    static get styles() {
+        return [styling, style]
+    }
+
+    protected render(): TemplateResult {
+        const contentClasses = {
+            "panel-content": true,
+            "panel-content--expanded": this.expanded
+        }
+        return html`
+            <div id="panel-wrapper">
+                ${until(this.generateHeader(this.expanded, this.displayName), html``)}
+                <div class="${classMap(contentClasses)}">
+                    <div style="padding-bottom: 16px;">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    public toggle(state?: boolean) {
+        this.expanded = state || !this.expanded
+    }
+
+    protected async generateHeader(expanded: boolean, title?: string): Promise<TemplateResult> {
+        return html`
+            <div id="panel-header" @click="${() => this.toggle()}">
+                <div id="panel-chevron">
+                    <or-icon icon="${expanded ? 'chevron-down' : 'chevron-right'}"></or-icon>
+                </div>
+                ${when(title, () => html`
+                    <div id="panel-title">
+                        <span><or-translate value="${this.displayName}"></or-translate></span>
+                    </div>
+                `)}
+            </div>
+        `
+    }
+}

package/src/util/widget-config.ts

@@ -0,0 +1,2 @@
+export interface WidgetConfig {
+}

package/src/util/widget-settings.ts

@@ -0,0 +1,58 @@
+import {LitElement, PropertyValues, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import {WidgetConfig} from "./widget-config";
+import {style} from "../style";
+
+export class WidgetSettingsChangedEvent extends CustomEvent<WidgetConfig> {
+
+    public static readonly NAME = "settings-changed";
+
+    constructor(widgetConfig: WidgetConfig) {
+        super(WidgetSettingsChangedEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: widgetConfig
+        });
+    }
+
+}
+
+export abstract class WidgetSettings extends LitElement {
+
+    @property()
+    protected readonly widgetConfig: WidgetConfig;
+
+    static get styles() {
+        return [style];
+    }
+
+    protected abstract render(): TemplateResult
+
+    constructor(config: WidgetConfig) {
+        super();
+        this.widgetConfig = config;
+    }
+
+
+    // Lit lifecycle for "on every update" which triggers on every property/state change
+    protected willUpdate(changedProps: PropertyValues) {
+        if(changedProps.has('widgetConfig') && this.widgetConfig) {
+            this.dispatchEvent(new WidgetSettingsChangedEvent(this.widgetConfig));
+        }
+    }
+
+    protected notifyConfigUpdate() {
+        this.requestUpdate('widgetConfig');
+    }
+
+
+    /* ----------------------------- */
+
+    public getDisplayName?: () => string | undefined;
+
+    public setDisplayName?: (name?: string) => void;
+
+    public getEditMode?: () => boolean;
+
+    public getWidgetLocation?: () => { x?: number, y?: number, h?: number, w?: number }
+}

package/src/widgets/attribute-input-widget.ts

@@ -0,0 +1,143 @@
+import {css, html, PropertyValues, TemplateResult } from "lit";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import {WidgetConfig} from "../util/widget-config";
+import {Attribute, AttributeRef, WellknownMetaItems} from "@openremote/model";
+import {WidgetManifest} from "../util/or-widget";
+import {WidgetSettings} from "../util/widget-settings";
+import { customElement, query, queryAll } from "lit/decorators.js";
+import {AttributeInputSettings} from "../settings/attribute-input-settings";
+import { when } from "lit/directives/when.js";
+import {throttle} from "lodash";
+import {Util} from "@openremote/core";
+import "@openremote/or-attribute-input";
+
+export interface AttributeInputWidgetConfig extends WidgetConfig {
+    attributeRefs: AttributeRef[];
+    readonly: boolean,
+    showHelperText: boolean
+}
+
+function getDefaultWidgetConfig() {
+    return {
+        attributeRefs: [],
+        readonly: false,
+        showHelperText: true
+    } as AttributeInputWidgetConfig
+}
+
+const styling = css`
+  #widget-wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .attr-input {
+    width: 100%;
+    box-sizing: border-box;
+  }
+`
+
+@customElement("attribute-input-widget")
+export class AttributeInputWidget extends OrAssetWidget {
+
+    protected widgetConfig!: AttributeInputWidgetConfig;
+
+    @query("#widget-wrapper")
+    protected widgetWrapperElem?: HTMLElement;
+
+    @queryAll(".attr-input")
+    protected attributeInputElems?: NodeList;
+
+    protected resizeObserver?: ResizeObserver;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Attribute",
+            displayIcon: "form-textbox",
+            getContentHtml(config: WidgetConfig): OrAssetWidget {
+                return new AttributeInputWidget(config);
+            },
+            getDefaultConfig(): WidgetConfig {
+                return getDefaultWidgetConfig();
+            },
+            getSettingsHtml(config: WidgetConfig): WidgetSettings {
+                return new AttributeInputSettings(config);
+            }
+
+        }
+    }
+
+    // TODO: Improve this to be more efficient
+    refreshContent(force: boolean): void {
+        this.widgetConfig = JSON.parse(JSON.stringify(this.widgetConfig)) as AttributeInputWidgetConfig;
+    }
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        delete this.resizeObserver;
+    }
+
+    protected updated(changedProps: PropertyValues) {
+
+        // If widgetConfig, and the attributeRefs of them have changed...
+        if(changedProps.has("widgetConfig") && this.widgetConfig) {
+            const attributeRefs = this.widgetConfig.attributeRefs;
+            if(attributeRefs.length > 0 && !this.isAttributeRefLoaded(attributeRefs[0])) {
+                this.loadAssets(attributeRefs);
+            }
+        }
+
+        // Workaround for an issue with scalability of or-attribute-input when using 'display: flex'.
+        // The percentage slider doesn't scale properly, causing the dragging knob to glitch.
+        // Why? Because the Material Design element listens to a window resize, not a container resize.
+        // So we manually trigger this event when the attribute-input-widget changes in size.
+        if(!this.resizeObserver && this.widgetWrapperElem) {
+            this.resizeObserver = new ResizeObserver(throttle(() => {
+                window.dispatchEvent(new Event('resize'));
+            }, 200));
+            this.resizeObserver.observe(this.widgetWrapperElem);
+        }
+
+        return super.updated(changedProps);
+    }
+
+    protected loadAssets(attributeRefs: AttributeRef[]) {
+        this.fetchAssets(attributeRefs).then((assets) => {
+            this.loadedAssets = assets;
+        });
+    }
+
+    protected render(): TemplateResult {
+        const config = this.widgetConfig;
+        const attribute = (config.attributeRefs.length > 0 && this.loadedAssets[0]?.attributes) ? this.loadedAssets[0].attributes[config.attributeRefs[0].name!] : undefined;
+        const readOnlyMetaItem = Util.getMetaValue(WellknownMetaItems.READONLY, attribute);
+        return html`
+            ${when(config.attributeRefs.length > 0 && attribute && this.loadedAssets && this.loadedAssets.length > 0, () => {
+                return html`
+                    <div id="widget-wrapper">
+                        <or-attribute-input class="attr-input" fullWidth
+                                            .assetType="${this.loadedAssets[0]?.type}"
+                                            .attribute="${attribute}"
+                                            .assetId="${this.loadedAssets[0]?.id}"
+                                            .disabled="${!this.loadedAssets}"
+                                            .readonly="${config.readonly || readOnlyMetaItem || this.getEditMode!()}"
+                                            .hasHelperText="${config.showHelperText}"
+                        ></or-attribute-input>
+                    </div>
+                `
+            }, () => html`
+                <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
+                    <span><or-translate value="noAttributesConnected"></or-translate></span>
+                </div>
+            `)}
+        `;
+    }
+}

package/src/widgets/chart-widget.ts

@@ -0,0 +1,203 @@
+import {AssetDatapointLTTBQuery, AssetDatapointQueryUnion, Attribute, AttributeRef} from "@openremote/model";
+import {html, PropertyValues, TemplateResult } from "lit";
+import { when } from "lit/directives/when.js";
+import {TimePresetCallback} from "@openremote/or-chart";
+import moment from "moment";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import { customElement, state } from "lit/decorators.js";
+import {WidgetConfig} from "../util/widget-config";
+import {OrWidget, WidgetManifest} from "../util/or-widget";
+import {ChartSettings} from "../settings/chart-settings";
+import {WidgetSettings} from "../util/widget-settings";
+import "@openremote/or-chart";
+
+export interface ChartWidgetConfig extends WidgetConfig {
+    attributeRefs: AttributeRef[];
+    rightAxisAttributes: AttributeRef[];
+    datapointQuery: AssetDatapointQueryUnion;
+    chartOptions?: any; // ChartConfiguration<"line", ScatterDataPoint[]>
+    showTimestampControls: boolean;
+    defaultTimePresetKey: string;
+    showLegend: boolean;
+}
+
+function getDefaultTimePresetOptions(): Map<string, TimePresetCallback> {
+    return new Map<string, TimePresetCallback>([
+        ["lastHour", (date: Date) => [moment(date).subtract(1, 'hour').toDate(), date]],
+        ["last24Hours", (date: Date) => [moment(date).subtract(24, 'hours').toDate(), date]],
+        ["last7Days", (date: Date) => [moment(date).subtract(7, 'days').toDate(), date]],
+        ["last30Days", (date: Date) => [moment(date).subtract(30, 'days').toDate(), date]],
+        ["last90Days", (date: Date) => [moment(date).subtract(90, 'days').toDate(), date]],
+        ["last6Months", (date: Date) => [moment(date).subtract(6, 'months').toDate(), date]],
+        ["lastYear", (date: Date) => [moment(date).subtract(1, 'year').toDate(), date]],
+        ["thisHour", (date: Date) => [moment(date).startOf('hour').toDate(), moment(date).endOf('hour').toDate()]],
+        ["thisDay", (date: Date) => [moment(date).startOf('day').toDate(), moment(date).endOf('day').toDate()]],
+        ["thisWeek", (date: Date) => [moment(date).startOf('isoWeek').toDate(), moment(date).endOf('isoWeek').toDate()]],
+        ["thisMonth", (date: Date) => [moment(date).startOf('month').toDate(), moment(date).endOf('month').toDate()]],
+        ["thisYear", (date: Date) => [moment(date).startOf('year').toDate(), moment(date).endOf('year').toDate()]],
+        ["yesterday", (date: Date) => [moment(date).subtract(24, 'hours').startOf('day').toDate(), moment(date).subtract(24, 'hours').endOf('day').toDate()]],
+        ["thisDayLastWeek", (date: Date) => [moment(date).subtract(1, 'week').startOf('day').toDate(), moment(date).subtract(1, 'week').endOf('day').toDate()]],
+        ["previousWeek", (date: Date) => [moment(date).subtract(1, 'week').startOf('isoWeek').toDate(), moment(date).subtract(1, 'week').endOf('isoWeek').toDate()]],
+        ["previousMonth", (date: Date) => [moment(date).subtract(1, 'month').startOf('month').toDate(), moment(date).subtract(1, 'month').endOf('month').toDate()]],
+        ["previousYear", (date: Date) => [moment(date).subtract(1, 'year').startOf('year').toDate(), moment(date).subtract(1, 'year').endOf('year').toDate()]]
+    ]);
+}
+
+function getDefaultSamplingOptions(): Map<string, string> {
+    return new Map<string, string>([["lttb", 'lttb'], ["withInterval", 'interval']]);
+}
+
+function getDefaultWidgetConfig(): ChartWidgetConfig {
+    const preset = "last24Hours"
+    const dateFunc = getDefaultTimePresetOptions().get(preset) as TimePresetCallback;
+    const dates = dateFunc(new Date());
+    return {
+        attributeRefs: [],
+        rightAxisAttributes: [],
+        datapointQuery: {
+            type: "lttb",
+            fromTimestamp: dates[0].getTime(),
+            toTimestamp: dates[1].getTime()
+        },
+        chartOptions: {
+            options: {
+                scales: {
+                    y: {
+                        min: undefined,
+                        max: undefined
+                    },
+                    y1: {
+                        min: undefined,
+                        max: undefined
+                    }
+                }
+            },
+        },
+        showTimestampControls: false,
+        defaultTimePresetKey: preset,
+        showLegend: true
+    };
+}
+
+/* --------------------------------------------------- */
+
+@customElement('chart-widget')
+export class ChartWidget extends OrAssetWidget {
+
+    @state()
+    protected datapointQuery!: AssetDatapointQueryUnion;
+
+    // Override of widgetConfig with extended type
+    protected widgetConfig!: ChartWidgetConfig;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Line Chart",
+            displayIcon: "chart-line",
+            minColumnWidth: 2,
+            minColumnHeight: 2,
+            getContentHtml(config: ChartWidgetConfig): OrWidget {
+                return new ChartWidget(config);
+            },
+            getSettingsHtml(config: ChartWidgetConfig): WidgetSettings {
+                const settings = new ChartSettings(config);
+                settings.setTimePresetOptions(getDefaultTimePresetOptions());
+                settings.setSamplingOptions(getDefaultSamplingOptions());
+                return settings;
+            },
+            getDefaultConfig(): ChartWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    // Method called on every refresh/reload of the widget
+    // We either refresh the datapointQuery or the full widgetConfig depending on the force parameter.
+    // TODO: Improve this to a more efficient approach, instead of duplicating the object
+    public refreshContent(force: boolean) {
+        if(!force) {
+            const datapointQuery = JSON.parse(JSON.stringify(this.widgetConfig.datapointQuery)) as AssetDatapointQueryUnion;
+            datapointQuery.fromTimestamp = undefined;
+            datapointQuery.toTimestamp = undefined;
+            this.datapointQuery = datapointQuery;
+        } else {
+            this.widgetConfig = JSON.parse(JSON.stringify(this.widgetConfig)) as ChartWidgetConfig;
+        }
+    }
+
+
+    /* ---------------------------------- */
+
+    // WebComponent lifecycle method, that occurs DURING every state update
+    protected willUpdate(changedProps: PropertyValues) {
+
+        // Add datapointQuery if not set yet (due to migration)
+        if(!this.widgetConfig.datapointQuery) {
+            this.widgetConfig.datapointQuery = this.getDefaultQuery();
+            if(!changedProps.has("widgetConfig")) {
+                changedProps.set("widgetConfig", this.widgetConfig);
+            }
+        }
+
+        if(changedProps.has('widgetConfig') && this.widgetConfig) {
+            this.datapointQuery = this.widgetConfig.datapointQuery;
+        }
+
+        return super.willUpdate(changedProps);
+    }
+
+    // WebComponent lifecycle method, that occurs AFTER every state update
+    protected updated(changedProps: Map<string, any>) {
+        super.updated(changedProps);
+
+        // If widgetConfig, and the attributeRefs of them have changed...
+        if(changedProps.has("widgetConfig") && this.widgetConfig) {
+            const attributeRefs = this.widgetConfig.attributeRefs;
+            const missingAssets = attributeRefs?.filter((attrRef: AttributeRef) => !this.isAttributeRefLoaded(attrRef));
+            if (missingAssets.length > 0) {
+
+                // Fetch the new list of assets
+                this.fetchAssets(attributeRefs).then((assets) => {
+                    this.loadedAssets = assets;
+                    this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
+                        const assetIndex = assets.findIndex((asset) => asset.id === attrRef.id);
+                        const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
+                        return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
+                    }).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
+                });
+
+            }
+        }
+        return super.updated(changedProps);
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            ${when(this.loadedAssets && this.assetAttributes && this.loadedAssets.length > 0 && this.assetAttributes.length > 0, () => {
+                return html`
+                    <or-chart .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .rightAxisAttributes="${this.widgetConfig.rightAxisAttributes}"
+                              .showLegend="${(this.widgetConfig?.showLegend != null) ? this.widgetConfig?.showLegend : true}"
+                              .attributeControls="${false}" .timestampControls="${!this.widgetConfig?.showTimestampControls}"
+                              .timePresetOptions="${getDefaultTimePresetOptions()}" .timePresetKey="${this.widgetConfig?.defaultTimePresetKey}"
+                              .datapointQuery="${this.datapointQuery}" .chartOptions="${this.widgetConfig?.chartOptions}"
+                              style="height: 100%"
+                    ></or-chart>
+                `;
+            }, () => {
+                return html`
+                    <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
+                        <span><or-translate value="noAttributesConnected"></or-translate></span>
+                    </div>
+                `
+            })}
+        `;
+    }
+
+    protected getDefaultQuery(): AssetDatapointLTTBQuery {
+        return {
+            type: "lttb",
+            fromTimestamp: moment().set('minute', -60).toDate().getTime(),
+            toTimestamp: moment().set('minute', 60).toDate().getTime()
+        }
+    }
+}

package/src/widgets/gauge-widget.ts

@@ -0,0 +1,111 @@
+import {html, TemplateResult} from "lit";
+import {customElement, state} from "lit/decorators.js";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import {WidgetConfig} from "../util/widget-config";
+import {Asset, Attribute, AttributeRef} from "@openremote/model";
+import {OrWidget, WidgetManifest} from "../util/or-widget";
+import {WidgetSettings} from "../util/widget-settings";
+import {GaugeSettings} from "../settings/gauge-settings";
+import {when} from "lit/directives/when.js";
+import "@openremote/or-gauge";
+
+export interface GaugeWidgetConfig extends WidgetConfig {
+    attributeRefs: AttributeRef[];
+    thresholds: [number, string][];
+    decimals: number;
+    min: number;
+    max: number;
+    valueType: string;
+}
+
+function getDefaultWidgetConfig(): GaugeWidgetConfig {
+    return {
+        attributeRefs: [],
+        thresholds: [[0, "#4caf50"], [75, "#ff9800"], [90, "#ef5350"]], // colors from https://mui.com/material-ui/customization/palette/ as reference (since material has no official colors)
+        decimals: 0,
+        min: 0,
+        max: 100,
+        valueType: 'number',
+    };
+}
+
+@customElement("gauge-widget")
+export class GaugeWidget extends OrAssetWidget {
+
+    // Override of widgetConfig with extended type
+    protected widgetConfig!: GaugeWidgetConfig;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Gauge",
+            displayIcon: "gauge",
+            minColumnWidth: 1,
+            minColumnHeight: 1,
+            getContentHtml(config: GaugeWidgetConfig): OrWidget {
+                return new GaugeWidget(config);
+            },
+            getSettingsHtml(config: GaugeWidgetConfig): WidgetSettings {
+                return new GaugeSettings(config);
+            },
+            getDefaultConfig(): GaugeWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    public refreshContent(force: boolean) {
+        this.loadAssets(this.widgetConfig.attributeRefs);
+    }
+
+    // WebComponent lifecycle method, that occurs AFTER every state update
+    protected updated(changedProps: Map<string, any>) {
+        super.updated(changedProps);
+
+        // If widgetConfig, and the attributeRefs of them have changed...
+        if(changedProps.has("widgetConfig") && this.widgetConfig) {
+            const attributeRefs = this.widgetConfig.attributeRefs;
+
+            // Check if list of attributes has changed, based on the cached assets
+            const loadedRefs: AttributeRef[] = attributeRefs?.filter((attrRef: AttributeRef) => this.isAttributeRefLoaded(attrRef));
+            if (loadedRefs?.length !== (attributeRefs ? attributeRefs.length : 0)) {
+
+                // Fetch the new list of assets
+                this.loadAssets(attributeRefs);
+
+            }
+        }
+        return super.updated(changedProps);
+    }
+
+    protected loadAssets(attributeRefs: AttributeRef[]) {
+        this.fetchAssets(attributeRefs).then((assets) => {
+            this.loadedAssets = assets;
+            this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
+                const assetIndex = assets.findIndex((asset) => asset.id === attrRef.id);
+                const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
+                return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
+            }).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
+        });
+    }
+
+
+    protected render(): TemplateResult {
+        return html`
+            ${when(this.loadedAssets && this.assetAttributes && this.loadedAssets.length > 0 && this.assetAttributes.length > 0, () => {
+                return html`
+                    <or-gauge .asset="${this.loadedAssets[0]}" .assetAttribute="${this.assetAttributes[0]}" .thresholds="${this.widgetConfig.thresholds}"
+                              .decimals="${this.widgetConfig.decimals}" .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
+                              style="height: 100%; overflow: hidden;">
+                    </or-gauge>
+                `;
+            }, () => {
+                return html`
+                    <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
+                        <span><or-translate value="noAttributeConnected"></or-translate></span>
+                    </div>
+                `
+            })}
+        `;
+    }
+
+}