@refinitiv-ui/efx-grid 6.0.35 → 6.0.36

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

@@ -15,7 +15,10 @@ declare namespace RangeBarPlugin {
         end?: number|null,
         low?: string|null,
         high?: string|null,
-        last?: string|null
+        last?: string|null,
+        vwap?: string|null,
+        close?: string|null,
+        tick?: string|null
     };
 
     type Options = {

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

@@ -17,6 +17,9 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @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
@@ -26,15 +29,15 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 // 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
 
-/** Used for tranfrom value from raw value to normalize value
+/** Used for tranfrom value from raw value to normalize value (Percent value between -100 to 100)
 * @private
 * @param {number} low
-* @param {number} last
+* @param {number} current
 * @param {number} high
 * @return {number}
 */
-var _normalizeValue = function _normalizeValue(low, last, high) {
-  return (low - last) * 200 / (low - high) - 100;
+var _normalizeValue = function _normalizeValue(low, current, high) {
+  return (low - current) * 200 / (low - high) - 100;
 };
 
 /** Used for convert the rangeBarOption and rowData into an object that has the properties of low, last, and high.
@@ -43,26 +46,37 @@ var _normalizeValue = function _normalizeValue(low, last, high) {
  * @param {Object} rowData
  * @return {Object}
 */
-var _getLowLastHighValue = function _getLowLastHighValue(rBarOpt, rowData) {
-  var low, high, last;
+var _getRangeBarData = function _getRangeBarData(rBarOpt, rowData) {
+  var low, high, last, close, vwap, tick;
   if (rBarOpt.field) {
-    // Doesn't defined low,last,high
+    // Doesn't defined range bar data, use field instead
     low = rBarOpt.start;
     last = rowData[rBarOpt.field];
     high = rBarOpt.end;
   } else {
-    // Defined low,last,high case
+    // 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
+    high: high,
+    close: close,
+    vwap: vwap,
+    tick: tick
   };
 };
 
+/** @type {Array<string>}
+* @constant
+*/
+var TICK_COLOR_MAPPING = ["var(--color-scheme-neutral)", "var(--color-scheme-tickup)", "var(--color-scheme-tickdown)"]; // ["level", "up", "down"]
+
 /** @constructor
 * @extends {GridPlugin}
 */
@@ -253,6 +267,15 @@ RangeBarPlugin.prototype.getColumnConfigObject = function (colIndex, out_obj) {
   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;
 };
 
@@ -285,7 +308,7 @@ RangeBarPlugin.prototype.getValue = function (colRef, rowRef) {
   if (!rowData) {
     return null;
   }
-  return _getLowLastHighValue(rBarOpt, rowData);
+  return _getRangeBarData(rBarOpt, rowData);
 };
 
 /** @public
@@ -310,16 +333,16 @@ RangeBarPlugin.prototype.getTooltipText = function (colRef, rowRef) {
   if (typeof rowRef === "string") {
     rowRef = dv.getRowIndex(rowRef);
   }
-  if (rowRef == "" || rowRef < 0) {
+  if (rowRef < 0) {
     return "";
   }
   var rowData = this._getRow(dv, rowRef);
   if (!rowData) {
     return "";
   }
-  var lowLastHigh = _getLowLastHighValue(rBarOpt, rowData);
+  var rangeBarValues = _getRangeBarData(rBarOpt, rowData);
   if (this._tooltip) {
-    var textTooltip = this._calculateTooltip(rBarOpt, lowLastHigh);
+    var textTooltip = this._calculateTooltip(rBarOpt, rangeBarValues);
     return textTooltip;
   }
   return "";
@@ -327,13 +350,16 @@ RangeBarPlugin.prototype.getTooltipText = function (colRef, rowRef) {
 
 /** @private
  * @param {RangeBarPlugin~RangeDefinition} rBarOpt range
- * @param {!Object} lowLastHigh
+ * @param {!Object} rangeBarValues
  * @return {string} tooltip string value
 */
-RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, lowLastHigh) {
-  var low = lowLastHigh.low;
-  var last = lowLastHigh.last;
-  var high = lowLastHigh.high;
+RangeBarPlugin.prototype._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"]) {
     // doesn't provide low,last,high case
@@ -343,7 +369,13 @@ RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, lowLastHigh) {
     var lowValue = low != null ? low : '--';
     var lastValue = last != null ? last : '--';
     var highValue = high != null ? high : '--';
-    textTooltip = 'Low: ' + lowValue + " " + 'Last: ' + lastValue + " " + 'High: ' + highValue;
+    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;
 };
@@ -375,6 +407,10 @@ RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, lowLastHigh) {
 RangeBarPlugin.prototype._setColumnRangeBar = function (colIndex, columnOptions) {
   var rDef = columnOptions["rangeBar"];
   if (rDef) {
+    if (rDef["vwap"] || rDef["close"] || rDef["tick"]) {
+      rDef["priceGraph"] = true; // activate price graph mode
+    }
+
     var 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).
@@ -423,16 +459,17 @@ RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
     if (!rBarOpt) {
       continue;
     }
+    var priceGraph = rBarOpt["priceGraph"];
     for (var r = fromR; r < toR; ++r) {
       var cell = section.getCell(c, r, false);
       if (!cell) {
         continue;
       }
       var rowData = this._getRowData(dataRows[r]);
-      var lowLastHigh = _getLowLastHighValue(rBarOpt, rowData);
-      var low = lowLastHigh.low;
-      var last = lowLastHigh.last;
-      var high = lowLastHigh.high;
+      var rangeBarData = _getRangeBarData(rBarOpt, rowData);
+      var low = rangeBarData.low;
+      var last = rangeBarData.last;
+      var high = rangeBarData.high;
       var content = cell.getContent();
       var rangeBar = content ? content._rangeBar : null;
       if (!rangeBar) {
@@ -442,7 +479,7 @@ RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
         content = rangeBar;
       }
       if (this._tooltip) {
-        var textTooltip = this._calculateTooltip(rBarOpt, lowLastHigh);
+        var textTooltip = this._calculateTooltip(rBarOpt, rangeBarData);
         cell.setTooltip(textTooltip); // WARNING: this may be confuse with auto-tooltip extension
       }
 
@@ -464,22 +501,45 @@ RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
 
       // Clear the current range for apply a new one.
       rangeBar.range.length = 0;
+      if (priceGraph) {
+        var close = rangeBarData.close;
+        var vwap = rangeBarData.vwap;
+        var vwapNormalize = _normalizeValue(low, vwap, high);
+        var rangeColor;
+        if (close > last) {
+          rangeColor = "var(--color-scheme-tickdown)";
+        } else {
+          rangeColor = "var(--color-scheme-tickup)";
+        }
+        var leftSegmentValue = _normalizeValue(low, close, high);
+        var rangeValue;
+        if (lastNormalize < leftSegmentValue) {
+          rangeValue = [lastNormalize, leftSegmentValue];
+        } else {
+          rangeValue = [leftSegmentValue, lastNormalize];
+        }
+        rangeBar.range = rangeValue;
+        rangeBar.topValue = lastNormalize;
+        rangeBar.bottomValue = vwapNormalize;
+        rangeBar.style.setProperty("--range-color", rangeColor);
+        rangeBar.style.setProperty("--bottom-selected-color", "var(--neutral-color)");
+        rangeBar.style.setProperty("--top-selected-color", TICK_COLOR_MAPPING[rangeBarData.tick]);
+        rangeBar.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) {
+          var lowNormalize = _normalizeValue(last, low, high);
+          rangeBar.range = [lastNormalize, lowNormalize];
+        } else if (last > high) {
+          var highNormalize = _normalizeValue(low, high, last);
+          rangeBar.range = [highNormalize, lastNormalize];
+        }
+        // else {} // It is not necessary to apply a range in the case of equal low and high values
 
-      // applied range when the last value out of range, by set new low/high with last value
-      if (last < low) {
-        lastNormalize = _normalizeValue(last, last, high);
-        var lowNormalize = _normalizeValue(last, low, high);
-        rangeBar.range = [lastNormalize, lowNormalize];
-      } else if (last > high) {
-        lastNormalize = _normalizeValue(low, last, last);
-        var highNormalize = _normalizeValue(low, high, last);
-        rangeBar.range = [highNormalize, lastNormalize];
-      }
-      // else {} // It is not necessary to apply a range in the case of equal low or high values
-
-      rangeBar.topValue = lastNormalize;
-      if (this.valueLabel) {
-        rangeBar.topLabel = last;
+        rangeBar.topValue = lastNormalize;
+        if (this.valueLabel) {
+          rangeBar.topLabel = last;
+        }
       }
       cell.setContent(content);
     }

package/lib/tr-grid-util/es6/GroupDefinitions.d.ts

@@ -18,6 +18,8 @@ declare class GroupDefinitions {
 
     public getGroups(): (any)[];
 
+    public getGroupIds(): (string)[];
+
     public getGroupMap(): { [key: string]:  any };
 
     public cloneGroupMap(): { [key: string]:  any };
@@ -36,6 +38,8 @@ declare class GroupDefinitions {
 
     public getParentId(childId: string, groupLevel?: number|null): string;
 
+    public removeAllGroups(): boolean;
+
     public setGroups(groupDefs?: (any)[]|null): void;
 
     public addGroup(groupDef: any): string;
@@ -46,7 +50,7 @@ declare class GroupDefinitions {
 
     public hasGroupChild(parentId: string, childId: string): boolean;
 
-    public addGroupChild(parentId: string, childId: string): boolean;
+    public addGroupChild(parentId: string, childId: string, position?: number|null): boolean;
 
     public removeGroupChild(parentId: string, childId?: string|null): boolean;
 
@@ -56,6 +60,8 @@ declare class GroupDefinitions {
 
     public setGroupChildren(groupId: string, newChildList: (string)[]|null): boolean;
 
+    public getGroupName(groupId: string): string;
+
     public setGroupName(groupId: string, groupName: string): boolean;
 
 }

package/lib/tr-grid-util/es6/GroupDefinitions.js

@@ -187,6 +187,13 @@ GroupDefinitions.prototype.getGroups = function () {
 	}
 	return groupDefs;
 };
+/** Get array of all existing group ids
+* @public
+* @return {!Array.<string>}
+*/
+GroupDefinitions.prototype.getGroupIds = function () {
+	return Object.keys(this._groupMap);
+};
 /** @public
 * @return {!Object.<string, Object>}
 */
@@ -293,7 +300,18 @@ GroupDefinitions.prototype.getParentId = function (childId, groupLevel) {
 	return parentId || "";
 };
 
-
+/** Remove all existing group definitions
+* @public
+* @return {boolean}
+*/
+GroupDefinitions.prototype.removeAllGroups = function () {
+	for(var groupId in this._groupMap) { // eslint-disable-line
+		this._groupMap = {};
+		this._childToParent = {};
+		return true;
+	}
+	return false;
+};
 /** Remove all existing group definitions and replace them with the given definitions.
 * @public
 * @param {Array.<Object>=} groupDefs Use null or empty array to remove all existing groups
@@ -438,9 +456,10 @@ GroupDefinitions.prototype.hasGroupChild = function (parentId, childId) {
 /** @public
 * @param {string} parentId Group id
 * @param {string} childId
+* @param {number=} position
 * @return {boolean}
 */
-GroupDefinitions.prototype.addGroupChild = function (parentId, childId) {
+GroupDefinitions.prototype.addGroupChild = function (parentId, childId, position) {
 	var groupDef = this._groupMap[parentId];
 
 	if(childId && groupDef) {
@@ -453,7 +472,11 @@ GroupDefinitions.prototype.addGroupChild = function (parentId, childId) {
 			if(childDef) {
 				childDef.parentId = parentId;
 			}
-			chdr.push(childId);
+			if(position != null && position >= 0) {
+				chdr.splice(position, 0, childId);
+			} else {
+				chdr.push(childId);
+			}
 			return true;
 		}
 	}
@@ -562,6 +585,18 @@ GroupDefinitions.prototype.setGroupChildren = function (groupId, newChildList) {
 	}
 	return false;
 };
+
+/** @public
+* @param {string} groupId
+* @return {string}
+*/
+GroupDefinitions.prototype.getGroupName = function (groupId) {
+	var groupDef = this._groupMap[groupId];
+	if(groupDef) {
+		return groupDef.name || "";
+	}
+	return "";
+};
 /** @public
 * @param {string} groupId
 * @param {string} groupName
@@ -578,5 +613,6 @@ GroupDefinitions.prototype.setGroupName = function (groupId, groupName) {
 
 	return false;
 };
+
 export default GroupDefinitions;
 export { GroupDefinitions };

package/lib/types/es6/Core/grid/Core.d.ts

@@ -1,5 +1,6 @@
 import Ext from "../../../../tr-grid-util/es6/Ext.js";
 import GroupDefinitions from "../../../../tr-grid-util/es6/GroupDefinitions.js"; // eslint-disable-line
+import { isEmptyObject } from "../../../../tr-grid-util/es6/Util.js";
 import ElementWrapper from "./components/ElementWrapper.js";
 import ILayoutGrid from "./ILayoutGrid.js"; // eslint-disable-line
 import LayoutGrid from "./LayoutGrid.js";
@@ -32,6 +33,13 @@ declare namespace Core {
         dataSource: DataView|null
     };
 
+    type BatchInfo = {
+        reset?: string|null,
+        insertion?: string|null,
+        removal?: string|null,
+        moving?: string|null
+    };
+
     type CellReference = Core.MouseInfo|ElementWrapper|Element|null;
 
     type ColumnOptions = {
@@ -395,6 +403,10 @@ declare class Core extends ElementWrapper {
 
     public getColumnGroupChildIds(groupId: string): (string)[]|null;
 
+    public startBatch(batchType: string): boolean;
+
+    public stopBatch(batchType: string): boolean;
+
     public getColumnId(colIndex: number): string;
 
     public getColumnIds(): (string)[];

package/lib/versions.json

@@ -1,5 +1,5 @@
 {
-	"tr-grid-util": "1.3.101",
+	"tr-grid-util": "1.3.103",
 	"@grid/column-dragging": "1.0.13",
 	"@grid/row-segmenting": "1.0.23",
 	"@grid/statistics-row": "1.0.14",
@@ -12,7 +12,7 @@
 	"tr-grid-column-grouping": "1.0.47",
 	"tr-grid-column-resizing": "1.0.28",
 	"tr-grid-column-selection": "1.0.28",
-	"tr-grid-column-stack": "1.0.57",
+	"tr-grid-column-stack": "1.0.58",
 	"tr-grid-conditional-coloring": "1.0.61",
 	"tr-grid-content-wrap": "1.0.20",
 	"tr-grid-contextmenu": "1.0.38",
@@ -22,7 +22,7 @@
 	"tr-grid-pagination": "1.0.24",
 	"tr-grid-percent-bar": "1.0.22",
 	"tr-grid-printer": "1.0.16",
-	"tr-grid-range-bar": "2.0.3",
+	"tr-grid-range-bar": "2.0.4",
 	"tr-grid-row-dragging": "1.0.27",
 	"tr-grid-row-filtering": "1.0.55",
 	"tr-grid-row-grouping": "1.0.80",

package/package.json

@@ -66,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.35"
+	"version": "6.0.36"
 }