UNPKG

@iotize/ionic

Version:

Iotize specific building blocks on top of @ionic/angular.

87 lines 16.7 kB
import { Component, Input } from '@angular/core'; import { ModalController } from '@ionic/angular'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import * as i0 from "@angular/core"; import * as i1 from "@ionic/angular"; export class TapVariableDataPopupComponent { modalController; legend = false; showLabels = false; animations = true; xAxis = true; yAxis = true; showYAxisLabel = false; showXAxisLabel = false; timeline = false; currentValue; currentDate; colorScheme = { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'], }; results = []; destroyed = new Subject(); value; label; index; set variable(inputs) { this.results.push({ name: this.label, series: [], }); inputs.stream.pipe(takeUntil(this.destroyed)).subscribe((value) => { if (Array.isArray(value)) { this.currentValue = value[this.index]; } else { this.currentValue = value; } const seriesData = { name: new Date(), value: this.currentValue, extra: 0, }; this.results[0].series.push(seriesData); const itemCount = this.results[0].series.length; if (itemCount > 10) { const toRemove = itemCount - 10; this.results[0].series.splice(0, toRemove); } this.results = [...this.results]; }); } constructor(modalController) { this.modalController = modalController; this.currentDate = '' + this.digit(+new Date().getHours()) + ':' + this.digit(+new Date().getMinutes()) + ':' + this.digit(+new Date().getSeconds()); } ngOnDestroy() { this.destroyed.next(); } async dismissModal() { await this.modalController.dismiss(); } digit(n) { return n > 9 ? '' + n : '0' + n; } /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapVariableDataPopupComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TapVariableDataPopupComponent, selector: "tap-tap-variable-data-popup", inputs: { value: "value", label: "label", index: "index", variable: "variable" }, ngImport: i0, template: "<ion-header translucent>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"dismissModal()\"\n ><ion-icon name=\"arrow-back-outline\"></ion-icon\n ></ion-button>\n </ion-buttons>\n <ion-title>{{ label }}</ion-title>\n <ion-buttons slot=\"end\">\n <span>Details</span>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-list>\n <ion-item>\n <ion-label>Value on click</ion-label>\n <ion-note class=\"value\" slot=\"end\">{{ value }}</ion-note>\n </ion-item>\n <ion-item>\n <ion-label>Time on click</ion-label>\n <ion-note class=\"value\" slot=\"end\">{{ currentDate }}</ion-note>\n </ion-item>\n\n <ion-item>\n <ion-label>Current value</ion-label>\n <ion-note class=\"value\" slot=\"end\">{{ currentValue }}</ion-note>\n </ion-item>\n\n <!-- <ion-item>\n <ion-label>Dynamic graphic</ion-label>\n <div #containerRef style=\"height: 30vh; width: 100%\">\n <ngx-charts-line-chart\n [view]=\"[containerRef.offsetWidth, containerRef.offsetHeight]\"\n [scheme]=\"colorScheme\"\n [showXAxisLabel]=\"showXAxisLabel\"\n [showYAxisLabel]=\"showYAxisLabel\"\n [legend]=\"legend\"\n [xAxis]=\"xAxis\"\n [yAxis]=\"yAxis\"\n [timeline]=\"timeline\"\n [results]=\"results\"\n >\n </ngx-charts-line-chart>\n </div>\n </ion-item> -->\n </ion-list>\n</ion-content>\n", styles: [".my-custom-modal-css{--background: transparent !important}.value{font-size:1.3em;font-weight:700}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapVariableDataPopupComponent, decorators: [{ type: Component, args: [{ selector: 'tap-tap-variable-data-popup', template: "<ion-header translucent>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"dismissModal()\"\n ><ion-icon name=\"arrow-back-outline\"></ion-icon\n ></ion-button>\n </ion-buttons>\n <ion-title>{{ label }}</ion-title>\n <ion-buttons slot=\"end\">\n <span>Details</span>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-list>\n <ion-item>\n <ion-label>Value on click</ion-label>\n <ion-note class=\"value\" slot=\"end\">{{ value }}</ion-note>\n </ion-item>\n <ion-item>\n <ion-label>Time on click</ion-label>\n <ion-note class=\"value\" slot=\"end\">{{ currentDate }}</ion-note>\n </ion-item>\n\n <ion-item>\n <ion-label>Current value</ion-label>\n <ion-note class=\"value\" slot=\"end\">{{ currentValue }}</ion-note>\n </ion-item>\n\n <!-- <ion-item>\n <ion-label>Dynamic graphic</ion-label>\n <div #containerRef style=\"height: 30vh; width: 100%\">\n <ngx-charts-line-chart\n [view]=\"[containerRef.offsetWidth, containerRef.offsetHeight]\"\n [scheme]=\"colorScheme\"\n [showXAxisLabel]=\"showXAxisLabel\"\n [showYAxisLabel]=\"showYAxisLabel\"\n [legend]=\"legend\"\n [xAxis]=\"xAxis\"\n [yAxis]=\"yAxis\"\n [timeline]=\"timeline\"\n [results]=\"results\"\n >\n </ngx-charts-line-chart>\n </div>\n </ion-item> -->\n </ion-list>\n</ion-content>\n", styles: [".my-custom-modal-css{--background: transparent !important}.value{font-size:1.3em;font-weight:700}\n"] }] }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { value: [{ type: Input }], label: [{ type: Input }], index: [{ type: Input }], variable: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFwLXZhcmlhYmxlLWRhdGEtcG9wdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW90aXplLWlvbmljL21vbml0b3Jpbmcvc3JjL2xpYi91aS1jb21wb25lbnRzL3RhcC12YXJpYWJsZS1kYXRhLXBvcHVwL3RhcC12YXJpYWJsZS1kYXRhLXBvcHVwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lvdGl6ZS1pb25pYy9tb25pdG9yaW5nL3NyYy9saWIvdWktY29tcG9uZW50cy90YXAtdmFyaWFibGUtZGF0YS1wb3B1cC90YXAtdmFyaWFibGUtZGF0YS1wb3B1cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUU1RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQU8zQyxNQUFNLE9BQU8sNkJBQTZCO0lBa0RwQjtJQWpEcEIsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUNmLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsVUFBVSxHQUFHLElBQUksQ0FBQztJQUNsQixLQUFLLEdBQUcsSUFBSSxDQUFDO0lBQ2IsS0FBSyxHQUFHLElBQUksQ0FBQztJQUNiLGNBQWMsR0FBRyxLQUFLLENBQUM7SUFDdkIsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUN2QixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ2pCLFlBQVksQ0FBVTtJQUN0QixXQUFXLENBQVU7SUFFckIsV0FBVyxHQUFHO1FBQ1osTUFBTSxFQUFFLENBQUMsU0FBUyxFQUFFLFNBQVMsRUFBRSxT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SztzQkFBYixLQUFLO2dCQUNPLFFBQVE7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENoYXJ0SW5wdXRNdXRsaSwgQ2hhcnRJbnB1dFN0cmVhbVZhciB9IGZyb20gJy4uL0NoYXJ0RGF0YU1vZGVsJztcbmltcG9ydCB7IE1vZGFsQ29udHJvbGxlciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGFwLXRhcC12YXJpYWJsZS1kYXRhLXBvcHVwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhcC12YXJpYWJsZS1kYXRhLXBvcHVwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFwLXZhcmlhYmxlLWRhdGEtcG9wdXAuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVGFwVmFyaWFibGVEYXRhUG9wdXBDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBsZWdlbmQgPSBmYWxzZTtcbiAgc2hvd0xhYmVscyA9IGZhbHNlO1xuICBhbmltYXRpb25zID0gdHJ1ZTtcbiAgeEF4aXMgPSB0cnVlO1xuICB5QXhpcyA9IHRydWU7XG4gIHNob3dZQXhpc0xhYmVsID0gZmFsc2U7XG4gIHNob3dYQXhpc0xhYmVsID0gZmFsc2U7XG4gIHRpbWVsaW5lID0gZmFsc2U7XG4gIGN1cnJlbnRWYWx1ZSE6IG51bWJlcjtcbiAgY3VycmVudERhdGUhOiBzdHJpbmc7XG5cbiAgY29sb3JTY2hlbWUgPSB7XG4gICAgZG9tYWluOiBbJyM1QUE0NTQnLCAnI0ExMEEyOCcsICcjQzdCNDJDJywgJyNBQUFBQUEnXSxcbiAgfTtcblxuICByZXN1bHRzOiBDaGFydElucHV0TXV0bGlbXSA9IFtdO1xuXG4gIHByaXZhdGUgZGVzdHJveWVkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICBASW5wdXQoKSB2YWx1ZSE6IHN0cmluZztcbiAgQElucHV0KCkgbGFiZWwhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGluZGV4ITogbnVtYmVyO1xuICBASW5wdXQoKSBzZXQgdmFyaWFibGUoaW5wdXRzOiBDaGFydElucHV0U3RyZWFtVmFyKSB7XG4gICAgdGhpcy5yZXN1bHRzLnB1c2goe1xuICAgICAgbmFtZTogdGhpcy5sYWJlbCxcbiAgICAgIHNlcmllczogW10sXG4gICAgfSk7XG4gICAgaW5wdXRzLnN0cmVhbS5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3llZCkpLnN1YnNjcmliZSgodmFsdWUpID0+IHtcbiAgICAgIGlmIChBcnJheS5pc0FycmF5KHZhbHVlKSkge1xuICAgICAgICB0aGlzLmN1cnJlbnRWYWx1ZSA9IHZhbHVlW3RoaXMuaW5kZXhdO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5jdXJyZW50VmFsdWUgPSB2YWx1ZTtcbiAgICAgIH1cbiAgICAgIGNvbnN0IHNlcmllc0RhdGEgPSB7XG4gICAgICAgIG5hbWU6IG5ldyBEYXRlKCksXG4gICAgICAgIHZhbHVlOiB0aGlzLmN1cnJlbnRWYWx1ZSxcbiAgICAgICAgZXh0cmE6IDAsXG4gICAgICB9O1xuICAgICAgdGhpcy5yZXN1bHRzWzBdLnNlcmllcy5wdXNoKHNlcmllc0RhdGEpO1xuXG4gICAgICBjb25zdCBpdGVtQ291bnQgPSB0aGlzLnJlc3VsdHNbMF0uc2VyaWVzLmxlbmd0aDtcbiAgICAgIGlmIChpdGVtQ291bnQgPiAxMCkge1xuICAgICAgICBjb25zdCB0b1JlbW92ZSA9IGl0ZW1Db3VudCAtIDEwO1xuICAgICAgICB0aGlzLnJlc3VsdHNbMF0uc2VyaWVzLnNwbGljZSgwLCB0b1JlbW92ZSk7XG4gICAgICB9XG4gICAgICB0aGlzLnJlc3VsdHMgPSBbLi4udGhpcy5yZXN1bHRzXTtcbiAgICB9KTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbW9kYWxDb250cm9sbGVyOiBNb2RhbENvbnRyb2xsZXIpIHtcbiAgICB0aGlzLmN1cnJlbnREYXRlID1cbiAgICAgICcnICtcbiAgICAgIHRoaXMuZGlnaXQoK25ldyBEYXRlKCkuZ2V0SG91cnMoKSkgK1xuICAgICAgJzonICtcbiAgICAgIHRoaXMuZGlnaXQoK25ldyBEYXRlKCkuZ2V0TWludXRlcygpKSArXG4gICAgICAnOicgK1xuICAgICAgdGhpcy5kaWdpdCgrbmV3IERhdGUoKS5nZXRTZWNvbmRzKCkpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5kZXN0cm95ZWQubmV4dCgpO1xuICB9XG5cbiAgcHVibGljIGFzeW5jIGRpc21pc3NNb2RhbCgpIHtcbiAgICBhd2FpdCB0aGlzLm1vZGFsQ29udHJvbGxlci5kaXNtaXNzKCk7XG4gIH1cblxuICBkaWdpdChuOiBudW1iZXIpIHtcbiAgICByZXR1cm4gbiA+IDkgPyAnJyArIG4gOiAnMCcgKyBuO1xuICB9XG59XG4iLCI8aW9uLWhlYWRlciB0cmFuc2x1Y2VudD5cbiAgPGlvbi10b29sYmFyPlxuICAgIDxpb24tYnV0dG9ucyBzbG90PVwic3RhcnRcIj5cbiAgICAgIDxpb24tYnV0dG9uIChjbGljayk9XCJkaXNtaXNzTW9kYWwoKVwiXG4gICAgICAgID48aW9uLWljb24gbmFtZT1cImFycm93LWJhY2stb3V0bGluZVwiPjwvaW9uLWljb25cbiAgICAgID48L2lvbi1idXR0b24+XG4gICAgPC9pb24tYnV0dG9ucz5cbiAgICA8aW9uLXRpdGxlPnt7IGxhYmVsIH19PC9pb24tdGl0bGU+XG4gICAgPGlvbi1idXR0b25zIHNsb3Q9XCJlbmRcIj5cbiAgICAgIDxzcGFuPkRldGFpbHM8L3NwYW4+XG4gICAgPC9pb24tYnV0dG9ucz5cbiAgPC9pb24tdG9vbGJhcj5cbjwvaW9uLWhlYWRlcj5cbjxpb24tY29udGVudD5cbiAgPGlvbi1saXN0PlxuICAgIDxpb24taXRlbT5cbiAgICAgIDxpb24tbGFiZWw+VmFsdWUgb24gY2xpY2s8L2lvbi1sYWJlbD5cbiAgICAgIDxpb24tbm90ZSBjbGFzcz1cInZhbHVlXCIgc2xvdD1cImVuZFwiPnt7IHZhbHVlIH19PC9pb24tbm90ZT5cbiAgICA8L2lvbi1pdGVtPlxuICAgIDxpb24taXRlbT5cbiAgICAgIDxpb24tbGFiZWw+VGltZSBvbiBjbGljazwvaW9uLWxhYmVsPlxuICAgICAgPGlvbi1ub3RlIGNsYXNzPVwidmFsdWVcIiBzbG90PVwiZW5kXCI+e3sgY3VycmVudERhdGUgfX08L2lvbi1ub3RlPlxuICAgIDwvaW9uLWl0ZW0+XG5cbiAgICA8aW9uLWl0ZW0+XG4gICAgICA8aW9uLWxhYmVsPkN1cnJlbnQgdmFsdWU8L2lvbi1sYWJlbD5cbiAgICAgIDxpb24tbm90ZSBjbGFzcz1cInZhbHVlXCIgc2xvdD1cImVuZFwiPnt7IGN1cnJlbnRWYWx1ZSB9fTwvaW9uLW5vdGU+XG4gICAgPC9pb24taXRlbT5cblxuICAgIDwhLS0gPGlvbi1pdGVtPlxuICAgICAgPGlvbi1sYWJlbD5EeW5hbWljIGdyYXBoaWM8L2lvbi1sYWJlbD5cbiAgICAgIDxkaXYgI2NvbnRhaW5lclJlZiBzdHlsZT1cImhlaWdodDogMzB2aDsgd2lkdGg6IDEwMCVcIj5cbiAgICAgICAgPG5neC1jaGFydHMtbGluZS1jaGFydFxuICAgICAgICAgIFt2aWV3XT1cIltjb250YWluZXJSZWYub2Zmc2V0V2lkdGgsIGNvbnRhaW5lclJlZi5vZmZzZXRIZWlnaHRdXCJcbiAgICAgICAgICBbc2NoZW1lXT1cImNvbG9yU2NoZW1lXCJcbiAgICAgICAgICBbc2hvd1hBeGlzTGFiZWxdPVwic2hvd1hBeGlzTGFiZWxcIlxuICAgICAgICAgIFtzaG93WUF4aXNMYWJlbF09XCJzaG93WUF4aXNMYWJlbFwiXG4gICAgICAgICAgW2xlZ2VuZF09XCJsZWdlbmRcIlxuICAgICAgICAgIFt4QXhpc109XCJ4QXhpc1wiXG4gICAgICAgICAgW3lBeGlzXT1cInlBeGlzXCJcbiAgICAgICAgICBbdGltZWxpbmVdPVwidGltZWxpbmVcIlxuICAgICAgICAgIFtyZXN1bHRzXT1cInJlc3VsdHNcIlxuICAgICAgICA+XG4gICAgICAgIDwvbmd4LWNoYXJ0cy1saW5lLWNoYXJ0PlxuICAgICAgPC9kaXY+XG4gICAgPC9pb24taXRlbT4gLS0+XG4gIDwvaW9uLWxpc3Q+XG48L2lvbi1jb250ZW50PlxuIl19