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

package/lib/column-format-dialog/lib/preview-table.js

@@ -0,0 +1,995 @@
+import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+import { ElementWrapper } from "../../tr-grid-util/es6/ElementWrapper.js";
+import { FieldFormatter, DATE_TIME } from "../../tr-grid-util/es6/FieldFormatter.js";
+import NumberFormatter from "../../tr-grid-util/es6/NumberFormatter.js";
+import { PercentBar } from "../../tr-grid-util/es6/PercentBar.js";
+import { Table } from "../../tr-grid-util/es6/Table.js";
+
+/** @const {number} */
+const MAX_SAMPLE_DATA = 6645100000.00;
+/** @const {number} */
+const MIN_SAMPLE_DATA = -8421000000.00;
+/** @const {Array.Array.Array.number} */
+const SAMPLE_DATASET = [
+	[
+		[120470000.00, 2516900000.00],
+		[-4500900000.00, -3830100000.00]
+	],
+	[
+		[4901100000.00, 5907300000.00],
+		[-2702200000.00, -1505300000.00]
+	],
+	[
+		[MAX_SAMPLE_DATA, 120470000.00],
+		[-3830100000.00, -1505300000.00]
+	],
+	[
+		[2516900000.00, 4901100000.00],
+		[MIN_SAMPLE_DATA, -4500900000.00]
+	],
+	[
+		[5907300000.00, MAX_SAMPLE_DATA],
+		[-2702200000.00, MIN_SAMPLE_DATA]
+	]
+];
+/** @const {number} */
+const ABSOLUTE_MAX_SAMPLE_DATA = Math.abs(MAX_SAMPLE_DATA) > Math.abs(MIN_SAMPLE_DATA) ? Math.abs(MAX_SAMPLE_DATA) : Math.abs(MIN_SAMPLE_DATA);
+
+/** @typedef {Object} PreviewTable~Bar
+ * @description Configuration display style PercentBar
+ * @property {boolean=} isShowValue
+ * @property {boolean=} isUsedMovement
+ */
+
+/** @typedef {Object} PreviewTable~ConfigDateTime
+ * @description Configuration Date time format
+ * @property {string=} formatDate
+ * @property {boolean} isUsedGMT
+ */
+
+/** @typedef {Object} PreviewTable~ConfigDisplayColor
+ * @description Configuration display style Heatmap
+ * @property {string=} background string hex of background color
+ * @property {string=} textColor string hex of text color
+ */
+
+/** @typedef {Object} PreviewTable~Conditional
+ * @description Configuration display style PercentBar
+ * @property {boolean=} isShowValue
+ * @property {boolean=} isUsedMovement
+ * @property {Function} conditionSequence
+ * @property {Colors} colors
+ *
+ */
+
+
+/** @typedef {Object} PreviewTable~ConfigDisplayStyle
+ * @description Configuration display style
+ * @property {string} mode
+ * @property {string=} alignment
+ * @property {Bar=} bar
+ * @property {Heatmap=} heatmap
+ * @property {Conditional} conditionalColor
+ */
+
+
+/** @typedef {Object} PreviewTable~ConfigUpdateStyleValue
+ * @description Configuration display style when data was updated
+ * @property {boolean=} isTextChangedStyle
+ * @property {boolean=} isCellChangedStyle
+ * @property {string=} colors hex color
+ * @property {boolean=} isBackgroundBlink
+ */
+
+/** @typedef {Object} PreviewTable~ConfigValueFormat
+ * @description Configuration value format
+ * @property {string} mode
+ * @property {number=} decimalPlaces
+ * @property {boolean=} isUsedSeparator
+ * @property {boolean=} isShowPlusSignh
+ * @property {string=} scaled
+ * @property {boolean=} isPercentMultiply100
+ */
+
+/** @typedef {Object} PreviewTable~DisplayStyleTapGeneralMode
+* @description Configuration value general mode
+* @property {string=} aligment
+*/
+
+/** @typedef {Object} PreviewTable~DisplayStyleTapBarMode
+* @description Configuration value bar mode
+* @property {boolean=} showValues
+* @property {boolean=} useMovementColor
+* @property {string=} alignment
+*/
+
+/** @typedef {Object} PreviewTable~DisplayStyleTapHeatMapMode
+* @description Configuration value bar mode
+* @property {string=} mode
+* @property {number=} midPoint
+* @property {string=} alignment
+*/
+
+/** @typedef {Object} PreviewTable~DisplayStyleTap
+* @description Configuration value display tab
+* @property {string=} mode
+* @property {DisplayStyleTapGeneralMode=} general
+* @property {DisplayStyleTapBarMode=} bar
+* @property {DisplayStyleTapHeatMapMode=} heatmap
+*/
+
+/** @typedef {Object} PreviewTable~FormatTab
+* @description Configuration value format tab
+* @property {string=} formatType
+* @property {string=} decimalPlaces
+* @property {boolean=} separator
+* @property {boolean=} plusSign
+* @property {string=} scalingUnit
+* @property {boolean=} multiplyBy100
+*/
+
+/** @typedef {Object} PreviewTable~Heatmap
+* @description Configuration display style Heatmap
+* @property {string=} midPoint
+* @property {string=} applied
+*/
+
+/** @typedef {Object} PreviewTable~Colors
+* @description Colors functions
+* @property {string} color color of text
+* @property {string} background color of background
+*/
+
+/** @type {PreviewTable}
+* @constructor
+* @param {Element} elem
+* @extends {ElementWrapper}
+*/
+var PreviewTable = function (elem) {
+	this._onThemeLoaded = this._onThemeLoaded.bind(this);
+	this._onIntervalUpdate = this._onIntervalUpdate.bind(this);
+	this._formatSampleValue = this._formatSampleValue.bind(this);
+
+	this._topNode = elem || document.createElement("div");
+	this._table = new Table(elem, {
+		colCount: 1,
+		rowCount: 2
+	});
+	this._numberFormatter = new NumberFormatter();
+	this._dateFormatter = new FieldFormatter({
+		formatType: DATE_TIME
+	});
+	this._sampleSetIndex = (++this._sampleSetIndex) % SAMPLE_DATASET.length;
+	this._configValueFormat = {
+		decimalPlaces: 2,
+		mode: "general"
+	};
+	this._configDateTime = {};
+	this._configDisplayStyle = {};
+	this._configDisplayColor = {};
+	this._configUpdateStyleValue = {};
+	this._configDisplayStyle.mode = "general";
+	this._configDisplayStyle.alignment = "left";
+
+	this._numberFormatter = new NumberFormatter();
+
+	ElfUtil.getThemeColors().then(this._onThemeLoaded);
+	setInterval(this._onIntervalUpdate, 1500);
+
+	this._formatSampleValue();
+};
+Ext.inherits(PreviewTable, ElementWrapper);
+
+/** @type {ConfigDateTime}
+* @private
+*/
+PreviewTable.prototype._configDateTime = null;
+
+/** @type {ConfigDisplayColor}
+* @private
+*/
+PreviewTable.prototype._configDisplayColor = null;
+
+/** @type {ConfigDisplayStyle}
+ * @private
+ */
+PreviewTable.prototype._configDisplayStyle = null;
+
+/** @type {ConfigUpdateStyleValue}
+* @private
+*/
+PreviewTable.prototype._configUpdateStyleValue = null;
+
+/** @type {ConfigValueFormat}
+ * @private
+ */
+PreviewTable.prototype._configValueFormat = null;
+
+/** @type {DateFormatter}
+* @private
+*/
+PreviewTable.prototype._dateFormatter = null;
+
+/** @type {NumberFormatter}
+* @private
+*/
+PreviewTable.prototype._numberFormatter = null;
+
+/** @type {number}
+ * @private
+ */
+PreviewTable.prototype._sampleSetIndex = 0;
+
+/** @type {Element}
+* @private
+*/
+PreviewTable.prototype._table = null;
+
+/** @public
+ * @returns {Object} For load structure format
+ */
+PreviewTable.prototype.getStructureFormat = function () {
+	var output = {
+		valueFormatTab: this._getValueFormatTab(),
+		displayStyleTab: this._getValueDisplayStyle(),
+		colorTextTab: this._getValueUpdateChanged()
+	};
+
+	// If not choose update , value should not have this property
+	if(!output.colorTextTab) {
+		delete output.colorTextTab;
+	}
+
+	return output;
+};
+
+/** @public
+ * @description load display format data from external to previewTable
+ * @param {Object} config
+ */
+PreviewTable.prototype.loadDisplayData = function (config) {
+	this._setLoadValueFormat(config.valueFormatTab);
+	this._setLoadDisplayStyle(config.displayStyleTab);
+	this._setLoadUpdateStyle(config.colorTextTab);
+
+};
+
+/** @public
+ * @param {string} formatDate
+ */
+PreviewTable.prototype.setDateFormatString = function (formatDate) {
+	this._configDateTime.formatDate = formatDate ? formatDate : "D/M/YY";
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param {boolean=} isUsedGMT
+ */
+PreviewTable.prototype.setDateFormatUseGMT = function (isUsedGMT) {
+	this._configDateTime.isUsedGMT = isUsedGMT ? true : false; // Check if receive undefined assign to false
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param {string} language
+ */
+PreviewTable.prototype.setDateFormatLanguage = function (language) {
+	this._configDateTime.language = language ? "en" : "th";
+	this._formatSampleValue();
+};
+
+
+/** @public
+ * @param  {string} alignment
+ */
+PreviewTable.prototype.setDisplayStyleAlignment = function (alignment) {
+	this._configDisplayStyle.alignment = alignment;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param {string} mode
+ */
+PreviewTable.prototype.setDisplayStyleMode = function (mode) {
+	if (!this._configDisplayStyle) this._configDisplayStyle = {};
+	this._configDisplayStyle.mode = mode;
+	if (mode !== "heatmap") {
+		this._table.setColumnCount(1);
+	} else {
+		this.setDisplayStyleHeatmap();
+	}
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {string} applied
+ * @param  {string} midPoint
+ */
+PreviewTable.prototype.setDisplayStyleHeatmap = function (applied, midPoint) {
+	var midPointNumber = Number(midPoint);
+
+	if(isNaN(midPointNumber) || typeof midPointNumber !== "number") {
+		midPointNumber = 0;
+	}
+
+	this._configDisplayStyle.heatmap = {};
+	this._table.setColumnCount(2);
+	this._configDisplayStyle.heatmap.applied = applied === "text" ? "text" : "cell"; // When data invalid set cell by defualt
+	this._configDisplayStyle.heatmap.midPoint = midPointNumber ? midPointNumber : 0;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean} isShowValue
+ */
+PreviewTable.prototype.setDisplayStylePercentBarShowValue = function (isShowValue) {
+	if (!this._configDisplayStyle.bar) {
+		this._configDisplayStyle.bar = {};
+	}
+	this._configDisplayStyle.bar.isShowValue = isShowValue;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean} isUsedMovement
+ */
+PreviewTable.prototype.setDisplayStylePercentBarIsUsedMovement = function (isUsedMovement) {
+	if (!this._configDisplayStyle.bar) {
+		this._configDisplayStyle.bar = {};
+	}
+	this._configDisplayStyle.bar.isUsedMovement = isUsedMovement;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param {PreviewTable~Conditional} condition - condition function
+ */
+PreviewTable.prototype.setDisplayStyleConditional = function (condition) {
+	var isEmpty = true;
+
+	// Loop for check empty object
+	for (var key in condition) {
+		if (Object.hasOwnProperty.call(condition, key)) {
+			isEmpty = false;
+		}
+	}
+	if(!isEmpty) {
+		this._configDisplayStyle.conditionFunction = condition;
+		this._formatSampleValue();
+	} else {
+		// Set conditional false when object empty
+		this._configDisplayStyle.conditionFunction = false;
+		this._formatSampleValue();
+	}
+
+};
+
+
+/** @public
+ * @param  {string} type
+ */
+PreviewTable.prototype.setFormatType = function (type) {
+	this._configValueFormat.mode = type;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean=} isCellChangedStyle
+ */
+PreviewTable.prototype.setUpdateStyleValueCell = function (isCellChangedStyle) {
+	this._configUpdateStyleValue.isCellChangedStyle = isCellChangedStyle;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean=} isTextChangedStyle
+ */
+PreviewTable.prototype.setUpdateStyleValueText = function (isTextChangedStyle) {
+	this._configUpdateStyleValue.isTextChangedStyle = isTextChangedStyle;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean=} isBackgroundBlink
+ */
+PreviewTable.prototype.setUpdateStyleValueCellBlinking = function (isBackgroundBlink) {
+	this._configUpdateStyleValue.isBackgroundBlink = isBackgroundBlink;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {number} decimalPlaces
+ */
+PreviewTable.prototype.setValueFormatDecimalPlaces = function (decimalPlaces) {
+	var decimalNumber = Number(decimalPlaces);
+
+	// Check invalid value assign to defualt value
+	if(typeof decimalNumber !== "number" || isNaN(decimalNumber) || decimalNumber < 0 || decimalNumber > 9) {
+		decimalNumber = 2;
+	}
+
+	this._configValueFormat.decimalPlaces = decimalNumber;
+	this._formatSampleValue();
+};
+
+/** @public
+ *
+ */
+PreviewTable.prototype.setValueFormatGeneral = function () {
+	this._configValueFormat.decimalPlaces = 2;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean} isPercentMultiply100
+ */
+PreviewTable.prototype.setValueFormatShowPercentSignWithMultiply100 = function (isPercentMultiply100) {
+	this._configValueFormat.isPercentMultiply100 = isPercentMultiply100;
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean} scaled
+ */
+PreviewTable.prototype.setValueFormatScaled = function (scaled) {
+	this._configValueFormat.scaled = scaled === "b" ? "b" : "m"; // Set defualt value when data invalid
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean} isShowPlusSign
+ */
+PreviewTable.prototype.setValueFormatShowPlusSign = function (isShowPlusSign) {
+	this._configValueFormat.isShowPlusSign = isShowPlusSign ? true : false; // Question sign for check null or undefined set to false
+	this._formatSampleValue();
+};
+
+/** @public
+ * @param  {boolean} isUsedSeparator
+ */
+PreviewTable.prototype.setValueFormatShowSeparatorSign = function (isUsedSeparator) {
+	this._configValueFormat.isUsedSeparator = isUsedSeparator ? true : false; // Question sign for check null or undefined set to false
+	this._formatSampleValue();
+};
+
+/** @private
+ * @description load value format
+ * @param {Object} valueFormatTab
+ */
+PreviewTable.prototype._setLoadValueFormat = function (valueFormatTab) {
+	this._configValueFormat = {};
+	this._configValueFormat.mode = valueFormatTab.formatType;
+
+	this._configValueFormat.isUsedSeparator = valueFormatTab.separator ? valueFormatTab.separator : false;
+	this._configValueFormat.isShowPlusSign = valueFormatTab.plusSign ? valueFormatTab.plusSign : false;
+	this._configValueFormat.decimalPlaces = valueFormatTab.decimalPlaces ? valueFormatTab.decimalPlaces : 2;
+	switch (this._configValueFormat.mode) {
+	case "scaled":
+		this._configValueFormat.scaled = valueFormatTab.scalingUnit;
+		break;
+	case "percent":
+		this._configValueFormat.isPercentMultiply100 = valueFormatTab.multiplyBy100;
+		break;
+	case DATE_TIME:
+		var displayStyleDateFormat = valueFormatTab.dateTimeFormat ? valueFormatTab.dateTimeFormat : "M/D/YY";
+		var isUsedUTCTime = valueFormatTab.useUTCTime ? true : false;
+		this.setDateFormatString(displayStyleDateFormat);
+		this.setDateFormatUseGMT(isUsedUTCTime);
+		break;
+	default:
+		break;
+	}
+
+};
+
+/** @private
+ * @description load value format
+ * @param {Object} displayStyleTab
+ */
+PreviewTable.prototype._setLoadDisplayStyle = function (displayStyleTab) {
+	this._configDisplayStyle = {};
+	this.setDisplayStyleMode(displayStyleTab.mode);
+	var alignment = "left";
+	switch (displayStyleTab.mode) {
+	case "general":
+		alignment = displayStyleTab.general.alignment;
+		break;
+	case "bar":
+		this.setDisplayStylePercentBarIsUsedMovement(displayStyleTab.bar.useMovementColor);
+		this.setDisplayStylePercentBarShowValue(displayStyleTab.bar.showValues);
+		alignment = displayStyleTab.bar.alignment;
+		break;
+	case "heatmap":
+		this.setDisplayStyleHeatmap(displayStyleTab.heatmap.mode, + displayStyleTab.heatmap.midPoint);
+		alignment = displayStyleTab.heatmap.alignment;
+		break;
+	case "conditionalColor":
+		this.setDisplayStyleConditional(displayStyleTab.conditionalColor.conditions);
+		alignment = displayStyleTab.conditionalColor.alignment;
+		break;
+	default:
+		break;
+	}
+	this._configDisplayStyle.alignment = alignment;
+	this.setDisplayStyleAlignment(alignment);
+
+};
+
+/** @private
+ * @description load value update style
+ * @param {Object} colorTextTab
+ */
+PreviewTable.prototype._setLoadUpdateStyle = function (colorTextTab) {
+	this._configUpdateStyleValue = {};
+	if (!colorTextTab) return;
+	if (colorTextTab.blinking) {
+		this.setUpdateStyleValueCell(true);
+		this.setUpdateStyleValueCellBlinking(colorTextTab.highlight.mode === "cell" ? true : false);
+	} else {
+		this.setUpdateStyleValueCell(false);
+	}
+
+
+	if (colorTextTab.colorText) {
+		this.setUpdateStyleValueText(true);
+	} else {
+		this.setUpdateStyleValueText(false);
+	}
+};
+
+/** @private
+ * @description for assign optional data to false when user not send
+ * @return {NumberFormatter} config number of formatter
+ */
+PreviewTable.prototype._checkNumberFormatter = function () {
+	var numberFormatter = {};
+
+	if (!this._configValueFormat) {
+		this._configValueFormat = {};
+	}
+
+	if (!this._configValueFormat.isUsedSeparator) {
+		this._configValueFormat.isUsedSeparator = false;
+	}
+
+	if (!this._configValueFormat.isShowPlusSign) {
+		this._configValueFormat.isShowPlusSign = false;
+	}
+
+	numberFormatter = {
+		separator: this._configValueFormat.isUsedSeparator,
+		decimalPlaces: + this._configValueFormat.decimalPlaces,
+		plusSign: this._configValueFormat.isShowPlusSign
+	};
+
+	return numberFormatter;
+};
+
+/**  @private
+ *	@param {boolean=} blinking blinking when value change increase or decrease
+ */
+PreviewTable.prototype._formatSampleValue = function (blinking) {
+	var styleObjs = this._getSampleStyleObjects(blinking);
+	var rows = this._table.getAllRows();
+	var barRendering = this._configDisplayStyle && this._configDisplayStyle.mode === "bar";
+	var curIndex = this._sampleSetIndex;
+	var curDataset = SAMPLE_DATASET[curIndex];
+
+	for (var r = 0; r < rows.length; r++) {
+		var row = rows[r];
+		for (var c = row.cells.length; --c >= 0;) {
+			var cell = row.cells[c];
+			cell.innerHTML = ""; // TODO: Not good for performance
+			var value = curDataset[r][c];
+			var formattedValue = this._updateValueFormatExample(value);
+			if (!this._configDisplayStyle.bar) {
+				this._configDisplayStyle.bar = {};
+			}
+			if (barRendering) {
+				this._renderBar(
+					cell,
+					value, formattedValue,
+					this._configDisplayStyle.bar.isShowValue,
+					this._configDisplayStyle.bar.isUsedMovement
+				);
+			} else {
+				cell.textContent = formattedValue;
+			}
+
+			var obj = styleObjs[r][c];
+			for (var prop in obj) {
+				cell.style[prop] = obj[prop];
+			}
+		}
+	}
+};
+
+/** @private
+ * @return {PreviewTable~DisplayStyleTap} Format data from dialog module
+ */
+PreviewTable.prototype._getValueDisplayStyle = function () {
+	var dataReturn;
+	if (this._configDisplayStyle.mode === "general") {
+		dataReturn = {
+			mode: "general",
+			general: {
+				alignment: this._configDisplayStyle.alignment
+			}
+		};
+	} else if (this._configDisplayStyle.mode === "bar") {
+		if (!this._configDisplayStyle.bar) {
+			this._configDisplayStyle.bar = {};
+		}
+		dataReturn = {
+			"mode": "bar",
+			"bar": {
+				"showValues": this._configDisplayStyle.bar.isShowValue ? true : false,
+				"useMovementColor": this._configDisplayStyle.bar.isUsedMovement ? true : false,
+				"alignment": this._configDisplayStyle.alignment
+			}
+		};
+	} else if (this._configDisplayStyle.mode === "heatmap") {
+		if (!this._configDisplayStyle.heatmap) {
+			this._configDisplayStyle.heatmap = {};
+		}
+		dataReturn = {
+			"mode": "heatmap",
+			"heatmap": {
+				"mode": this._configDisplayStyle.heatmap.applied ? this._configDisplayStyle.heatmap.applied : "cell",
+				"midPoint": this._configDisplayStyle.heatmap.midPoint ? this._configDisplayStyle.heatmap.midPoint : "0",
+				"alignment": this._configDisplayStyle.alignment
+			}
+		};
+	} else if (this._configDisplayStyle.mode === "conditionalColor") {
+		// Check when conditionFunction empty
+		if(this._configDisplayStyle.conditionFunction) {
+
+			var conditions = this._configDisplayStyle.conditionFunction.map(e => {
+				return {
+					backgroundColor: e.colors.backgroundColor,
+					color: e.colors.color,
+					expression: e.expressionObject.text,
+					expressionObject: e.expressionObject,
+					fields: e.fields
+				};
+			});
+			dataReturn = {
+				"mode": "conditionalColor",
+				conditionalColor: {
+					alignment: this._configDisplayStyle.alignment,
+					conditions: conditions
+				}
+			};
+		} else {
+			dataReturn = {
+				"mode": "conditionalColor",
+				conditionalColor: {}
+			};
+		}
+
+	}
+
+	return dataReturn;
+};
+
+/** @private
+ * @return {PreviewTable~ConfigUpdateStyleValue} Format data from dialog module
+ */
+PreviewTable.prototype._getValueUpdateChanged = function () {
+	var dataReturn = {
+		isTextChangedStyle: this._configUpdateStyleValue.isTextChangedStyle,
+		isCellChangedStyle: this._configUpdateStyleValue.isCellChangedStyle,
+		isBackgroundBlink: this._configUpdateStyleValue.isBackgroundBlink
+	};
+
+	// Check empty value for return empty value
+	if(!dataReturn.isTextChangedStyle && !dataReturn.isCellChangedStyle) {
+		dataReturn = null;
+	}
+
+	return dataReturn;
+};
+
+/** @private
+ * @return {PreviewTable~FormatTab} Format data from dialog module
+ */
+PreviewTable.prototype._getValueFormatTab = function () {
+	var dataReturn;
+	switch (this._configValueFormat.mode) {
+	case "general":
+		dataReturn = {
+			formatType: "general"
+		};
+		break;
+
+	case "number":
+
+		dataReturn = {
+			formatType: "number",
+			separator: this._configValueFormat.isUsedSeparator ? this._configValueFormat.isUsedSeparator : false,
+			plusSign: this._configValueFormat.isShowPlusSign ? this._configValueFormat.isShowPlusSign : false,
+			decimalPlaces: this._configValueFormat.decimalPlaces
+		};
+		break;
+
+	case "scaled":
+		dataReturn = {
+			formatType: "scaled",
+			separator: this._configValueFormat.isUsedSeparator ? this._configValueFormat.isUsedSeparator : false,
+			plusSign: this._configValueFormat.isShowPlusSign ? this._configValueFormat.isShowPlusSign : false,
+			scalingUnit: this._configValueFormat.scaled ? this._configValueFormat.scaled : "m",
+			decimalPlaces: this._configValueFormat.decimalPlaces ? this._configValueFormat.decimalPlaces : 2
+		};
+
+		break;
+
+	case "percent":
+		dataReturn = {
+			formatType: "percent",
+			separator: this._configValueFormat.isUsedSeparator ? this._configValueFormat.isUsedSeparator : false,
+			plusSign: this._configValueFormat.isShowPlusSign ? this._configValueFormat.isShowPlusSign : false,
+			decimalPlaces: this._configValueFormat.decimalPlaces ? this._configValueFormat.decimalPlaces : 2,
+			multiplyBy100: this._configValueFormat.isPercentMultiply100 ? true : false
+		};
+
+		break;
+
+	case DATE_TIME:
+		dataReturn = {
+			"formatType": DATE_TIME,
+			"dateTimeFormat": this._configDateTime.formatDate,
+			"useUTCTime": this._configDateTime.isUsedGMT
+		};
+		break;
+
+	default:
+		break;
+	}
+
+	return dataReturn;
+};
+
+/** @private
+ *	@param {boolean=} blinking blinking when value change increase or decrease
+ * @return {Array} - style objects for sample table
+ */
+PreviewTable.prototype._getSampleStyleObjects = function (blinking) {
+	var cc = this._table.getColumnCount();
+	var rc = this._table.getRowCount();
+	var curIndex = this._sampleSetIndex;
+	var curDataset = SAMPLE_DATASET[curIndex];
+	var displayStyleTab = this._configDisplayStyle ? this._configDisplayStyle : null;
+	if (!displayStyleTab) {
+		displayStyleTab = {};
+	}
+
+	var alignment = displayStyleTab.alignment;
+	alignment = (alignment && alignment !== "default") ? alignment : "";
+	var r, c, obj;
+	var objs = new Array(rc);
+
+	// clear alignment and style
+	for (r = 0; r < rc; ++r) {
+		var ary = objs[r] = new Array(cc);
+		for (c = 0; c < cc; ++c) {
+			obj = ary[c] = {};
+			obj.textAlign = alignment;
+			obj.color = "";
+			obj.backgroundColor = "";
+			obj.borderColor = "";
+		}
+	}
+
+	var val;
+	// heatmap section
+	if (displayStyleTab.mode === "heatmap") {
+		if (!displayStyleTab.heatmap) {
+			displayStyleTab.heatmap = {};
+		}
+		var midPoint = (+displayStyleTab.heatmap.midPoint) || 0;
+		var min = 0, max = 0;
+		var themeColorBase = getComputedStyle(document.documentElement).getPropertyValue("--color-scheme-ticktext");
+		var themeColorUp = getComputedStyle(document.documentElement).getPropertyValue("--color-scheme-positive");
+		var themeColorDown = getComputedStyle(document.documentElement).getPropertyValue("--color-scheme-negative");
+
+		for (r = 0; r < rc; ++r) {
+			for (c = 0; c < cc; ++c) {
+				var data = curDataset[r][c];
+				if (min > data) min = data;
+				if (max < data) max = data;
+			}
+		}
+
+		for (r = 0; r < rc; ++r) {
+			for (c = 0; c < cc; ++c) {
+				obj = objs[r][c];
+				val = curDataset[r][c] - midPoint;
+				var blendedColor = null;
+				if (val > 0) {
+					blendedColor = CellPainter.blendColor(themeColorBase, themeColorUp,
+						val / (max - midPoint)
+					);
+				} else if (val < 0) {
+					blendedColor = CellPainter.blendColor(themeColorBase, themeColorDown,
+						val / (min - midPoint)
+					);
+				} else {
+					blendedColor = CellPainter.blendColor(themeColorBase, themeColorDown, 0);
+				}
+				if (displayStyleTab.heatmap.applied === "text") {
+					obj.color = CellPainter.num2Hex(blendedColor);
+				} else {
+					obj.backgroundColor = CellPainter.num2Hex(blendedColor);
+					obj.color = CellPainter.blackAndWhite(blendedColor);
+				}
+			}
+		}
+	}
+
+	// conditional color section
+	if (this._configDisplayStyle.mode === "conditionalColor") {
+		if (this._configDisplayStyle.conditionFunction) {
+			for (r = 0; r < rc; ++r) {
+				for (c = 0; c < cc; ++c) {
+					for (var i = 0; i < this._configDisplayStyle.conditionFunction.length; i++) {
+						obj = objs[r][c];
+						val = curDataset[r][c];
+						var ret = null;
+						try {
+							ret = this._configDisplayStyle.conditionFunction[i].conditionSequence(val); // check value with function pass from another module
+						} catch (error) { } // do nothing
+						if (ret) {
+							obj.color = this._configDisplayStyle.conditionFunction[i].colors.color;
+							obj.backgroundColor = this._configDisplayStyle.conditionFunction[i].colors.backgroundColor;
+							break;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	// Check blink text when value change
+	if (this._configUpdateStyleValue.isTextChangedStyle) {
+		for (r = 0; r < rc; ++r) {
+			for (c = 0; c < cc; ++c) {
+				obj = objs[r][c];
+				val = curDataset[r][c];
+				if (val > 0) {
+					obj.color = "var(--color-scheme-positive)";
+				}
+				else {
+					obj.color = "var(--color-scheme-negative)";
+				}
+			}
+		}
+	}
+
+	if (blinking && this._configUpdateStyleValue.isCellChangedStyle) { // Check blink cell when value change
+		var prevIndex = curIndex ? curIndex - 1 : SAMPLE_DATASET.length - 1;
+		var prevDataset = SAMPLE_DATASET[prevIndex];
+
+		for (r = 0; r < rc; ++r) {
+			for (c = 0; c < cc; ++c) {
+				obj = objs[r][c];
+				var curVal = curDataset[r][c];
+				var prevVal = prevDataset[r][c];
+				var blinkColor = "";
+				if (curVal >= prevVal) {
+					blinkColor = this._configUpdateStyleValue.colors ? this._configUpdateStyleValue.colors.tickUp : "var(--color-scheme-tickup)";
+				} else {
+					blinkColor = this._configUpdateStyleValue.colors ? this._configUpdateStyleValue.colors.tickDown : "var(--color-scheme-tickdown)";
+				}
+
+				// Blink border or background when value change
+				if (this._configUpdateStyleValue.isBackgroundBlink) {
+					obj.backgroundColor = blinkColor;
+					obj.color = this._configUpdateStyleValue.colors ? CellPainter.getOppositeColor(blinkColor) : "";
+				} else {
+					obj.borderColor = blinkColor;
+				}
+			}
+		}
+	}
+
+
+	return objs;
+};
+
+/** @private
+ * @description interval for random value in preview table
+ */
+PreviewTable.prototype._onIntervalUpdate = function () {
+	this._sampleSetIndex = (++this._sampleSetIndex) % SAMPLE_DATASET.length;
+	this._formatSampleValue(true);
+	setTimeout(this._formatSampleValue, 500);
+};
+
+/** @private
+ *
+ * @param {Object} cell - cell element
+ * @param {number} value - base number value
+ * @param {string} formattedValue - formatted string value
+ * @param {boolean} showValues - true if numeric values need to be displayed
+ * @param {boolean=} useMovementColor - true if movement colors applied
+ */
+PreviewTable.prototype._renderBar = function (cell, value, formattedValue, showValues, useMovementColor) {
+	if(useMovementColor == null) {
+		useMovementColor = false;
+	}
+	var bar = new PercentBar();
+	bar.setValue(value, ABSOLUTE_MAX_SAMPLE_DATA, formattedValue);
+	bar.hideText(!showValues);
+	bar.useMovementColor(useMovementColor);
+	bar.setTextWidth(95);
+	if (this._configDisplayStyle.alignment) {
+		bar.setAlignment(this._configDisplayStyle.alignment);
+	}
+	var percentBarElem = bar.getElement();
+	cell.appendChild(percentBarElem);
+};
+
+/** @private
+* @param {number} val - base number value
+* @return {string} -formatted value
+*/
+PreviewTable.prototype._updateValueFormatExample = function (val) {
+	var value = val;
+	var numberFormatterConfig = this._checkNumberFormatter();
+	switch (this._configValueFormat && this._configValueFormat.mode) {
+	case "general":
+		this._numberFormatter.resetToDefaults();
+		this._numberFormatter.init({
+			decimalPlaces: 2
+		});
+		value = this._numberFormatter.format(value);
+		break;
+	case "number":
+		this._numberFormatter.resetToDefaults();
+		this._numberFormatter.init(numberFormatterConfig);
+		value = this._numberFormatter.format(value);
+		break;
+	case "scaled":
+		this._numberFormatter.resetToDefaults();
+		Object.assign(numberFormatterConfig, {
+			scalingUnit: this._configValueFormat.scaled,
+			formatType: "scaled"
+		});
+
+		this._numberFormatter.init(numberFormatterConfig);
+		value = this._numberFormatter.format(value);
+		break;
+	case "percent":
+		this._numberFormatter.resetToDefaults();
+		Object.assign(numberFormatterConfig, {
+			formatType: "percent",
+			percentSign: true,
+			multiplyBy100: this._configValueFormat.isPercentMultiply100
+		});
+
+		this._numberFormatter.init(numberFormatterConfig);
+		value = this._numberFormatter.format(value);
+		break;
+	case DATE_TIME:
+		this._dateFormatter.setDateTimeMeta(this._configDateTime.formatDate, this._configDateTime.isUsedGMT, null, this._configDateTime.lang);
+		value = this._dateFormatter.format(new Date());
+		break;
+	default:
+		break;
+	}
+
+	return value;
+};
+
+/**
+ * @private
+ * @param {Object} colors
+ */
+PreviewTable.prototype._onThemeLoaded = function (colors) {
+	this._configUpdateStyleValue.colors = colors;
+};
+
+export default PreviewTable;
+export { PreviewTable };