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

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -0,0 +1,947 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { extendObject } from '../../tr-grid-util/es6/Util.js';
+import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
+import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
+
+/** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option:
+* @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
+* @property {(string|boolean)=} colorText=null A shorthand for specifying default condition based on the field.
+* @property {(string|boolean)=} tickColor=null Alias of colorText.
+* @property {(ConditionalColoringPlugin~Blinking|boolean)=} blinking=null Blink Options. If specified, the cell will be blinked on data change.
+* @property {string=} field
+*/
+
+/** @typedef {Object} ConditionalColoringPlugin~Condition
+* @description Available options describing `condition` object
+* @property {(string|Function)=} expression Expression could be `[FIELD_1] > 0`
+* @property {string=} backgroundColor="" CSS color (e.g. #ffffff, black)
+* @property {string=} color CSS="" color (e.g. #000000, white)
+*/
+
+/** @typedef {(string|boolean|Object)} ConditionalColoringPlugin~Blinking
+* @description Available options describing `blinking` object. Additionally if specify blinking as string of field, blinking will base on the field. <br>
+* If specified true, field from column definition will be used.
+* @property {boolean=} border=false If enabled, border will be blinked instead of background
+* @property {string=} field If not specified, field from column definition will be used
+* @property {string=} up CSS color (e.g. #00ff00, green)
+* @property {string=} down CSS color (e.g. #ff0000, red)
+* @property {(string|boolean)=} level CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+var ConditionalColoringPlugin = function () {
+	this._onSectionBinding = this._onSectionBinding.bind(this);
+	this._onColumnAdded = this._onColumnAdded.bind(this);
+	this._onColumnRemoved = this._onColumnRemoved.bind(this);
+	this._onThemeLoaded = this._onThemeLoaded.bind(this);
+
+	ConditionalColoringPlugin.cleanUpPrevRows = ConditionalColoringPlugin.cleanUpPrevRows.bind(this);
+	ConditionalColoringPlugin._cleanUpPrevFields = ConditionalColoringPlugin._cleanUpPrevFields.bind(this);
+
+	this._hosts = [];
+};
+Ext.inherits(ConditionalColoringPlugin, GridPlugin);
+
+/** @type {number}
+* @private
+*/
+ConditionalColoringPlugin._cleanUpTimer = 0;
+
+/** @type {boolean}
+* @private
+*/
+ConditionalColoringPlugin.prototype._blinkingEnabled = false; // WORKAROUND: To improve performance
+
+/** @override
+* @return {string}
+*/
+ConditionalColoringPlugin.prototype.getName = function () {
+	return "ConditionalColoringPlugin"; // Readonly
+};
+
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @override
+* @public
+* @return {boolean}
+*/
+ConditionalColoringPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
+};
+
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+ConditionalColoringPlugin.prototype.initialize = function (host, options) {
+	host._prevDataRows = {};
+
+	var hosts = this._hosts;
+	if(hosts.indexOf(host) >= 0) { return; }
+
+	hosts.push(host);
+
+	if(hosts.length === 1) {
+		this.config(options);
+	} else {
+		this._applyStyle(host, options);
+	}
+
+	host.listen("postSectionDataBinding", this._onSectionBinding);
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("columnRemoved", this._onColumnRemoved);
+
+	if (!CellPainter.themeReady) {
+		CellPainter.loadThemeColors().then(this._onThemeLoaded);
+	}
+	// In case of lazy loading
+	// DO something
+};
+
+/** @public
+* @param {Object} host core grid object
+*/
+ConditionalColoringPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+	this._hosts.splice(at, 1);
+
+	host.unlisten("postSectionDataBinding", this._onSectionBinding);
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("columnRemoved", this._onColumnRemoved);
+
+	host._prevDataRows = null;
+
+	this._dispose();
+};
+/** Remove redundant built-in feature
+* @public
+* @param {string} optionName
+* @param {*} optionVal
+* @return {*} The transformed value of the option
+*/
+ConditionalColoringPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
+	if (optionName == "blinker") { // TODO: Handle blinkBy option in column model
+		return null; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+
+/** @public
+* @param {Object=} options
+*/
+ConditionalColoringPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+
+	var columns = options["columns"];
+	if(!columns) { return; }
+
+	var len = columns.length;
+	for(var i = 0; i < len; ++i) {
+		this.setColumnColoring(i, columns[i]);
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	var columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	var len = this.getColumnCount();
+	var host = this._hosts[0];
+	for (var i = 0; i < len; ++i) {
+		var column = columns[i];
+		if (!column) {
+			column = columns[i] = {};
+		}
+
+		var conditions = this._getColumnOption(i, 'conditions', host);
+		if (Array.isArray(conditions) && conditions.length > 0) {
+			column.conditions = [];
+
+			var count = conditions.length;
+			for (var colIndex = 0; colIndex < count; colIndex++) {
+				var exCondition = {};
+				extendObject(exCondition, conditions[colIndex], [
+					'expression',
+					'backgroundColor',
+					'color'
+				]);
+
+				column.conditions.push(exCondition);
+			}
+		}
+
+		var colorText = this._getColumnOption(i, 'colorText', host);
+		if (colorText) {
+			column.colorText = colorText;
+		}
+
+		// alias with colorText
+		var tickColor = this._getColumnOption(i, 'tickColor', host);
+		if (tickColor) {
+			column.tickColor = tickColor;
+		}
+
+		var blinking = this._getColumnOption(i, 'blinking', host);
+		if (blinking) {
+			column.blinking = blinking;
+		}
+
+		var field = this._getField(i);
+		if (field) {
+			column.field = field;
+		}
+	}
+
+	return obj;
+};
+
+/** @private
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+ConditionalColoringPlugin.prototype._applyStyle = function(host, options) {
+	if(!options) { return; }
+
+	var columns = options["columns"];
+	if(!columns) { return; }
+
+	var painter;
+	var len = columns.length;
+	for(var i = 0; i < len; ++i) {
+		painter = this.getColumnPainter(i);
+		if(this._isValidPainter(painter)) {
+			host.enableColumnClass(i, "conditionally-colored", true);
+		}
+	}
+};
+
+/** @private
+* @param {CellPainter=} painter
+* @return {boolean}
+*/
+ConditionalColoringPlugin.prototype._isValidPainter = function(painter) {
+	if (!painter) {
+		return false;
+	}
+	var type = painter.getColoringType();
+	if (type !== CellPainter.ColoringTypes.HEATMAP) {
+		return true;
+	} else {
+		return false;
+	}
+};
+
+/** @private
+* @param {number} colIndex
+*/
+ConditionalColoringPlugin.prototype._clearCellStyles = function(colIndex) {
+	var i, grid, sect, rowCount, r, cell;
+	var hosts = this._hosts;
+	for(i = hosts.length; --i >= 0;) {
+		grid = hosts[i];
+		sect = grid.getSection("content");
+		rowCount = sect.getRowCount();
+		for(r = 0; r < rowCount; ++r) {
+			cell = sect.getCell(colIndex, r, false);
+			if (cell) {
+				CellPainter.clearCellStyle(cell);
+			}
+		}
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @param {boolean=} enabled
+*/
+ConditionalColoringPlugin.prototype._enableColumnStyle = function(colIndex, enabled) {
+	enabled = enabled !== false;
+	var hosts = this._hosts;
+	var grid;
+	for(var i = hosts.length; --i >= 0;) {
+		grid = hosts[i];
+		grid.enableColumnClass(colIndex, "conditionally-colored", enabled);
+	}
+};
+
+/** @private
+*/
+ConditionalColoringPlugin.prototype._cachePreviousValue = function() {
+	var colCount = this.getColumnCount();
+	var hosts = this._hosts;
+	var len = hosts.length;
+	var i, c, host;
+	for (i = 0; i < len; i++) {
+		host = hosts[i];
+		for (c = 0; c < colCount; ++c) {
+			this._cacheColumnPreviousValue(c, host);
+		}
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @param {Object} host
+*/
+ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colIndex, host) {
+	var prevDataRows = host._prevDataRows || {};
+	var dv = host.getDataSource();
+	var rowCount = dv.getRowCount();
+	var colData = this._getColumnData(colIndex);
+	if (colData["blinking"]) {
+		var field = colData["blinkingField"] || this._getField(colIndex);
+		var r, rid, value, prevDataRow;
+		for (r = 0; r < rowCount; r++) {
+			rid = dv.getRowId(r);
+			value = this._getData(dv, r, field);
+			if (value != null) {
+				prevDataRow = prevDataRows[rid];
+				if (!prevDataRow) {
+					prevDataRow = prevDataRows[rid] = {};
+				}
+
+				prevDataRow[field] = value;
+			}
+		}
+		host._prevDataRows = prevDataRows;
+	}
+};
+
+/** @public
+* @param {number} colIndex
+* @param {ConditionalColoringPlugin~ColumnOptions} columnOptions
+* @example
+* var colDef = {
+*   "conditions": [{ // Array.<Object> Condition Object Properties
+*     "expression": "[column0] > 0", // string
+*     "backgroundColor": "", // Optional string e.g. #ffffff, black
+*     "color": "" // Optional string e.g. #000000, white
+*   }]
+* };
+* var colDef2 = {
+*   "field": "string",
+*   "colorText": true // string as Field or boolean for text coloring mode
+* };
+*/
+ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
+	// Save column config state
+	var colData = this._newColumnData(colIndex);
+	if(columnOptions) {
+		colData['conditions'] = columnOptions['conditions'];
+		colData['colorText'] = columnOptions['colorText'];
+		colData['tickColor'] = columnOptions['tickColor'];
+		colData['blinking'] = columnOptions['blinking'];
+	} else {
+		colData['conditions'] = null;
+		colData['colorText'] = null;
+		colData['tickColor'] = null;
+		colData['blinking'] = null;
+	}
+
+	this.setColumnBlinking(colIndex, columnOptions["blinking"], columnOptions["field"]);
+
+	var painter = colData["painter"];
+	var prevColoring = colData["coloring"];
+	var colorOptions = this._prepareColorOptions(colIndex, columnOptions);
+	if(colorOptions.hasColor) { // Set new coloring
+		if (!painter) {
+			painter = colData["painter"] = new CellPainter();
+		}
+
+		if(colorOptions.condColoring) {
+			painter.setConditions(colorOptions.condColoring.conditions);
+		} else if(colorOptions.colorText) {
+			painter.addColorTextWithTheme(colorOptions.colorText.field);
+		}
+
+		colData["coloring"] = true; // Used for binding
+		painter["inputField"] = colorOptions.inputField;
+	} else {
+		colData["coloring"] = false;
+		if(this._isValidPainter(painter)) {
+			painter.resetColoring(); // Release any used memory
+			if(prevColoring) {
+				this._clearCellStyles(colIndex); // Need to clear the existing previous coloring style here
+			}
+		}
+	}
+
+	if(colData["coloring"] || colData["blinkingField"] ) {
+		this._enableColumnStyle(colIndex, true); // Remove the background image
+
+		if(colData["coloring"] && this._initializedGrid) { // Force rendering, the new coloring will be applied in the binding
+			this._requestRowRefresh();
+		}
+	} else if(painter) { // Clear existing painter
+		if(this._clearPainter(colData)) {
+			// Clear existing styles related to conditional coloring
+			this._enableColumnStyle(colIndex, false);
+		}
+	}
+};
+
+/** @public
+* @param {number} colIndex
+* @param {(boolean|ConditionalColoringPlugin~Blinking)=} blinkingOptions
+* @param {string=} field If not specified, column field will be used
+*/
+ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blinkingOptions, field) {
+	var colData = this._newColumnData(colIndex);
+	var prevBlinking = colData["blinkingField"];
+	colData["blinking"] = blinkingOptions;
+	var painter = colData["painter"];
+	var bOptions = this._prepareBlinkingOptions(colIndex, blinkingOptions, field);
+	if (bOptions) {
+		if (!painter) {
+			colData["painter"] = painter = new CellPainter();
+		} else if(prevBlinking) {
+			// Clear current style, blinking and existing styles related to blinking
+			painter.clearBlinking();
+		}
+		painter.disableLevelColor(bOptions.level === false);
+		if (bOptions.customColor) {
+			painter.addBlink(bOptions.field, bOptions.up, bOptions.down, bOptions.level, bOptions.border);
+		} else {
+			painter.addBlinkWithTheme(bOptions.field, bOptions.border);
+		}
+		colData["blinkingField"] = bOptions.field; // used for binding and cache clearing
+		this._blinkingEnabled = true; // TODO: need to dynamically verify the blink state
+
+		if (!prevBlinking) { // No need update the cache for the options changing
+			// Emerald Grid needs to cache in the initializing phase
+			// Atlas Blotter will cache in the first binding
+			if (this._compositeGrid || this._initializedGrid) {
+				var host, hosts = this._hosts;
+				for (var i = 0; i < hosts.length; i++) {
+					host = hosts[i];
+					this._cacheColumnPreviousValue(colIndex, host);
+				}
+			}
+		}
+
+		ConditionalColoringPlugin._startCleanUpInterval();
+	} else {
+		if (painter) {
+			if (!colData["coloring"]) {
+				this._clearPainter(colData);
+			} else {
+				painter.clearBlinking(); // Release any used memory and restore cell's style
+				ConditionalColoringPlugin._cleanUpPrevFields();
+			}
+		}
+		colData["blinkingField"] = null; // Used by cache clearing, do not reset before cache clearing
+	}
+};
+
+/** @public
+* @param {number} colIndex
+* @param {Object=} out_obj
+* @return {!Object}
+*/
+ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, out_obj) {
+	if(!out_obj) {
+		out_obj = {};
+	}
+	console.log("WARNING: getColumnColoring() is not implemented yet");
+	return out_obj;
+};
+
+/** @public
+* @param {number} rowIndex
+* @param {number} blinkSignal
+* @param {Object=} host core grid object
+*/
+ConditionalColoringPlugin.prototype.blinkRow = function (rowIndex, blinkSignal, host) {
+	host = host || this._hosts[0];
+	if (!host) return;
+
+	var dv = host.getDataSource();
+	if (!dv) return;
+
+	var section = host.getSection('content');
+	if (!section) return;
+
+	var rowData = dv.getRowDataAt(rowIndex);
+
+	var colCount = section.getColumnCount();
+	for (var c = 0; c < colCount; ++c) {
+		var painter = this.getColumnPainter(c);
+		if (!painter) continue;
+
+		var cell = section.getCell(c, rowIndex, false);
+		if (!cell) continue;
+		painter.blink(cell, blinkSignal, rowData);
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @param {(boolean|ConditionalColoringPlugin~Blinking)=} blinkingOptions
+* @param {string=} columnField
+* @return {Object}
+*/
+ConditionalColoringPlugin.prototype._prepareBlinkingOptions = function (colIndex, blinkingOptions, columnField) {
+	if (colIndex == null || !blinkingOptions) {
+		return null;
+	}
+
+	var bOptions = {};
+	var field = columnField || this._getField(colIndex);
+	var blinkField = field;
+	if (typeof blinkingOptions === "string") {
+		blinkField = blinkingOptions;
+	} else if(typeof blinkingOptions === "object") {
+		blinkField = /** @type{string} */(blinkingOptions["field"]) || field;
+		bOptions.border = blinkingOptions["border"];
+		if (blinkingOptions["up"] || blinkingOptions["down"] || blinkingOptions["level"]) {
+			bOptions.customColor = true;
+			bOptions.up = blinkingOptions["up"];
+			bOptions.down = blinkingOptions["down"];
+			bOptions.level = blinkingOptions["level"];
+		}
+		if (blinkingOptions["level"] === false) {
+			bOptions.level = false;
+		}
+	}
+
+	bOptions.field = ConditionalColoringPlugin._convertKeyword(blinkField, field);
+	bOptions.inputField = blinkField;
+	return bOptions;
+};
+
+/** @private
+* @param {number} colIndex
+* @param {ConditionalColoringPlugin~ColumnOptions} columnOptions
+* @return {!Object}
+*/
+ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, columnOptions) {
+	var colorOptions = {};
+	if(!columnOptions) {
+		return colorOptions;
+	}
+	var colField = this._getField(colIndex);
+	var field = /** @type{string} */(columnOptions["field"]) || colField;
+	field = ConditionalColoringPlugin._convertKeyword(field, colField);
+
+	var conditions = columnOptions["conditions"];
+
+	// Check if there is another type of coloring
+	// "colorText" attr has more priority than "tickColor"
+	var colorText = columnOptions["colorText"] || columnOptions["tickColor"];
+	var inputField = columnOptions["inputField"] || "";
+	var conditionCount = conditions ? conditions.length : 0;
+	if(conditionCount) {
+		colorOptions.condColoring = {};
+		colorOptions.condColoring.conditions = conditions;
+		colorOptions.hasColor = 1;
+		var formatter = (field == colField) ? columnOptions["textFormatter"] : null;
+		var builder = ConditionalColoringPlugin.getFilterBuilder();
+
+		// WARNING: Builder has to have field first
+		builder.setFieldDefinition(field, formatter, field);
+
+		for(var i = conditionCount; --i >= 0;) {
+			var cond = conditions[i];
+			var exp = cond["expression"];
+			if(!exp && field) { // Build Expression from condition
+				var oper = cond["condition"];
+				var value1 = cond["value1"];
+				var value2 = cond["value1"];
+
+				if(oper !== "BTW") {
+					builder.addCondition(oper, value1);
+				} else {
+					builder.addCondition("GTE", value1);
+					builder.addCondition("LTE", value2);
+				}
+				exp = builder.buildFilter();
+				cond["expression"] = exp;
+			}
+		}
+
+		colorOptions.inputField = inputField;
+	} else if(colorText) {
+		colorOptions.colorText = {};
+		colorOptions.hasColor = 1;
+
+		inputField = field;
+		if(typeof colorText === "string") {
+			inputField = colorText;
+		} else if(typeof colorText === "object") {
+			inputField = /** @type{string} */(colorText["field"]) || field;
+		}
+		colorOptions.colorText.field = ConditionalColoringPlugin._convertKeyword(inputField, field);
+		colorOptions.inputField = inputField;
+	}
+
+	return colorOptions;
+};
+/** @private
+* @function
+* @param {string} userInput
+* @param {string} fallback
+* @return {string}
+*/
+ConditionalColoringPlugin._convertKeyword = function(userInput, fallback) {
+	if(userInput) {
+		// Note that THIS_COLUMN is a special keyword that needs to be converted before usage
+		return userInput.indexOf("THIS_COLUMN") ? userInput : fallback;
+	}
+	return userInput;
+};
+
+/** @private
+* @function
+* @param {Array.<Object>} events
+* @return {Object} mapping of inserted row id
+*/
+ConditionalColoringPlugin._mapInsertedRowId = function (events) {
+	var insertedDict = {};
+	var eventCount = events ? events.length : 0;
+	for (var i = 0; i < eventCount; ++i) {
+		var event = events[i];
+
+		// map inserted row
+		if (event.type === "inserted") {
+			insertedDict[event.rid] = true;
+		}
+	}
+	return insertedDict;
+};
+
+/** @private
+* @function
+* @param {Object} e
+* @return {!Array.<Object>} Array of merged changes
+*/
+ConditionalColoringPlugin._mergeUpdates = function(e) {
+	var evts = e.events; // dataSource event
+	var evtCount = evts ? evts.length : 0;
+	var dv = e.dataSource;
+	var changedRows = [];
+	var evt, i;
+	for (i = 0; i < evtCount; ++i) {
+		evt = evts[i];
+
+		// merge update event
+		if (evt.type === "updated") {
+			var rowIndex = dv.getRowIndex(evt.rid);
+			if (!changedRows[rowIndex]) {
+				changedRows[rowIndex] = {
+					changed: {},
+					rid: evt.rid
+				};
+			}
+			var mergedChanges = changedRows[rowIndex].changed;
+			var changes = evt.changes;
+			for (var key in changes) {
+				mergedChanges[key] = 1;
+			}
+		}
+	}
+	return changedRows;
+};
+/** @private
+* @function
+* @return {!FilterBuilder}
+*/
+ConditionalColoringPlugin.getFilterBuilder = function() {
+	if(!ConditionalColoringPlugin._fb) {
+		ConditionalColoringPlugin._fb = new FilterBuilder();
+	}
+	return ConditionalColoringPlugin._fb;
+};
+/** @type {FilterBuilder}
+* @private
+*/
+ConditionalColoringPlugin._fb = null;
+
+/** @private */
+ConditionalColoringPlugin.prototype._requestRowRefresh = function () {
+	for(var i = this._hosts.length; --i >= 0;) {
+		this._hosts[i].requestRowRefresh();
+	}
+};
+/** @public
+* @param {number} colIndex
+* @return {CellPainter}
+*/
+ConditionalColoringPlugin.prototype.getColumnPainter = function (colIndex) {
+	return /** @type{CellPainter} */(this._getColumnOption(colIndex, "painter"));
+};
+
+/** Apply color to a cell base on input column index
+* @public
+* @param {number} colIndex Coloring condition from this column index will be used
+* @param {Object} cell Target grid cell to apply color to
+* @param {Object=} rowData A row data which will be used to determine a color together with a colIndex
+*/
+ConditionalColoringPlugin.prototype.applyColor = function (colIndex, cell, rowData) {
+	var painter = this.getColumnPainter(colIndex);
+	if (!painter) { return; }
+
+	if (!rowData) rowData = {};
+	var field = this._getField(colIndex);
+	var changes = {};
+	changes[field] = 1;
+	painter.render(cell, rowData, NaN, NaN, changes); // NaN values are min and max values for heatmap calculation
+};
+
+/** @private
+* @param {Object} e
+*/
+ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
+	var c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
+	var dataRow, insertedId, colData, blinking, bgBlinking, cachedValues, updatePrev;
+	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 actualUpdate = e["actualUpdate"];
+	var dv = e["dataSource"];
+	var host = e["sender"];
+
+	var blinkingEnabled = actualUpdate && this._blinkingEnabled;
+	if (blinkingEnabled) {
+		insertedId = ConditionalColoringPlugin._mapInsertedRowId(e.events);
+		if (this._compositeGrid) {
+			changedRows = ConditionalColoringPlugin._mergeUpdates(e);
+		}
+	}
+
+	var prevDataRow, prevDataRows = host._prevDataRows;
+	for (r = fromR; r < toR; ++r) {
+		dataRow = this._rowGetter(dataRows[r]);
+		if (!dataRow) continue; // prevent from null value access when using with RowGroupingExtension
+
+		changedCols = null;
+		if (blinkingEnabled) {
+			if (this._realTimeGrid) {
+				// TODO: check rid from e.rids
+				rowDef = /** @type{RowDefinition} */(dataRow["ROW_DEF"]);
+				rid = rowDef ? rowDef.getRowId() : "";
+				if (rid && !insertedId[rid]) {
+					changedCols = rowDef.getUpdates();
+				}
+			} else { // composite grid
+				changedRow = changedRows[r];
+				if (changedRow) {
+					rid = changedRow.rid;
+					if (!insertedId[rid]) {
+						changedCols = changedRow.changed;
+					}
+				}
+			}
+		}
+
+		if (!rid) {
+			if (this._realTimeGrid) {
+				// TODO: check rid from e.rids
+				rowDef = /** @type{RowDefinition} */(dataRow["ROW_DEF"]);
+				rid = rowDef ? rowDef.getRowId() : "";
+			} else {
+				rid = dv.getRowId(r);
+			}
+		}
+
+		prevDataRow = prevDataRows[rid];
+		cachedValues = {};
+		updatePrev = false;
+		for (c = 0; c < colCount; ++c) {
+			cell = section.getCell(c, r, false);
+			if (!cell) continue;
+
+			painter = this.getColumnPainter(c);
+			if (painter) {
+				colData = this._getColumnData(c);
+				bgBlinking = false;
+				blinking = false;
+				if (colData["blinking"] && actualUpdate) { // blinking
+					var field = colData["blinkingField"] || this._getField(c);
+					var newValue = dataRow[field];
+					if (prevDataRow) {
+						var prevValue = prevDataRow[field];
+						if (prevValue != null) {
+							if (changedCols && changedCols[field]) {
+								blinking = true;
+								bgBlinking = painter.blinkCell(cell, newValue, prevValue, dataRow, dataRow);
+							}
+						}
+					}
+
+					if (!blinking) {
+						painter.verifyBlinking(cell, dataRow);
+					}
+					cachedValues[field] = newValue;
+					updatePrev = true;
+				}
+
+				// conditional coloring
+				if (colData["coloring"] && !bgBlinking) {
+					painter.renderColoring(cell, dataRow);
+				}
+			}
+		}
+		if (updatePrev) {
+			// Need to update cache when all columns are finished
+			// To prevent column that uses the same field from always blink with level color
+			// because the cache is updated by former column
+			prevDataRows[rid] = cachedValues;
+		}
+		rid = null;
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ConditionalColoringPlugin.prototype._onColumnAdded = function(e) {
+	if(e.context) {
+		this.setColumnColoring(e.colIndex, e.context, e.sender);
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
+	var colData = /** @type{Object} */(e.columnData);
+	this._clearPainter(colData);
+};
+
+/** @private */
+ConditionalColoringPlugin.prototype._onThemeLoaded = function () {
+	this._requestRowRefresh();
+};
+
+/** @private
+* @param {Object} colData
+* @return {boolean}
+*/
+ConditionalColoringPlugin.prototype._clearPainter = function (colData) {
+	if (colData) {
+		ConditionalColoringPlugin._cleanUpPrevFields();
+		var painter = colData["painter"];
+		if (painter) {
+			if (this._isValidPainter(painter)) {
+				painter.dispose();
+				colData["painter"] = null;
+				return true;
+			} else {
+				painter.clearBlinking();
+				// cannot set colData["painter"] to be null here because some other extensions may be still using this painter
+			}
+		}
+	}
+	return false;
+};
+
+/** @private
+ */
+ConditionalColoringPlugin._cleanUpPrevFields = function() {
+	// Assume that all hosts are using the same columns' options
+	var colCount = this.getColumnCount();
+	var colData, blinkingFields = {};
+	var isBlinking = false;
+	for (var c = 0; c < colCount; c++) {
+		colData = this._getColumnData(c);
+		if (colData["blinking"]) {
+			blinkingFields[colData["blinkingField"]] = isBlinking = true;
+		}
+	}
+
+	var hosts = this._hosts;
+	var len = hosts.length;
+	var host, i;
+	if (isBlinking) {
+		var prevDataRow, prevDataRows, rid, field;
+		for (i = 0; i < len; i++) {
+			host = hosts[i];
+			prevDataRows = host._prevDataRows;
+			for (rid in prevDataRows) {
+				prevDataRow = prevDataRows[rid];
+				for (field in prevDataRow) {
+					if (!blinkingFields[field]) {
+						delete prevDataRow[field];
+					}
+				}
+			}
+		}
+	} else {
+		for (i = 0; i < len; i++) {
+			host = hosts[i];
+			host._prevDataRows = {};
+		}
+		ConditionalColoringPlugin._stopCleanUpInterval();
+	}
+};
+
+/** @public
+ */
+ConditionalColoringPlugin.cleanUpPrevRows = function() {
+	var hosts = this._hosts;
+	var len = hosts.length;
+	var host, dv, i, n, rids, rid, prevDataRows;
+	for (i = 0; i < len; i++) {
+		host = hosts[i];
+		dv = host.getDataSource();
+		if (!dv) { continue; }
+		prevDataRows = host._prevDataRows;
+		rids = Object.keys(prevDataRows);
+		for (n = 0; n < rids.length; n++) {
+			rid = rids[n];
+			if (!dv.getRowData(rid)) {
+				delete prevDataRows[rid];
+			}
+		}
+	}
+};
+
+/** @private
+ */
+ConditionalColoringPlugin._startCleanUpInterval = function() {
+	if (!ConditionalColoringPlugin._cleanUpTimer) {
+		ConditionalColoringPlugin._cleanUpTimer = setInterval(ConditionalColoringPlugin.cleanUpPrevRows, 1800000);
+	}
+};
+
+/** @private
+ */
+ConditionalColoringPlugin._stopCleanUpInterval = function() {
+	if (ConditionalColoringPlugin._cleanUpTimer) {
+		clearInterval(ConditionalColoringPlugin._cleanUpTimer);
+		ConditionalColoringPlugin._cleanUpTimer = 0;
+	}
+};
+
+/** @public
+* @description Deprecated:: Should use reloadThemeColors instead
+* @function
+* @param {Object.<string, string>} colors Name/Value pair object
+*/
+ConditionalColoringPlugin.setThemeColors = CellPainter.setThemeColors;
+
+/** @public
+* @description Reload theme colors and change colors for all instances of CellPainter, Should call after MovementColor changed.
+* @function
+* @return {Promise<Object>}
+*/
+ConditionalColoringPlugin.prototype.reloadThemeColors = function () {
+	return CellPainter.reloadThemeColors().then(this._onThemeLoaded);
+};
+
+
+
+export default ConditionalColoringPlugin;
+export { ConditionalColoringPlugin, ConditionalColoringPlugin as ConditionalColoring, ConditionalColoringPlugin as ConditionalColoringExtension };