@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/tr-grid-percent-bar/es6/PercentBar.js

@@ -0,0 +1,801 @@
+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, colDataGetter } from '../../tr-grid-util/es6/GridPlugin.js';
+import { PercentBar } from '../../tr-grid-util/es6/PercentBar.js';
+import { Dom } from '../../tr-grid-util/es6/Dom.js';
+import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
+/** @typedef {Object} PercentBarPlugin~Options
+* @description PercentBarPlugin options that can be specified from `percentBar` property of the main grid's options
+* @property {number=} padding=8 Extra space added to max width from autoTextSizing calculation
+* @property {boolean=} percentageLabel=true If disabled, the value will not convert into percent format
+* @property {boolean=} autoTextSizing=true If disabled, text space will be fixed.
+* @property {boolean=} autoFitting=false If enabled, text space will be auto adjusted.<br> Otherwise, text space will stay extended to the longest length
+* @property {boolean=} zeroValueHidden=false If this option is enabled and the percentage value is zero, percent bar and its label will be hidden
+*/
+
+/** @typedef {Object} PercentBarPlugin~PercentBarOptions
+* @description The options can be specified by `percentBar` property in the grid's column definition
+* @property {string=} alignment="" Fixate percent bar alignment. By default, percent bar alignment will be changed according to grid column alignment.
+* @property {string=} field=THIS_COLUMN Data field
+* @property {boolean=} textHidden=false If enabled, displays percent bar only
+* @property {(number|string)=} textWidth If specified, percent bar text will have fixed width
+* @property {boolean=} useMovementColor=true If disabled, percent bar will not use up and down colors
+* @property {string=} barColor="" Custom color for bar element. This will override the useMovementColor
+* @property {number=} padding=8 Extra space added to max width from autoTextSizing calculation
+* @property {boolean=} percentageLabel=true If disabled, the value will not convert into percent format
+* @property {boolean=} autoTextSizing=true If disabled, text space will be fixed
+* @property {boolean=} autoFitting=false If enabled, text space will be auto adjusted.<br> Otherwise, text space will stay extended to the longest length
+* @property {boolean=} zeroValueHidden=false If this option is enabled and the percentage value is zero, percent bar and its label will be hidden
+*/
+
+/** @typedef {Object} PercentBarPlugin~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option
+* @property {(PercentBarPlugin~PercentBarOptions|boolean)=} percentBar
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+
+var PercentBarPlugin = function PercentBarPlugin() {
+  this._onPostSectionBinding = this._onPostSectionBinding.bind(this);
+  this._onColumnAdded = this._onColumnAdded.bind(this);
+  this._onColumnRemoved = this._onColumnRemoved.bind(this);
+  this._requestRowRefresh = this._requestRowRefresh.bind(this);
+  this._renderer = this._renderer.bind(this);
+  this._onThemeLoaded = this._onThemeLoaded.bind(this);
+  this._hosts = [];
+};
+
+Ext.inherits(PercentBarPlugin, GridPlugin);
+/** @type {number}
+* @private
+*/
+
+PercentBarPlugin._runningId = 0;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin._themeLoaded = false;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin._themeRevision = 0;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin.prototype._themeLoading = false;
+/** @type {number}
+* @private
+*/
+
+PercentBarPlugin.prototype._padding = 8;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin.prototype._percentageLabel = true;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin.prototype._autoFitting = false;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin.prototype._zeroValueHidden = false;
+/** @type {boolean}
+* @private
+*/
+
+PercentBarPlugin.prototype._autoTextSizing = true;
+/** @type {Element}
+* @private
+*/
+
+PercentBarPlugin._helper = null;
+/** @override
+* @return {string}
+*/
+
+PercentBarPlugin.prototype.getName = function () {
+  return "PercentBarPlugin"; // Readonly
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+
+
+PercentBarPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) {
+    return;
+  }
+
+  this._hosts.push(host);
+
+  this.config(options, host);
+  host.listen("postSectionDataBinding", this._onPostSectionBinding);
+
+  if (this._hosts.length === 1) {
+    host.listen("columnAdded", this._onColumnAdded);
+    host.listen("columnRemoved", this._onColumnRemoved);
+    host.listen("columnAlignmentChanged", this._requestRowRefresh);
+  }
+
+  if (!PercentBarPlugin._themeLoaded && !this._themeLoading) {
+    this._themeLoading = true;
+    ElfUtil.getThemeColors().then(this._onThemeLoaded);
+  }
+};
+/** @override */
+
+
+PercentBarPlugin.prototype._afterInit = function () {
+  var colCount = this.getColumnCount();
+
+  for (var i = 0; i < colCount; ++i) {
+    this._setColumnRenderer(i);
+  }
+};
+/** @public
+* @param {Object} host core grid object
+*/
+
+
+PercentBarPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  this._hosts.splice(at, 1);
+
+  host.unlisten("postSectionDataBinding", this._onPostSectionBinding);
+  host.unlisten("columnAdded", this._onColumnAdded);
+  host.unlisten("columnRemoved", this._onColumnRemoved);
+  host.unlisten("columnAlignmentChanged", this._requestRowRefresh);
+
+  if (!this._hosts.length) {
+    // The last host has been removed
+    Dom.removeParent(PercentBarPlugin._helper);
+  }
+
+  this._dispose();
+};
+/** @public
+* @param {Object=} options
+*/
+
+
+PercentBarPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  var extOptions = options["percentBar"];
+
+  if (_typeof(extOptions) === "object") {
+    this._autoFitting = extOptions["autoFitting"] === true;
+
+    if (extOptions["zeroValueHidden"] != null) {
+      this._zeroValueHidden = extOptions["zeroValueHidden"] ? true : false;
+    }
+
+    this._autoTextSizing = extOptions["autoTextSizing"] !== false;
+    this._percentageLabel = extOptions["percentageLabel"] !== false;
+    var padding = extOptions["padding"];
+
+    if (typeof padding === "number") {
+      this._padding = padding;
+    }
+  }
+
+  var columns = options["columns"];
+  var len = columns ? columns.length : 0;
+
+  for (var i = 0; i < len; ++i) {
+    var column = columns[i];
+    this.setColumnPercentBar(i, column);
+  }
+};
+/** Get a column percent bar options from column index
+ * @public
+ * @param {number} colIndex
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+
+
+PercentBarPlugin.prototype.getColumnConfigObject = function (colIndex, out_obj) {
+  if (!out_obj) {
+    out_obj = {};
+  }
+
+  var colData = this._getColumnData(colIndex);
+
+  var opt = colData ? colData.percentBar : null; // TODO: Use this._getColumnPercentBarOptions instead
+
+  if (!opt) {
+    // If this column has no percentBar, do nothing
+    return out_obj;
+  }
+
+  var percentBar = out_obj.percentBar = {};
+
+  if (opt.alignment) {
+    percentBar.alignment = opt.alignment;
+  }
+
+  if (typeof opt.field === "string") {
+    percentBar.field = opt.field;
+  }
+
+  if (opt.textHidden != null) {
+    percentBar.textHidden = opt.textHidden;
+  }
+
+  if (opt.textWidth != null) {
+    percentBar.textWidth = opt.textWidth;
+  }
+
+  if (opt.useMovementColor != null) {
+    percentBar.useMovementColor = opt.useMovementColor;
+  }
+
+  if (opt.barColor) {
+    percentBar.barColor = opt.barColor;
+  }
+
+  if (opt.padding != null) {
+    percentBar.padding = opt.padding;
+  }
+
+  if (opt.autoTextSizing != null) {
+    percentBar.autoTextSizing = opt.autoTextSizing;
+  }
+
+  if (opt.percentageLabel != null) {
+    percentBar.percentageLabel = opt.percentageLabel;
+  }
+
+  if (opt.autoFitting != null) {
+    percentBar.autoFitting = opt.autoFitting;
+  }
+
+  return out_obj;
+};
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+
+
+PercentBarPlugin.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.percentBar;
+
+  if (!extOptions) {
+    extOptions = obj.percentBar = {};
+  }
+
+  extOptions.padding = this._padding;
+  extOptions.autoFitting = this._autoFitting;
+  extOptions.zeroValueHidden = this._zeroValueHidden;
+  extOptions.autoTextSizing = this._autoTextSizing;
+  extOptions.percentageLabel = this._percentageLabel;
+  return obj;
+};
+/** @public
+* @param {number} colIndex
+* @param {string} alignment Possible values are l, r, c, left, right, center or empty string
+*/
+
+
+PercentBarPlugin.prototype.setPercentBarAlignment = function (colIndex, alignment) {
+  var pBarOpt = this._getColumnPercentBarOptions(colIndex);
+
+  if (pBarOpt) {
+    alignment = PercentBar.toAlignment(alignment);
+
+    if (pBarOpt["alignment"] !== alignment) {
+      pBarOpt["alignment"] = alignment;
+
+      this._requestRowRefresh();
+    }
+  }
+};
+/** Any existing percent bar options will be removed and replaced with the specified options.
+* @public
+* @param {number} colIndex
+* @param {PercentBarPlugin~ColumnOptions} columnOptions If no column option is given, existing percent bars will be removed.
+* @example
+* ext.setColumnPercentBar(colIndex, { "percentBar": true });
+* ext.setColumnPercentBar(colIndex, {
+*   "percentBar": {
+*     "alignment": "r",
+*     "field": "PCT_CHNG",
+*     "textHidden": true,
+*     "textWidth": 80
+*   }
+* });
+* ext.setColumnPercentBar(colIndex, null);
+*/
+
+
+PercentBarPlugin.prototype.setColumnPercentBar = function (colIndex, columnOptions) {
+  var userOptions = columnOptions ? columnOptions["percentBar"] : null;
+
+  var colData = this._newColumnData(colIndex);
+
+  var pBarOpt = colData["percentBar"]; // Current percent bar option
+
+  var dirty = false;
+
+  if (userOptions) {
+    dirty = true;
+    var prevOptions = pBarOpt;
+    pBarOpt = colData["percentBar"] = {}; // Always clear any existing percent bar options to allow new settings
+
+    if (prevOptions && prevOptions["refId"]) {
+      // transfer cache from previous settings to the new one
+      pBarOpt["refId"] = prevOptions["refId"];
+      pBarOpt["colStats"] = prevOptions["colStats"];
+    }
+
+    if (_typeof(userOptions) === "object") {
+      // userOptions could be boolean
+      for (var key in userOptions) {
+        // Clone all settings from user options
+        pBarOpt[key] = userOptions[key];
+      }
+    } // Validate user inputs and provide default values for missing settings
+
+
+    var field = pBarOpt["field"];
+
+    if (field == null) {
+      pBarOpt["field"] = columnOptions["field"] ? columnOptions["field"] : this._getField(colIndex);
+    }
+
+    if (pBarOpt["alignment"] != null) {
+      pBarOpt["alignment"] = PercentBar.toAlignment(pBarOpt["alignment"]);
+    }
+
+    if (pBarOpt["autoTextSizing"] != null) {
+      pBarOpt["autoTextSizing"] = pBarOpt["autoTextSizing"] ? true : false;
+    }
+
+    if (pBarOpt["autoFitting"] != null) {
+      pBarOpt["autoFitting"] = pBarOpt["autoFitting"] ? true : false;
+    } else {
+      pBarOpt["autoFitting"] = this._autoFitting;
+    }
+
+    if (pBarOpt["zeroValueHidden"] != null) {
+      pBarOpt["zeroValueHidden"] = pBarOpt["zeroValueHidden"] ? true : false;
+    } else {
+      pBarOpt["zeroValueHidden"] = this._zeroValueHidden;
+    }
+
+    if (pBarOpt["percentageLabel"] != null) {
+      pBarOpt["percentageLabel"] = pBarOpt["percentageLabel"] ? true : false;
+    } else {
+      pBarOpt["percentageLabel"] = this._percentageLabel;
+    }
+
+    pBarOpt._maxTextWidth = 0;
+    var padding = pBarOpt["padding"];
+
+    if (typeof padding !== "number") {
+      pBarOpt["padding"] = padding || padding == null ? this._padding : 0;
+    }
+  } else {
+    if (pBarOpt) {
+      // Clear existing resource
+      dirty = true;
+
+      if (pBarOpt["refId"]) {
+        var grid = this._hosts[0];
+        var dv = grid ? grid.getDataSource() : null; // TODO: Support multiple grids
+
+        if (dv) {
+          dv.enableColumnStats(pBarOpt["field"], false, pBarOpt["refId"]);
+        }
+
+        pBarOpt["refId"] = null;
+        pBarOpt["colStats"] = null;
+      }
+
+      colData["percentBar"] = null;
+    }
+  }
+
+  if (dirty && this._initializedGrid) {
+    this._setColumnRenderer(colIndex);
+
+    this._requestRowRefresh();
+  }
+};
+/** @private
+* @param {number} colIndex
+*/
+
+
+PercentBarPlugin.prototype._setColumnRenderer = function (colIndex) {
+  var pBarOpt = this._getColumnPercentBarOptions(colIndex);
+
+  if (pBarOpt) {
+    if (!pBarOpt["refId"]) {
+      var grid = this._hosts[0];
+      var dv = grid ? grid.getDataSource() : null; // TODO: Support multiple grids
+
+      if (dv) {
+        pBarOpt["refId"] = "_pb" + PercentBarPlugin._runningId++;
+        var colStats = dv.enableColumnStats(pBarOpt["field"], true, pBarOpt["refId"]);
+
+        if (this._realTimeGrid) {
+          colStats.setColumnDataGetter(colDataGetter);
+        }
+
+        pBarOpt["colStats"] = colStats;
+      }
+    }
+
+    this._activateColumnRenderer(colIndex, "_percentBar", this._renderer);
+  } else {
+    this._activateColumnRenderer(colIndex); // reset column renderer to default
+
+  }
+};
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+
+
+PercentBarPlugin.prototype._getColumnPercentBarOptions = function (colIndex) {
+  return this._getColumnOption(colIndex, "percentBar");
+};
+/** @private
+* @param {number} colIndex
+* @param {!Object} pBarOpt
+* @return {string}
+*/
+
+
+PercentBarPlugin.prototype._getPercentBarAlignment = function (colIndex, pBarOpt) {
+  var alignment = pBarOpt["alignment"];
+
+  if (alignment) {
+    return alignment;
+  } // Default alignment is left
+
+
+  return PercentBar.toAlignment(this._hosts[0].getColumnAlignment(colIndex)) || "l";
+};
+/** @private
+* @param {number} colIndex
+* @param {!Object} pBarOpt
+* @return {boolean}
+*/
+
+
+PercentBarPlugin.prototype._getAutoTextSizing = function (colIndex, pBarOpt) {
+  if (pBarOpt["textWidth"] || pBarOpt["textHidden"]) {
+    return false;
+  }
+
+  if (this._getPercentBarAlignment(colIndex, pBarOpt) === "c") {
+    return false;
+  }
+
+  if (pBarOpt["autoTextSizing"] != null) {
+    return pBarOpt["autoTextSizing"];
+  }
+
+  return this._autoTextSizing;
+};
+/** @private */
+
+
+PercentBarPlugin.prototype._onThemeLoaded = function () {
+  PercentBarPlugin._themeLoaded = true;
+  PercentBarPlugin._themeRevision++;
+
+  this._requestRowRefresh();
+};
+/** @private
+* @param {Object} e
+*/
+
+
+PercentBarPlugin.prototype._onPostSectionBinding = function (e) {
+  if (!PercentBarPlugin._themeLoaded) {
+    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"];
+
+  var textFormatting = this._hosts[0].getPlugin("TextFormattingPlugin"); // TODO: Plugin could be cache
+
+
+  var dv = e["dataSource"];
+
+  for (var c = 0; c < colCount; ++c) {
+    var pBarOpt = this._getColumnPercentBarOptions(c);
+
+    if (!pBarOpt) {
+      continue;
+    }
+
+    var field = pBarOpt["field"];
+    var colStats = pBarOpt["colStats"];
+    var barColor = pBarOpt["barColor"];
+    var movementColor = pBarOpt["useMovementColor"];
+    var textHidden = pBarOpt["textHidden"] != null ? pBarOpt["textHidden"] : false;
+    var zeroValueHidden = pBarOpt["zeroValueHidden"] != null ? pBarOpt["zeroValueHidden"] : false;
+    var max = colStats.getMax();
+    var formatter = textFormatting ? textFormatting.getFormatter(c) : null;
+
+    var pbAlignment = this._getPercentBarAlignment(c, pBarOpt);
+
+    var autoTextSizing = this._getAutoTextSizing(c, pBarOpt); // TODO: No need to retrieve this parameter in every loop
+
+
+    if (pBarOpt._curAlignment !== pbAlignment) {
+      pBarOpt._curAlignment = pbAlignment;
+      pBarOpt._maxTextWidth = 0; // Center alignment has an impact to text width
+    }
+
+    for (var r = fromR; r < toR; ++r) {
+      var cell = section.getCell(c, r, false);
+
+      if (!cell) {
+        continue;
+      }
+
+      var content = cell.getContent();
+      var percentBar = content ? content._percentBar : null;
+
+      if (!percentBar) {
+        // First time initilization
+        // WARNING: PercentBar will automatically injects _percentBar variable to the content element
+        percentBar = new PercentBar();
+        content = percentBar.getElement();
+
+        if (movementColor != null) {
+          percentBar._themeRevision = PercentBarPlugin._themeRevision;
+        }
+      } // Runtime update
+
+
+      if (autoTextSizing) {
+        // Max text width is checked for changes and may not be reapplied after this
+        if (pBarOpt._maxTextWidth) {
+          percentBar.setTextWidth(pBarOpt._maxTextWidth + pBarOpt["padding"]);
+        }
+      } else {
+        percentBar.setTextWidth(pBarOpt["textWidth"]);
+      }
+
+      percentBar.setAlignment(pbAlignment);
+
+      if (percentBar._themeRevision !== PercentBarPlugin._themeRevision) {
+        percentBar._themeRevision = PercentBarPlugin._themeRevision;
+        percentBar.updateBarColor(movementColor);
+      }
+
+      percentBar.useMovementColor(movementColor);
+      percentBar.setBarColor(barColor);
+      percentBar.hideText(textHidden);
+      percentBar.hideZeroValue(zeroValueHidden);
+
+      var rowData = this._getRowData(dataRows[r]); // WARNING: Group header rows have no row data
+
+
+      var value = rowData ? rowData[field] : NaN;
+
+      if (formatter) {
+        if (pBarOpt.percentageLabel) {
+          percentBar.setValue(value, max, false);
+          var percent = percentBar.getPercent(); // Value is between -100 and 100
+
+          percentBar.setText(formatter.formatValue(percent));
+        } else {
+          percentBar.setValue(value, max, formatter.formatValue(value));
+        }
+      } else {
+        var displayText = pBarOpt.percentageLabel ? null : value; // null to display percentage label
+
+        percentBar.setValue(value, max, displayText);
+      }
+
+      cell.setContent(content); // Ensure that percentBar is inserted into the DOM
+    }
+
+    if (autoTextSizing) {
+      this._updateTextSize(section, dv, c, pBarOpt["field"], max, formatter);
+    }
+  }
+};
+/** @private
+* @return {Element}
+*/
+
+
+PercentBarPlugin.prototype._getHelper = function () {
+  var helper = PercentBarPlugin._helper;
+
+  if (!helper) {
+    helper = PercentBarPlugin._helper = Dom.div("percent-bar-helper");
+    helper.style = "visibility: hidden; position: fixed; bottom: -50px; left: -50px; white-space: pre;";
+  }
+
+  if (!helper.parentNode) {
+    document.body.appendChild(helper);
+  }
+
+  return helper;
+};
+/** @private
+* @param {string} str
+* @return {number}
+*/
+
+
+PercentBarPlugin.prototype._getTextWidth = function (str) {
+  var helper = this._getHelper();
+
+  helper.textContent = str;
+  var cw = helper.clientWidth; // Exclude padding
+
+  helper.removeChild(helper.lastChild); // Clean up resource
+
+  return cw;
+};
+/** @private
+* @param {object} section
+* @param {Object} dv DataView
+* @param {number} c
+* @param {string} field
+* @param {number} max
+* @param {object=} formatter
+*/
+
+
+PercentBarPlugin.prototype._updateTextSize = function (section, dv, c, field, max, formatter) {
+  var pBarOpt = this._getColumnPercentBarOptions(c);
+
+  var fi = section.getFirstIndexInView();
+  var li = section.getLastIndexInView();
+  var r;
+  var values = [];
+
+  for (r = fi; r <= li; ++r) {
+    var value = this._getData(dv, r, field);
+
+    if (formatter) {
+      value = formatter.formatValue(value);
+    } else {
+      value = (value / max * 1e4 | 0) / 100;
+      value = value + "%";
+    }
+
+    values.push(value);
+  }
+
+  var maxTextWidth = this._getTextWidth(values.join("\n"));
+
+  if (!pBarOpt["autoFitting"]) {
+    maxTextWidth = maxTextWidth > pBarOpt._maxTextWidth ? maxTextWidth : pBarOpt._maxTextWidth;
+  }
+
+  if (maxTextWidth !== pBarOpt._maxTextWidth) {
+    pBarOpt._maxTextWidth = maxTextWidth;
+    maxTextWidth += pBarOpt["padding"];
+
+    for (r = fi; r <= li; ++r) {
+      var cell = section.getCell(c, r, false);
+
+      if (!cell) {
+        continue;
+      }
+
+      var content = cell.getContent();
+
+      if (content && content._percentBar) {
+        content._percentBar.setTextWidth(maxTextWidth);
+      }
+    }
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+PercentBarPlugin.prototype._renderer = function (e) {};
+/** @private
+* @param {Object} e
+*/
+
+
+PercentBarPlugin.prototype._onColumnAdded = function (e) {
+  if (e["context"]) {
+    this.setColumnPercentBar(e["colIndex"], e["context"]);
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+PercentBarPlugin.prototype._onColumnRemoved = function (e) {
+  var colData =
+  /** @type{Object} */
+  e.columnData;
+
+  if (!colData || !colData["percentBar"]) {
+    return;
+  }
+
+  var pBarOpt = colData["percentBar"];
+  var sender = e.sender;
+  var dv = sender.getDataSource();
+  dv.enableColumnStats(pBarOpt["field"], false, pBarOpt["refId"]);
+  colData["percentBar"] = null;
+};
+/** @private
+*/
+
+
+PercentBarPlugin.prototype._requestRowRefresh = function () {
+  for (var i = this._hosts.length; --i >= 0;) {
+    this._hosts[i].requestRowRefresh();
+  }
+};
+/** @public
+*/
+
+
+PercentBarPlugin.prototype.reloadThemeColors = function () {
+  PercentBarPlugin._themeLoaded = ElfUtil.themeReady = null;
+  ElfUtil.getThemeColors().then(this._onThemeLoaded);
+};
+
+export default PercentBarPlugin;
+export { PercentBarPlugin, PercentBarPlugin as PercentBar, PercentBarPlugin as PercentBarExtension };