@refinitiv-ui/efx-grid 6.0.24 → 6.0.26

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

@@ -1,8 +1,9 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 import { Ext } from '../../tr-grid-util/es6/Ext.js';
 import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { RangeBar } from '../../tr-grid-util/es6/RangeBar.js';
-import { Dom } from '../../tr-grid-util/es6/Dom.js';
 import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.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
@@ -18,38 +19,91 @@ import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
 * @property {string=} last="" Field used as current absolute value (white bar)
 */
 
+/** @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
+
+/** Used for tranfrom value from raw value to normalize value
+* @private
+* @param {number} low
+* @param {number} last
+* @param {number} high
+* @return {number}
+*/
+var _normalizeValue = function _normalizeValue(low, last, high) {
+  return (low - last) * 200 / (low - high) - 100;
+};
+
+/** Used for convert the rangeBarOption and rowData into an object that has the properties of low, last, and high.
+ * @private
+ * @param {RangeBarPlugin~RangeDefinition} rBarOpt
+ * @param {Object} rowData
+ * @return {Object}
+*/
+var _getLowLastHighValue = function _getLowLastHighValue(rBarOpt, rowData) {
+  var low, high, last;
+  if (rBarOpt.field) {
+    // Doesn't defined low,last,high
+    low = rBarOpt.start;
+    last = rowData[rBarOpt.field];
+    high = rBarOpt.end;
+  } else {
+    // Defined low,last,high case
+    low = rowData[rBarOpt.low];
+    last = rowData[rBarOpt.last];
+    high = rowData[rBarOpt.high];
+  }
+  return {
+    low: low,
+    last: last,
+    high: high
+  };
+};
+
 /** @constructor
 * @extends {GridPlugin}
 */
-
 var RangeBarPlugin = function RangeBarPlugin() {
+  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.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
 };
@@ -57,30 +111,26 @@ RangeBarPlugin.prototype.getName = function () {
 * @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 */
-
-
+/** @override
+* @ignore
+*/
 RangeBarPlugin.prototype._afterInit = function () {
   var colCount = this.getColumnCount();
-
   for (var i = 0; i < colCount; ++i) {
     this._setColumnRenderer(i);
   }
@@ -88,104 +138,216 @@ RangeBarPlugin.prototype._afterInit = function () {
 /** @public
 * @param {Object} host core grid object
 */
-
-
 RangeBarPlugin.prototype.unload = function (host) {
   var 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;
   }
-
+  var extOptions = options["rangeBar"];
+  if (_typeof(extOptions) === "object") {
+    var val = extOptions["tooltip"];
+    if (val != null) {
+      this._tooltip = val;
+    }
+    val = extOptions["valueLabel"];
+    if (val != null) {
+      this.valueLabel = val;
+    }
+  }
   var columns = options["columns"];
-
   if (!columns) {
     return;
   }
-
   var len = columns.length;
-
   for (var 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) {
   var obj = out_obj || {};
   var columns = obj.columns;
-
   if (!columns) {
     columns = obj.columns = [];
   }
-
   var len = this.getColumnCount();
-
   for (var i = 0; i < len; ++i) {
-    var col = columns[i];
-
-    if (!col) {
-      col = columns[i] = {};
-    }
-
-    var opt = this._getColumnData(i);
-
-    if (!opt || !opt.rangeBar) {
-      continue;
-    }
-
-    var rangeBar = col.rangeBar = {};
-    opt = opt.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 (!columns[i]) {
+      columns[i] = {};
     }
+    this.getColumnConfigObject(i, columns[i]);
+  }
+  var extOptions = obj.rangeBar;
+  if (!extOptions) {
+    extOptions = obj.rangeBar = {};
+  }
+  var val = this._tooltip;
+  if (val != true) {
+    extOptions.tooltip = val;
+  }
+  val = this.valueLabel;
+  if (val != false) {
+    extOptions.valueLabel = val;
+  }
+  return obj;
+};
 
-    if (opt.low != null) {
-      rangeBar.low = opt.low;
-    }
+/** 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 = {};
+  }
+  var opt = this._getColumnRangeBarOptions(colIndex);
+  if (!opt) {
+    return out_obj;
+  }
+  var 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;
+  }
+  return out_obj;
+};
 
-    if (opt.high != null) {
-      rangeBar.high = opt.high;
-    }
+/** @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;
+  }
+  var rBarOpt = this._getColumnRangeBarOptions(colRef);
+  if (!rBarOpt) {
+    return null;
+  }
+  var host = this._hosts[0];
+  var dv = host.getDataSource();
+  if (!dv) {
+    return null;
+  }
+  if (typeof rowRef === "string") {
+    rowRef = dv.getRowIndex(rowRef);
+  }
+  if (rowRef == null || rowRef < 0) {
+    return null;
+  }
+  var rowData = this._getRow(dv, rowRef);
+  if (!rowData) {
+    return null;
+  }
+  return _getLowLastHighValue(rBarOpt, rowData);
+};
 
-    if (opt.last != null) {
-      rangeBar.last = opt.last;
-    }
+/** @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 "";
+  }
+  var rBarOpt = this._getColumnRangeBarOptions(colRef);
+  if (!rBarOpt) {
+    return "";
+  }
+  var host = this._hosts[0];
+  var dv = host.getDataSource();
+  if (!dv) {
+    return "";
+  }
+  if (typeof rowRef === "string") {
+    rowRef = dv.getRowIndex(rowRef);
   }
+  if (rowRef == "" || rowRef < 0) {
+    return "";
+  }
+  var rowData = this._getRow(dv, rowRef);
+  if (!rowData) {
+    return "";
+  }
+  var lowLastHigh = _getLowLastHighValue(rBarOpt, rowData);
+  if (this._tooltip) {
+    var textTooltip = this._calculateTooltip(rBarOpt, lowLastHigh);
+    return textTooltip;
+  }
+  return "";
+};
 
-  return obj;
+/** @private
+ * @param {RangeBarPlugin~RangeDefinition} rBarOpt range
+ * @param {!Object} lowLastHigh
+ * @return {string} tooltip string value
+*/
+RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, lowLastHigh) {
+  var low = lowLastHigh.low;
+  var last = lowLastHigh.last;
+  var high = lowLastHigh.high;
+  var textTooltip;
+  if (rBarOpt["field"]) {
+    // doesn't provide low,last,high case
+    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 : '--';
+    textTooltip = 'Low: ' + lowValue + " " + 'Last: ' + lastValue + " " + 'High: ' + highValue;
+  }
+  return textTooltip;
 };
+
 /** @private
 * @param {number} colIndex
 * @param {RangeBarPlugin~ColumnOptions} columnOptions
@@ -210,35 +372,27 @@ RangeBarPlugin.prototype.getConfigObject = function (out_obj) {
 *   "rangeBar": true
 * };
 */
-
-
 RangeBarPlugin.prototype._setColumnRangeBar = function (colIndex, columnOptions) {
   var rDef = columnOptions["rangeBar"];
-
   if (rDef) {
     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).
       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) {
-  var rangeBarOption = this._getColumnOption(colIndex, "rangeBar");
-
+  var rangeBarOption = this._getColumnRangeBarOptions(colIndex);
   if (rangeBarOption && this._initializedGrid) {
     if (this._realTimeGrid) {
       this._realTimeGrid.setColumnRenderer(colIndex, this._renderer);
@@ -247,73 +401,107 @@ RangeBarPlugin.prototype._setColumnRenderer = function (colIndex) {
     }
   }
 };
-/** @private
-* @param {number} colIndex
-* @return {RangeBarPlugin~RangeDefinition}
-*/
 
-
-RangeBarPlugin.prototype._getColumnRangeDef = function (colIndex) {
-  return this._getColumnOption(colIndex, "rangeBar");
-};
 /** @private */
-
-
 RangeBarPlugin.prototype._onThemeLoaded = function () {
   for (var i = this._hosts.length; --i >= 0;) {
     this._hosts[i].requestRowRefresh();
   }
 };
+
 /** @private
 * @param {Object} e
 */
-
-
-RangeBarPlugin.prototype._renderer = function (e) {
-  if (!ElfUtil.isThemeLoaded()) {
-    return;
-  }
-
-  var colIndex = e["colIndex"];
-
-  var rBarOpt = this._getColumnOption(colIndex, "rangeBar");
-
-  if (!rBarOpt) {
-    return;
-  }
-
-  var cell = e["cell"];
-  var content = cell.getContent();
-  var rangeBar;
-
-  if (content && content._rangeBar) {
-    rangeBar = content._rangeBar;
-  } else {
-    content = Dom.div();
-    rangeBar = content._rangeBar = new RangeBar(content);
-  }
-
-  var rowData = e["rowData"];
-  var low, high, last;
-
-  if (rBarOpt["field"]) {
-    low = rBarOpt["start"];
-    high = rBarOpt["end"];
-    last = rowData[rBarOpt["field"]];
-  } else {
-    low = rowData[rBarOpt["low"]];
-    high = rowData[rBarOpt["high"]];
-    last = rowData[rBarOpt["last"]];
+RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
+  var section = e["section"];
+  var dataRows = /** @type{Array.<Object>} */e["dataRows"];
+  var colCount = section.getColumnCount();
+  var fromR = /** @type{number} */e["fromRowIndex"];
+  var toR = /** @type{number} */e["toRowIndex"];
+  for (var c = 0; c < colCount; ++c) {
+    var rBarOpt = this._getColumnRangeBarOptions(c);
+    if (!rBarOpt) {
+      continue;
+    }
+    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 content = cell.getContent();
+      var rangeBar = content ? content._rangeBar : null;
+      if (!rangeBar) {
+        rangeBar = document.createElement("ef-led-gauge");
+        rangeBar.neutralColor = true; // TODO: color should be set by option
+        rangeBar._rangeBar = rangeBar;
+        content = rangeBar;
+      }
+      if (this._tooltip) {
+        var textTooltip = this._calculateTooltip(rBarOpt, lowLastHigh);
+        cell.setTooltip(textTooltip); // WARNING: this may be confuse with auto-tooltip extension
+      }
+
+      if (high == null || low == null || high < low) {
+        // Invalid cases
+        var span = document.createElement("span");
+        span.textContent = "N/A";
+        cell.setContent(span);
+        continue;
+      }
+      if (high === low && high === last) {
+        // all value equal, highlight all bar and value in the middle case
+        rangeBar.range = [-100, 100];
+        rangeBar.topValue = 0;
+        cell.setContent(rangeBar);
+        continue;
+      }
+      var lastNormalize = _normalizeValue(low, last, high);
+
+      // Clear the current range for apply a new one.
+      rangeBar.range.length = 0;
+
+      // 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;
+      }
+      cell.setContent(content);
+    }
   }
-
-  rangeBar.setValue(low, last, high);
-  cell.setContent(content);
 };
+
 /** @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"]);
@@ -322,25 +510,16 @@ RangeBarPlugin.prototype._onColumnAdded = function (e) {
 /** @private
 * @param {Object} e
 */
-
-
 RangeBarPlugin.prototype._onColumnRemoved = function (e) {
-  var colData =
-  /** @type{Object} */
-  e.columnData;
-
+  var colData = /** @type{Object} */e.columnData;
   if (!colData) {
     return;
   }
-
   var rDef = colData["rangeBar"];
-
   if (!rDef) {
     return;
   }
-
   colData["rangeBar"] = null;
 };
-
 export default RangeBarPlugin;
 export { RangeBarPlugin, RangeBarPlugin as RangeBar, RangeBarPlugin as RangeBarExtension };

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

@@ -28,7 +28,7 @@ declare class GridPlugin extends EventDispatcher {
 
     public getColumnName(colRef: number|string|null): string;
 
-    public getColumnIndex(colId: number|string|null): number;
+    public getColumnIndex(colRef: number|string|null): number;
 
     public getColumnIndices(colRefs: (number|string)[]|null): (number)[]|null;
 

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

@@ -234,29 +234,27 @@ GridPlugin.prototype.getColumnName = function (colRef) {
 	return "";
 };
 /** @public
-* @param {number|string} colId Column index or column Id
+* @param {number|string} colRef Column id, field name or column index
 * @return {number}
 */
-GridPlugin.prototype.getColumnIndex = function (colId) {
-	if(typeof colId === "number") {
-		return colId;
+GridPlugin.prototype.getColumnIndex = function (colRef) {
+	if(typeof colRef === "number") {
+		return colRef;
 	}
 	if(this._compositeGrid) {
-		return this._compositeGrid.getColumnIndex(colId);
-	} else {
-		var rtGrid = this._realTimeGrid;
-		var colCount = rtGrid.getColumnCount();
-		for(var i = 0; i < colCount; ++i) {
-			var colDef = rtGrid.getColumnDefinition(i);
-			if(colDef && colDef.getId() === colId) {
-				return i;
-			}
+		var allFields = this._compositeGrid.getColumnFields();
+		var colIndex = allFields.indexOf(colRef);
+		if(colIndex > -1) {
+			return colIndex;
+		} else {
+			return this._compositeGrid.getColumnIndex(colRef);
 		}
+	} else {
+		return this._realTimeGrid.getColumnIndex(colRef);
 	}
-	return -1;
 };
 /** @public
-* @param {Array.<number|string>} colRefs column references field name or column index
+* @param {Array.<number|string>} colRefs A collection of column ids, field names or column indices
 * @return {Array.<number>} column indices
 */
 GridPlugin.prototype.getColumnIndices = function (colRefs) {