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

package/src/widgets/image-widget.ts

@@ -0,0 +1,180 @@
+import {WidgetConfig} from "../util/widget-config";
+import {AssetModelUtil, Attribute, AttributeRef, WellknownValueTypes} from "@openremote/model";
+import {OrWidget, WidgetManifest} from "../util/or-widget";
+import { customElement } from "lit/decorators.js";
+import {WidgetSettings} from "../util/widget-settings";
+import {css, CSSResult, html, PropertyValues, TemplateResult, unsafeCSS } from "lit";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import {ImageSettings} from "../settings/image-settings";
+import { when } from "lit/directives/when.js";
+import {DefaultColor2, DefaultColor3, Util} from "@openremote/core";
+import { styleMap } from "lit/directives/style-map.js";
+
+const styling = css`
+  #img-wrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  #img-container {
+    position: relative;
+    max-height: 100%;
+  }
+
+  #img-content {
+    height: 100%;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  #overlay {
+    position: absolute;
+    z-index: 3;
+
+    /* additional marker styling */
+    color: var(--or-app-color2, ${unsafeCSS(DefaultColor2)});
+    background-color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+    border-radius: 15px;
+    padding: 3px 8px 5px 8px;
+    object-fit: contain;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export interface ImageAssetMarker {
+    attributeRef: AttributeRef,
+    coordinates: [number, number]
+}
+
+export interface ImageWidgetConfig extends WidgetConfig {
+    attributeRefs: AttributeRef[];
+    markers: ImageAssetMarker[];
+    showTimestampControls: boolean;
+    imagePath: string;
+}
+
+function getDefaultWidgetConfig(): ImageWidgetConfig {
+    return {
+        attributeRefs: [],
+        showTimestampControls: false,
+        imagePath: '',
+        markers: [],
+    };
+}
+
+@customElement("image-widget")
+export class ImageWidget extends OrAssetWidget {
+
+    // Override of widgetConfig with extended type
+    protected readonly widgetConfig!: ImageWidgetConfig;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Image",
+            displayIcon: "file-image-marker",
+            minColumnWidth: 1,
+            minColumnHeight: 1,
+            getContentHtml(config: ImageWidgetConfig): OrWidget {
+                return new ImageWidget(config);
+            },
+            getSettingsHtml(config: ImageWidgetConfig): WidgetSettings {
+                return new ImageSettings(config);
+            },
+            getDefaultConfig(): ImageWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    public refreshContent(force: boolean) {
+        this.loadAssets();
+    }
+
+    static get styles(): CSSResult[] {
+        return [...super.styles, styling];
+    }
+
+    updated(changedProps: PropertyValues) {
+
+        if(changedProps.has('widgetConfig') && this.widgetConfig) {
+            const attributeRefs = this.widgetConfig.attributeRefs;
+            const missingAssets = attributeRefs?.filter((attrRef: AttributeRef) => !this.isAttributeRefLoaded(attrRef));
+            if (missingAssets.length > 0) {
+                this.loadAssets();
+            }
+        }
+    }
+
+    protected loadAssets() {
+        this.fetchAssets(this.widgetConfig.attributeRefs).then(assets => {
+            this.loadedAssets = assets!;
+            this.assetAttributes = this.widgetConfig.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>][];
+        });
+    }
+
+    // method to render and update the markers on the image
+    protected handleMarkerPlacement(config: ImageWidgetConfig) {
+        if (this.assetAttributes.length && config.attributeRefs.length > 0) {
+
+            if(config.markers.length === 0) {
+                console.error("No markers found!");
+                return [];
+            }
+            return config.attributeRefs.map((attributeRef, index) => {
+                const marker = config.markers.find(m => m.attributeRef.id === attributeRef.id && m.attributeRef.name === attributeRef.name);
+                const asset = this.loadedAssets.find(a => a.id === attributeRef.id);
+                let value: string | undefined;
+                const styles: any = {
+                    "left": `${marker!.coordinates[0]}%`,
+                    "top": `${marker!.coordinates[1]}%`
+                };
+                if(asset) {
+                    const attribute = asset.attributes![attributeRef.name!];
+                    const descriptors = AssetModelUtil.getAttributeAndValueDescriptors(asset.type, attributeRef.name, attribute);
+                    value = Util.getAttributeValueAsString(attribute, descriptors[0], asset.type, true, "-");
+                    if(attribute?.type === WellknownValueTypes.COLOURRGB && value !== "-") {
+                        styles.backgroundColor = value;
+                        styles.minHeight = "21px";
+                        styles.minWidth = "13px";
+                        value = undefined;
+                    }
+                }
+                return html`
+                    <span id="overlay" style="${styleMap(styles)}">
+                        ${value}
+                    </span>
+                `;
+            });
+        }
+    }
+
+    protected render(): TemplateResult {
+        const imagePath = this.widgetConfig.imagePath;
+        return html`
+            <div id="img-wrapper">
+                ${when(imagePath, () => html`
+                    <div id="img-container">
+                        <img id="img-content" src="${imagePath}" alt=""/>
+                        <div>
+                            ${this.handleMarkerPlacement(this.widgetConfig)}
+                        </div>
+                    </div>
+                `, () => html`
+                    <span><or-translate value="dashboard.noImageSelected"></or-translate></span>
+                `)}
+            </div>
+        `;
+    }
+
+}

package/src/widgets/kpi-widget.ts

@@ -0,0 +1,97 @@
+import { customElement } from "lit/decorators.js";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import {OrWidget, WidgetManifest} from "../util/or-widget";
+import {WidgetSettings} from "../util/widget-settings";
+import {WidgetConfig} from "../util/widget-config";
+import {Attribute, AttributeRef} from "@openremote/model";
+import {html, TemplateResult } from "lit";
+import {KpiSettings} from "../settings/kpi-settings";
+import "@openremote/or-attribute-card";
+
+export interface KpiWidgetConfig extends WidgetConfig {
+    attributeRefs: AttributeRef[];
+    period?: 'year' | 'month' | 'week' | 'day' | 'hour';
+    decimals: number;
+    deltaFormat: "absolute" | "percentage";
+    showTimestampControls: boolean;
+}
+
+function getDefaultWidgetConfig(): KpiWidgetConfig {
+    return {
+        attributeRefs: [],
+        period: "day",
+        decimals: 0,
+        deltaFormat: "absolute",
+        showTimestampControls: false
+    };
+}
+
+@customElement("kpi-widget")
+export class KpiWidget extends OrAssetWidget {
+
+    protected widgetConfig!: KpiWidgetConfig;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "KPI",
+            displayIcon: "label",
+            minColumnWidth: 1,
+            minColumnHeight: 1,
+            getContentHtml(config: KpiWidgetConfig): OrWidget {
+                return new KpiWidget(config);
+            },
+            getSettingsHtml(config: KpiWidgetConfig): WidgetSettings {
+                return new KpiSettings(config);
+            },
+            getDefaultConfig(): KpiWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    refreshContent(force: boolean): void {
+        this.loadAssets(this.widgetConfig.attributeRefs);
+    }
+
+    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`
+            <div style="height: 100%; overflow: hidden;">
+                <or-attribute-card .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .period="${this.widgetConfig.period}"
+                                   .deltaFormat="${this.widgetConfig.deltaFormat}" .mainValueDecimals="${this.widgetConfig.decimals}"
+                                   showControls="${this.widgetConfig?.showTimestampControls}" showTitle="${false}" style="height: 100%;">
+                </or-attribute-card>
+            </div>
+        `;
+    }
+
+}

package/src/widgets/map-widget.ts

@@ -0,0 +1,187 @@
+import {html, PropertyValues, TemplateResult} from "lit";
+import {customElement} from "lit/decorators.js";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import {OrWidget, WidgetManifest} from "../util/or-widget";
+import {WidgetSettings} from "../util/widget-settings";
+import {MapSettings} from "../settings/map-settings";
+import {WidgetConfig} from "../util/widget-config";
+import {Asset, AssetDescriptor, Attribute, AttributeRef, GeoJSONPoint, WellknownAttributes, WellknownMetaItems} from "@openremote/model";
+import {
+    LngLatLike,
+    AttributeMarkerColours,
+    RangeAttributeMarkerColours,
+    AttributeMarkerColoursRange,
+    MapMarkerColours, MapMarkerAssetConfig,
+} from "@openremote/or-map";
+import {when} from "lit/directives/when.js";
+import manager, {Util} from "@openremote/core";
+import { showSnackbar } from "@openremote/or-mwc-components/or-mwc-snackbar";
+import "@openremote/or-map";
+
+export interface MapWidgetConfig extends WidgetConfig {
+    // General values
+    attributeRefs: AttributeRef[];
+    // Map related values
+    zoom?: number,
+    center?: LngLatLike,
+    lat?: number,
+    lng?: number,
+    // Map marker related values
+    showLabels: boolean,
+    showUnits: boolean,
+    showGeoJson: boolean,
+    boolColors: MapMarkerColours,
+    textColors: [string, string][],
+    // Threshold related values
+    thresholds: [number, string][],
+    min?: number,
+    max?: number,
+    // Asset type related values
+    assetType?: string,
+    valueType?: string,
+    attributeName?: string,
+    assetTypes: AssetDescriptor[],
+    assetIds: string[],
+    attributes: string[],
+}
+
+function getDefaultWidgetConfig(): MapWidgetConfig {
+    return {
+        attributeRefs: [],
+        showLabels: false,
+        showUnits: false,
+        showGeoJson: true,
+        boolColors: {type: 'boolean', 'false': '#ef5350', 'true': '#4caf50'},
+        textColors: [['example', '4caf50'], ['example2', 'ef5350']],
+        thresholds: [[0, "#4caf50"], [75, "#ff9800"], [90, "#ef5350"]],
+        assetTypes: [],
+        assetType: undefined,
+        assetIds: [],
+        attributes: [],
+    } as MapWidgetConfig;
+}
+
+@customElement("map-widget")
+export class MapWidget extends OrAssetWidget {
+
+    protected widgetConfig!: MapWidgetConfig
+
+    private markers: MapMarkerAssetConfig = {};
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Map",
+            displayIcon: "map",
+            minColumnWidth: 2,
+            minColumnHeight: 2,
+            getContentHtml(config: MapWidgetConfig): OrWidget {
+                return new MapWidget(config);
+            },
+            getSettingsHtml(config: MapWidgetConfig): WidgetSettings {
+                return new MapSettings(config);
+            },
+            getDefaultConfig(): MapWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    refreshContent(force: boolean): void {
+        this.loadAssets();
+    }
+
+    protected updated(changedProps: PropertyValues) {
+        if(changedProps.has('widgetConfig') && this.widgetConfig) {
+            this.loadAssets();
+        }
+    }
+
+    protected async loadAssets() {
+        if(this.widgetConfig.assetType && this.widgetConfig.attributeName) {
+            this.fetchAssetsByType([this.widgetConfig.assetType], this.widgetConfig.attributeName).then((assets) => {
+                this.loadedAssets = assets;
+            });
+        }
+    }
+
+    protected async fetchAssetsByType(assetTypes: string[], attributeName: string) {
+        let assets: Asset[] = [];
+        await manager.rest.api.AssetResource.queryAssets({
+            realm: {
+                name: manager.displayRealm
+            },
+            select: {
+                attributes: [attributeName, 'location']
+            },
+            types: assetTypes,
+
+        }).then(response => {
+            assets = response.data;
+            this.markers = {};
+        }).catch((reason) => {
+            console.error(reason);
+            showSnackbar(undefined, "errorOccurred");
+        });
+        return assets;
+    }
+
+
+    protected render(): TemplateResult {
+        return html`
+            <div style="height: 100%; display: flex; flex-direction: column; overflow: hidden;">
+                <or-map id="miniMap" class="or-map" .zoom="${this.widgetConfig.zoom}" .center="${this.widgetConfig.center}" .showGeoJson="${this.widgetConfig.showGeoJson}" style="flex: 1;">
+                    ${when(this.loadedAssets, () => {
+                        return this.getMarkerTemplates();
+                    })}
+                </or-map>
+            </div>
+        `;
+    }
+
+    protected getMarkerTemplates(): TemplateResult[] {
+        return this.loadedAssets.filter((asset: Asset) => {
+            if (!asset.attributes) {
+                return false;
+            }
+            const attr = asset.attributes[WellknownAttributes.LOCATION] as Attribute<GeoJSONPoint>;
+            return !attr || !attr.meta || !attr.meta.hasOwnProperty(WellknownMetaItems.SHOWONDASHBOARD) || !!Util.getMetaValue(WellknownMetaItems.SHOWONDASHBOARD, attr);
+        }).map(asset => {
+            if (this.markers) {
+                // Configure map marker asset settings
+                this.markers[asset.type!] = {attributeName: this.widgetConfig.attributeName!};
+                this.markers[asset.type!].showUnits = this.widgetConfig.showUnits;
+                this.markers[asset.type!].showLabel = this.widgetConfig.showLabels;
+                if (this.widgetConfig.valueType == 'boolean') {
+                    (this.widgetConfig.boolColors as any).true = (this.widgetConfig.boolColors as any).true.replace("#", "");
+                    (this.widgetConfig.boolColors as any).false = (this.widgetConfig.boolColors as any).false.replace("#", "");
+                    this.markers[asset.type!].colours = this.widgetConfig.boolColors;
+                } else if (this.widgetConfig.valueType == 'text') {
+                    var colors: AttributeMarkerColours = {type: 'string',};
+                    (this.widgetConfig.textColors as [string, string][]).map((threshold) => {
+                        colors[threshold[0] as string] = (threshold[1] as string).replace('#', '');
+                    })
+                    this.markers[asset.type!].colours = colors;
+                } else {
+                    var ranges: AttributeMarkerColoursRange[] = [];
+                    (this.widgetConfig.thresholds as [number, string][]).sort((x, y) => (x[0] > y[0]) ? -1 : 1).map((threshold, index) => {
+                        var range: AttributeMarkerColoursRange = {
+                            min: threshold[0],
+                            colour: threshold[1].replace('#', '')
+                        }
+                        ranges.push(range);
+                    })
+                    var colorsNum: RangeAttributeMarkerColours = {
+                        type: 'range',
+                        ranges: ranges
+                    };
+                    this.markers[asset.type!].colours = colorsNum;
+                }
+            }
+            return html`
+                <or-map-marker-asset .asset="${asset}" .config="${this.markers}"></or-map-marker-asset>
+            `
+        })
+    }
+
+
+}

package/src/widgets/table-widget.ts

@@ -0,0 +1,157 @@
+import {css, html, PropertyValues, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import {OrAssetWidget} from "../util/or-asset-widget";
+import {WidgetManifest} from "../util/or-widget";
+import {WidgetConfig} from "../util/widget-config";
+import {WidgetSettings} from "../util/widget-settings";
+import {TableSettings} from "../settings/table-settings";
+import {OrMwcTableRowClickEvent, TableColumn, TableRow, TableConfig} from "@openremote/or-mwc-components/or-mwc-table";
+import {i18next} from "@openremote/or-translate";
+import {Util} from "@openremote/core";
+import {Asset, AssetModelUtil} from "@openremote/model";
+import "@openremote/or-mwc-components/or-mwc-table";
+
+export interface TableWidgetConfig extends WidgetConfig {
+    assetType?: string
+    assetIds: string[]
+    attributeNames: string[],
+    tableSize: number,
+    tableOptions: number[]
+}
+
+function getDefaultConfig(): TableWidgetConfig {
+    return {
+        assetType: undefined,
+        assetIds: [],
+        attributeNames: [],
+        tableSize: 10,
+        tableOptions: [10, 25, 100]
+    }
+}
+
+const styling = css`
+    #widget-wrapper {
+      height: 100%;
+      overflow: hidden;
+    }
+`
+
+@customElement("table-widget")
+export class TableWidget extends OrAssetWidget {
+
+    protected widgetConfig!: TableWidgetConfig;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Table",
+            displayIcon: "table",
+            getContentHtml(config: WidgetConfig): OrAssetWidget {
+                return new TableWidget(config);
+            },
+            getDefaultConfig(): WidgetConfig {
+                return getDefaultConfig();
+            },
+            getSettingsHtml(config: WidgetConfig): WidgetSettings {
+                return new TableSettings(config);
+            }
+
+        }
+    }
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    // TODO: Improve this to be more efficient
+    refreshContent(force: boolean): void {
+        this.widgetConfig = JSON.parse(JSON.stringify(this.widgetConfig)) as TableWidgetConfig;
+    }
+
+    // Lit Lifecycle
+    protected willUpdate(changedProps: PropertyValues) {
+        if(changedProps.has('widgetConfig') && this.widgetConfig) {
+            this.loadAssets();
+        }
+
+        return super.willUpdate(changedProps);
+    }
+
+
+    /* --------------------------------------- */
+
+    protected loadAssets() {
+        if(this.widgetConfig.assetIds.find(id => !this.isAssetLoaded(id))) {
+           this.queryAssets({
+               ids: this.widgetConfig.assetIds,
+               select: {
+                   attributes: this.widgetConfig.attributeNames
+               }
+           }).then((assets) => {
+               this.loadedAssets = assets;
+           })
+        }
+    }
+
+    protected getColumns(attributeNames: string[]): TableColumn[] {
+        const referenceAsset: Asset | undefined = this.loadedAssets[0];
+        const attrColumns = attributeNames.map(attrName => {
+            let text = attrName;
+            let numeric = false;
+            if(this.widgetConfig.assetType && referenceAsset && referenceAsset.attributes && referenceAsset.attributes[attrName]) {
+                const attributeDescriptor = AssetModelUtil.getAttributeDescriptor(attrName, this.widgetConfig.assetType);
+                text = Util.getAttributeLabel(referenceAsset.attributes[attrName], attributeDescriptor, this.widgetConfig.assetType, true);
+                numeric = attributeDescriptor?.format?.asNumber || attributeDescriptor?.format?.asSlider || false;
+            }
+            return {
+                title: text,
+                isSortable: true,
+                isNumeric: numeric
+            } as TableColumn;
+        });
+        return Array.of({ title: i18next.t('assetName'), isSortable: true }, ...attrColumns);
+    }
+
+    protected getRows(attributeNames: string[]): TableRow[] {
+        return this.loadedAssets.map(asset => {
+            const attrEntries = attributeNames.map(attrName => {
+                if(asset.attributes && asset.attributes[attrName]) {
+                    const attributeDescriptor = AssetModelUtil.getAttributeDescriptor(attrName, asset.type!);
+                    const strValue = Util.getAttributeValueAsString(asset.attributes[attrName], attributeDescriptor, asset.type, false);
+                    const numValue = parseFloat(strValue);
+                    return isNaN(numValue) ? strValue : numValue;
+                } else {
+                    return 'N.A.'
+                }
+            })
+            const content: any[] = Array.of(asset.name!, ...attrEntries);
+            return {
+                content: content
+            };
+        })
+    }
+
+    protected render(): TemplateResult {
+        const tableConfig: any = {
+            fullHeight: true,
+            pagination: {
+                enable: true,
+                options: this.widgetConfig.tableOptions,
+            }
+        } as TableConfig
+        const columns: TableColumn[] = this.getColumns(this.widgetConfig.attributeNames);
+        const rows: TableRow[] = this.getRows(this.widgetConfig.attributeNames);
+        return html`
+            <div id="widget-wrapper">
+                <or-mwc-table .columns="${columns}" .rows="${rows}" .config="${tableConfig}" .paginationSize="${this.widgetConfig.tableSize}"
+                              @or-mwc-table-row-click="${(ev: OrMwcTableRowClickEvent) => this.onTableRowClick(ev)}"
+                ></or-mwc-table>
+            </div>
+        `;
+    }
+
+    protected onTableRowClick(ev: OrMwcTableRowClickEvent) {
+
+    }
+
+
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "src"
+  },
+  "include": [
+    "./src"
+  ],
+  "references": [
+    { "path": "../core" },
+    { "path": "../rest" },
+    { "path": "../model" }
+  ]
+}