@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,1513 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {extendObject, injectCss, prettifyCss} 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';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+
+/** @typedef {Object} ConditionalColoringPlugin~Options
+* @description The options can be specified by `conditionalColoring` property of the main grid's options
+* @property {Object=} predefinedColors Predefined color object map for conditional coloring
+* @property {number=} blinkingDuration=250 Blinking duration in milliseconds
+* @property {(boolean|string)=} insertionBlinking=false When a new row is added to Grid, cell will blink.
+*   Specify true for blinking with theme's neutral movement color. To blink cell with a certain color, specify a string of hex color value.
+*/
+
+/** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
+* @description Extension column options that can be specified on each Grid column configuration object
+* @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} colorText=null A shorthand for specifying default condition based on the field.
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} tickColor=null Alias of colorText.
+* @property {(string|boolean|ConditionalColoringPlugin~Blinking)=} blinking=null Blink Options. If specified, the cell will be blinked on data change.
+* @property {string=} field Field for Grid column configuration object
+*/
+
+/** @typedef {Object} ConditionalColoringPlugin~ConditionalColoringOptions
+* @description Available options for changing conditional coloring at runtime
+* @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} colorText=null A shorthand for specifying default condition based on the field.
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} tickColor=null Alias of colorText
+* @property {string=} field Field to be used for all conditions, overriding the field defined in ColumnOptions
+*/
+
+/** @typedef {Object} ConditionalColoringPlugin~Condition
+* @description Properties defining colors and conditioning
+* @property {(string|Function|Array)=} expression The expression can be in the following forms: text, function, and 2 dimentional array
+* @property {string=} backgroundColor="" CSS color (e.g. #ffffff, black)
+* @property {string=} color CSS="" color (e.g. #000000, white)
+* @property {string=} cssClass cssClass="" Predefined color class name
+* @property {string=} field Field to be used for this specific condition, overriding the field defined in ConditionalColoringOptions
+* @example
+* let conditions1 = [ // Add cssClass for any value that is greater than or equal to 10, and less than or equal to 20
+*   {expression: [["GTE", 10, "AND"], ["LTE", 20]], cssClass: "predefinedColors"}
+* ];
+* let conditions2 = [ // Add background color for any fieldA value that is not blank value (e.g., null, undefined, 0, false, empty string)
+*   {
+*     expression: function(rowData) {
+*       return rowData["fieldA"] ? true : false;
+*     },
+*     backgroundColor: "blue",
+*     field: "fieldA"
+*   }
+* ];
+* let conditions3 = [ // Add text color for any fieldA value that is not equal to 10
+*   {expression: "[fieldA] != 10", color: "red"}
+* ];
+*/
+
+/** @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. If up, down and level value are not specified, theme's movement colors 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.
+* @property {number=} duration If specified, this will override blinking duration from extension option. Blinking duration in milliseconds
+*/
+
+/** @typedef {(string|boolean|Object)} ConditionalColoringPlugin~ColorText
+* @description Available options describing `colorText` object. Additionally if specify colorText as string of field, colorText will base on the field. <br>
+* If specified true, field from column definition will be used.
+* @property {string=} field If not specified, field from column definition will be used
+* @property {string=} upClass CSS class name.
+* @property {string=} downClass CSS class name.
+* @property {string=} levelClass CSS class name.
+*/
+
+/** @type {string}
+* @private
+* @constant
+*/
+const COLORING_TYPE = "coloring";
+/** @type {string}
+* @private
+* @constant
+*/
+const BLINKING_TYPE = "blinking";
+/** @type {Object}
+* @private
+* @constant
+*/
+const CLEARING_BG = {
+	"backgroundColor": 1
+};
+/** @type {Object}
+* @private
+* @constant
+*/
+const CLEARING_TEXT = {
+	"color": 1
+};
+/** @type {Object}
+* @private
+* @constant
+*/
+const CLEARING_ALL = {
+	"backgroundColor": 1,
+	"color": 1
+};
+
+let _bracketExp = /\[[^\[\]]*\]/g;
+
+/** @private
+* @param {string} exp Expression string
+* @return {Array.<string>}
+*/
+let _getFieldsFromExpression = function(exp) {
+	let fields = [];
+	if(exp && typeof exp === "string") {
+		let matches = exp.match(_bracketExp);
+		for (let i = 0; i < matches.length; i++) {
+			fields.push(matches[i].replace(/[\[\]]/g, ""));
+		}
+	}
+	return fields;
+};
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+let 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 {string}
+* @private
+*/
+ConditionalColoringPlugin._controlClass = "predefined-conditional-color";
+/** @type {string}
+* @private
+*/
+ConditionalColoringPlugin._colorTextStyles;
+
+/** @type {boolean}
+* @private
+*/
+ConditionalColoringPlugin.prototype._blinkingEnabled = false; // WORKAROUND: To improve performance
+
+/** @type {Array}
+* @private
+*/
+ConditionalColoringPlugin.prototype._pendingFields;
+/** @type {Object}
+* @private
+*/
+ConditionalColoringPlugin.prototype._predefinedColors = null;
+/** @type {number}
+* @private
+*/
+ConditionalColoringPlugin.prototype._blinkingDuration = 250;
+/** @type {boolean|string}
+* @private
+*/
+ConditionalColoringPlugin.prototype._insertionBlinking = false;
+/** @type {string}
+* @private
+*/
+ConditionalColoringPlugin._predefinedColorsStyles;
+
+/** @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 = {};
+
+	let hosts = this._hosts;
+	if(hosts.indexOf(host) >= 0) { return; }
+
+	hosts.push(host);
+
+	let extOptions = options["conditionalColoring"];
+	if (extOptions) {
+		let predefinedColors = extOptions["predefinedColors"];
+		if (predefinedColors != null && typeof predefinedColors === "object") {
+			if (!this._predefinedColors) {
+				this._predefinedColors = predefinedColors;
+				this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
+			}
+
+			this._injectPredefinedColors(host);
+			host.enableClass(ConditionalColoringPlugin._controlClass);
+		}
+		let blinkingDuration = extOptions["blinkingDuration"];
+		if(blinkingDuration != null  && typeof blinkingDuration === "number"){
+			this._blinkingDuration = blinkingDuration;
+		}
+		let insertionBlinking = extOptions["insertionBlinking"];
+		if(insertionBlinking != null){
+			this._insertionBlinking = insertionBlinking;
+		}
+	}
+
+	if(hosts.length === 1) {
+		this.config(options);
+	} else {
+		this._applyStyle(host, options);
+		this._injectColorTextStyles();
+	}
+
+	host.listen("postSectionDataBinding", this._onSectionBinding);
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("columnRemoved", this._onColumnRemoved);
+
+	if (!CellPainter.themeReady) {
+		CellPainter.loadThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded);
+	}
+
+	// Register callback for movement-color-profile attribute changed event
+	ElfUtil.getThemeColors(this._onThemeLoaded);
+
+	// In case of lazy loading
+	// DO something
+};
+
+/** @override
+* @ignore
+*/
+ConditionalColoringPlugin.prototype._afterInit = function () {
+	let pendingFields = this._pendingFields;
+	if(pendingFields) {
+		let fields, colIndex, type;
+		for(let i = 0; i < pendingFields.length; i++) {
+			fields = pendingFields[i][0];
+			colIndex = pendingFields[i][1];
+			type = pendingFields[i][2];
+			this._addDataFields(fields, colIndex, type);
+		}
+		this._pendingFields = null;
+	}
+};
+
+/** @public
+* @param {Object} host core grid object
+*/
+ConditionalColoringPlugin.prototype.unload = function (host) {
+	let 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; }
+
+	let columns = options["columns"];
+	if(!columns) { return; }
+
+	let len = columns.length;
+	for(let i = 0; i < len; ++i) {
+		this.setColumnColoring(i, columns[i]);
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let extOptions = obj["conditionalColoring"];
+	if(!extOptions) {
+		extOptions = obj["conditionalColoring"] = {};
+	}
+
+	if(this._predefinedColors != null) {
+		extOptions["predefinedColors"] = this._predefinedColors;
+	}
+
+	if(this._blinkingDuration !== 250) {
+		extOptions["blinkingDuration"] = this._blinkingDuration;
+	}
+
+	if(this._insertionBlinking !== false) {
+		extOptions["insertionBlinking"] = this._insertionBlinking;
+	}
+
+	let columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	for (let i = 0; i < len; ++i) {
+		let column = columns[i];
+		if (!column) {
+			column = columns[i] = {};
+		}
+
+		this.getColumnColoring(i, column);
+	}
+
+	return obj;
+};
+
+/** @public
+* @param {number} colIndex
+* @param {Object=} options
+* @return {!ConditionalColoringPlugin~ColumnOptions}
+*/
+ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, options) {
+	if(!options) {
+		options = {};
+	}
+	let host = this._hosts[0];
+	let conditions = this._getColumnOption(colIndex, "conditions", host);
+	if (Array.isArray(conditions) && conditions.length > 0) {
+		options.conditions = [];
+
+		let returnedFields = [
+			"expression",
+			"backgroundColor",
+			"color",
+			"cssClass",
+			"field"
+		];
+		let count = conditions.length;
+		for (let n = 0; n < count; n++) {
+			let exCondition = {};
+			let cond = conditions[n];
+			extendObject(exCondition, cond, returnedFields);
+			if(typeof exCondition["expression"] === "function") {
+				let origExp = cond["origExpression"];
+				if(origExp) {
+					exCondition["expression"] = origExp;
+				}
+			}
+
+			options.conditions.push(exCondition);
+		}
+	}
+
+	let colorText = this._getColumnOption(colIndex, "colorText", host);
+	if (colorText) {
+		options.colorText = colorText;
+	}
+
+	// alias with colorText
+	let tickColor = this._getColumnOption(colIndex, "tickColor", host);
+	if (tickColor) {
+		options.tickColor = tickColor;
+	}
+
+	let blinking = this._getColumnOption(colIndex, "blinking", host);
+	if (blinking) {
+		options.blinking = blinking;
+	}
+
+	let field = this._getField(colIndex);
+	if (field) {
+		options.field = field;
+	}
+
+	return options;
+};
+
+/** @private
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+ConditionalColoringPlugin.prototype._applyStyle = function(host, options) {
+	if(!options) { return; }
+
+	let columns = options["columns"];
+	if(!columns) { return; }
+
+	let painter;
+	let len = columns.length;
+	for(let i = 0; i < len; ++i) {
+		painter = this.getColumnPainter(i);
+		if(this._isValidPainter(painter)) {
+			host.enableColumnClass(i, "conditionally-colored", true);
+		}
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @param {boolean=} enabled=true
+*/
+ConditionalColoringPlugin.prototype._enableColumnStyle = function(colIndex, enabled) {
+	enabled = enabled !== false;
+	let hosts = this._hosts;
+	let grid;
+	for(let i = hosts.length; --i >= 0;) {
+		grid = hosts[i];
+		grid.enableColumnClass(colIndex, "conditionally-colored", enabled);
+	}
+};
+
+/** @private
+* @param {CellPainter=} painter
+* @return {boolean}
+*/
+ConditionalColoringPlugin.prototype._isValidPainter = function(painter) {
+	if (!painter) {
+		return false;
+	}
+	let type = painter.getColoringType();
+	if (type !== CellPainter.ColoringTypes.HEATMAP) {
+		return true;
+	} else {
+		return false;
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @param {Object=} styleMapping
+*/
+ConditionalColoringPlugin.prototype._clearCellStyles = function(colIndex, styleMapping) {
+	let i, grid, sect, rowCount, r, cell;
+	let 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, styleMapping);
+			}
+		}
+	}
+};
+
+/** @private
+*/
+ConditionalColoringPlugin.prototype._cachePreviousValue = function() {
+	let colCount = this.getColumnCount();
+	let hosts = this._hosts;
+	let len = hosts.length;
+	let 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) {
+	let prevDataRows = host._prevDataRows || {};
+	let dv = host.getDataSource();
+	let rowCount = dv.getRowCount();
+	let colData = this._getColumnData(colIndex);
+	if (colData["blinking"]) {
+		let field = colData["blinkingField"] || this._getField(colIndex);
+		let 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;
+	}
+};
+
+/** @private
+* @param {string|Array.<string>} fieldRef
+* @param {(Object|number)=} colRef
+* @param {string} type
+*/
+ConditionalColoringPlugin.prototype._addDataFields = function(fieldRef, colRef, type) {
+	if(!this._realTimeGrid || !fieldRef || !type) {
+		return;
+	}
+	let referrer = null;
+	if (colRef != null) {
+		let colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		referrer = colDef ? colDef.getId() + "_" + type : null;
+	}
+
+	this._realTimeGrid.addDataFields(fieldRef, referrer);
+};
+
+/** @private
+* @param {string|Array.<string>} fieldRef
+* @param {(Object|number)=} colRef
+* @param {string} type
+*/
+ConditionalColoringPlugin.prototype._removeDataFields = function(fieldRef, colRef, type) {
+	if(!this._realTimeGrid || !fieldRef || !type) {
+		return;
+	}
+	let referrer = null;
+	if (colRef != null) {
+		let colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		referrer = colDef ? colDef.getId() + "_" + type : null;
+	}
+	this._realTimeGrid.removeDataFields(fieldRef, referrer);
+};
+
+/** @private
+* @param {(string|number)=} colRef
+* @param {string} type
+*/
+ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type) {
+	if(!this._realTimeGrid || !type) {
+		return;
+	}
+	let referrer = null;
+	if (colRef != null) {
+		let colId = colRef;
+		if (typeof colRef === "number") {
+			let colDef = this._realTimeGrid.getColumnDefinition(colRef);
+			if (colDef) {
+				colId = colDef.getId();
+			}
+		}
+
+		referrer = colId ? colId + "_" + type : null;
+		this._realTimeGrid.removeFieldReferrer(referrer);
+	}
+};
+
+/** @public
+* @description To define coloring for columns, conditions or colorText or tickColor need to be specified.
+*   To enable cell blinking the blinking option need to be defined.<br>
+*   Coloring options and blinking options can be applied to a column at the same time.<br>
+*   The blinking or coloring abilities will be removed if the correspondent options are not given.<br>
+*   If columnOptions is undefined or null, both coloring and blinking will be removed.
+* @param {number} colIndex
+* @param {(ConditionalColoringPlugin~ColumnOptions|null)=} columnOptions
+* @see {@link ConditionalColoringPlugin.setConditionalColoring}
+* @see {@link ConditionalColoringPlugin.setColumnBlinking}
+* @example
+* let columnOptions1 = {
+*   "field": "string",
+*   "conditions": [{ // Array.<Object> Condition Object Properties
+*     "expression": "[column0] > 0", // string
+*     "backgroundColor": "", // Optional string e.g. #ffffff, black
+*     "color": "" // Optional string e.g. #000000, white
+*   }]
+* };
+* let columnOptions2 = {
+*   "field": "string",
+*   "colorText": true, // string as Field or boolean for text coloring mode
+*   "blinking": true
+* };
+*/
+ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
+	let blinkingOptions, field;
+	if(columnOptions) {
+		blinkingOptions = columnOptions["blinking"];
+		field = columnOptions["field"];
+	}
+
+	this.setColumnBlinking(colIndex, blinkingOptions, field);
+	this.setConditionalColoring(colIndex, columnOptions);
+
+	let colData = this._newColumnData(colIndex);
+	if (colData["painter"] && !(colData["coloringFields"] || colData["blinkingField"])) { // Clear existing painter
+		this._clearPainter(colData);
+	}
+};
+
+/** @public
+* @param {number} colIndex
+* @param {ConditionalColoringPlugin~ConditionalColoringOptions=} coloringOptions
+*/
+ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex, coloringOptions) {
+	let colData = this._newColumnData(colIndex);
+
+	colData["conditions"] = null; // WARNING: This clears existing user states
+	if(coloringOptions) {
+		// Save column config state
+		colData["colorText"] = coloringOptions["colorText"];
+		colData["tickColor"] = coloringOptions["tickColor"];
+		colData["field"] = coloringOptions["field"];
+	} else {
+		colData["colorText"] = null;
+		colData["tickColor"] = null;
+	}
+	let painter = colData["painter"];
+	let prevFields = colData["coloringFields"] ? Object.keys(colData["coloringFields"]) : null;
+	let colorOptions = this._prepareColorOptions(colIndex, coloringOptions);
+
+	if (this._isValidPainter(painter)) {
+		if (prevFields) {
+			let effectiveStyles = painter.getEffectiveStyles();
+			this._clearCellStyles(colIndex, effectiveStyles); // Need to clear the existing previous coloring styles here
+		}
+		painter.resetColoring(); // Release any used memory
+	}
+
+	if(colorOptions.hasColor) { // Set new coloring
+		colData["conditions"] = coloringOptions["conditions"]; // WARNING: This stores user object
+		let newFieldsMap = colorOptions.fields;
+		if (!painter) {
+			painter = colData["painter"] = new CellPainter();
+		} else if (prevFields) {
+			// Remove unused fields
+			let unusedFields = [];
+			let prevField;
+			for (let i = 0; i < prevFields.length; i++) {
+				prevField = prevFields[i];
+				if (!newFieldsMap[prevField]) {
+					unusedFields.push(prevField);
+				}
+			}
+			if (unusedFields.length) {
+				this._removeDataFields(unusedFields, colIndex, COLORING_TYPE);
+			}
+		}
+
+		if(colorOptions.condColoring) {
+			let conditions = colorOptions.condColoring.conditions;
+			painter.setConditions(conditions);
+			this._setEffectiveStyles(painter, conditions);
+		} else if(colorOptions.colorText) {
+			let options = colorOptions.colorText;
+			if (options.useThemeColors) {
+				if (!ConditionalColoringPlugin._colorTextStyles) {
+					let styles = {
+						positive: {
+							color: "var(--color-scheme-positive)"
+						},
+						negative: {
+							color: "var(--color-scheme-negative)"
+						},
+						neutral: {
+							color: "var(--color-scheme-neutral)"
+						}
+					};
+
+					ConditionalColoringPlugin._colorTextStyles = this._prepareStyles(styles);
+				}
+				this._injectColorTextStyles();
+				painter.addColorTextWithTheme(colorOptions.colorText.field);
+			} else {
+				painter.addColorText(options.field, options.upClass, options.downClass, options.levelClass);
+			}
+		}
+
+		let fields = Object.keys(newFieldsMap);
+		if (this._initializedGrid) {
+			this._addDataFields(fields, colIndex, COLORING_TYPE);
+		} else {
+			if (!this._pendingFields) {
+				this._pendingFields = [];
+			}
+			this._pendingFields.push([fields, colIndex, COLORING_TYPE]);
+		}
+
+		this._enableColumnStyle(colIndex, true); // Remove the background image
+		painter["inputField"] = colorOptions.inputField; // Used in ColumnFormatting extension for restoring the user's selected field in column format dialog
+		colData["coloringFields"] = newFieldsMap;
+	} else {
+		if (prevFields) {
+			this._removeFieldReferrer(colIndex, COLORING_TYPE);
+		}
+
+		colData["coloringFields"] = null;
+		this._enableColumnStyle(colIndex, false);
+	}
+	if (this._initializedGrid) {
+		let core = this._hosts[0];
+		if(core){
+			let rowColoring = core.getPlugin('RowColoringPlugin');
+			if(rowColoring && rowColoring.forceUpdateRowColor){
+				rowColoring.forceUpdateRowColor();
+			}
+		}
+		this._requestRowRefresh();
+	}
+};
+
+/** @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) {
+	let colData = this._newColumnData(colIndex);
+	let prevField = colData["blinkingField"];
+	colData["blinking"] = blinkingOptions;
+	let painter = colData["painter"];
+	let bOptions = this._prepareBlinkingOptions(colIndex, blinkingOptions, field);
+	if (bOptions) {
+		let newBlinkingField = bOptions.field;
+		if (!painter) {
+			colData["painter"] = painter = new CellPainter();
+		} else if(prevField) {
+			// Clear current style, blinking and existing styles related to blinking
+			painter.clearBlinking();
+			if (prevField !== newBlinkingField) {
+				this._removeDataFields(prevField, colIndex, BLINKING_TYPE);
+			}
+		}
+		let blinkDuration = bOptions.duration || this._blinkingDuration;
+		painter.setBlinkingDuration(blinkDuration);
+		colData.levelBlinkingDisabled = bOptions.level === false; // Used in _onSectionBinding
+		if (bOptions.customColor) {
+			painter.addBlink(newBlinkingField, bOptions.up, bOptions.down, bOptions.level, bOptions.border);
+		} else {
+			painter.addBlinkWithTheme(newBlinkingField, bOptions.border);
+		}
+		colData["blinkingField"] = newBlinkingField; // used for binding and cache clearing
+		this._blinkingEnabled = true; // TODO: need to dynamically verify the blink state
+
+		if (!prevField) { // 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) {
+				let host, hosts = this._hosts;
+				for (let i = 0; i < hosts.length; i++) {
+					host = hosts[i];
+					this._cacheColumnPreviousValue(colIndex, host);
+				}
+			}
+		}
+
+		ConditionalColoringPlugin._startCleanUpInterval();
+		if (this._initializedGrid) {
+			this._addDataFields(newBlinkingField, colIndex, BLINKING_TYPE);
+		} else {
+			if (!this._pendingFields) {
+				this._pendingFields = [];
+			}
+			this._pendingFields.push([newBlinkingField, colIndex, BLINKING_TYPE]);
+		}
+	} else {
+		if (prevField) {
+			if (painter) {
+				painter.clearBlinking(); // Release any used memory and restore cell's style
+				ConditionalColoringPlugin._cleanUpPrevFields();
+			}
+			this._removeFieldReferrer(colIndex, BLINKING_TYPE);
+		}
+		colData["blinkingField"] = null; // Used by cache clearing, do not reset before cache clearing
+	}
+};
+
+/** @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;
+
+	let dv = host.getDataSource();
+	if (!dv) return;
+
+	let section = host.getSection('content');
+	if (!section) return;
+
+	let rowData = dv.getRowDataAt(rowIndex);
+
+	let colCount = section.getColumnCount();
+	for (let c = 0; c < colCount; ++c) {
+		let painter = this.getColumnPainter(c);
+		if (!painter) continue;
+
+		let 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;
+	}
+
+	let bOptions = {};
+	let field = columnField || this._getField(colIndex);
+	let blinkField = field;
+	if (typeof blinkingOptions === "string") {
+		blinkField = blinkingOptions;
+	} else if(typeof blinkingOptions === "object") {
+		blinkField = /** @type{string} */(blinkingOptions["field"]) || field;
+		bOptions.border = blinkingOptions["border"];
+		bOptions.duration = blinkingOptions["duration"];
+		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 {Object} obj
+* @param {Array|string} entries
+*/
+let _addMapEntries = function(obj, entries) {
+	if(entries) {
+		if(Array.isArray(entries)) {
+			let len = entries.length;
+			for(let i = 0; i < len; ++i) {
+				obj[entries[i]] = true;
+			}
+		} else {
+			obj[entries] = true;
+		}
+	}
+};
+/** @private
+* @param {number} colIndex
+* @param {ConditionalColoringPlugin~ColumnOptions} columnOptions
+* @return {!Object}
+*/
+ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, columnOptions) {
+	if(!columnOptions) {
+		return {};
+	}
+	let colField = this._getField(colIndex);
+	let inputField = columnOptions["inputField"] || ""; // The value is from user so it can be "THIS_COLUMN" or null
+	let field = ConditionalColoringPlugin._convertKeyword(inputField, colField);
+	if(columnOptions["field"]) {
+		field = /** @type{string} */(columnOptions["field"]);
+	}
+
+	let hasColor = 0;
+	let fieldMap = {};
+
+	// Check if there is another type of coloring
+	let colorText = columnOptions["colorText"] || columnOptions["tickColor"];
+	let conditions = columnOptions["conditions"];
+	let conditionCount = conditions ? conditions.length : 0;
+	let colorOptions = {};
+	if(conditionCount) {
+		colorOptions.condColoring = {};
+		colorOptions.condColoring.conditions = conditions;
+
+		let formatter = (field == colField) ? columnOptions["textFormatter"] : null; // TODO: This text formatter is not used or defined any where
+		let builder = ConditionalColoringPlugin.getFilterBuilder();
+
+		for(let i = conditionCount; --i >= 0;) {
+			let cond = conditions[i];
+			let exp = cond ? cond["expression"] : null;
+			if(Array.isArray(exp)) {
+				let fieldPerCon = cond["field"] || field;
+				cond["expression"] = builder.parse(exp, fieldPerCon, null, fieldPerCon); // WARNING: This alters user object
+				if(cond["expression"]) {
+					cond["origExpression"] = exp;
+					hasColor = 1;
+					fieldMap[fieldPerCon] = true;
+				}
+			} else if(typeof exp === "function") {
+				hasColor = 1;
+				_addMapEntries(fieldMap, cond["fields"] || cond["field"]);
+			} else if(typeof exp === "string") {
+				hasColor = 1;
+				_addMapEntries(fieldMap, _getFieldsFromExpression(exp));
+			} else if(field && cond["condition"]) {
+				hasColor = 1;
+				builder.setFieldDefinition(field, formatter, field); // TODO: Each condition could have different fields
+				let oper = cond["condition"]; // WARNING: This condition is used by Format dialog. It's undocumented
+				let value1 = cond["value1"];
+				let value2 = cond["value2"];
+
+				if(oper !== "BTW") {
+					builder.addCondition(oper, value1);
+				} else {
+					builder.addCondition("GTE", value1);
+					builder.addCondition("LTE", value2);
+				}
+				cond["expression"] = builder.buildFilter();
+				fieldMap[field] = true;
+			}
+		}
+	} else if(colorText) {
+		colorOptions.colorText = {};
+		colorOptions.colorText.useThemeColors = true;
+		if(typeof colorText === "string") {
+			field = colorText;
+		} else if(typeof colorText === "object") {
+			field = /** @type{string} */(colorText["field"]) || field;
+
+			if (colorText["upClass"] || colorText["downClass"] || colorText["levelClass"]) {
+				colorOptions.colorText.useThemeColors = false;
+				colorOptions.colorText.upClass = colorText["upClass"];
+				colorOptions.colorText.downClass = colorText["downClass"];
+				colorOptions.colorText.levelClass = colorText["levelClass"];
+			}
+		}
+
+		if(field) {
+			colorOptions.colorText.field = field;
+			hasColor = 1;
+			fieldMap[field] = true;
+		}
+	}
+
+	if(hasColor) {
+		colorOptions.hasColor = 1;
+		colorOptions.fields = fieldMap;
+		colorOptions["inputField"] = inputField; // Used to retain state on Column Format Dialog
+		return colorOptions;
+	}
+
+	return {};
+};
+/** @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") < 0 ? userInput : fallback;
+	}
+	return fallback;
+};
+
+/** @private
+* @function
+* @param {Array.<Object>} events
+* @return {Object} mapping of inserted row id
+*/
+ConditionalColoringPlugin._mapInsertedRowId = function (events) {
+	let insertedDict = {};
+	let eventCount = events ? events.length : 0;
+	for (let i = 0; i < eventCount; ++i) {
+		let 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) {
+	let evts = e.events; // dataSource event
+	let evtCount = evts ? evts.length : 0;
+	let dv = e.dataSource;
+	let changedRows = [];
+	let evt, i;
+	for (i = 0; i < evtCount; ++i) {
+		evt = evts[i];
+
+		// merge update event
+		if (evt.type === "updated") {
+			let rowIndex = dv.getRowIndex(evt.rid);
+			if (!changedRows[rowIndex]) {
+				changedRows[rowIndex] = {
+					changed: {},
+					rid: evt.rid
+				};
+			}
+			let mergedChanges = changedRows[rowIndex].changed;
+			let changes = evt.changes;
+			for (let key in changes) {
+				mergedChanges[key] = 1;
+			}
+		}
+	}
+	return changedRows;
+};
+/** @private
+* @param {Object} colors Predefined color object map
+* @return {string} prettified CSS string
+*/
+ConditionalColoringPlugin.prototype._prepareStyles = function(colors) {
+	let prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .column.conditionally-colored .cell";
+	let css = [];
+	let ss, styles, value;
+	for (let className in colors) {
+		css.push(prefix + "." + className);
+		ss = [];
+		styles = colors[className];
+
+		value = styles["backgroundColor"];
+		if(value) {
+			ss.push("background-color: " + value + ";");
+		}
+
+		value = styles["color"];
+		if(value) {
+			ss.push("color: " + value + ";");
+		}
+
+		css.push(ss);
+	}
+
+	return prettifyCss(css);
+};
+/** @private
+*/
+ConditionalColoringPlugin.prototype._injectColorTextStyles = function() {
+	if (ConditionalColoringPlugin._colorTextStyles) {
+		let hosts = this._hosts;
+		let len = hosts.length;
+		for (let i = 0; i < len; i++) {
+			let host = hosts[i];
+			host.enableClass(ConditionalColoringPlugin._controlClass);
+			if (!host._colorTextStyles) {
+				injectCss(ConditionalColoringPlugin._colorTextStyles, host.getElement());
+				host._colorTextStyles = true;
+			}
+		}
+	}
+};
+/** @private
+* @param {Object} host
+*/
+ConditionalColoringPlugin.prototype._injectPredefinedColors = function(host) {
+	if(host._conditionalColoringStyleTag) {
+		host._conditionalColoringStyleTag.parentNode.removeChild(host._conditionalColoringStyleTag);
+		host._conditionalColoringStyleTag = null;
+	}
+	host._conditionalColoringStyleTag =	injectCss(this._predefinedColorsStyles, host.getElement());
+};
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+ConditionalColoringPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if (predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
+		let hosts = this._hosts;
+		let len = hosts.length;
+		for (let i = 0; i < len; i++) {
+			this._injectPredefinedColors(hosts[i]);
+		}
+	}
+};
+/** @public
+* @param {boolean|string} blinking Enable blinking on row insertion. Specify true for blinking with theme's neutral movement color.
+*   To blink cell with a certain color, specify a string of hex color value.
+*/
+ConditionalColoringPlugin.prototype.setInsertionBlinking = function(blinking) {
+	if (blinking != null) {
+		this._insertionBlinking = blinking;
+	}
+};
+/** @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 () {
+	if(!this._hasColoring()){
+		return;
+	}
+	for(let 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) {
+	let painter = this.getColumnPainter(colIndex);
+	if (!painter) { return; }
+
+	if (!rowData) rowData = {};
+	let field = this._getField(colIndex);
+	let 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) {
+	let dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
+	if(!dataRows) {
+		return; // dataRows could be empty in case of no column is presented
+	}
+
+	let c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
+	let dataRow, insertedId, colData, cachedValues, updatePrev;
+	let section = e["section"];
+	let colCount = section.getColumnCount();
+	let fromR = /** @type{number} */(e["fromRowIndex"]);
+	let toR = /** @type{number} */(e["toRowIndex"]);
+	let actualUpdate = e["actualUpdate"];
+	let dv = e["dataSource"];
+	let host = e["sender"];
+
+	let blinkingEnabled = actualUpdate && this._blinkingEnabled;
+	if (blinkingEnabled) {
+		insertedId = ConditionalColoringPlugin._mapInsertedRowId(e.events);
+		if (this._compositeGrid) {
+			changedRows = ConditionalColoringPlugin._mergeUpdates(e);
+		}
+	}
+
+	let prevDataRow, prevDataRows = host._prevDataRows;
+	let api = this.getGridApi();
+	for (r = fromR; r < toR; ++r) {
+		rid = dv.getRowId(r);
+		if (!rid) { continue; }
+
+		dataRow = this._rowGetter(dataRows[r]);
+		if (!dataRow) continue; // prevent from null value access when using with RowGroupingExtension
+
+		changedCols = null;
+		let allowBlinking = false;
+		let insertedRow = null;
+		if (blinkingEnabled) {
+			if (this._realTimeGrid) {
+				rowDef = api.getRowDefinition(rid);
+				if(rowDef){
+					changedCols = rowDef.getUpdates();
+				}
+			} else { // composite grid
+				changedRow = changedRows[r];
+				if (changedRow) {
+					rid = changedRow.rid;
+					changedCols = changedRow.changed;
+				}
+			}
+			insertedRow = rid ? insertedId[rid] : null;
+			allowBlinking = !insertedRow || this._insertionBlinking;
+			if (!allowBlinking) {
+				changedCols = null;
+			}
+		}
+
+		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);
+				let bgBlinking = false;
+				if (colData["blinking"] && actualUpdate) {
+					let blinking = false;
+					let field = colData["blinkingField"] || this._getField(c);
+					let newValue = dataRow[field];
+					if(allowBlinking){
+						if (prevDataRow) {
+							let prevValue = prevDataRow[field];
+							if (prevValue != null) {
+								if (changedCols && changedCols[field]) {
+									let blinkSignal = painter.calcBlinkSignal(newValue, prevValue);
+									if(blinkSignal !== 0 || (blinkSignal === 0 && !colData.levelBlinkingDisabled)) {
+										blinking = true;
+										bgBlinking = painter.blink(cell, blinkSignal, dataRow);
+									}
+								}
+							}
+						} else {
+							if(insertedRow){
+								blinking = true;
+								bgBlinking = painter.flash(cell, this._insertionBlinking, dataRow);
+							}
+						}
+					}
+
+					if (!blinking) {
+						painter.verifyBlinking(cell, dataRow);
+					}
+					cachedValues[field] = newValue;
+					updatePrev = true;
+				}
+
+				// conditional coloring
+				if (colData["coloringFields"] && !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) {
+	let colData = /** @type{Object} */(e.columnData);
+	if (!colData) {
+		return;
+	}
+
+	this._clearPainter(colData);
+
+	// Removed column
+	let colId = e["colId"];
+	if (colId) {
+		if (colData["coloringFields"]) {
+			this._removeFieldReferrer(colId, COLORING_TYPE);
+		}
+		if (colData["blinkingField"]) {
+			this._removeFieldReferrer(colId, BLINKING_TYPE);
+		}
+	}
+
+	// Another columns
+	let field = colData["field"];
+	if (field) {
+		let colDef = colData["COL_DEF"];
+		let isStaticField = colDef ? !colDef.isRealTimeField() : true;
+		if (isStaticField) {
+			let colCount = this.getColumnCount();
+			for (let i = 0; i < colCount; i++) {
+				colData = this._getColumnData(i);
+				if (colData["coloringFields"] && colData["coloringFields"][field]) {
+					this.setConditionalColoring(i, null);
+				}
+
+				if (colData["blinkingField"] === field) {
+					this.setColumnBlinking(i, null);
+				}
+			}
+		}
+	}
+};
+
+/** @private */
+ConditionalColoringPlugin.prototype._onThemeLoaded = function () {
+	this._requestRowRefresh();
+};
+
+/** @private
+* @param {Object} colData
+* @return {boolean}
+*/
+ConditionalColoringPlugin.prototype._clearPainter = function (colData) {
+	if (colData) {
+		ConditionalColoringPlugin._cleanUpPrevFields();
+		let 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
+ * @param {CellPainter} painter
+ * @param {Array<ConditionalColoringPlugin~Condition>} conditions
+ */
+ConditionalColoringPlugin.prototype._setEffectiveStyles = function(painter, conditions) {
+	let effectiveStyles = null;
+	let hasColor = false;
+	let hasBackgroundColor = false;
+	let condCount = conditions ? conditions.length : 0;
+	for(let i = 0; i < condCount; i++){
+		let cond = conditions[i];
+		if(cond["color"]){
+			hasColor = true;
+		}
+		if(cond["backgroundColor"]){
+			hasBackgroundColor = true;
+		}
+	}
+	if(hasColor && hasBackgroundColor){
+		effectiveStyles = CLEARING_ALL;
+	} else if(hasColor){
+		effectiveStyles = CLEARING_TEXT;
+	} else if(hasBackgroundColor){
+		effectiveStyles = CLEARING_BG;
+	}
+
+	painter.setEffectiveStyles(effectiveStyles);
+};
+
+/** @private
+ */
+ConditionalColoringPlugin._cleanUpPrevFields = function() {
+	// Assume that all hosts are using the same columns' options
+	let colCount = this.getColumnCount();
+	let colData, blinkingFields = {};
+	let isBlinking = false;
+	for (let c = 0; c < colCount; c++) {
+		colData = this._getColumnData(c);
+		if (colData["blinking"]) {
+			blinkingFields[colData["blinkingField"]] = isBlinking = true;
+		}
+	}
+
+	let hosts = this._hosts;
+	let len = hosts.length;
+	let host, i;
+	if (isBlinking) {
+		let 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() {
+	let hosts = this._hosts;
+	let len = hosts.length;
+	let 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;
+	}
+};
+/** @private
+ * @return {Boolean}
+*/
+ConditionalColoringPlugin.prototype._hasColoring = function() {
+	let hosts = this._hosts;
+	let grid = hosts[0];
+
+	let colCount = this.getColumnCount();
+	for(let colIndex = 0; colIndex < colCount; colIndex++){
+		if(grid.hasColumnClass(colIndex, "conditionally-colored")){
+			return true;
+		}
+	}
+	return false;
+};
+
+/** @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 the overwriting css variables for MovementColor without changing movement-color-profile attribute.
+* @function
+* @return {Promise<Object>}
+*/
+ConditionalColoringPlugin.prototype.reloadThemeColors = function () {
+	return CellPainter.reloadThemeColors()
+		.then(this._onThemeLoaded)
+		.catch(this._onThemeLoaded);
+};
+
+
+
+export default ConditionalColoringPlugin;
+export { ConditionalColoringPlugin, ConditionalColoringPlugin as ConditionalColoring, ConditionalColoringPlugin as ConditionalColoringExtension };