@refinitiv-ui/efx-grid 6.0.129 → 6.0.131

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

@@ -1,8 +1,8 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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:
@@ -29,67 +29,24 @@ 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 (Percent value between -100 to 100)
-* @private
-* @param {number} low
-* @param {number} current
-* @param {number} high
-* @return {number}
-*/
-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.
- * @private
- * @param {RangeBarPlugin~RangeDefinition} rBarOpt
- * @param {Object} rowData
- * @return {Object}
-*/
-var _getRangeBarData = function _getRangeBarData(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
-  };
-};
-
 /** @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}
 */
-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 = [];
+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
 */
@@ -117,96 +74,106 @@ 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
-]]);
+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
+	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);
-  }
+	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;
-  }
-  var colCount = this.getColumnCount();
-  for (var i = 0; i < colCount; ++i) {
-    this._setColumnRenderer(i);
-  }
+	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) {
-  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();
+	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;
-  }
-  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]);
-  }
+	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());
-  }
+	if (!grid._rangeBarStyles) {
+		grid._rangeBarStyles = true;
+		injectCss(RangeBarPlugin._styles, grid.getElement());
+	}
 };
 
 /** Get a current state of grid and extension config
@@ -215,33 +182,40 @@ RangeBarPlugin._applyThemeColor = function (grid) {
  * @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) {
-    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;
+	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
@@ -249,74 +223,79 @@ RangeBarPlugin.prototype.getConfigObject = function (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;
-  }
-  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;
+	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;
-  }
-  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 _getRangeBarData(rBarOpt, rowData);
+	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
@@ -325,67 +304,34 @@ RangeBarPlugin.prototype.getValue = function (colRef, 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 < 0) {
-    return "";
-  }
-  var rowData = this._getRow(dv, rowRef);
-  if (!rowData) {
-    return "";
-  }
-  var rangeBarValues = _getRangeBarData(rBarOpt, rowData);
-  if (this._tooltip) {
-    var textTooltip = this._calculateTooltip(rBarOpt, rangeBarValues);
-    return textTooltip;
-  }
-  return "";
-};
+	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 {RangeBarPlugin~RangeDefinition} rBarOpt range
- * @param {!Object} rangeBarValues
- * @return {string} tooltip string value
-*/
-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
-    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;
 };
 
 /** @private
@@ -413,168 +359,112 @@ RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, rangeBarValues)
 * };
 */
 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).
-      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);
-  }
+	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) {
-  var 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);
-    }
-  }
+	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 (var i = this._hosts.length; --i >= 0;) {
-    this._hosts[i].requestRowRefresh();
-  }
+	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;
-  }
-  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;
-    }
-    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]);
-      if (!rowData) {
-        continue;
-      }
-      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) {
-        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, rangeBarData);
-        cell.setTooltip(textTooltip); // WARNING: this may be confuse with auto-tooltip extension
-      }
-
-      var span;
-      if (high == null && low == null && last == null) {
-        // Empty case
-        span = document.createElement("span");
-        span.textContent = "";
-        cell.setContent(span);
-        continue;
-      }
-      if (high == null || low == null || high < low) {
-        // Empty low or high case
-        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;
-      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];
-        }
-        if (low === high) {
-          // low equal high case (avoid normalize to infinity)
-          rangeBar.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)
-          rangeBar.range = [];
-          lastNormalize = null;
-        }
-        rangeBar.topValue = lastNormalize;
-        if (this.valueLabel) {
-          rangeBar.topLabel = last;
-        }
-      }
-      cell.setContent(content);
-    }
-  }
+	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
@@ -582,43 +472,43 @@ RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
 * @return {boolean}
 */
 RangeBarPlugin.prototype.isRangeBarColumn = function (colIndex) {
-  return this._getColumnOption(colIndex, "rangeBar") ? true : false;
+	return this._getColumnOption(colIndex, "rangeBar") ? true : false;
 };
 
 /** @private
 * @param {Object} e
 */
-RangeBarPlugin.prototype._renderer = function (e) {};
+RangeBarPlugin.prototype._renderer = function (e) { };
 
 /** @private
 * @param {number} colIndex
 * @return {Object}
 */
 RangeBarPlugin.prototype._getColumnRangeBarOptions = function (colIndex) {
-  return this._getColumnOption(colIndex, "rangeBar");
+	return this._getColumnOption(colIndex, "rangeBar");
 };
 
 /** @private
 * @param {Object} e
 */
 RangeBarPlugin.prototype._onColumnAdded = function (e) {
-  if (e["context"]) {
-    this._setColumnRangeBar(e["colIndex"], e["context"]);
-  }
+	if (e["context"]) {
+		this._setColumnRangeBar(e["colIndex"], e["context"]);
+	}
 };
 /** @private
 * @param {Object} e
 */
 RangeBarPlugin.prototype._onColumnRemoved = function (e) {
-  var colData = /** @type{Object} */e.columnData;
-  if (!colData) {
-    return;
-  }
-  var rDef = colData["rangeBar"];
-  if (!rDef) {
-    return;
-  }
-  colData["rangeBar"] = null;
+	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 };
+export { RangeBarPlugin, RangeBarPlugin as RangeBar, RangeBarPlugin as RangeBarExtension };