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

package/lib/tr-grid-util/es6/PercentBar.js

@@ -0,0 +1,600 @@
+import {Dom} from "./Dom.js";
+import { ElfUtil } from "./ElfUtil.js";
+import { injectCss, prettifyCss } from "./Util.js";
+
+/** @typedef {Object} PercentBar~Options
+* @description PercentBar options
+* @property {string=} alignment="left" Possible values are l, r, c, left, right, and center
+* @property {boolean=} movementColor=true If disabled, percent bar will not use up and down colors
+* @property {string=} barColor="" Custom color for bar element. This will override the movementColor
+* @property {boolean=} textHidden=false If enabled, text label will not be shown
+* @property {(number|string)=} textWidth=56 Number of pixel or percentage width
+* @property {boolean=} zeroValueHidden=false If this option is enabled and the percentage value is zero, percent bar and its label will be hidden
+*/
+
+
+/** @type {Object.<string, string>}
+* @private
+* @const
+*/
+var _alignments = {
+	"l": "l",
+	"c": "c",
+	"r": "r",
+	"L": "l",
+	"C": "c",
+	"R": "r"
+};
+/** Normalize alignment string
+* @public
+* @function
+* @param {string|null} str Any string such as l, c, r, L, C, R, left, right, center
+* @return {string} Possible values are l, c, r or empty string
+*/
+var toAlignment = function(str) {
+	if(str) {
+		return _alignments[str.charAt(0)] || "";
+	}
+	return "";
+};
+
+/** Provides UI for simple percent bar
+* @constructor
+* @param {(Element|null)=} elem Element to be rendered as PercentBar
+* @param {PercentBar~Options=} options
+*/
+var PercentBar = function (elem, options) {
+	this._topNode = elem || Dom.div();
+	this._topNode._percentBar = this; // HACK: For internal reference by PercentBarRenderer
+	this._topNode.classList.add("tr-percent-bar");
+
+	this._bar = Dom.div();
+	this._track = Dom.div();
+	this._track.appendChild(this._bar);
+
+	this._txt = Dom.create("span");
+	// this._txt.style.textOverflow = "ellipsis";
+	var alignment = "l";
+	if(options) {
+		if(options.alignment) {
+			alignment = options.alignment;
+		}
+		if(options.movementColor != null) {
+			this.useMovementColor(options.movementColor ? true : false);
+		}
+		if(options.barColor != null) {
+			this.setBarColor(options.barColor);
+		}
+
+		// Manage text visibility state
+		var visibilityDirty = 0;
+		if(options.textWidth != null) {
+			visibilityDirty = 1;
+			this.setTextWidth(options.textWidth);
+		}
+		if(options.textHidden != null) {
+			visibilityDirty |= this.hideText(options.textHidden);
+		}
+		if(options.zeroValueHidden != null) {
+			visibilityDirty |= this.hideZeroValue(options.zeroValueHidden);
+		}
+		if(visibilityDirty && this.isTextHidden()) {
+			this._textInDoc = false;
+			this._topNode.appendChild(this._track);
+		}
+	}
+
+	this.setAlignment(alignment);
+};
+
+/** @type {Element}
+* @private
+*/
+PercentBar.prototype._topNode = null;
+/** @type {Element}
+* @private
+*/
+PercentBar.prototype._track = null;
+/** @type {Element}
+* @private
+*/
+PercentBar.prototype._bar = null;
+/** @type {Element}
+* @private
+*/
+PercentBar.prototype._txt = null;
+
+/** @type {string}
+* @private
+*/
+PercentBar.prototype._textWidth = "56px"; // 56 is the exact fit to the default format
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._textHidden = false;
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._zeroValueHidden = false;
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._textInDoc = true;
+
+/** @type {string}
+* @private
+*/
+PercentBar.prototype._alignment; // Intentionally left unassigned for first time initialization
+/** @type {number}
+* @private
+*/
+PercentBar.prototype._absValue;
+/** @type {number}
+* @private
+*/
+PercentBar.prototype._maxValue = 100;
+/** Sign of value. 1 for positive and -1 for negative.
+* @type {number}
+* @private
+*/
+PercentBar.prototype._sign = 1;
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._dirtySign = true;
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._invalid = false;
+
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._movementColor = true;
+/** @type {string}
+* @private
+*/
+PercentBar.prototype._barColor = "";
+
+/** @type {boolean}
+* @private
+*/
+PercentBar.prototype._tooltipEnabled = true;
+
+/** @type {string}
+* @private
+*/
+PercentBar._styles = prettifyCss([
+	".tr-percent-bar", [
+		"position: relative;",
+		"text-align: left;",
+		"overflow: hidden;",
+		"white-space: nowrap;"
+	],
+	".tr-percent-bar>div", [
+		"position: relative;",
+		"display: inline-block;",
+		"height: 8px;",
+		"vertical-align: middle;"
+	],
+	".tr-percent-bar>div>div ", [
+		"position: absolute;",
+		"height: 100%;"
+	],
+	".tr-percent-bar>span", [
+		"display: inline-block;",
+		"vertical-align: middle;",
+		"box-sizing: border-box;",
+		"padding-left: 4px;",
+		"padding-right: 4px;",
+		"overflow: hidden;",
+		"max-width: 100%;"
+	]
+]);
+
+/** Apply percent bar style into elem
+ * @public
+ * @function
+ * @param {Element} hostElem
+ */
+PercentBar.injectCss = function (hostElem) {
+	injectCss(this._styles, hostElem);
+};
+
+/** Normalize alignment string
+* @public
+* @function
+* @param {string|null} str Any string such as l, c, r, L, C, R, left, right, center
+* @return {string} Possible values are l, c, r and empty string
+*/
+PercentBar.toAlignment = toAlignment;
+
+/** @public
+* @return {Element}
+*/
+PercentBar.prototype.getElement = function () {
+	return this._topNode;
+};
+
+/** @public
+* @return {number}
+*/
+PercentBar.prototype.getValue = function () {
+	return this._absValue * this._sign;
+};
+/** @public
+* @return {number} Return NaN if value is invalid
+*/
+PercentBar.prototype.getPercent = function () {
+	return (this._absValue / this._maxValue) * this._sign;
+};
+/** @public
+* @return {boolean}
+*/
+PercentBar.prototype.isInvalid = function () {
+	return this._invalid;
+};
+
+
+/** @private
+* @return {boolean} Returns invalidity
+*/
+PercentBar.prototype._checkInvalidity = function () {
+	var invalid = (this._absValue !== this._absValue) || !this._maxValue;
+	if(invalid !== this._invalid) {
+		this._invalid = invalid;
+		this._topNode.style.display = invalid ? "none" : "";
+	}
+	return invalid;
+};
+/** @public
+* @param {number} value
+* @param {number=} opt_max NaN value cannot be set. 0 max value will cause percent bar to be blank. If no value is passed, max value remain unchanged.
+* @param {(string|boolean)=} displayText If a string is specified, it will be shown instead of the default one. If false value is specified, the existing text is left untouched.
+*/
+PercentBar.prototype.setValue = function (value, opt_max, displayText) {
+	var t = this;
+	if(value && typeof value !== "number") { // Perform automatic data conversion if value is not a number
+		value = +value;
+	}
+	if(!value && value !== 0) { // NaN or undefined
+		t._absValue = NaN;
+	} else if(value >= 0) {
+		t._absValue = value;
+		t._dirtySign |= t._sign !== 1;
+		t._sign = 1;
+	} else {
+		t._absValue = -value;
+		t._dirtySign |= t._sign !== -1;
+		t._sign = -1;
+	}
+	if(opt_max != null) {
+		if(opt_max === opt_max) { // Avoid NaN
+			t._maxValue = (opt_max >= 0) ? opt_max : -opt_max;
+		}
+	}
+
+	if(t._checkInvalidity()) {
+		return; // Current state is invalid. No further operation is required
+	}
+	if(t._absValue > t._maxValue) {
+		t._absValue = t._maxValue;
+	}
+	t._updateValue(true, displayText);
+};
+/** Set maximum value. Use this method when maximum possible value is known beforehand.
+* @public
+* @param {number} absVal NaN value cannot be set. 0 max value will cause percent bar to be blank.
+*/
+PercentBar.prototype.setMax = function (absVal) {
+	if(absVal !== absVal) {
+		return; // Avoid NaN
+	}
+	this._maxValue = (absVal >= 0) ? absVal : -absVal;
+	if(this._checkInvalidity()) {
+		return; // max value can be zero
+	}
+	if(this._absValue > this._maxValue) {
+		this._absValue = this._maxValue;
+	}
+	this._updateValue(true); // Maximum value affects percentage
+};
+/** @public
+* @param {boolean=} hidden
+* @return {boolean} Returns true if there is any change.
+*/
+PercentBar.prototype.hideZeroValue = function (hidden) {
+	var bool = hidden !== false;
+	if(this._zeroValueHidden !== bool) {
+		this._zeroValueHidden = bool;
+		if(this._alignment) { // Execute only after the initialization
+			if(this._updateTextVisibility()) {
+				this._updateTextWidth();
+			}
+		}
+		return true;
+	}
+	return false;
+};
+
+/** @public
+* @param {string} txt
+*/
+PercentBar.prototype.setText = function (txt) {
+	if(!this._invalid) {
+		if(!txt && txt !== 0) { // If txt is null, undefined, false, or NaN
+			txt = "";
+		} else if(typeof txt !== "string") {
+			txt = txt + "";
+		}
+		if(this._txt._prevText !== txt) {
+			this._txt._prevText = txt;
+			this._txt.textContent = txt;
+			if (this._tooltipEnabled) {
+				if(txt) {
+					this._topNode.setAttribute("title", txt);
+				} else {
+					this._topNode.removeAttribute("title");
+				}
+			}
+		}
+	}
+};
+/** @public
+* @param {boolean=} hidden
+* @return {boolean} Returns true if there is any change.
+*/
+PercentBar.prototype.hideText = function (hidden) {
+	var bool = hidden !== false;
+	if(this._textHidden !== bool) {
+		this._textHidden = bool;
+		if(this._alignment) { // Execute only after the initialization
+			if(this._updateTextVisibility()) {
+				this._updateTextWidth();
+			}
+		}
+		return true;
+	}
+	return false;
+};
+/** @public
+* @return {boolean}
+*/
+PercentBar.prototype.isTextHidden = function () {
+	if (this._textHidden || this._textWidth === "0px") {
+		return true;
+	}
+	if(this._zeroValueHidden) {
+		if(!this._absValue) { // zero or NaN
+			return true;
+		}
+	}
+	return false;
+};
+
+/** This is often accompany with _updateTextWidth() method
+* @private
+* @return {boolean} Return true if there is any change
+*/
+PercentBar.prototype._updateTextVisibility = function () {
+	var textVisibility = !this.isTextHidden();
+	if (this._textInDoc !== textVisibility) {
+		this._textInDoc = textVisibility;
+		if(textVisibility) {
+			this._reorderElements(); // Re-append text element to the track
+		} else {
+			Dom.removeParent(this._txt);
+		}
+		return true;
+	}
+	return false;
+};
+/** @private
+* @return {boolean} Return true if there is any change
+*/
+PercentBar.prototype._updateTextWidth = function () {
+	if(this._alignment !== "c") { // Text width is always at 50% for center alignment
+		if (this._textInDoc) {
+			this._track.style.width = "calc(100% - " + this._textWidth + ")";
+		} else {
+			this._track.style.width = "100%";
+		}
+		this._txt.style.width = this._textWidth; // Text width can be percent ("50%") or pixel ("50px")
+		return true;
+	}
+	return  false;
+};
+
+/** Use when alignment is not center. This will be a reserved space for text
+* @public
+* @param {number|string} width
+*/
+PercentBar.prototype.setTextWidth = function (width) {
+	var txtWidth = "56px"; // Default width
+	if(typeof width === "number") {
+		txtWidth = (width > 8) ? width + "px" : "0px"; // Default padding is 4 on both sides, so minimum is 8
+	} else if(typeof width === "string" && width) {
+		txtWidth = (width !== "0") ? width : "0px";
+	}
+
+	if(this._textWidth !== txtWidth) {
+		this._textWidth = txtWidth;
+		if (this._alignment) { // Execute only after the initialization
+			this._updateTextVisibility();
+			this._updateTextWidth();
+		}
+	}
+};
+/** setMaxTextLength is alias to setTextWidth
+* @public
+* @function
+* @param {number|string} width
+*/
+PercentBar.prototype.setMaxTextLength = PercentBar.prototype.setTextWidth;
+/** @public
+* @return {number} scrollWidth
+*/
+PercentBar.prototype.getTextScrollWidth = function() {
+	if(this._txt.scrollWidth > this._txt.offsetWidth) {
+		return this._txt.scrollWidth;
+	}
+	return NaN;
+};
+
+/** @public
+* @return {string} Return normalized alignment string ("l", "r", or "c")
+*/
+PercentBar.prototype.getAlignment = function () {
+	return this._alignment;
+};
+
+/** @public
+* @param {string} alignment Alignment can be "left", "center", "right"
+*/
+PercentBar.prototype.setAlignment = function (alignment) {
+	alignment = toAlignment(alignment) || "l"; // Default is left alignment
+
+	if(this._alignment !== alignment) { // Check if aligment is actually changed
+		this._alignment = alignment;
+
+		if(alignment === "c") {
+			this._track.style.width = "50%";
+			this._txt.style.width = "50%";
+		} else {
+			this._updateTextWidth();
+			this._txt.style.textAlign = "right";
+
+			this._track.style.left = ""; // Important
+			this._txt.style.transform = ""; // Important
+
+			if(alignment === "r") {
+				this._bar.style.right = "0";
+			} else {
+				this._bar.style.right = "";
+			}
+		}
+		if(this._textInDoc) {
+			this._reorderElements();
+		}
+
+		// Center alignment requires bar to switching sides based on sign of the value.
+		// So, bar and text styles have to be reset when changing from left/right alignment to center alignment
+		this._dirtySign = true;
+		this._updateValue(false);
+	}
+};
+/** @private */
+PercentBar.prototype._reorderElements = function () {
+	if(this._alignment !== "l") {
+		this._topNode.appendChild(this._track);
+		this._topNode.appendChild(this._txt);
+	} else { // align left
+		this._topNode.appendChild(this._txt);
+		this._topNode.appendChild(this._track);
+	}
+};
+
+/** @public
+* @param {boolean=} opt_enabled
+*/
+PercentBar.prototype.useMovementColor = function (opt_enabled) {
+	var newMovementColor = opt_enabled !== false;
+	if(this._movementColor !== newMovementColor) {
+		this._movementColor = newMovementColor;
+		this.updateBarColor();
+	}
+};
+
+/** @public
+* @param {string=} color
+*/
+PercentBar.prototype.setTrackColor = function (color) {
+	this._track.style.backgroundColor = color || "";
+};
+/** @public
+* @param {string=} color
+*/
+PercentBar.prototype.setBarColor = function (color) {
+	var newColor = color || "";
+	if(this._barColor !== newColor) {
+		this._barColor = newColor;
+		this.updateBarColor();
+	}
+};
+
+/** @public
+* @param {boolean=} enabled
+*/
+PercentBar.prototype.enableTooltip = function (enabled) {
+	this._tooltipEnabled = enabled !== false;
+	if(!this._tooltipEnabled) {
+		this._topNode.removeAttribute("title");
+	}
+};
+
+/** @private
+* @param {boolean=} opt_updateVal
+* @param {(string|boolean)=} displayText If a string is specified, it will be shown instead of the default one. If false value is specified, the existing text is left untouched.
+*/
+PercentBar.prototype._updateValue = function (opt_updateVal, displayText) {
+	var t = this;
+	if(t._dirtySign) {
+		t._dirtySign = false;
+		if(t._alignment === "c") {
+			if(t._sign >= 0) {
+				t._track.style.left = "50%";
+				t._bar.style.right = "";
+				t._txt.style.transform = "translateX(-100%)";
+				t._txt.style.textAlign = "right";
+			} else {
+				t._track.style.left = "";
+				t._bar.style.right = "0";
+				t._txt.style.transform = "";
+				t._txt.style.textAlign = "left";
+			}
+		}
+
+		if(t._movementColor && !t._barColor) {
+			t.updateBarColor();
+		}
+	}
+
+	if (opt_updateVal !== false) {
+		if(this._zeroValueHidden) { // Value could affect text visibility
+			if(this._updateTextVisibility()) {
+				this._updateTextWidth();
+			}
+		}
+		var percent = t._maxValue !== 100 ? t._absValue / t._maxValue * 100 : t._absValue;
+		t._bar.style.width = percent + "%";
+		if(displayText != null) {
+			if(displayText !== false) { // Allow keeping previous text
+				t.setText(displayText);
+			}
+		} else {
+			t.setText(((percent * t._sign * 100) | 0) / 100 + "%");
+		}
+	}
+};
+/** Force updating percent bar color to either current theme color or specified color
+* @public
+*/
+PercentBar.prototype.updateBarColor = function () {
+	var barColor;
+	if(this._barColor) {
+		barColor = this._barColor;
+	} else if(this._movementColor) {
+		barColor = this._sign >= 0 ? ElfUtil.themeColors["up"] :  ElfUtil.themeColors["down"];
+	} else {
+		barColor = ElfUtil.themeColors["trackColor"];
+	}
+	if(barColor) {
+		var barStyle = this._bar.style;
+		if(barStyle.backgroundColor !== barColor) {
+			barStyle.backgroundColor = barColor;
+		}
+	}
+};
+
+export default PercentBar;
+export { PercentBar, toAlignment };

package/lib/tr-grid-util/es6/Perf.d.ts

@@ -0,0 +1,32 @@
+
+
+declare namespace Perf {
+
+    function enable(enabled?: boolean): void;
+
+    function isEnabled(): boolean;
+
+    function clearMarks(): void;
+
+    function clearMeasures(): void;
+
+    function clearResourceTimings(): void;
+
+    function getEntries(): (PerformanceEntry)[];
+
+    function getEntriesByName(entryName: string, entryType?: string): (PerformanceEntry)[];
+
+    function getEntriesByType(entryType: string): (PerformanceEntry)[];
+
+    function getEntry(entryName: string, entryType?: string): PerformanceEntry;
+
+    function mark(markName: string): void;
+
+    function measure(measureName: string, mark1?: string, mark2?: string): void;
+
+    function now(): number;
+
+}
+
+export default Perf;
+export {Perf};