var __decorate=this&&this.__decorate||function(t,e,i,a){var s,n=arguments.length,o=n<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 r=t.length-1;r>=0;r--)(s=t[r])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},__awaiter=this&&this.__awaiter||function(t,e,i,a){return new(i||(i=Promise))(function(s,n){function o(t){try{h(a.next(t))}catch(t){n(t)}}function r(t){try{h(a.throw(t))}catch(t){n(t)}}function h(t){var e;t.done?s(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(o,r)}h((a=a.apply(t,e||[])).next())})};import{css as t,html as e,LitElement as i}from"lit";import{customElement as a,property as s,query as n,state as o}from"lit/decorators.js";import{AssetModelUtil as r}from"@openremote/model";import{Gauge as h}from"gaugeJS";import l,{Util as u}from"@openremote/core";import{i18next as d}from"@openremote/or-translate";import{debounce as p}from"lodash";import{getAssetDescriptorIconTemplate as g}from"@openremote/or-icon";let styling=t`
    :host {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #chart-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #chart-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #chart {
        width: 100%;
    }

    .chart-description {
        margin: 0 20px;
        font-size: 16px;
        z-index: 3;
    }
    .mainvalue-wrapper {
        width: 100%;
        display: flex;
        flex: 0 0 60px;
        align-items: center;
        justify-content: 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;
    }
    .main-number.unknown, .main-number-unit.unknown {
        font-size: unset;
    }
`,OrGauge=class extends i{static get styles(){return[styling]}constructor(){super(),this.decimals=0,this.loading=!1,this.config||(this.config=this.getDefaultConfig()),this.updateComplete.then(()=>{this.resizeObserver=new ResizeObserver(p(t=>{let e=t[0].contentRect;this.gaugeSize={width:e.width,height:e.height},this.updateComplete.then(()=>{this.setupGauge()})},200)),this.resizeObserver.observe(this._wrapperElem)})}willUpdate(t){if(t.has("assetAttribute")){let t=this.assetAttribute[1],e=r.getAttributeDescriptor(t.name,this.asset.type);this.unit=u.resolveUnits(u.getAttributeUnits(t,e,this.asset.type)),this.value=null!=t.value?t.value:NaN}}updated(t){var e,i,a,s;t.has("value")&&(null==(e=this.gauge)||e.set(null!=this.value?this.value:NaN)),t.has("attrRef")&&(this.attrRef?this.loadData(this.attrRef):(this.assetAttribute=void 0,this.value=void 0)),t.has("min")&&null!=this.min&&this.gauge&&(this.gauge.setMinValue(this.min),this.gauge.set(null!=this.value?this.value:NaN)),t.has("max")&&null!=this.max&&this.gauge&&(this.gauge.maxValue=this.max,this.gauge.set(null!=this.value?this.value:NaN)),t.has("thresholds")&&this.thresholds&&(this.config.options.staticZones=[],this.thresholds.sort((t,e)=>t[0]<e[0]?-1:1).forEach((t,e)=>{var i,a,s;let n=t[0],o=this.thresholds[e+1]?this.thresholds[e+1][0]:this.max,r={strokeStyle:t[1],min:this.min&&n&&this.min>n?this.min:this.max&&n&&this.max<n?this.max:n,max:this.max&&o&&this.max<o?this.max:this.min&&o&&this.min>o?this.min:o};null==(s=null==(a=null==(i=this.config)?void 0:i.options)?void 0:a.staticZones)||s.push(r)}),this.min&&(null==(a=null==(i=this.config)?void 0:i.options)?void 0:a.staticZones)&&(this.config.options.staticZones[0].min=this.min),this.gauge&&this.gauge.setOptions(null==(s=this.config)?void 0:s.options))}setupGauge(){var t;this.gauge=new h(this._gaugeElem),this.gauge.setOptions(null==(t=this.config)?void 0:t.options),this.gauge.maxValue=this.max?this.max:100,this.gauge.setMinValue(this.min?this.min:0),this.gauge.animationSpeed=1,this.gauge.set(null!=this.value?this.value:NaN),null==this.value&&this.attrRef&&this.loadData(this.attrRef)}getGaugeWidth(t,e=!0){return t?Math.min(t.width,(e?t.height-this._detailsElem.clientHeight:t.height)*1.5)+"px":"unset"}shouldShowLabel(t){return t.width>70&&t.height>100}getLabelSize(t){return t<120?"s":t<240?"m":t<320?"l":"xl"}render(){let t=null!=this.value?+this.value.toFixed(this.decimals):NaN,i=!this.gaugeSize||this.shouldShowLabel(this.gaugeSize),a=i&&this.gaugeSize?this.getLabelSize(this.gaugeSize.width):"unknown",s=this.getGaugeWidth(this.gaugeSize,i);return e`
            <div style="position: relative; height: 100%; width: 100%;">
                <div id="chart-wrapper" style="display: ${this.loading?"none":"flex"};">
                    <div id="chart-container" style="flex: 0 0 0; width: ${s};">
                        <canvas id="chart"></canvas>
                    </div>
                    <div id="details-container">
                        ${i?e`
                            <div class="mainvalue-wrapper">
                                <span class="main-number-icon">${this.asset?g(r.getAssetDescriptor(this.asset.type)):""}</span>
                                <span class="main-number ${a}">${t}</span>
                                <span class="main-number-unit ${a}">${this.unit?this.unit:""}</span>
                            </div>
                        `:void 0}
                    </div>
                </div>
            </div>
            ${this.loading?e`
                <span>${d.t("loading")}</span>
            `:void 0}
        `}loadData(t){return __awaiter(this,void 0,void 0,function*(){let e=(yield l.rest.api.AssetResource.queryAssets({ids:[t.id]})).data,i=[t].map(t=>{let i=e.findIndex(e=>e.id===t.id),a=i>=0?e[i]:void 0;return a&&a.attributes?[i,a.attributes[t.name]]:void 0}).filter(t=>!!t);this.asset=e[0],this.assetAttribute=i[0]})}getDefaultConfig(){return{attributeRef:void 0,options:{angle:0,lineWidth:.4,radiusScale:1,pointer:{length:.5,strokeWidth:.035,color:"#000000"},staticZones:[],limitMax:!0,limitMin:!0,colorStart:"#000000",colorStop:"#707070",strokeColor:"#ABCDEF",generateGradient:!1,highDpiSupport:!0}}}};__decorate([s({type:Object})],OrGauge.prototype,"attrRef",void 0),__decorate([s({type:Object})],OrGauge.prototype,"asset",void 0),__decorate([s({type:Object})],OrGauge.prototype,"assetAttribute",void 0),__decorate([s()],OrGauge.prototype,"value",void 0),__decorate([s()],OrGauge.prototype,"decimals",void 0),__decorate([s()],OrGauge.prototype,"unit",void 0),__decorate([s()],OrGauge.prototype,"min",void 0),__decorate([s()],OrGauge.prototype,"max",void 0),__decorate([s()],OrGauge.prototype,"thresholds",void 0),__decorate([s()],OrGauge.prototype,"config",void 0),__decorate([s({type:String})],OrGauge.prototype,"realm",void 0),__decorate([o()],OrGauge.prototype,"loading",void 0),__decorate([o()],OrGauge.prototype,"gauge",void 0),__decorate([o()],OrGauge.prototype,"gaugeSize",void 0),__decorate([n("#chart")],OrGauge.prototype,"_gaugeElem",void 0),__decorate([n("#chart-wrapper")],OrGauge.prototype,"_wrapperElem",void 0),__decorate([n("#details-container")],OrGauge.prototype,"_detailsElem",void 0),OrGauge=__decorate([a("or-gauge")],OrGauge);export{OrGauge};