@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/tr-grid-range-bar/es6/RangeBar.js

@@ -0,0 +1,514 @@
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { LEDGuage } from "./LEDGuage.js";
+
+/** @typedef {Object} RangeBarPlugin~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option:
+* @property {RangeBarPlugin~RangeDefinition=} rangeBar Range definition object
+*/
+
+/** @typedef {Object|boolean} RangeBarPlugin~RangeDefinition
+* @description Available options describing `rangeBar` object specified in grid's column option
+* @property {string=} field=THIS_COLUMN Field used as percentage. If specified, `low`, `high`, and `last` fields will be ignored.
+* @property {number=} start=0 minimum value used with percentage `field`
+* @property {number=} end=100 maximum value used with percentage `field`
+* @property {string=} low="" Field used as minimum range
+* @property {string=} high="" Field used as maximum range
+* @property {string=} last="" Field used as current absolute value (white bar)
+* @property {string=} vwap="" Field used as volume weighted average price (VWAP)
+* @property {string=} close="" Field used as close price
+* @property {string=} tick="" Field used as tick color
+*/
+
+/** @typedef {Object} RangeBarPlugin~Options
+* @description RangeBarPlugin options that can be specified from `percentBar` property of the main grid's options
+* @property {boolean=} tooltip=true If disabled, it will be doesn't show tooltip when mouse hover ef-led-gauge
+*/
+// TODO: promote "valueLabel" option, that provide the user can show valueLabel in ef-led-gauge (default is false)
+// @property {boolean=} valueLabel=false If disabled, it will be show text label in top of ef-led-gaguge
+
+/** @type {Array<string>}
+* @constant
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+var RangeBarPlugin = function () {
+	this._onPostSectionBinding = this._onPostSectionBinding.bind(this);
+	this._onColumnAdded = this._onColumnAdded.bind(this);
+	this._onColumnRemoved = this._onColumnRemoved.bind(this);
+	this._renderer = this._renderer.bind(this);
+	this._onThemeLoaded = this._onThemeLoaded.bind(this);
+	this._hosts = [];
+};
+Ext.inherits(RangeBarPlugin, GridPlugin);
+
+
+/** @type {boolean}
+* @private
+*/
+RangeBarPlugin._LEDGuage = true;
+/** @type {boolean}
+* @private
+*/
+RangeBarPlugin.prototype._themeLoading = false;
+/** @type {number}
+* @private
+*/
+RangeBarPlugin.prototype._start = 0;
+/** @type {number}
+* @private
+*/
+RangeBarPlugin.prototype._end = 100;
+/** @type {boolean}
+* @private
+*/
+RangeBarPlugin.prototype._tooltip = true;
+/** @type {boolean}
+* @private
+*/
+RangeBarPlugin.prototype.valueLabel = false;
+/** @private
+* @type {string}
+*/
+RangeBarPlugin._styles = prettifyCss([
+	"ef-led-gauge", [
+		"padding: 0;",
+		"height: 16px;",
+		"--led-width: 3px;",
+		"--led-spacing: 2px;",
+		"overflow: visible;" // TODO: currently, we have to set this overwrite hidden from elf component, however currently show text value label didn't work with grid default row
+	]
+]);
+/** @override
+* @return {string}
+*/
+RangeBarPlugin.prototype.getName = function () {
+	return "RangeBarPlugin"; // Readonly
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+RangeBarPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	this.config(options);
+
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("columnRemoved", this._onColumnRemoved);
+	host.listen("postSectionDataBinding", this._onPostSectionBinding);
+
+	RangeBarPlugin._applyThemeColor(host);
+	if (!this._themeLoading) {
+		this._themeLoading = true;
+		ElfUtil.getThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded);
+	}
+};
+/** @override
+* @ignore
+*/
+RangeBarPlugin.prototype._afterInit = function () {
+	if (!ElfUtil.hasComponent("ef-led-gauge")) {
+		console.log("The LED Gauge component is required for the range bar extension. Please make sure to import both the LED Gauge component and its theme.");
+		RangeBarPlugin._LEDGuage = false;
+	}
+	let colCount = this.getColumnCount();
+	for (let i = 0; i < colCount; ++i) {
+		this._setColumnRenderer(i);
+	}
+};
+/** @public
+* @param {Object} host core grid object
+*/
+RangeBarPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if (at < 0) { return; }
+	this._hosts.splice(at, 1);
+
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("columnRemoved", this._onColumnRemoved);
+	host.unlisten("postSectionDataBinding", this._onPostSectionBinding);
+
+	this._dispose();
+};
+/** @public
+* @param {Object=} options
+*/
+RangeBarPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let extOptions = options["rangeBar"];
+	if (typeof extOptions === "object") {
+
+		let val = extOptions["tooltip"];
+		if (val != null) {
+			this._tooltip = val;
+			LEDGuage.tooltip = val;
+		}
+
+		val = extOptions["valueLabel"];
+		if (val != null) {
+			this.valueLabel = val;
+		}
+
+	}
+
+	let columns = options["columns"];
+	if (!columns) { return; }
+	let len = columns.length;
+	for (let i = 0; i < len; ++i) {
+		this._setColumnRangeBar(i, columns[i]);
+	}
+};
+
+/** @private
+* @param {Object} grid core grid object
+*/
+RangeBarPlugin._applyThemeColor = function (grid) {
+	if (!grid._rangeBarStyles) {
+		grid._rangeBarStyles = true;
+		injectCss(RangeBarPlugin._styles, grid.getElement());
+	}
+};
+
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+RangeBarPlugin.prototype.getConfigObject = function (out_obj) {
+	let obj = out_obj || {};
+
+	let columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	for (let i = 0; i < len; ++i) {
+		if (!columns[i]) {
+			columns[i] = {};
+		}
+		this.getColumnConfigObject(i, columns[i]);
+	}
+
+	let extOptions = obj.rangeBar;
+	if (!extOptions) {
+		extOptions = obj.rangeBar = {};
+	}
+
+	let val = this._tooltip;
+	if (val != true) {
+		extOptions.tooltip = val;
+	}
+
+	val = this.valueLabel;
+	if (val != false) {
+		extOptions.valueLabel = val;
+	}
+
+	return obj;
+};
+
+
+/** Get a column percent bar options from column index
+ * @public
+ * @param {number} colIndex
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+RangeBarPlugin.prototype.getColumnConfigObject = function (colIndex, out_obj) {
+	if (!out_obj) {
+		out_obj = {};
+	}
+
+	let opt = this._getColumnRangeBarOptions(colIndex);
+	if (!opt) {
+		return out_obj;
+	}
+	let rangeBar = out_obj.rangeBar = {};
+
+	if (opt.field != null) {
+		rangeBar.field = opt.field;
+	}
+	if (opt.start != null) {
+		rangeBar.start = opt.start;
+	}
+	if (opt.end != null) {
+		rangeBar.end = opt.end;
+	}
+	if (opt.low != null) {
+		rangeBar.low = opt.low;
+	}
+
+	if (opt.last != null) {
+		rangeBar.last = opt.last;
+	}
+
+	if (opt.high != null) {
+		rangeBar.high = opt.high;
+	}
+
+	if (opt.close != null) {
+		rangeBar.close = opt.close;
+	}
+
+	if (opt.vwap != null) {
+		rangeBar.vwap = opt.vwap;
+	}
+
+	if (opt.tick != null) {
+		rangeBar.tick = opt.tick;
+	}
+
+	return out_obj;
+};
+
+
+/** @public
+* @param {number|string} colRef
+* @param {number|string} rowRef
+* @return {Object}
+*/
+RangeBarPlugin.prototype.getValue = function (colRef, rowRef) {
+	colRef = this.getColumnIndex(colRef);
+	if (colRef < 0) { return null; }
+
+	let rBarOpt = this._getColumnRangeBarOptions(colRef);
+	if (!rBarOpt) { return null; }
+
+	let host = this._hosts[0];
+	let dv = host.getDataSource();
+	if (!dv) { return null; }
+
+	if (typeof rowRef === "string") {
+		rowRef = dv.getRowIndex(rowRef);
+	}
+
+	if (rowRef == null || rowRef < 0) { return null; }
+
+	let rowData = this._getRow(dv, rowRef);
+	if (!rowData) { return null; }
+
+	return LEDGuage.getRangeBarData(rBarOpt, rowData);
+};
+
+/** @public
+* @param {number|string} colRef
+* @param {number|string} rowRef
+* @return {string} text tooltip of cell, otherwise empty string ""
+*/
+RangeBarPlugin.prototype.getTooltipText = function (colRef, rowRef) {
+	colRef = this.getColumnIndex(colRef);
+	if (colRef < 0) { return ""; }
+
+	let rBarOpt = this._getColumnRangeBarOptions(colRef);
+	if (!rBarOpt) { return ""; }
+
+	let host = this._hosts[0];
+	let dv = host.getDataSource();
+	if (!dv) { return ""; }
+
+	if (typeof rowRef === "string") {
+		rowRef = dv.getRowIndex(rowRef);
+	}
+
+	if (rowRef < 0) { return ""; }
+
+	let rowData = this._getRow(dv, rowRef);
+	if (!rowData) { return ""; }
+
+	let rangeBarValues = LEDGuage.getRangeBarData(rBarOpt, rowData);
+
+	if (this._tooltip) {
+		let textTooltip = LEDGuage.calculateTooltip(rBarOpt, rangeBarValues);
+		return textTooltip;
+	}
+
+	return "";
+
+};
+
+/** @private
+* @param {number} colIndex
+* @param {RangeBarPlugin~ColumnOptions} columnOptions
+* @example
+* var colDef = {
+*   "rangeBar": {
+*     "low": "YRLOW",
+*     "high": "YRHIGH",
+*     "last": "CF_LAST"
+*   }
+* };
+*
+* var colDef = {
+*   "rangeBar": {
+*     "field": "PCT_CHNG",
+*     "start": 0,
+*     "end": 100
+*   }
+* };
+*
+* var colDef = {
+*   "rangeBar": true
+* };
+*/
+RangeBarPlugin.prototype._setColumnRangeBar = function (colIndex, columnOptions) {
+	let rDef = columnOptions["rangeBar"];
+	if (rDef) {
+		if (rDef["vwap"] || rDef["close"] || rDef["tick"]) {
+			rDef["priceGraph"] = true; // activate price graph mode
+		}
+		let colData = this._newColumnData(colIndex);
+		if ((rDef === true) || (typeof rDef["field"] === "string")) {
+			// The start and end properties were overwritten by the extension, so the value will be returned from the get configuration even if the user does not set it (minor issue).
+			rDef = {
+				"field": rDef["field"] || columnOptions["field"],
+				"start": rDef["start"] || this._start,
+				"end": typeof rDef["end"] == "number" ? rDef["end"] : this._end
+			};
+		}
+		colData["rangeBar"] = rDef;
+		this._setColumnRenderer(colIndex);
+	}
+};
+/** @private
+* @param {number} colIndex
+*/
+RangeBarPlugin.prototype._setColumnRenderer = function (colIndex) {
+	let rangeBarOption = this._getColumnRangeBarOptions(colIndex);
+	if (rangeBarOption && this._initializedGrid) {
+		if (this._realTimeGrid) {
+			this._realTimeGrid.setColumnRenderer(colIndex, this._renderer);
+		} else {
+			this._hosts[0].setColumnDataBindingHandler(colIndex, this._renderer);
+		}
+	}
+};
+
+/** @private */
+RangeBarPlugin.prototype._onThemeLoaded = function () {
+	for (let i = this._hosts.length; --i >= 0;) {
+		this._hosts[i].requestRowRefresh();
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
+	if (!RangeBarPlugin._LEDGuage) {
+		return;
+	}
+	let section = e["section"];
+	let dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
+	let colCount = section.getColumnCount();
+	let fromR = /** @type{number} */(e["fromRowIndex"]);
+	let toR = /** @type{number} */(e["toRowIndex"]);
+
+	for (let c = 0; c < colCount; ++c) {
+		let rBarOpt = this._getColumnRangeBarOptions(c);
+		if (!rBarOpt) { continue; }
+		let priceGraph = rBarOpt["priceGraph"];
+
+		for (let r = fromR; r < toR; ++r) {
+			let cell = section.getCell(c, r, false);
+			if (!cell) { continue; }
+
+			let rowData = this._getRowData(dataRows[r]);
+			if (!rowData) {
+				continue;
+			}
+
+			let content = cell.getContent();
+			let ledGuage = content;
+			if(!content || !content._ledGuage) {
+				content = new LEDGuage();
+				ledGuage = content._ledGuage = content;
+			}
+			let rangeBarValue = LEDGuage.getRangeBarData(rBarOpt, rowData);
+			ledGuage.setRangeValue(rangeBarValue);
+			if(this._tooltip) {
+				cell.setTooltip(LEDGuage.calculateTooltip(rBarOpt, rangeBarValue));
+			}
+			if(priceGraph != null) {
+				ledGuage.setPriceGraph(priceGraph);
+			}
+			let elContent;
+			if(ledGuage.isNoRangeValue()) {
+				if(this._realTimeGrid && this._realTimeGrid.getRic && this._realTimeGrid.getRic(r)){ // Have prevent update only extension
+					elContent = LEDGuage.createElementWithText("N/A");
+				} else {
+					elContent = LEDGuage.createElementWithText();
+				}
+				cell.setContent(elContent);
+				continue;
+			}
+
+			if(ledGuage.isInvalidRangeValue()) { // invald low or high
+				cell.setContent(LEDGuage.createElementWithText("N/A"));
+				continue;
+			}
+
+			if(ledGuage.isHighLowEqual()) {
+				// all value equal, highlight all bar and value in the middle case
+				cell.setContent(ledGuage.getEqualRangeElement());
+				continue;
+			}
+
+			elContent = ledGuage.getLEDGuageElement();
+			cell.setContent(elContent);
+		}
+	}
+};
+
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+RangeBarPlugin.prototype.isRangeBarColumn = function (colIndex) {
+	return this._getColumnOption(colIndex, "rangeBar") ? true : false;
+};
+
+/** @private
+* @param {Object} e
+*/
+RangeBarPlugin.prototype._renderer = function (e) { };
+
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+RangeBarPlugin.prototype._getColumnRangeBarOptions = function (colIndex) {
+	return this._getColumnOption(colIndex, "rangeBar");
+};
+
+/** @private
+* @param {Object} e
+*/
+RangeBarPlugin.prototype._onColumnAdded = function (e) {
+	if (e["context"]) {
+		this._setColumnRangeBar(e["colIndex"], e["context"]);
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RangeBarPlugin.prototype._onColumnRemoved = function (e) {
+	let colData = /** @type{Object} */(e.columnData);
+	if (!colData) { return; }
+
+	let rDef = colData["rangeBar"];
+	if (!rDef) { return; }
+
+	colData["rangeBar"] = null;
+};
+
+
+export default RangeBarPlugin;
+export { RangeBarPlugin, RangeBarPlugin as RangeBar, RangeBarPlugin as RangeBarExtension };

package/lib/tr-grid-range-bar/es6/index.d.ts

@@ -0,0 +1 @@
+export * from "./RangeBar";

package/lib/tr-grid-range-bar/es6/index.js

@@ -0,0 +1 @@
+export * from "./RangeBar.js";

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -0,0 +1,81 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
+import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+declare namespace RowDraggingPlugin {
+
+    type Options = {
+        dragBox?: boolean|null,
+        disabled?: boolean|null,
+        mouseInput?: boolean|null,
+        dataTransfer?: boolean|null,
+        autoScroll?: boolean|null,
+        dragBoxRenderer?: ((...params: any[]) => any)|null,
+        dragStart?: ((...params: any[]) => any)|null,
+        drag?: ((...params: any[]) => any)|null,
+        dragEnd?: ((...params: any[]) => any)|null,
+        dataMoved?: ((...params: any[]) => any)|null,
+        beforeDataMoved?: ((...params: any[]) => any)|null
+    };
+
+}
+
+declare class RowDraggingPlugin extends GridPlugin {
+
+    constructor(options?: RowDraggingPlugin.Options|null);
+
+    public hasMultiTableSupport(): boolean;
+
+    public getName(): string;
+
+    public initialize(host: any, options: any): void;
+
+    public unload(host: any): void;
+
+    public config(options?: any): void;
+
+    public getConfigObject(out_obj?: any): any;
+
+    public startDrag(startRef?: any): void;
+
+    public stopDrag(): void;
+
+    public cancelDrag(): void;
+
+    public getGuideline(): Element|null;
+
+    public disable(disabled?: boolean|null): void;
+
+    public isDisabled(): boolean;
+
+    public disableUIs(disabled?: boolean|null): void;
+
+    public allowDrag(allowed?: boolean|null): void;
+
+    public allowDrop(allowed?: boolean|null): void;
+
+    public setDragContent(content: any): void;
+
+    public getDragBox(): Element|null;
+
+    public getDragSource(): string;
+
+    public isDragging(): boolean;
+
+    public disableDragging(disabled?: boolean|null): void;
+
+    public enableJETDragAndDrop(enabled?: boolean|null): void;
+
+    public getJETDragContent(): any;
+
+    public setJETDragContent(content: any): void;
+
+    public moveRows(srcRowIndices: (number)[]|null, destRowIndex: number, srcGrid?: any, destGrid?: any): number;
+
+}
+
+export default RowDraggingPlugin;
+export { RowDraggingPlugin, RowDraggingPlugin as RowDragging, RowDraggingPlugin as RowDraggingExtension };