@openremote/or-attribute-card 1.8.0-snapshot.20250725120001 → 1.8.0-snapshot.20250725123024

package/lib/index.js

@@ -1,865 +1,209 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { css, html, LitElement, unsafeCSS } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import i18next from "i18next";
-import { AssetModelUtil } from "@openremote/model";
-import { DefaultColor3, DefaultColor4, manager, Util } from "@openremote/core";
-import { isAxiosError } from "@openremote/rest";
-import { Chart, LineController, LineElement, PointElement, LinearScale, TimeSeriesScale, Title } from "chart.js";
-import "chartjs-adapter-moment";
-import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
-import { getAssetDescriptorIconTemplate } from "@openremote/or-icon";
-import "@openremote/or-mwc-components/or-mwc-dialog";
-import "@openremote/or-attribute-picker";
-import moment from "moment";
-import { OrAssetTreeSelectionEvent } from "@openremote/or-asset-tree";
-import { OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
-import { OrAssetAttributePicker, OrAssetAttributePickerPickedEvent } from "@openremote/or-attribute-picker";
-import { getContentWithMenuTemplate } from "@openremote/or-mwc-components/or-mwc-menu";
-import { when } from "lit/directives/when.js";
-import { debounce } from "lodash";
-Chart.register(LineController, LineElement, PointElement, LinearScale, Title, TimeSeriesScale);
-// language=CSS
-const style = css `
-    
-    :host {
-        --internal-or-attribute-history-graph-line-color: var(--or-attribute-history-graph-line-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));       
-        width: 100%;
-    }
-    
-    :host([hidden]) {
-        display: none;
-    }
-    
-    .panel {
-        position: relative;
-        height: 100%;
-    }
-    .panel.panel-empty {
-        display: flex;
-    }
-    .panel.panel-empty .panel-content-wrapper {
-        align-items: center;
-        width: 100%;
-    }
-    .panel.panel-empty .panel-content {
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-    }
-    
-    .panel-content-wrapper {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-        
-    .panel-title {
-        display: flex;
-        align-items: center;
-        /*margin: -15px -15px 0 0;*/ /* compensate for the click-space of the plusminus button */
-        font-weight: bolder;
-        line-height: 1em;
-        color: var(--internal-or-asset-viewer-title-text-color);
-        flex: 0 0 auto;
-    }
-    
-    .panel-title-text {
-        flex: 1;
-        text-transform: uppercase;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    
-    .panel-content {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        flex: 1;
-    }
-    
-    .mainvalue-wrapper {
-        width: 100%;
-        display: flex;
-        flex: 0 0 60px;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .graph-wrapper {
-        width: 100%;
-        display: flex;
-        flex: 1;
-        align-items: center;
-    }
-    
-    .main-number {   
-        color: var(--internal-or-asset-viewer-title-text-color);
-        font-size: 42px;
-    }
-    
-    .main-number-icon {   
-        font-size: 24px;
-        margin-right: 10px;
-        display: flex;
-    }
-    
-    .main-number-unit {
-        font-size: 42px;
-        color: var(--internal-or-asset-viewer-title-text-color);
-        font-weight: 200;
-        margin-left: 5px;
-    }
-    
-    .main-number.xs, .main-number-unit.xs {
-        font-size: 18px;
-    }
-    .main-number.s, .main-number-unit.s {
-        font-size: 24px;
-    }
-    .main-number.m, .main-number-unit.m {
-        font-size: 30px;
-    }
-    .main-number.l, .main-number-unit.l {
-        font-size: 36px;
-    }
-    .main-number.xl, .main-number-unit.xl {
-        font-size: 42px;
-    }
-    
-    .chart-wrapper {
-        flex: 1 1 auto;
-        width: 65%;
-        height: 75%;
-    }
-    .controls-wrapper {
-        flex: 0 0 80px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: end;
-        place-content: space-between;
-    }
-    
-    .delta-wrapper {
-        /*flex: 0 0 50px;*/
-        text-align: right;
-        
-        /*position: absolute;*/
-        /*right: var(--internal-or-asset-viewer-panel-padding);*/
-    }
-    
-    .date-range-wrapper {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-    }
-    
-    .period-selector {
-        
-    }
-    
-    .delta {
-        color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-        font-weight: bold;
-    }
-`;
-let OrAttributeCard = class OrAttributeCard extends LitElement {
-    static get styles() {
-        return [
-            style
-        ];
-    }
-    constructor() {
-        super();
-        this.assets = [];
-        this.assetAttributes = [];
-        this.data = undefined;
-        this.mainValueDecimals = 2;
-        this.mainValueSize = "m";
-        this.delta = undefined;
-        this.deltaPlus = "";
-        this.deltaFormat = "absolute";
-        this.showControls = true;
-        this.hideAttributePicker = false;
-        this.showTitle = true;
-        this._loading = false;
-        this.period = "day";
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._style = window.getComputedStyle(this);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._cleanup();
-    }
-    firstUpdated() {
-        this.loadSettings();
-    }
-    updated(changedProperties) {
-        if (changedProperties.has("realm") && changedProperties.get("realm") != undefined) {
-            this.assets = [];
-            this.loadSettings();
-        }
-        const reloadData = changedProperties.has("period") || changedProperties.has("compareTimestamp")
-            || changedProperties.has("timestamp") || changedProperties.has("assetAttributes") || changedProperties.has("realm");
-        if (reloadData) {
-            this.data = undefined;
-            if (this._chart) {
-                this._chart.destroy();
-                this._chart = undefined;
-            }
-            this.loadData();
-        }
-        if (!this.data || this.data.length === 0) {
-            return;
-        }
-        if (!this._chart) {
-            this._chart = new Chart(this._chartElem.getContext("2d"), {
-                type: "line",
-                data: {
-                    datasets: [
-                        {
-                            data: this.data.filter(value => value.y != null),
-                            tension: 0.1,
-                            spanGaps: true,
-                            backgroundColor: "transparent",
-                            borderColor: this._style.getPropertyValue("--internal-or-attribute-history-graph-line-color"),
-                            pointBorderColor: "transparent",
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false
-                        },
-                        tooltip: {
-                            displayColors: false,
-                            callbacks: {
-                                title: (context) => {
-                                    return "";
-                                },
-                                // label: (context) => {
-                                //     return context.parsed.y; // Removes the colon before the label
-                                // },
-                                footer: () => {
-                                    return ""; // Hack the broken vertical alignment of body with footerFontSize: 0
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        y: {
-                            display: false
-                        },
-                        x: {
-                            type: "time",
-                            min: this._startOfPeriod,
-                            max: this._endOfPeriod,
-                            display: false,
-                        }
-                    }
-                }
-            });
-        }
-        else {
-            if (changedProperties.has("data")) {
-                this._chart.data.datasets[0].data = this.data.filter(value => value.y != null);
-                this._chart.update();
-                this.delta = this.getFormattedDelta(this.getFirstKnownMeasurement(this.data), this.getLastKnownMeasurement(this.data));
-            }
-        }
-        if (changedProperties.has("mainValue") || changedProperties.has("mainValueDecimals")) {
-            this.formattedMainValue = this.getFormattedValue(this.mainValue);
-        }
-        if (changedProperties.has("delta")) {
-            this.deltaPlus = this.delta && this.delta.val > 0 ? "+" : "";
-        }
-    }
-    shouldHideAttributePicker() {
-        return (this.hideAttributePicker && this.hideAttributePicker.toString() == "true");
-    }
-    shouldShowControls() {
-        return (this.showControls && this.showControls.toString() == "true");
-    }
-    shouldShowTitle() {
-        return (this.showTitle && this.showTitle.toString() == "true");
-    }
-    render() {
-        if (!this._error && (!this.assets || !this.assetAttributes || this.assetAttributes.length === 0)) {
-            return html `
-                <div class="panel panel-empty">
-                    <div class="panel-content-wrapper">
-                        <div class="panel-content">
-                            ${!this.shouldHideAttributePicker() ? html `
-                                <or-mwc-input class="button" .type="${InputType.BUTTON}" label="selectAttribute" icon="plus" @or-mwc-input-changed="${() => this._openDialog("editAttribute")}"></or-mwc-input>
-                            ` : html `
-                                <span style="text-align: center;">${i18next.t('noAttributeConnected')}</span>
-                            `}
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-        this.updateComplete.then(() => {
-            this.resizeObserver = new ResizeObserver(debounce((entries) => {
-                const elemSize = entries[0].devicePixelContentBoxSize[0].inlineSize;
-                this.setLabelSizeByWidth(elemSize);
-            }, 200));
-            this.resizeObserver.observe(this.shadowRoot.querySelector(".graph-wrapper"));
-        });
-        return html `
-            <div class="panel" id="attribute-card">
-                <div class="panel-content-wrapper">
-                    <div class="panel-title">
-                        ${this.shouldShowTitle() ? html `<span class="panel-title-text">${this.assets[0].name + " - " + i18next.t(this.assetAttributes[0][1].name)}</span>` : undefined}
-                        ${this.shouldShowTitle() ? getContentWithMenuTemplate(html `
-                            <or-mwc-input icon="dots-vertical" type="button"></or-mwc-input>
-                        `, [
-            {
-                text: i18next.t("editAttribute"),
-                value: "editAttribute"
-            },
-            {
-                text: i18next.t("editDelta"),
-                value: "editDelta"
-            },
-            {
-                text: i18next.t("editCurrentValue"),
-                value: "editCurrentValue"
-            },
-            {
-                text: i18next.t("delete"),
-                value: "delete"
-            }
-        ], undefined, (option) => this.handleMenuSelect(option)) : undefined}
-                    </div>
-                    <div class="panel-content">
-                        <div class="mainvalue-wrapper">
-                            ${when(!this._loading, () => html `
-                                <span class="main-number-icon">${this.assets && this.assets.length === 1 ? getAssetDescriptorIconTemplate(AssetModelUtil.getAssetDescriptor(this.assets[0].type)) : ""}</span>
-                                <span class="main-number ${this.mainValueSize}">${this.formattedMainValue ? this.formattedMainValue.value : ""}</span>
-                                <span class="main-number-unit ${this.mainValueSize}">${this.formattedMainValue ? this.formattedMainValue.unit : ""}</span>      
-                            `)}
-                        </div>
-                        <div class="graph-wrapper">
-                            
-                            ${when(this._error, () => html `
-                                <div style="flex: 0 0 80px;"></div>
-                                <or-translate .value="${this._error}" style="flex: 1; text-align: center;"></or-translate>
-                            `, () => html `
-                                <div class="chart-wrapper">
-                                    ${when(this._loading, () => html `
-                                        <or-loading-indicator></or-loading-indicator>
-                                    `, () => html `
-                                        <canvas id="chart"></canvas>
-                                    `)}
-                                </div>
-                            `)}
-
-                            <div class="controls-wrapper">
-                                <div class="delta-wrapper">
-                                    <span class="delta">${this.delta ? this.deltaPlus + (this.delta.val !== undefined && this.delta.val !== null ? this.delta.val : "") + (this.delta.unit || "") : ""}</span>
-                                </div>
-                                ${this.shouldShowControls() ? html `
-                                    <div class="period-selector-wrapper">
-                                        ${getContentWithMenuTemplate(html `<or-mwc-input class="period-selector" .type="${InputType.BUTTON}" label="${this.period ? this.period : '-'}"></or-mwc-input>`, [{ value: "hour", text: "hour" }, { value: "day", text: "day" }, { value: "week", text: "week" }, { value: "month", text: "month" }, { value: "year", text: "year" }].map((option) => {
-            option.text = i18next.t(option.value);
-            return option;
-        }), this.period, (value) => this._setPeriodOption(value), undefined, // closedCallback
-        false, // multiSelect
-        true, // translateValues
-        false, // midHeight
-        false, // fullWidth
-        "kpi-menu-id", // Menu Id
-        true // fixToHost
-        )}
-                                    </div>
-                                ` : html `
-                                    <or-mwc-input class="period-selector" .type="${InputType.BUTTON}" disabled .label="${i18next.t(this.period ? this.period : "-")}"></or-mwc-input>
-                                `}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-    }
-    _openDialog(dialogContent) {
-        let dialog;
-        switch (dialogContent) {
-            case "editDelta":
-            case "editCurrentValue":
-                dialog = new OrMwcDialog()
-                    .setHeading(i18next.t(dialogContent))
-                    .setDismissAction(null)
-                    .setContent(dialogContent === "editDelta"
-                    ? html `
-                                <or-mwc-input id="delta-mode-picker" value="${this.deltaFormat}" @or-mwc-input-changed="${(evt) => { this.deltaFormat = evt.detail.value; this.saveSettings(); }}" .type="${InputType.LIST}" .options="${[
-                        ["percentage", "Percentage"],
-                        ["absolute", "Absolute"]
-                    ]}"></or-mwc-input>                
-                            `
-                    : html `
-                                <or-mwc-input id="current-value-decimals" .label="${i18next.t("decimals")}" value="${this.mainValueDecimals}" .type="${InputType.TEXT}"></or-mwc-input>
-                            `)
-                    .setActions([
-                    {
-                        actionName: "cancel",
-                        content: html `<or-mwc-input class="button" .type="${InputType.BUTTON}" label="cancel"></or-mwc-input>`,
-                        action: () => {
-                            // Nothing to do here
-                        }
-                    },
-                    {
-                        actionName: "yes",
-                        default: true,
-                        content: html `<or-mwc-input class="button" .type="${InputType.BUTTON}" label="ok" data-mdc-dialog-action="yes"></or-mwc-input>`,
-                        action: () => {
-                            if (dialogContent === "editDelta") {
-                                this.delta = this.data ? this.getFormattedDelta(this.getFirstKnownMeasurement(this.data), this.getLastKnownMeasurement(this.data)) : undefined;
-                            }
-                            else {
-                                if (dialog && dialog.shadowRoot && dialog.shadowRoot.getElementById("current-value-decimals")) {
-                                    const elm = dialog.shadowRoot.getElementById("current-value-decimals");
-                                    const input = parseInt(elm.value, 10);
-                                    if (input < 0) {
-                                        this.mainValueDecimals = 0;
-                                    }
-                                    else if (input > 10) {
-                                        this.mainValueDecimals = 10;
-                                    }
-                                    else {
-                                        this.mainValueDecimals = input;
-                                    }
-                                    this.formattedMainValue = this.getFormattedValue(this.mainValue);
-                                    this.saveSettings();
-                                }
-                            }
-                        }
-                    }
-                ]);
-                dialog.addEventListener(OrAssetTreeSelectionEvent.NAME, (ev) => __awaiter(this, void 0, void 0, function* () {
-                    const selectedNode = ev.detail && ev.detail.newNodes.length > 0 ? ev.detail.newNodes[0] : undefined;
-                    if (!selectedNode) {
-                        this.asset = undefined;
-                    }
-                    else {
-                        // fully load the asset
-                        const assetEvent = yield manager.events.sendEventWithReply({
-                            eventType: "read-asset",
-                            assetId: selectedNode.asset.id
-                        });
-                        this.asset = assetEvent.asset;
-                    }
-                }));
-                break;
-            default:
-                dialog = new OrAssetAttributePicker()
-                    .setHeading(i18next.t("selectAttribute"));
-                dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, (ev) => __awaiter(this, void 0, void 0, function* () {
-                    // handle selected attrs
-                    const attrRef = ev.detail[0];
-                    try {
-                        const response = yield manager.rest.api.AssetResource.get(attrRef.id);
-                        this.asset = response.data;
-                        this._setAttribute(attrRef.name);
-                    }
-                    catch (e) {
-                        console.error("Failed to get assets requested in settings", e);
-                    }
-                }));
-                break;
-        }
-        if (dialog) {
-            showDialog(dialog);
-        }
-    }
-    _setAttribute(attributeName) {
-        if (this.asset && attributeName) {
-            const attr = this.asset.attributes ? this.asset.attributes[attributeName] : undefined;
-            this.assets = [this.asset];
-            this.assetAttributes = attr ? [[0, attr]] : [];
-            this.saveSettings();
-        }
-    }
-    _cleanup() {
-        if (this._chart) {
-            this._chart.destroy();
-            this._chart = undefined;
-        }
-    }
-    loadSettings() {
-        return __awaiter(this, arguments, void 0, function* (reset = false) {
-            this.assetAttributes = [];
-            if (!this.period || reset) {
-                this.period = "day";
-            }
-            if (!this.deltaFormat || reset) {
-                this.deltaFormat = "absolute";
-            }
-            if (!this.mainValueDecimals || reset) {
-                this.mainValueDecimals = 0;
-            }
-            if (!this.realm) {
-                this.realm = manager.getRealm();
-            }
-            let allConfigs = (yield manager.console.retrieveData("OrChartConfig")) || [];
-            if (!Array.isArray(allConfigs)) {
-                allConfigs = [allConfigs];
-            }
-            if (allConfigs.length === 0 || !this.panelName) {
-                return;
-            }
-            const viewSelector = window.location.hash;
-            let config = allConfigs.find(e => e.realm === this.realm);
-            const view = config && config.views && config.views[viewSelector] ? config.views[viewSelector][this.panelName] : undefined;
-            if (!view) {
-                return;
-            }
-            if (!view.attributeRefs) {
-                // Old/invalid config format remove it
-                delete config.views[viewSelector][this.panelName];
-                const cleanData = [...allConfigs.filter(e => e.realm !== this.realm), config];
-                manager.console.storeData("OrChartConfig", cleanData);
-                return;
-            }
-            const assetIds = view.attributeRefs.map((attrRef) => attrRef.id);
-            if (assetIds.length === 0) {
-                return;
-            }
-            this._loading = true;
-            if (!assetIds.every(id => !!this.assets.find(asset => asset.id === id))) {
-                const query = {
-                    ids: assetIds
-                };
-                try {
-                    const response = yield manager.rest.api.AssetResource.queryAssets(query);
-                    const assets = response.data || [];
-                    view.attributeRefs = view.attributeRefs.filter((attrRef) => !!assets.find((asset) => asset.id === attrRef.id && asset.attributes && asset.attributes.hasOwnProperty(attrRef.name)));
-                    allConfigs = [...allConfigs.filter(e => e.realm !== this.realm), config];
-                    manager.console.storeData("OrChartConfig", allConfigs);
-                    this.assets = assets.filter((asset) => view.attributeRefs.find((attrRef) => attrRef.id === asset.id));
-                }
-                catch (e) {
-                    console.error("Failed to get assets requested in settings", e);
-                }
-                this._loading = false;
-                if (this.assets && this.assets.length > 0) {
-                    this.assetAttributes = view.attributeRefs.map((attrRef) => {
-                        const assetIndex = this.assets.findIndex((asset) => asset.id === attrRef.id);
-                        const asset = assetIndex >= 0 ? this.assets[assetIndex] : undefined;
-                        return asset && asset.attributes ? [assetIndex, asset.attributes[attrRef.name]] : undefined;
-                    }).filter((indexAndAttr) => !!indexAndAttr);
-                    this.period = view.period || "day";
-                    this.mainValueDecimals = view.decimals || 0;
-                    this.deltaFormat = view.deltaFormat || "absolute";
-                }
-            }
-        });
-    }
-    saveSettings() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.panelName) {
-                return;
-            }
-            const viewSelector = window.location.hash;
-            let allConfigs = (yield manager.console.retrieveData("OrChartConfig")) || [];
-            let config = allConfigs.find(e => e.realm === this.realm);
-            if (!config) {
-                config = {
-                    realm: this.realm,
-                    views: {}
-                };
-            }
-            if (!config.views[viewSelector]) {
-                config.views[viewSelector] = {};
-            }
-            if (!this.assets || !this.assetAttributes || this.assets.length === 0 || this.assetAttributes.length === 0) {
-                delete config.views[viewSelector][this.panelName];
-            }
-            else {
-                config.realm = this.realm;
-                config.views[viewSelector][this.panelName] = {
-                    attributeRefs: this.assetAttributes.map(([index, attr]) => {
-                        const asset = this.assets[index];
-                        return !!asset ? { id: asset.id, name: attr.name } : undefined;
-                    }).filter((attrRef) => !!attrRef),
-                    period: this.period,
-                    deltaFormat: this.deltaFormat,
-                    decimals: this.mainValueDecimals
-                };
-            }
-            allConfigs = [...allConfigs.filter(e => e.realm !== this.realm), config];
-            manager.console.storeData("OrChartConfig", allConfigs);
-        });
-    }
-    loadData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (this.data || !this.assetAttributes || !this.assets || this.assets.length === 0 || this.assetAttributes.length === 0 || !this.period) {
-                return;
-            }
-            // If a new requests comes in, we override it with this one using AbortController.
-            if (this._dataAbortController) {
-                this._dataAbortController.abort("Data request overridden");
-                delete this._dataAbortController;
-            }
-            this._loading = true;
-            let interval = "HOUR" /* DatapointInterval.HOUR */;
-            let stepSize = 1;
-            switch (this.period) {
-                case "hour":
-                    interval = "MINUTE" /* DatapointInterval.MINUTE */;
-                    stepSize = 5;
-                    break;
-                case "day":
-                    interval = "HOUR" /* DatapointInterval.HOUR */;
-                    stepSize = 1;
-                    break;
-                case "week":
-                    interval = "HOUR" /* DatapointInterval.HOUR */;
-                    stepSize = 6;
-                    break;
-                case "month":
-                    interval = "DAY" /* DatapointInterval.DAY */;
-                    stepSize = 1;
-                    break;
-                case "year":
-                    interval = "MONTH" /* DatapointInterval.MONTH */;
-                    stepSize = 1;
-                    break;
-            }
-            const lowerCaseInterval = interval.toLowerCase();
-            this._startOfPeriod = moment().subtract(1, this.period).toDate().getTime();
-            this._endOfPeriod = moment().toDate().getTime();
-            const assetId = this.assets[0].id;
-            const attributeName = this.assetAttributes[0][1].name;
-            this._dataAbortController = new AbortController();
-            try {
-                const response = yield manager.rest.api.AssetDatapointResource.getDatapoints(assetId, attributeName, { type: "lttb", fromTimestamp: this._startOfPeriod, toTimestamp: this._endOfPeriod, amountOfPoints: 20 }, { signal: this._dataAbortController.signal });
-                this._loading = false;
-                if (response.status === 200) {
-                    this.data = response.data;
-                    this.delta = this.getFormattedDelta(this.getFirstKnownMeasurement(this.data), this.getLastKnownMeasurement(this.data));
-                    this.deltaPlus = this.delta && this.delta.val > 0 ? "+" : "";
-                    this._error = undefined;
-                }
-            }
-            catch (ex) {
-                console.error(ex);
-                if ((ex === null || ex === void 0 ? void 0 : ex.message) === "canceled") {
-                    return; // If request has been canceled (using AbortController); return, and prevent _loading is set to false.
-                }
-                this._loading = false;
-                if (isAxiosError(ex)) {
-                    if (ex.message.includes("timeout")) {
-                        this._error = "noAttributeDataTimeout";
-                        return;
-                    }
-                    else if (((_a = ex.response) === null || _a === void 0 ? void 0 : _a.status) === 413) {
-                        this._error = "datapointRequestTooLarge";
-                        return;
-                    }
-                }
-                this._error = "couldNotRetrieveAttribute";
-            }
-            finally {
-                // Finally, request the current value through WS request/response
-                this.mainValue = undefined;
-                this.formattedMainValue = undefined;
-                const currentValue = yield manager.events.sendEventWithReply({
-                    eventType: "read-asset-attribute",
-                    ref: {
-                        id: assetId,
-                        name: attributeName
-                    }
-                });
-                this.mainValue = currentValue.value;
-                this.formattedMainValue = this.getFormattedValue(this.mainValue);
-            }
-        });
-    }
-    getTotalValue(data) {
-        return data.reduce((acc, val) => {
-            return val.y ? acc + Math.round(val.y) : acc;
-        }, 0);
-    }
-    getHighestValue(data) {
-        return Math.max.apply(Math, data.map((e) => e.y || false));
-    }
-    getFormattedValue(value) {
-        if (value === undefined || !this.assets || !this.assetAttributes || this.assets.length === 0 || this.assetAttributes.length === 0) {
-            return;
-        }
-        const attr = this.assetAttributes[0][1];
-        const roundedVal = +(value === null || value === void 0 ? void 0 : value.toFixed(this.mainValueDecimals)); // + operator prevents str return
-        const attributeDescriptor = AssetModelUtil.getAttributeDescriptor(attr.name, this.assets[0].type);
-        const units = Util.resolveUnits(Util.getAttributeUnits(attr, attributeDescriptor, this.assets[0].type));
-        this.setLabelSizeByLength(roundedVal.toString());
-        if (!units) {
-            return { value: roundedVal, unit: "" };
-        }
-        return {
-            value: roundedVal,
-            unit: units
-        };
-    }
-    getFirstKnownMeasurement(data) {
-        for (let i = 0; i <= data.length; i++) {
-            if (data[i] && data[i].y !== undefined)
-                return data[i].y;
-        }
-        return 0;
-    }
-    getLastKnownMeasurement(data) {
-        for (let i = data.length - 1; i >= 0; i--) {
-            if (data[i] && data[i].y !== undefined)
-                return data[i].y;
-        }
-        return 0;
-    }
-    getFormattedDelta(firstVal, lastVal) {
-        if (this.deltaFormat === "percentage") {
-            if (firstVal && lastVal) {
-                if (lastVal === 0 && firstVal === 0) {
-                    return { val: 0, unit: "%" };
-                }
-                else if (lastVal === 0 && firstVal !== 0) {
-                    return { val: 100, unit: "%" };
-                }
-                else {
-                    const math = Math.round((lastVal - firstVal) / firstVal * 100);
-                    return { val: math, unit: "%" };
-                }
-            }
-            else {
-                return { val: 0, unit: "%" };
-            }
-        }
-        return { val: Math.round(lastVal - firstVal), unit: "" };
-    }
-    handleMenuSelect(value) {
-        if (value === "delete") {
-            this.assets = [];
-            this.assetAttributes = [];
-            this.saveSettings();
-        }
-        else {
-            this._openDialog(value);
-        }
-    }
-    setLabelSizeByLength(value) {
-        if (value.length >= 20) {
-            this.mainValueSize = "xs";
-        }
-        if (value.length < 20) {
-            this.mainValueSize = "s";
-        }
-        if (value.length < 15) {
-            this.mainValueSize = "m";
-        }
-        if (value.length < 10) {
-            this.mainValueSize = "l";
-        }
-        if (value.length < 5) {
-            this.mainValueSize = "xl";
-        }
-    }
-    setLabelSizeByWidth(inlineSize) {
-        if (inlineSize < 60) {
-            this.mainValueSize = "s";
-        }
-        else if (inlineSize < 100) {
-            this.mainValueSize = "m";
-        }
-        else if (inlineSize < 200) {
-            this.mainValueSize = "l";
-        }
-        else {
-            this.mainValueSize = "xl";
-        }
-    }
-    _setPeriodOption(value) {
-        this.period = value;
-        this.saveSettings();
-    }
-};
-__decorate([
-    property()
-], OrAttributeCard.prototype, "panelName", void 0);
-__decorate([
-    property({ type: Object })
-], OrAttributeCard.prototype, "assets", void 0);
-__decorate([
-    property({ type: Object })
-], OrAttributeCard.prototype, "assetAttributes", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "data", void 0);
-__decorate([
-    property({ type: String })
-], OrAttributeCard.prototype, "realm", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "mainValue", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "mainValueDecimals", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "mainValueSize", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "delta", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "deltaPlus", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "deltaFormat", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "showControls", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "hideAttributePicker", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "showTitle", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "_loading", void 0);
-__decorate([
-    property()
-], OrAttributeCard.prototype, "period", void 0);
-__decorate([
-    state()
-], OrAttributeCard.prototype, "_error", void 0);
-__decorate([
-    query("#chart")
-], OrAttributeCard.prototype, "_chartElem", void 0);
-OrAttributeCard = __decorate([
-    customElement("or-attribute-card")
-], OrAttributeCard);
-export { OrAttributeCard };
-//# sourceMappingURL=index.js.map
+var __decorate=this&&this.__decorate||function(t,e,i,a){var s,r=arguments.length,o=r<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,a);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(o=(r<3?s(o):r>3?s(e,i,o):s(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o},__awaiter=this&&this.__awaiter||function(t,e,i,a){return new(i||(i=Promise))(function(s,r){function o(t){try{l(a.next(t))}catch(t){r(t)}}function n(t){try{l(a.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?s(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(o,n)}l((a=a.apply(t,e||[])).next())})};import{css as t,html as e,LitElement as i,unsafeCSS as a}from"lit";import{customElement as s,property as r,state as o,query as n}from"lit/decorators.js";import l from"i18next";import{AssetModelUtil as d}from"@openremote/model";import{DefaultColor3 as h,DefaultColor4 as u,manager as p,Util as c}from"@openremote/core";import{isAxiosError as m}from"@openremote/rest";import{Chart as v,LineController as f,LineElement as b,PointElement as g,LinearScale as w,TimeSeriesScale as y,Title as _}from"chart.js";import"chartjs-adapter-moment";import{InputType as x}from"@openremote/or-mwc-components/or-mwc-input";import{getAssetDescriptorIconTemplate as A}from"@openremote/or-icon";import"@openremote/or-mwc-components/or-mwc-dialog";import"@openremote/or-attribute-picker";import C from"moment";import{OrAssetTreeSelectionEvent as O}from"@openremote/or-asset-tree";import{OrMwcDialog as V,showDialog as S}from"@openremote/or-mwc-components/or-mwc-dialog";import{OrAssetAttributePicker as D,OrAssetAttributePickerPickedEvent as $}from"@openremote/or-attribute-picker";import{getContentWithMenuTemplate as T}from"@openremote/or-mwc-components/or-mwc-menu";import{when as z}from"lit/directives/when.js";import{debounce as M}from"lodash";v.register(f,b,g,w,_,y);let style=t`
+    
+    :host {
+        --internal-or-attribute-history-graph-line-color: var(--or-attribute-history-graph-line-color, var(--or-app-color4, ${a(u)}));       
+        width: 100%;
+    }
+    
+    :host([hidden]) {
+        display: none;
+    }
+    
+    .panel {
+        position: relative;
+        height: 100%;
+    }
+    .panel.panel-empty {
+        display: flex;
+    }
+    .panel.panel-empty .panel-content-wrapper {
+        align-items: center;
+        width: 100%;
+    }
+    .panel.panel-empty .panel-content {
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+    
+    .panel-content-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+        
+    .panel-title {
+        display: flex;
+        align-items: center;
+        /*margin: -15px -15px 0 0;*/ /* compensate for the click-space of the plusminus button */
+        font-weight: bolder;
+        line-height: 1em;
+        color: var(--internal-or-asset-viewer-title-text-color);
+        flex: 0 0 auto;
+    }
+    
+    .panel-title-text {
+        flex: 1;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    
+    .panel-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        flex: 1;
+    }
+    
+    .mainvalue-wrapper {
+        width: 100%;
+        display: flex;
+        flex: 0 0 60px;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .graph-wrapper {
+        width: 100%;
+        display: flex;
+        flex: 1;
+        align-items: center;
+    }
+    
+    .main-number {   
+        color: var(--internal-or-asset-viewer-title-text-color);
+        font-size: 42px;
+    }
+    
+    .main-number-icon {   
+        font-size: 24px;
+        margin-right: 10px;
+        display: flex;
+    }
+    
+    .main-number-unit {
+        font-size: 42px;
+        color: var(--internal-or-asset-viewer-title-text-color);
+        font-weight: 200;
+        margin-left: 5px;
+    }
+    
+    .main-number.xs, .main-number-unit.xs {
+        font-size: 18px;
+    }
+    .main-number.s, .main-number-unit.s {
+        font-size: 24px;
+    }
+    .main-number.m, .main-number-unit.m {
+        font-size: 30px;
+    }
+    .main-number.l, .main-number-unit.l {
+        font-size: 36px;
+    }
+    .main-number.xl, .main-number-unit.xl {
+        font-size: 42px;
+    }
+    
+    .chart-wrapper {
+        flex: 1 1 auto;
+        width: 65%;
+        height: 75%;
+    }
+    .controls-wrapper {
+        flex: 0 0 80px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+        place-content: space-between;
+    }
+    
+    .delta-wrapper {
+        /*flex: 0 0 50px;*/
+        text-align: right;
+        
+        /*position: absolute;*/
+        /*right: var(--internal-or-asset-viewer-panel-padding);*/
+    }
+    
+    .date-range-wrapper {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+    }
+    
+    .period-selector {
+        
+    }
+    
+    .delta {
+        color: var(--or-app-color3, ${a(h)});
+        font-weight: bold;
+    }
+`,OrAttributeCard=class extends i{static get styles(){return[style]}constructor(){super(),this.assets=[],this.assetAttributes=[],this.data=void 0,this.mainValueDecimals=2,this.mainValueSize="m",this.delta=void 0,this.deltaPlus="",this.deltaFormat="absolute",this.showControls=!0,this.hideAttributePicker=!1,this.showTitle=!0,this._loading=!1,this.period="day"}connectedCallback(){super.connectedCallback(),this._style=window.getComputedStyle(this)}disconnectedCallback(){super.disconnectedCallback(),this._cleanup()}firstUpdated(){this.loadSettings()}updated(t){t.has("realm")&&void 0!=t.get("realm")&&(this.assets=[],this.loadSettings()),(t.has("period")||t.has("compareTimestamp")||t.has("timestamp")||t.has("assetAttributes")||t.has("realm"))&&(this.data=void 0,this._chart&&(this._chart.destroy(),this._chart=void 0),this.loadData()),this.data&&0!==this.data.length&&(this._chart?t.has("data")&&(this._chart.data.datasets[0].data=this.data.filter(t=>null!=t.y),this._chart.update(),this.delta=this.getFormattedDelta(this.getFirstKnownMeasurement(this.data),this.getLastKnownMeasurement(this.data))):this._chart=new v(this._chartElem.getContext("2d"),{type:"line",data:{datasets:[{data:this.data.filter(t=>null!=t.y),tension:.1,spanGaps:!0,backgroundColor:"transparent",borderColor:this._style.getPropertyValue("--internal-or-attribute-history-graph-line-color"),pointBorderColor:"transparent"}]},options:{responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1},tooltip:{displayColors:!1,callbacks:{title:t=>"",footer:()=>""}}},scales:{y:{display:!1},x:{type:"time",min:this._startOfPeriod,max:this._endOfPeriod,display:!1}}}}),(t.has("mainValue")||t.has("mainValueDecimals"))&&(this.formattedMainValue=this.getFormattedValue(this.mainValue)),t.has("delta")&&(this.deltaPlus=this.delta&&this.delta.val>0?"+":""))}shouldHideAttributePicker(){return this.hideAttributePicker&&"true"==this.hideAttributePicker.toString()}shouldShowControls(){return this.showControls&&"true"==this.showControls.toString()}shouldShowTitle(){return this.showTitle&&"true"==this.showTitle.toString()}render(){return this._error||this.assets&&this.assetAttributes&&0!==this.assetAttributes.length?(this.updateComplete.then(()=>{this.resizeObserver=new ResizeObserver(M(t=>{let e=t[0].devicePixelContentBoxSize[0].inlineSize;this.setLabelSizeByWidth(e)},200)),this.resizeObserver.observe(this.shadowRoot.querySelector(".graph-wrapper"))}),e`
+            <div class="panel" id="attribute-card">
+                <div class="panel-content-wrapper">
+                    <div class="panel-title">
+                        ${this.shouldShowTitle()?e`<span class="panel-title-text">${this.assets[0].name+" - "+l.t(this.assetAttributes[0][1].name)}</span>`:void 0}
+                        ${this.shouldShowTitle()?T(e`
+                            <or-mwc-input icon="dots-vertical" type="button"></or-mwc-input>
+                        `,[{text:l.t("editAttribute"),value:"editAttribute"},{text:l.t("editDelta"),value:"editDelta"},{text:l.t("editCurrentValue"),value:"editCurrentValue"},{text:l.t("delete"),value:"delete"}],void 0,t=>this.handleMenuSelect(t)):void 0}
+                    </div>
+                    <div class="panel-content">
+                        <div class="mainvalue-wrapper">
+                            ${z(!this._loading,()=>e`
+                                <span class="main-number-icon">${this.assets&&1===this.assets.length?A(d.getAssetDescriptor(this.assets[0].type)):""}</span>
+                                <span class="main-number ${this.mainValueSize}">${this.formattedMainValue?this.formattedMainValue.value:""}</span>
+                                <span class="main-number-unit ${this.mainValueSize}">${this.formattedMainValue?this.formattedMainValue.unit:""}</span>      
+                            `)}
+                        </div>
+                        <div class="graph-wrapper">
+                            
+                            ${z(this._error,()=>e`
+                                <div style="flex: 0 0 80px;"></div>
+                                <or-translate .value="${this._error}" style="flex: 1; text-align: center;"></or-translate>
+                            `,()=>e`
+                                <div class="chart-wrapper">
+                                    ${z(this._loading,()=>e`
+                                        <or-loading-indicator></or-loading-indicator>
+                                    `,()=>e`
+                                        <canvas id="chart"></canvas>
+                                    `)}
+                                </div>
+                            `)}
+
+                            <div class="controls-wrapper">
+                                <div class="delta-wrapper">
+                                    <span class="delta">${this.delta?this.deltaPlus+(void 0!==this.delta.val&&null!==this.delta.val?this.delta.val:"")+(this.delta.unit||""):""}</span>
+                                </div>
+                                ${this.shouldShowControls()?e`
+                                    <div class="period-selector-wrapper">
+                                        ${T(e`<or-mwc-input class="period-selector" .type="${x.BUTTON}" label="${this.period?this.period:"-"}"></or-mwc-input>`,[{value:"hour",text:"hour"},{value:"day",text:"day"},{value:"week",text:"week"},{value:"month",text:"month"},{value:"year",text:"year"}].map(t=>(t.text=l.t(t.value),t)),this.period,t=>this._setPeriodOption(t),void 0,!1,!0,!1,!1,"kpi-menu-id",!0)}
+                                    </div>
+                                `:e`
+                                    <or-mwc-input class="period-selector" .type="${x.BUTTON}" disabled .label="${l.t(this.period?this.period:"-")}"></or-mwc-input>
+                                `}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `):e`
+                <div class="panel panel-empty">
+                    <div class="panel-content-wrapper">
+                        <div class="panel-content">
+                            ${!this.shouldHideAttributePicker()?e`
+                                <or-mwc-input class="button" .type="${x.BUTTON}" label="selectAttribute" icon="plus" @or-mwc-input-changed="${()=>this._openDialog("editAttribute")}"></or-mwc-input>
+                            `:e`
+                                <span style="text-align: center;">${l.t("noAttributeConnected")}</span>
+                            `}
+                        </div>
+                    </div>
+                </div>
+            `}_openDialog(t){let i;switch(t){case"editDelta":case"editCurrentValue":(i=new V().setHeading(l.t(t)).setDismissAction(null).setContent("editDelta"===t?e`
+                                <or-mwc-input id="delta-mode-picker" value="${this.deltaFormat}" @or-mwc-input-changed="${t=>{this.deltaFormat=t.detail.value,this.saveSettings()}}" .type="${x.LIST}" .options="${[["percentage","Percentage"],["absolute","Absolute"]]}"></or-mwc-input>                
+                            `:e`
+                                <or-mwc-input id="current-value-decimals" .label="${l.t("decimals")}" value="${this.mainValueDecimals}" .type="${x.TEXT}"></or-mwc-input>
+                            `).setActions([{actionName:"cancel",content:e`<or-mwc-input class="button" .type="${x.BUTTON}" label="cancel"></or-mwc-input>`,action:()=>{}},{actionName:"yes",default:!0,content:e`<or-mwc-input class="button" .type="${x.BUTTON}" label="ok" data-mdc-dialog-action="yes"></or-mwc-input>`,action:()=>{if("editDelta"===t)this.delta=this.data?this.getFormattedDelta(this.getFirstKnownMeasurement(this.data),this.getLastKnownMeasurement(this.data)):void 0;else if(i&&i.shadowRoot&&i.shadowRoot.getElementById("current-value-decimals")){let t=parseInt(i.shadowRoot.getElementById("current-value-decimals").value,10);t<0?this.mainValueDecimals=0:t>10?this.mainValueDecimals=10:this.mainValueDecimals=t,this.formattedMainValue=this.getFormattedValue(this.mainValue),this.saveSettings()}}}])).addEventListener(O.NAME,t=>__awaiter(this,void 0,void 0,function*(){let e=t.detail&&t.detail.newNodes.length>0?t.detail.newNodes[0]:void 0;if(e){let t=yield p.events.sendEventWithReply({eventType:"read-asset",assetId:e.asset.id});this.asset=t.asset}else this.asset=void 0}));break;default:(i=new D().setHeading(l.t("selectAttribute"))).addEventListener($.NAME,t=>__awaiter(this,void 0,void 0,function*(){let e=t.detail[0];try{let t=yield p.rest.api.AssetResource.get(e.id);this.asset=t.data,this._setAttribute(e.name)}catch(t){console.error("Failed to get assets requested in settings",t)}}))}i&&S(i)}_setAttribute(t){if(this.asset&&t){let e=this.asset.attributes?this.asset.attributes[t]:void 0;this.assets=[this.asset],this.assetAttributes=e?[[0,e]]:[],this.saveSettings()}}_cleanup(){this._chart&&(this._chart.destroy(),this._chart=void 0)}loadSettings(){return __awaiter(this,arguments,void 0,function*(t=!1){this.assetAttributes=[],(!this.period||t)&&(this.period="day"),(!this.deltaFormat||t)&&(this.deltaFormat="absolute"),(!this.mainValueDecimals||t)&&(this.mainValueDecimals=0),this.realm||(this.realm=p.getRealm());let e=(yield p.console.retrieveData("OrChartConfig"))||[];if(Array.isArray(e)||(e=[e]),0===e.length||!this.panelName)return;let i=window.location.hash,a=e.find(t=>t.realm===this.realm),s=a&&a.views&&a.views[i]?a.views[i][this.panelName]:void 0;if(!s)return;if(!s.attributeRefs){delete a.views[i][this.panelName];let t=[...e.filter(t=>t.realm!==this.realm),a];p.console.storeData("OrChartConfig",t);return}let r=s.attributeRefs.map(t=>t.id);if(0!==r.length&&(this._loading=!0,!r.every(t=>!!this.assets.find(e=>e.id===t)))){try{let t=(yield p.rest.api.AssetResource.queryAssets({ids:r})).data||[];s.attributeRefs=s.attributeRefs.filter(e=>!!t.find(t=>t.id===e.id&&t.attributes&&t.attributes.hasOwnProperty(e.name))),e=[...e.filter(t=>t.realm!==this.realm),a],p.console.storeData("OrChartConfig",e),this.assets=t.filter(t=>s.attributeRefs.find(e=>e.id===t.id))}catch(t){console.error("Failed to get assets requested in settings",t)}this._loading=!1,this.assets&&this.assets.length>0&&(this.assetAttributes=s.attributeRefs.map(t=>{let e=this.assets.findIndex(e=>e.id===t.id),i=e>=0?this.assets[e]:void 0;return i&&i.attributes?[e,i.attributes[t.name]]:void 0}).filter(t=>!!t),this.period=s.period||"day",this.mainValueDecimals=s.decimals||0,this.deltaFormat=s.deltaFormat||"absolute")}})}saveSettings(){return __awaiter(this,void 0,void 0,function*(){if(!this.panelName)return;let t=window.location.hash,e=(yield p.console.retrieveData("OrChartConfig"))||[],i=e.find(t=>t.realm===this.realm);i||(i={realm:this.realm,views:{}}),i.views[t]||(i.views[t]={}),this.assets&&this.assetAttributes&&0!==this.assets.length&&0!==this.assetAttributes.length?(i.realm=this.realm,i.views[t][this.panelName]={attributeRefs:this.assetAttributes.map(([t,e])=>{let i=this.assets[t];return i?{id:i.id,name:e.name}:void 0}).filter(t=>!!t),period:this.period,deltaFormat:this.deltaFormat,decimals:this.mainValueDecimals}):delete i.views[t][this.panelName],e=[...e.filter(t=>t.realm!==this.realm),i],p.console.storeData("OrChartConfig",e)})}loadData(){return __awaiter(this,void 0,void 0,function*(){var t;if(this.data||!this.assetAttributes||!this.assets||0===this.assets.length||0===this.assetAttributes.length||!this.period)return;this._dataAbortController&&(this._dataAbortController.abort("Data request overridden"),delete this._dataAbortController),this._loading=!0;let e="HOUR";switch(this.period){case"hour":e="MINUTE";break;case"day":case"week":e="HOUR";break;case"month":e="DAY";break;case"year":e="MONTH"}e.toLowerCase(),this._startOfPeriod=C().subtract(1,this.period).toDate().getTime(),this._endOfPeriod=C().toDate().getTime();let i=this.assets[0].id,a=this.assetAttributes[0][1].name;this._dataAbortController=new AbortController;try{let t=yield p.rest.api.AssetDatapointResource.getDatapoints(i,a,{type:"lttb",fromTimestamp:this._startOfPeriod,toTimestamp:this._endOfPeriod,amountOfPoints:20},{signal:this._dataAbortController.signal});this._loading=!1,200===t.status&&(this.data=t.data,this.delta=this.getFormattedDelta(this.getFirstKnownMeasurement(this.data),this.getLastKnownMeasurement(this.data)),this.deltaPlus=this.delta&&this.delta.val>0?"+":"",this._error=void 0)}catch(e){if(console.error(e),(null==e?void 0:e.message)==="canceled")return;if(this._loading=!1,m(e)){if(e.message.includes("timeout")){this._error="noAttributeDataTimeout";return}else if((null==(t=e.response)?void 0:t.status)===413){this._error="datapointRequestTooLarge";return}}this._error="couldNotRetrieveAttribute"}finally{this.mainValue=void 0,this.formattedMainValue=void 0;let t=yield p.events.sendEventWithReply({eventType:"read-asset-attribute",ref:{id:i,name:a}});this.mainValue=t.value,this.formattedMainValue=this.getFormattedValue(this.mainValue)}})}getTotalValue(t){return t.reduce((t,e)=>e.y?t+Math.round(e.y):t,0)}getHighestValue(t){return Math.max.apply(Math,t.map(t=>t.y||!1))}getFormattedValue(t){if(void 0===t||!this.assets||!this.assetAttributes||0===this.assets.length||0===this.assetAttributes.length)return;let e=this.assetAttributes[0][1],i=+(null==t?void 0:t.toFixed(this.mainValueDecimals)),a=d.getAttributeDescriptor(e.name,this.assets[0].type),s=c.resolveUnits(c.getAttributeUnits(e,a,this.assets[0].type));return(this.setLabelSizeByLength(i.toString()),s)?{value:i,unit:s}:{value:i,unit:""}}getFirstKnownMeasurement(t){for(let e=0;e<=t.length;e++)if(t[e]&&void 0!==t[e].y)return t[e].y;return 0}getLastKnownMeasurement(t){for(let e=t.length-1;e>=0;e--)if(t[e]&&void 0!==t[e].y)return t[e].y;return 0}getFormattedDelta(t,e){if("percentage"===this.deltaFormat)if(!t||!e)return{val:0,unit:"%"};else if(0===e&&0===t)return{val:0,unit:"%"};else return 0===e&&0!==t?{val:100,unit:"%"}:{val:Math.round((e-t)/t*100),unit:"%"};return{val:Math.round(e-t),unit:""}}handleMenuSelect(t){"delete"===t?(this.assets=[],this.assetAttributes=[],this.saveSettings()):this._openDialog(t)}setLabelSizeByLength(t){t.length>=20&&(this.mainValueSize="xs"),t.length<20&&(this.mainValueSize="s"),t.length<15&&(this.mainValueSize="m"),t.length<10&&(this.mainValueSize="l"),t.length<5&&(this.mainValueSize="xl")}setLabelSizeByWidth(t){t<60?this.mainValueSize="s":t<100?this.mainValueSize="m":t<200?this.mainValueSize="l":this.mainValueSize="xl"}_setPeriodOption(t){this.period=t,this.saveSettings()}};__decorate([r()],OrAttributeCard.prototype,"panelName",void 0),__decorate([r({type:Object})],OrAttributeCard.prototype,"assets",void 0),__decorate([r({type:Object})],OrAttributeCard.prototype,"assetAttributes",void 0),__decorate([r()],OrAttributeCard.prototype,"data",void 0),__decorate([r({type:String})],OrAttributeCard.prototype,"realm",void 0),__decorate([r()],OrAttributeCard.prototype,"mainValue",void 0),__decorate([r()],OrAttributeCard.prototype,"mainValueDecimals",void 0),__decorate([r()],OrAttributeCard.prototype,"mainValueSize",void 0),__decorate([r()],OrAttributeCard.prototype,"delta",void 0),__decorate([r()],OrAttributeCard.prototype,"deltaPlus",void 0),__decorate([r()],OrAttributeCard.prototype,"deltaFormat",void 0),__decorate([r()],OrAttributeCard.prototype,"showControls",void 0),__decorate([r()],OrAttributeCard.prototype,"hideAttributePicker",void 0),__decorate([r()],OrAttributeCard.prototype,"showTitle",void 0),__decorate([r()],OrAttributeCard.prototype,"_loading",void 0),__decorate([r()],OrAttributeCard.prototype,"period",void 0),__decorate([o()],OrAttributeCard.prototype,"_error",void 0),__decorate([n("#chart")],OrAttributeCard.prototype,"_chartElem",void 0),OrAttributeCard=__decorate([s("or-attribute-card")],OrAttributeCard);export{OrAttributeCard};