@senx/discovery-widgets
Version:
Discovery Widgets Elements
373 lines (372 loc) • 16.6 kB
JavaScript
/*
* Copyright 2022-2025 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h } from "@stencil/core";
import { Logger } from "../../utils/logger";
import noUiSlider from "nouislider";
import { GTSLib } from "../../utils/gts.lib";
import { Param } from "../../model/param";
import { Utils } from "../../utils/utils";
import domToImage from "dom-to-image";
export class DiscoverySlider {
constructor() {
this.disabled = false;
this.options = Object.assign(Object.assign({}, new Param()), { timeMode: 'date' });
this.defOptions = Object.assign(Object.assign({}, new Param()), { input: { min: 0, max: 100, horizontal: true, showTicks: true, step: 1 } });
}
optionsUpdate(newValue, oldValue) {
var _a, _b, _c, _d, _e, _f, _g, _h;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate'], newValue, oldValue);
let opts = newValue;
if (!!newValue && typeof newValue === 'string') {
opts = JSON.parse(newValue);
}
this.innerOptions = Utils.clone(Object.assign(Object.assign({}, this.defOptions), opts));
this.innerValue = ((_b = this.innerOptions.input) === null || _b === void 0 ? void 0 : _b.value) || this.innerValue || ((_c = this.innerOptions.input) === null || _c === void 0 ? void 0 : _c.min) || 0;
setTimeout(async () => {
var _a;
await this.setValue(this.innerValue);
if (this.LOG) {
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue });
}
return Promise.resolve();
});
if ((_e = (_d = this.innerOptions) === null || _d === void 0 ? void 0 : _d.input) === null || _e === void 0 ? void 0 : _e.disabled) {
(_f = this.slider) === null || _f === void 0 ? void 0 : _f.disable();
}
else {
(_g = this.slider) === null || _g === void 0 ? void 0 : _g.enable();
}
(_h = this.LOG) === null || _h === void 0 ? void 0 : _h.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue });
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a, _b, _c, _d;
this.LOG = new Logger(DiscoverySlider, this.debug);
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], this.options);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
const options = Utils.mergeDeep(Object.assign({}, this.defOptions), (_b = this.innerOptions) !== null && _b !== void 0 ? _b : {});
this.innerOptions = Utils.clone(options);
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['componentWillLoad'], this.innerOptions);
this.divider = GTSLib.getDivider((_d = this.innerOptions.timeUnit) !== null && _d !== void 0 ? _d : 'us');
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
this.innerValue = (_e = (_c = (_a = this.innerValue) !== null && _a !== void 0 ? _a : (_b = this.innerOptions.input) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = this.innerOptions.input) === null || _d === void 0 ? void 0 : _d.min) !== null && _e !== void 0 ? _e : 0;
this.slider = noUiSlider.create(this.sliderDiv, this.getSliderOptions());
if ((_g = (_f = this.innerOptions) === null || _f === void 0 ? void 0 : _f.input) === null || _g === void 0 ? void 0 : _g.disabled) {
(_h = this.slider) === null || _h === void 0 ? void 0 : _h.disable();
}
else {
(_j = this.slider) === null || _j === void 0 ? void 0 : _j.enable();
}
this.setChangeListener();
}
async setValue(value) {
this.innerValue = value;
this.slider.destroy();
this.slider = noUiSlider.create(this.sliderDiv, this.getSliderOptions());
this.setChangeListener();
return Promise.resolve();
}
// noinspection JSUnusedLocalSymbols
async export(_type = 'png', bgColor) {
const dims = Utils.getContentBounds(this.sliderDiv);
const width = dims.w - 15;
const height = dims.h;
return await domToImage.toPng(this.sliderDiv, { height, width, bgcolor: bgColor });
}
render() {
return (h("div", { key: '796fa7b9f5601bf510304379d8e435feac7efea4' }, h("div", { key: 'cd91955d658634766a59c1ed3860928d07102a1a', id: "slider", ref: (el) => this.sliderDiv = el })));
}
getSliderOptions() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
this.divider = GTSLib.getDivider((_a = this.innerOptions.timeUnit) !== null && _a !== void 0 ? _a : 'us');
const minmax = {
min: (_c = (_b = this.innerOptions.input) === null || _b === void 0 ? void 0 : _b.min) !== null && _c !== void 0 ? _c : 0,
max: (!!((_d = this.innerOptions.input) === null || _d === void 0 ? void 0 : _d.max) || ((_e = this.innerOptions.input) === null || _e === void 0 ? void 0 : _e.max) === 0)
? (_f = this.innerOptions.input) === null || _f === void 0 ? void 0 : _f.max
: 100,
};
const start = this.innerValue;
const range = minmax.max - minmax.min;
const pips = (_h = (_g = this.innerOptions.input) === null || _g === void 0 ? void 0 : _g.step) !== null && _h !== void 0 ? _h : Math.round(range / ((_k = (_j = this.innerOptions.input) === null || _j === void 0 ? void 0 : _j.stepCount) !== null && _k !== void 0 ? _k : range));
const format = {
to: (v) => {
var _a, _b;
return this.innerOptions.timeMode === 'date'
? ((_a = GTSLib.toISOString(v, this.divider, this.innerOptions.timeZone, this.innerOptions.timeFormat)) !== null && _a !== void 0 ? _a : '')
.replace('T', '<br />').replace(/\+[0-9]{2}:[0-9]{2}$/gi, '')
: parseFloat(v.toFixed(4)).toString() + ((_b = this.innerOptions.unit) !== null && _b !== void 0 ? _b : '');
},
from: Number,
};
if (this.innerOptions.timeMode !== 'date' || !((_l = this.innerOptions.input) === null || _l === void 0 ? void 0 : _l.showTicks)) {
this.sliderDiv.classList.remove('discovery-date');
}
else {
this.sliderDiv.classList.add('discovery-date');
}
let connect = ((_m = this.innerOptions.input) === null || _m === void 0 ? void 0 : _m.progress) || this.progress ? 'lower' : false;
if (GTSLib.isArray(this.innerValue)) {
connect = true;
}
return {
format,
start,
connect,
orientation: ((_p = (_o = this.innerOptions.input) === null || _o === void 0 ? void 0 : _o.horizontal) !== null && _p !== void 0 ? _p : true) ? 'horizontal' : 'vertical',
tooltips: this.innerOptions.timeMode === 'date' ? true : {
to: (v) => parseFloat((v).toFixed(4)).toString() + (this.innerOptions.unit || ''),
from: (v) => parseFloat((v).toFixed(4)),
},
step: ((_q = this.innerOptions.input) === null || _q === void 0 ? void 0 : _q.step) || ((_r = this.innerOptions.input) === null || _r === void 0 ? void 0 : _r.stepCount) ? pips : undefined,
range: minmax,
pips: ((_t = (_s = this.innerOptions.input) === null || _s === void 0 ? void 0 : _s.showTicks) !== null && _t !== void 0 ? _t : true) ? {
mode: 'positions',
values: [0, 25, 50, 75, 100],
stepped: true,
density: 4,
format,
} : undefined,
};
}
setChangeListener() {
var _a;
const throttledHandler = (v) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
let r;
if (GTSLib.isArray(v) && v.length > 1) {
r = this.innerOptions.timeMode === 'date'
? [this.parseDate(v[0].replace((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.unit) !== null && _b !== void 0 ? _b : '', '')), this.parseDate(v[1].replace((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.unit) !== null && _d !== void 0 ? _d : '', ''))]
: [Number(v[0].replace((_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.unit) !== null && _f !== void 0 ? _f : '', '')), Number(v[1].replace((_h = (_g = this.innerOptions) === null || _g === void 0 ? void 0 : _g.unit) !== null && _h !== void 0 ? _h : '', ''))];
}
else {
r = this.innerOptions.timeMode === 'date'
? this.parseDate(v[0].replace((_k = (_j = this.innerOptions) === null || _j === void 0 ? void 0 : _j.unit) !== null && _k !== void 0 ? _k : '', ''))
: Number(v[0].replace((_m = (_l = this.innerOptions) === null || _l === void 0 ? void 0 : _l.unit) !== null && _m !== void 0 ? _m : '', ''));
}
this.valueChanged.emit(r);
};
const handler = Utils.throttle(throttledHandler, 200);
this.slider
.on(((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.immediate) ? 'slide' : 'change', values => handler(values !== null && values !== void 0 ? values : [0]));
}
parseDate(d) {
return GTSLib.toTimestamp(d.replace('<br />', 'T'), this.divider, this.innerOptions.timeZone);
}
static get is() { return "discovery-slider"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-slider.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-slider.css"]
};
}
static get properties() {
return {
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false
},
"progress": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "progress",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"options": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Param | string",
"resolved": "Param | string",
"references": {
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "{ ...new Param(), timeMode: 'date' }"
}
};
}
static get states() {
return {
"innerOptions": {}
};
}
static get events() {
return [{
"method": "valueChanged",
"name": "valueChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "startDrag",
"name": "startDrag",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"setValue": {
"complexType": {
"signature": "(value: number | number[]) => Promise<void>",
"parameters": [{
"name": "value",
"type": "number | number[]",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"export": {
"complexType": {
"signature": "(_type: \"png\" | \"svg\", bgColor: string) => Promise<string>",
"parameters": [{
"name": "_type",
"type": "\"svg\" | \"png\"",
"docs": ""
}, {
"name": "bgColor",
"type": "string",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "options",
"methodName": "optionsUpdate"
}];
}
}
//# sourceMappingURL=discovery-slider.js.map