@refinitiv-ui/efx-grid 6.0.130 → 6.0.131

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.130" };
+window.EFX_GRID = { version: "6.0.131" };

package/lib/tr-grid-range-bar/es6/LEDGuage.d.ts

@@ -0,0 +1,39 @@
+
+
+declare namespace LEDGuage {
+
+    type RangeValues = {
+        low?: number|null,
+        last?: number|null,
+        high?: number|null,
+        close?: number|null,
+        vwap?: number|null,
+        tick?: number|null
+    };
+
+}
+
+declare class LEDGuage {
+
+    constructor();
+
+    public static createElementWithText(text?: string|null): Element|null;
+
+    public setPriceGraph(priceGraph?: boolean|null): void;
+
+    public setRangeValue(rangeBarData: LEDGuage.RangeValues|null): void;
+
+    public isNoRangeValue(): boolean;
+
+    public isHighLowEqual(): boolean;
+
+    public isInvalidRangeValue(): boolean;
+
+    public getEqualRangeElement(): Element|null;
+
+    public getLEDGuageElement(): Element|null;
+
+}
+
+export default LEDGuage;
+export { LEDGuage };

package/lib/tr-grid-range-bar/es6/LEDGuage.js

@@ -0,0 +1,261 @@
+
+
+const TICK_COLOR_MAPPING = ["var(--color-scheme-neutral)", "var(--color-scheme-tickup)", "var(--color-scheme-tickdown)"]; // ["level", "up", "down"]
+
+/** @typedef {Object} LEDGuage~RangeValues
+* @description Object of range values.
+* @property {number=} low Field used as minimum range
+* @property {number=} last Field used as current absolute value (white bar)
+* @property {number=} high Field used as maximum range
+* @property {number=} close Field used as close price
+* @property {number=} vwap Field used as volume weighted average price (VWAP)
+* @property {number=} tick Field used as tick color
+*/
+
+/**
+* @constructor
+*/
+var LEDGuage = function () {
+	this._elem = document.createElement("ef-led-gauge");
+	this._elem.neutralColor = true; // TODO: Color should set by user
+};
+
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._low = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._last = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._high = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._close = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._vwap = null;
+/** @private
+ * @type {number=}
+*/
+LEDGuage.prototype._tick = null;
+/** @private
+ * @type {boolean}
+*/
+LEDGuage.prototype._priceGraph = false;
+
+/** @private
+ * @param {LEDGuage~RangeValues} rBarOpt range
+ * @param {!Object} rangeBarValues
+ * @return {string} tooltip string value
+*/
+LEDGuage.calculateTooltip = function (rBarOpt, rangeBarValues) {
+	var low = rangeBarValues.low;
+	var last = rangeBarValues.last;
+	var high = rangeBarValues.high;
+	var vwap = rangeBarValues.vwap;
+	var close = rangeBarValues.close;
+	var priceGraph = rBarOpt.priceGraph;
+
+	var textTooltip;
+	if (rBarOpt["field"]) { // WARNING: Field overwrite low last high tooltip
+		textTooltip = (last != null ? last : '--');
+	} else { // provide low,last,high case
+		var lowValue = low != null ? low : '--';
+		var lastValue = last != null ? last : '--';
+		var highValue = high != null ? high : '--';
+		if (priceGraph) {
+			var vwapValue = vwap != null ? vwap : '--';
+			var closeValue = close != null ? close : '--';
+			textTooltip = 'Low: ' + lowValue + " " +
+				'Last: ' + lastValue + " " +
+				'High: ' + highValue + " " +
+				'VWAP: ' + vwapValue + " " +
+				'Close: ' + closeValue + " ";
+		} else {
+			textTooltip = 'Low: ' + lowValue + " " +
+				'Last: ' + lastValue + " " +
+				'High: ' + highValue;
+		}
+	}
+	return textTooltip;
+};
+
+/** Used for convert the rangeBarOption and rowData into an object that has the properties of low, last, and high.
+ * @private
+ * @param {LEDGuage~RangeValues} rBarOpt
+ * @param {Object} rowData
+ * @return {LEDGuage~RangeValues}
+*/
+LEDGuage.getRangeBarData = function (rBarOpt, rowData) {
+	var low, high, last, close, vwap, tick;
+	if (rBarOpt.field) {
+		// Doesn't defined range bar data, use field instead
+		low = rBarOpt.start;
+		last = rowData[rBarOpt.field];
+		high = rBarOpt.end;
+	} else {
+		// Defined range bar data
+		low = rowData[rBarOpt.low];
+		last = rowData[rBarOpt.last];
+		high = rowData[rBarOpt.high];
+		close = rowData[rBarOpt.close];
+		vwap = rowData[rBarOpt.vwap];
+		tick = rowData[rBarOpt.tick];
+	}
+	return {
+		low: low,
+		last: last,
+		high: high,
+		close: close,
+		vwap: vwap,
+		tick: tick
+	};
+};
+
+/** Used for tranfrom value from raw value to normalize value (Percent value between -100 to 100)
+* @private
+* @param {number} low
+* @param {number} current
+* @param {number} high
+* @return {number}
+*/
+LEDGuage.normalizeValue = function (low, current, high) {
+	return ((low - current) * 200) / (low - high) - 100;
+};
+
+/** Create element and set given text.
+ * @public
+ * @param {string=} text="" Set text to element
+ * @return {Element}
+ */
+LEDGuage.createElementWithText = function (text) {
+	let span = document.createElement("span");
+	span.textContent = text ? text : "";
+	return span;
+};
+
+/** Set price graph flag to render price graph mode
+ * @public
+ * @param {boolean=} priceGraph=false
+ */
+LEDGuage.prototype.setPriceGraph = function (priceGraph) {
+	this._priceGraph = priceGraph;
+};
+
+/** Set value to render LED-Guage
+ * @public
+ * @param {LEDGuage~RangeValues} rangeBarData
+ */
+LEDGuage.prototype.setRangeValue = function (rangeBarData) {
+	this._low = rangeBarData.low;
+	this._last = rangeBarData.last;
+	this._high = rangeBarData.high;
+	this._close = rangeBarData.close;
+	this._vwap = rangeBarData.vwap;
+	this._tick = rangeBarData.tick;
+};
+
+/**
+ * @public
+ * @return {boolean}
+ */
+LEDGuage.prototype.isNoRangeValue = function () {
+	return this._high == null && this._low == null && this._last == null;
+};
+
+/**
+ * @public
+ * @return {boolean}
+ */
+LEDGuage.prototype.isHighLowEqual = function () {
+	return this._high === this._low && this._high === this._last;
+};
+
+/**
+ * @public
+ * @return {boolean}
+ */
+LEDGuage.prototype.isInvalidRangeValue = function () {
+	return this._high == null || this._low == null || this._high < this._low;
+};
+
+/**
+ * @public
+ * @return {Element} LEDGuage Element
+ */
+LEDGuage.prototype.getEqualRangeElement = function () {
+	this._elem.range = [-100, 100];
+	this._elem.topValue = 0;
+	return this._elem;
+};
+
+/**
+ * @public
+ * @return {Element} LEDGuage Element
+ */
+LEDGuage.prototype.getLEDGuageElement = function () {
+	let close = this._close;
+	let vwap = this._vwap;
+	let low = this._low;
+	let last = this._last;
+	let high = this._high;
+	let lastNormalize = LEDGuage.normalizeValue(low, last, high);
+	if (this._priceGraph) {
+		let vwapNormalize = LEDGuage.normalizeValue(low, vwap, high);
+		let rangeColor;
+		if (close > last) {
+			rangeColor = "var(--color-scheme-tickdown)";
+		} else {
+			rangeColor = "var(--color-scheme-tickup)";
+		}
+
+		let leftSegmentValue = LEDGuage.normalizeValue(low, close, high);
+		let rangeValue;
+		if (lastNormalize < leftSegmentValue) {
+			rangeValue = [lastNormalize, leftSegmentValue];
+		} else {
+			rangeValue = [leftSegmentValue, lastNormalize];
+		}
+		this._elem.range = rangeValue;
+		this._elem.topValue = lastNormalize;
+		this._elem.bottomValue = vwapNormalize;
+		this._elem.style.setProperty("--range-color", rangeColor);
+		this._elem.style.setProperty("--bottom-selected-color", "var(--neutral-color)");
+		this._elem.style.setProperty("--top-selected-color", TICK_COLOR_MAPPING[this._tick]);
+		this._elem.style.setProperty("--clash-color", "var(--color-scheme-secondary)");
+	} else {
+		// applied range when the last value out of range, by set new low/high with last value
+		if (last < low) {
+			let lowNormalize = LEDGuage.normalizeValue(last, low, high);
+			this._elem.range = [lastNormalize, lowNormalize];
+		} else if (last > high) {
+			let highNormalize = LEDGuage.normalizeValue(low, high, last);
+			this._elem.range = [highNormalize, lastNormalize];
+		}
+
+		if (low === high) { // low equal high case (avoid normalize to infinity)
+			this._elem.range = [-100, 100];
+			lastNormalize = last < low ? -100 : 100; // topValue will be left or right
+		}
+
+		if (last == null) { // only last is empty (low and high should have value)
+			this._elem.range = [];
+			lastNormalize = null;
+		}
+
+		this._elem.topValue = lastNormalize;
+	}
+
+	return this._elem;
+};
+
+
+
+export default LEDGuage;
+export { LEDGuage };

package/lib/tr-grid-range-bar/es6/RangeBar.d.ts

@@ -1,7 +1,8 @@
-import {Ext} from '../../tr-grid-util/es6/Ext.js';
-import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
-import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { LEDGuage } from "./LEDGuage.js";
 
 declare namespace RangeBarPlugin {