@refinitiv-ui/efx-grid 6.0.129 → 6.0.131

package/lib/rt-grid/es6/Grid.d.ts

@@ -258,6 +258,8 @@ declare class Grid extends EventDispatcher {
 
     public hasRic(): boolean;
 
+    public getRic(rowRef?: (string|number)|null): string;
+
     public setRowData(rowRef: Grid.RowReference|null, values: any): void;
 
     public setStaticRowData(rowRef: Grid.RowReference|null, values: any): void;

package/lib/rt-grid/es6/Grid.js

@@ -175,6 +175,14 @@ import { ElementWrapper } from "../../core/es6/grid/components/ElementWrapper.js
 * @description Fired only when a row will be removed through Grid's API and before occurring of the actual removal
 */
 
+/** @event Grid#beforeUnlinked
+* @description Trigger before unlinking a chain row.
+* @type {Object}
+* @property {RowDefinition} chain An row definition object of a chain row.
+* @property {boolean} collapsed Collapsing state of a chain row.
+* @property {Object} ridMap A map of constituent rics and row ids used to customize row ids.
+*/
+
 /** @private
 * @param {RowDefinition} rowDef
 * @return {Object}
@@ -609,11 +617,6 @@ Grid.prototype._topSection = true;
 * @private
 */
 Grid.prototype._focusingArgs = null;
-/** @type {boolean}
-* @private
-*/
-Grid.prototype._unlinking = false;
-
 
 /** @public
 */
@@ -2842,13 +2845,41 @@ Grid.prototype.unlinkChain = function(rowRef) {
 		return;
 	}
 
-	this._unlinking = true;
-
 	let childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
 	if(childRowDefs) {
-		if(rowDef.isChainExpanded()) {
-			for(let i = 0; i < childRowDefs.length; i++) {
-				childRowDefs[i].toRealTimeRow();
+		let len = childRowDefs.length;
+		let ridMap = {};
+		for(let i = 0; i < len; i++) {
+			ridMap[childRowDefs[i].getRic()] = "";
+		}
+		let collapsed = rowDef.isChainCollapsed();
+		let args = {
+			chain: rowDef,
+			collapsed: collapsed,
+			ridMap: ridMap
+		};
+		this._dispatch("beforeUnlinked", args);
+
+		if(!collapsed) {
+			let rowIdChanged = false;
+			let ridPair = {};
+			for(let i = 0; i < len; i++) {
+				let childRowDef = childRowDefs[i];
+				let mappedRowId = ridMap[childRowDef.getRic()];
+				if(mappedRowId) {
+					if(mappedRowId.match(RowDefinition.ROW_ID_PATTERN)) {
+						console.warn("Please change the rowId format to avoid duplicated rows' id causing unexpected behavior.");
+						mappedRowId = "";
+					} else {
+						rowIdChanged = true;
+						ridPair[childRowDef.getRowId()] = mappedRowId;
+					}
+				}
+				childRowDef.toRealTimeRow(mappedRowId);
+			}
+			if(rowIdChanged) {
+				this._dc.replaceRowIds(ridPair);
+				this._dt.replaceRowIds(ridPair);
 			}
 		} else {
 			this._removeConstituentRows(childRowDefs);
@@ -2856,8 +2887,6 @@ Grid.prototype.unlinkChain = function(rowRef) {
 	}
 
 	rowDef.unlinkChain();
-
-	this._unlinking = false;
 };
 
 /** Alias to setRic
@@ -3171,6 +3200,15 @@ Grid.prototype.getAllRics = function() {
 Grid.prototype.hasRic = function() {
 	return this._connector.hasRic();
 };
+/** Returns RIC of given row reference.
+* @public
+* @param {(string|number)=} rowRef
+* @return {string}
+*/
+Grid.prototype.getRic = function(rowRef) {
+	let rowDef = this.getRowDefinition(rowRef);
+	return rowDef.getRic();
+};
 /** A shorthand to set row data based on index of the specified row. It is better to keep rowDefinition object for updating data directly as row index can be changed by sorting and filtering.
 * @public
 * @param {Grid~RowReference} rowRef

package/lib/rt-grid/es6/RowDefinition.d.ts

@@ -102,7 +102,7 @@ declare class RowDefinition {
 
     public subscribeForUpdates(subs?: any): boolean;
 
-    public unsubscribeForUpdates(): null;
+    public unsubscribeForUpdates(keepData?: boolean|null): null;
 
     public isSubscribing(): boolean;
 

package/lib/rt-grid/es6/RowDefinition.js

@@ -48,12 +48,6 @@ const ROW_TYPES = {
 	GROUP_MEMBER: "GROUP_MEMBER"
 };
 
-/** @type {RegExp}
-* @private
-* @const
-*/
-const ROW_ID_PATTERN = /^_[^_]+_$/;
-
 /** @private
 * @function
 * @param {Object} obj
@@ -98,6 +92,11 @@ RowDefinition._runningId = 0;
 * @private
 */
 RowDefinition._childDataField = "CHILD_VALUES";
+/** @type {RegExp}
+* @private
+* @const
+*/
+RowDefinition.ROW_ID_PATTERN = /^_[^_]+_$/;
 //#region Private Members
 /** @type {string}
 * @private
@@ -253,7 +252,7 @@ RowDefinition.prototype.initialize = function(rowOptions) {
 	if(!this._autoGenerated) {
 		let userRowId = rowOptions["rowId"];
 		if(userRowId && typeof userRowId === "string") {
-			if(userRowId.match(ROW_ID_PATTERN)) {
+			if(userRowId.match(RowDefinition.ROW_ID_PATTERN)) {
 				console.warn("Please change the rowId format to avoid duplicated rows' id causing unexpected behavior.");
 			} else {
 				this._rowId = userRowId;
@@ -904,12 +903,7 @@ RowDefinition.prototype.isRealTimeRow = function() {
 * @return {boolean} If a subscription is made, return true.
 */
 RowDefinition.prototype.subscribeForUpdates = function(subs) {
-	if(subs) {
-		this._subs = subs;
-	} else {
-		subs = this._subs;
-	}
-	if(!subs) {
+	if(!(subs  || this._subs)) {
 		return false;
 	}
 	if(!this.isRealTimeRow() && !this.getPermId()) {
@@ -917,7 +911,11 @@ RowDefinition.prototype.subscribeForUpdates = function(subs) {
 	}
 	// TODO: Check if the same subscription is being made.
 	this.unsubscribeForUpdates();
-
+	if(subs) {
+		this._subs = subs;
+	} else {
+		subs = this._subs;
+	}
 	if(this.isChain()) {
 		let symbol = this._chainRic;
 		if(!symbol){
@@ -941,14 +939,17 @@ RowDefinition.prototype.subscribeForUpdates = function(subs) {
 };
 /** Unsubscribe existing real-time data service. Static data is maintained
 * @public
+* @param {boolean=} keepData
 * @returns {null} Always return null
 */
-RowDefinition.prototype.unsubscribeForUpdates = function() {
+RowDefinition.prototype.unsubscribeForUpdates = function(keepData) {
 	if(this.isSubscribing()) { // Only normal real-time rows and chains have both subId and subscription object
 		this._subs["removeSubscription"](this._subId);
 		this._subId = "";
-		this.resetUpdates();
-		this.resetRowData(); // Real-time data is removed while static data is maintained
+		if(!keepData) {
+			this.resetUpdates();
+			this.resetRowData(); // Real-time data is removed while static data is maintained
+		}
 	}
 	return null;
 };
@@ -1167,8 +1168,9 @@ RowDefinition.prototype.addConstituent = function(ric) {
 /** Used to convert autogenerated row to regular real-time row
 * @public
 * @ignore
+* @param {string=} userRowId
 */
-RowDefinition.prototype.toRealTimeRow = function() {
+RowDefinition.prototype.toRealTimeRow = function(userRowId) {
 	if(!this.isConstituent()) {
 		return; // Only a constituent can be converted to a real-time row
 	}
@@ -1179,7 +1181,11 @@ RowDefinition.prototype.toRealTimeRow = function() {
 	this._parent = null;
 	this._depthLevel = 0;
 
-	this.resetRowData(); // WARNING: existing real-time data is lost after this line
+	if(userRowId) {
+		this._rowId = userRowId;
+		this._userId = true;
+	}
+
 	this.subscribeForUpdates(subs); // Static data remains intact
 };
 
@@ -1190,7 +1196,7 @@ RowDefinition.prototype.unlinkChain = function() {
 		return;
 	}
 
-	this.unsubscribeForUpdates(); // Static data remains intact
+	this.unsubscribeForUpdates(true); // Static data remains intact
 
 	let view = this._view;
 	if(view) {

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.d.ts

@@ -15,7 +15,8 @@ declare namespace ColumnGroupingPlugin {
         tooltip?: (boolean|string)|null,
         children: (string)[]|null,
         alignment?: string|null,
-        render?: ((...params: any[]) => any)|null
+        render?: ((...params: any[]) => any)|null,
+        backgroundColor?: string|null
     };
 
 }

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -19,6 +19,7 @@ import { cloneObject, injectCss, prettifyCss, deepEqual } from "../../tr-grid-ut
 * @property {Array.<string>} children Child member in this group
 * @property {string=} alignment eg. left, center, right
 * @property {Function=} render render function handler
+* @property {string=} backgroundColor Background color of group header
 */
 
 /** @constructor
@@ -501,7 +502,8 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
 	let rowCount = this._maxDepth + 1;
 	let hostCount = this._hosts.length;
 	for(i = hostCount; --i >= 0;) {
-		section = this._hosts[i].getSection("title");
+		let host = this._hosts[i];
+		section = host.getSection("title");
 		if(section) {
 			section.setRowCount(rowCount); // This will cause postSectionRender event to be fired
 			section.clearCellSpans();
@@ -522,6 +524,9 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
 					}
 				}
 			}
+			if(host.applyColumnsBackgroundColor) {
+				host.applyColumnsBackgroundColor(section);
+			}
 
 			this._spanGroupVertically(section);
 			// TODO: Some calculation in here should not be done in this loop
@@ -833,8 +838,9 @@ ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection)
 			section.setCellColSpan(start, groupDef["onRow"], end - start + 1);
 			groupDef["colIndex"] = start;
 
+			let cell = section.getCell(start, groupDef["onRow"]);
+			cell.setStyle("backgroundColor", groupDef["backgroundColor"] || "");
 			if(isAllSelected){
-				let cell = section.getCell(start, groupDef["onRow"]);
 				cell.addClass("selected-group");
 			}
 		}

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

@@ -0,0 +1,39 @@
+
+
+declare namespace LEDGuage {
+
+    type RangeValues = {
+        low?: number|null,
+        last?: number|null,
+        high?: number|null,
+        close?: number|null,
+        vwap?: number|null,
+        tick?: number|null
+    };
+
+}
+
+declare class LEDGuage {
+
+    constructor();
+
+    public static createElementWithText(text?: string|null): Element|null;
+
+    public setPriceGraph(priceGraph?: boolean|null): void;
+
+    public setRangeValue(rangeBarData: LEDGuage.RangeValues|null): void;
+
+    public isNoRangeValue(): boolean;
+
+    public isHighLowEqual(): boolean;
+
+    public isInvalidRangeValue(): boolean;
+
+    public getEqualRangeElement(): Element|null;
+
+    public getLEDGuageElement(): Element|null;
+
+}
+
+export default LEDGuage;
+export { LEDGuage };

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

@@ -0,0 +1,261 @@
+
+
+const TICK_COLOR_MAPPING = ["var(--color-scheme-neutral)", "var(--color-scheme-tickup)", "var(--color-scheme-tickdown)"]; // ["level", "up", "down"]
+
+/** @typedef {Object} LEDGuage~RangeValues
+* @description Object of range values.
+* @property {number=} low Field used as minimum range
+* @property {number=} last Field used as current absolute value (white bar)
+* @property {number=} high Field used as maximum range
+* @property {number=} close Field used as close price
+* @property {number=} vwap Field used as volume weighted average price (VWAP)
+* @property {number=} tick Field used as tick color
+*/
+
+/**
+* @constructor
+*/
+var LEDGuage = function () {
+	this._elem = document.createElement("ef-led-gauge");
+	this._elem.neutralColor = true; // TODO: Color should set by user
+};
+
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._low = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._last = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._high = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._close = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._vwap = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._tick = null;
+/** @private
+ * @type {boolean}
+*/
+LEDGuage.prototype._priceGraph = false;
+
+/** @private
+ * @param {LEDGuage~RangeValues} rBarOpt range
+ * @param {!Object} rangeBarValues
+ * @return {string} tooltip string value
+*/
+LEDGuage.calculateTooltip = function (rBarOpt, rangeBarValues) {
+	var low = rangeBarValues.low;
+	var last = rangeBarValues.last;
+	var high = rangeBarValues.high;
+	var vwap = rangeBarValues.vwap;
+	var close = rangeBarValues.close;
+	var priceGraph = rBarOpt.priceGraph;
+
+	var textTooltip;
+	if (rBarOpt["field"]) { // WARNING: Field overwrite low last high tooltip
+		textTooltip = (last != null ? last : '--');
+	} else { // provide low,last,high case
+		var lowValue = low != null ? low : '--';
+		var lastValue = last != null ? last : '--';
+		var highValue = high != null ? high : '--';
+		if (priceGraph) {
+			var vwapValue = vwap != null ? vwap : '--';
+			var closeValue = close != null ? close : '--';
+			textTooltip = 'Low: ' + lowValue + " " +
+				'Last: ' + lastValue + " " +
+				'High: ' + highValue + " " +
+				'VWAP: ' + vwapValue + " " +
+				'Close: ' + closeValue + " ";
+		} else {
+			textTooltip = 'Low: ' + lowValue + " " +
+				'Last: ' + lastValue + " " +
+				'High: ' + highValue;
+		}
+	}
+	return textTooltip;
+};
+
+/** Used for convert the rangeBarOption and rowData into an object that has the properties of low, last, and high.
+ * @private
+ * @param {LEDGuage~RangeValues} rBarOpt
+ * @param {Object} rowData
+ * @return {LEDGuage~RangeValues}
+*/
+LEDGuage.getRangeBarData = function (rBarOpt, rowData) {
+	var low, high, last, close, vwap, tick;
+	if (rBarOpt.field) {
+		// Doesn't defined range bar data, use field instead
+		low = rBarOpt.start;
+		last = rowData[rBarOpt.field];
+		high = rBarOpt.end;
+	} else {
+		// Defined range bar data
+		low = rowData[rBarOpt.low];
+		last = rowData[rBarOpt.last];
+		high = rowData[rBarOpt.high];
+		close = rowData[rBarOpt.close];
+		vwap = rowData[rBarOpt.vwap];
+		tick = rowData[rBarOpt.tick];
+	}
+	return {
+		low: low,
+		last: last,
+		high: high,
+		close: close,
+		vwap: vwap,
+		tick: tick
+	};
+};
+
+/** Used for tranfrom value from raw value to normalize value (Percent value between -100 to 100)
+* @private
+* @param {number} low
+* @param {number} current
+* @param {number} high
+* @return {number}
+*/
+LEDGuage.normalizeValue = function (low, current, high) {
+	return ((low - current) * 200) / (low - high) - 100;
+};
+
+/** Create element and set given text.
+ * @public
+ * @param {string=} text="" Set text to element
+ * @return {Element}
+ */
+LEDGuage.createElementWithText = function (text) {
+	let span = document.createElement("span");
+	span.textContent = text ? text : "";
+	return span;
+};
+
+/** Set price graph flag to render price graph mode
+ * @public
+ * @param {boolean=} priceGraph=false
+ */
+LEDGuage.prototype.setPriceGraph = function (priceGraph) {
+	this._priceGraph = priceGraph;
+};
+
+/** Set value to render LED-Guage
+ * @public
+ * @param {LEDGuage~RangeValues} rangeBarData
+ */
+LEDGuage.prototype.setRangeValue = function (rangeBarData) {
+	this._low = rangeBarData.low;
+	this._last = rangeBarData.last;
+	this._high = rangeBarData.high;
+	this._close = rangeBarData.close;
+	this._vwap = rangeBarData.vwap;
+	this._tick = rangeBarData.tick;
+};
+
+/**
+ * @public
+ * @return {boolean}
+ */
+LEDGuage.prototype.isNoRangeValue = function () {
+	return this._high == null && this._low == null && this._last == null;
+};
+
+/**
+ * @public
+ * @return {boolean}
+ */
+LEDGuage.prototype.isHighLowEqual = function () {
+	return this._high === this._low && this._high === this._last;
+};
+
+/**
+ * @public
+ * @return {boolean}
+ */
+LEDGuage.prototype.isInvalidRangeValue = function () {
+	return this._high == null || this._low == null || this._high < this._low;
+};
+
+/**
+ * @public
+ * @return {Element} LEDGuage Element
+ */
+LEDGuage.prototype.getEqualRangeElement = function () {
+	this._elem.range = [-100, 100];
+	this._elem.topValue = 0;
+	return this._elem;
+};
+
+/**
+ * @public
+ * @return {Element} LEDGuage Element
+ */
+LEDGuage.prototype.getLEDGuageElement = function () {
+	let close = this._close;
+	let vwap = this._vwap;
+	let low = this._low;
+	let last = this._last;
+	let high = this._high;
+	let lastNormalize = LEDGuage.normalizeValue(low, last, high);
+	if (this._priceGraph) {
+		let vwapNormalize = LEDGuage.normalizeValue(low, vwap, high);
+		let rangeColor;
+		if (close > last) {
+			rangeColor = "var(--color-scheme-tickdown)";
+		} else {
+			rangeColor = "var(--color-scheme-tickup)";
+		}
+
+		let leftSegmentValue = LEDGuage.normalizeValue(low, close, high);
+		let rangeValue;
+		if (lastNormalize < leftSegmentValue) {
+			rangeValue = [lastNormalize, leftSegmentValue];
+		} else {
+			rangeValue = [leftSegmentValue, lastNormalize];
+		}
+		this._elem.range = rangeValue;
+		this._elem.topValue = lastNormalize;
+		this._elem.bottomValue = vwapNormalize;
+		this._elem.style.setProperty("--range-color", rangeColor);
+		this._elem.style.setProperty("--bottom-selected-color", "var(--neutral-color)");
+		this._elem.style.setProperty("--top-selected-color", TICK_COLOR_MAPPING[this._tick]);
+		this._elem.style.setProperty("--clash-color", "var(--color-scheme-secondary)");
+	} else {
+		// applied range when the last value out of range, by set new low/high with last value
+		if (last < low) {
+			let lowNormalize = LEDGuage.normalizeValue(last, low, high);
+			this._elem.range = [lastNormalize, lowNormalize];
+		} else if (last > high) {
+			let highNormalize = LEDGuage.normalizeValue(low, high, last);
+			this._elem.range = [highNormalize, lastNormalize];
+		}
+
+		if (low === high) { // low equal high case (avoid normalize to infinity)
+			this._elem.range = [-100, 100];
+			lastNormalize = last < low ? -100 : 100; // topValue will be left or right
+		}
+
+		if (last == null) { // only last is empty (low and high should have value)
+			this._elem.range = [];
+			lastNormalize = null;
+		}
+
+		this._elem.topValue = lastNormalize;
+	}
+
+	return this._elem;
+};
+
+
+
+export default LEDGuage;
+export { LEDGuage };

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

@@ -1,7 +1,8 @@
-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 { 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";
 
 declare namespace RangeBarPlugin {