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

package/lib/core/es6/grid/util/PercentBar.js

@@ -0,0 +1,390 @@
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+
+/**
+ * @constructor
+ * @extends {ElementWrapper}
+ * @param {Element=} opt_element
+ */
+var PercentBar = function (opt_element) {
+	this._element = opt_element ? opt_element : document.createElement("div");
+	this._element._percentBar = this; // For internal reference by PercentBarRenderer
+	this._element.className = "tr-percent-bar";
+
+	this._bar = document.createElement("div");
+	this._track = document.createElement("div");
+	this._track.appendChild(this._bar);
+
+	this._txt = document.createElement("span");
+	this.setAlignment("c");
+};
+Ext.inherits(PercentBar, ElementWrapper);
+
+/**
+ * @public
+ * @returns {number}
+ */
+PercentBar.prototype.getValue = function () {
+	return this._absValue * this._sign;
+};
+/**
+ * @public
+ * @returns {number}
+ */
+PercentBar.prototype.getPercent = function () {
+	return (this._absValue / this._maxValue) * this._sign;
+};
+
+/**
+ * @public
+ * @param {number|string} value
+ * @param {number=} opt_max
+ * @param {string=} opt_displayText
+ */
+PercentBar.prototype.setValue = function (value, opt_max, opt_displayText) {
+	if(typeof value !== "number") {
+		if(!value || value === " ") {
+			value = NaN;
+		} else {
+			value = Number(value);
+		}
+	}
+
+	if(!value && value !== 0) { // NaN or undefined
+		this._absValue = NaN;
+
+		if(!this._invalid) {
+			this._invalid = true;
+			this.hide();
+		}
+
+		return;
+	} else {
+		if(this._invalid) {
+			this._invalid = false;
+			this.show();
+		}
+	}
+
+	if(value >= 0) {
+		this._absValue = value;
+		this._dirtySign |= this._sign !== 1;
+		this._sign = 1;
+	} else {
+		this._absValue = -value;
+		this._dirtySign |= this._sign !== -1;
+		this._sign = -1;
+	}
+
+	if(opt_max != null) {
+		this._maxValue = (opt_max >= 0) ? opt_max : -opt_max;
+	}
+
+	if(this._absValue > this._maxValue) {
+		this._absValue = this._maxValue;
+	}
+
+	this._update(true, opt_displayText);
+};
+/**
+ * @public
+ * @param {number} absVal
+ */
+PercentBar.prototype.setMax = function (absVal) {
+	this._maxValue = (absVal >= 0) ? absVal : -absVal;
+	if(this._absValue > this._maxValue) {
+		this._absValue = this._maxValue;
+	}
+	this._update();
+};
+
+/**
+ * @public
+ * @param {string} txt
+ */
+PercentBar.prototype.setText = function (txt) {
+	if(!this._invalid) {
+		if(this._txt._prevText !== txt) {
+			this._txt._prevText = txt;
+			this._txt.textContent = txt;
+			if (this._tooltipEnabled) {
+				this.setTooltip(txt);
+			}
+		}
+	}
+};
+/**
+ * @public
+ * @param {boolean=} opt_hiden
+ */
+PercentBar.prototype.hideText = function (opt_hiden) {
+	this._textHidden = opt_hiden !== false;
+	this._txt.style.display = this.isTextHidden() ? "none" : "";
+	this.setAlignment(this._alignment);
+};
+/**
+ * @public
+ * @return {boolean}
+ */
+PercentBar.prototype.isTextHidden = function () {
+	return this._textHidden || (this._textWidth === "0px");
+};
+
+/** Use when alignment is not center. This will be a reserved space for text
+ * @public
+ * @param {number|string} width
+ */
+PercentBar.prototype.setTextWidth = function (width) {
+	if(!width && width !== 0) { // undefined, NaN, null, and ""
+		width = 56;
+	}
+	var txtWidth = (typeof width === "number") ? width + "px" : width;
+	if(this._textWidth !== txtWidth) {
+		this._textWidth = txtWidth;
+		this._txt.style.display = this.isTextHidden() ? "none" : "";
+		this.setAlignment(this._alignment);
+	}
+};
+/** @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
+ * @returns {string} alignment Alignment can be "left", "center", "right"
+ */
+PercentBar.prototype.getAlignment = function () {
+	switch(this._alignment) {
+	case "l": return "left";
+	case "r": return "right";
+	}
+	return "center";
+};
+
+/**
+ * @public
+ * @param {string} alignment Alignment can be "left", "center", "right"
+ */
+PercentBar.prototype.setAlignment = function (alignment) {
+	if(alignment) {
+		alignment = alignment.charAt(0).toLowerCase();
+	} else {
+		alignment = "c";
+	}
+
+	if(alignment === "c") {
+		this._track.style.width = "50%";
+		this._txt.style.width = '50%';
+		this._txt.style.textOverflow = 'elipsis';
+		this._dirtySign = true;
+	} else {
+		if (this.isTextHidden()) {
+			this._track.style.width = "100%";
+		} else {
+			this._track.style.width = "calc(100% - " + this._textWidth + ")";
+		}
+		this._txt.style.width = this._textWidth; // Text width can be percent ("50%") or pixel ("50px")
+		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._alignment !== alignment) {
+		this._alignment = alignment;
+		if(alignment !== "l") {
+			this.addContent(this._track);
+			this.addContent(this._txt);
+		} else { // align left
+			this.addContent(this._txt);
+			this.addContent(this._track);
+		}
+	}
+	this._update(false);
+};
+
+/**
+ * @public
+ * @param {Object=} colorObject An object with property "up" and "down"
+ */
+PercentBar.prototype.setMovementColor = function (colorObject) {
+	if(colorObject) {
+		if(colorObject["up"] && colorObject["down"]) {
+			this._movementColor = colorObject;
+		}
+	}
+};
+/** @public
+ * @param {boolean=} opt_enabled
+ */
+PercentBar.prototype.useMovementColor = function (opt_enabled) {
+	this._movementColorUsed = opt_enabled !== false;
+	this._updateBarColor();
+};
+
+/**
+ * @public
+ * @param {string=} color
+ */
+PercentBar.prototype.setTrackColor = function (color) {
+	this._track.style.backgroundColor = color ? color : "";
+};
+
+/** @public
+ * @param {boolean=} opt_enabled
+ */
+PercentBar.prototype.enableTooltip = function (opt_enabled) {
+	this._tooltipEnabled = opt_enabled !== false;
+	this.setTooltip('');
+};
+
+/**
+ * @private
+ * @param {boolean=} opt_updateVal
+ * @param {string=} opt_displayText
+ */
+PercentBar.prototype._update = function (opt_updateVal, opt_displayText) {
+	if(this._dirtySign) {
+		this._dirtySign = false;
+		if(this._alignment === "c") {
+			if(this._sign >= 0) {
+				this._track.style.left = "50%";
+				this._bar.style.right = "";
+				this._txt.style.transform = "translateX(-100%)";
+				this._txt.style.textAlign = "right";
+			} else {
+				this._track.style.left = "";
+				this._bar.style.right = "0";
+				this._txt.style.transform = "";
+				this._txt.style.textAlign = "left";
+			}
+		}
+
+		if(this._movementColorUsed) {
+			this._updateBarColor();
+		}
+	}
+
+	if (opt_updateVal !== false) {
+		var percent = (this._absValue / this._maxValue) * 100;
+		this._bar.style.width = percent + "%";
+		if(opt_displayText) {
+			this.setText(opt_displayText);
+		} else {
+			this.setText(Math.floor(percent * this._sign * 100) / 100 + "%");
+		}
+	}
+};
+/**
+ * @private
+ */
+PercentBar.prototype._updateBarColor = function () {
+	if(this._movementColorUsed) {
+		if(this._sign >= 0) {
+			this._bar.style.backgroundColor = (this._movementColor && this._movementColor["up"]) ? this._movementColor["up"] : "green";
+		} else {
+			this._bar.style.backgroundColor = (this._movementColor && this._movementColor["down"]) ? this._movementColor["down"] : "red";
+		}
+	} else {
+		this._bar.style.backgroundColor = "";
+	}
+};
+
+/**
+ * @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 {string}
+ * @private
+ */
+PercentBar.prototype._alignment;
+/**
+ * @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 {Object}
+ * @private
+ */
+PercentBar.prototype._movementColor = null;
+/**
+ * @type {boolean}
+ * @private
+ */
+PercentBar.prototype._movementColorUsed = true;
+
+/**
+ * @type {boolean}
+ * @private
+ */
+PercentBar.prototype._tooltipEnabled = true;
+
+PercentBar._proto = PercentBar.prototype;
+
+export default PercentBar;
+export { PercentBar };

package/lib/core/es6/grid/util/PercentBarRenderer.d.ts

@@ -0,0 +1,41 @@
+import ElementWrapper from "../components/ElementWrapper.js";
+import PercentBar from "./PercentBar.js";
+
+declare class PercentBarRenderer {
+
+    constructor();
+
+    public dispose(): void;
+
+    public render(cell: ElementWrapper, value: number, opt_max?: number, opt_displayText?: string, opt_textWidth?: number): void;
+
+    public renderForPrinting(cell: ElementWrapper, value: number, opt_max?: number): PercentBar;
+
+    public setAlignment(alignment: string): void;
+
+    public setMovementColor(colorObj?: any): void;
+
+    public useMovementColor(opt_enabled?: boolean): void;
+
+    public setTrackColor(color?: string): void;
+
+    public hideText(opt_enabled?: boolean): void;
+
+    public setTextWidth(width: number|string, opt_pbs?: (PercentBar)[]): void;
+
+    public enableTooltip(opt_enabled?: boolean): void;
+
+    public getAlignment(): string;
+
+    public isMovementColorUsed(): boolean;
+
+    public isTextHidden(): boolean;
+
+    public startTextAutoResizing(): boolean;
+
+    public endTextAutoResizing(widthLimit?: number, opt_resetToDefaultWidth?: boolean, opt_pbs?: (PercentBar)[]): void;
+
+}
+
+export default PercentBarRenderer;
+export { PercentBarRenderer };