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

package/lib/tr-grid-printer/es6/SectionWriter.js

@@ -0,0 +1,238 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { ElementWrapper } from "../../tr-grid-util/es6/ElementWrapper.js";
+import { Table } from "../../tr-grid-util/es6/Table.js";
+import { CellWriter } from "./CellWriter.js";
+
+/**
+* @constructor
+* @extends {ElementWrapper}
+*/
+let SectionWriter = function () {
+	this._cellWriter = new CellWriter();
+	this._table = new Table();
+	this._columns = [];
+	this._elem = this._table.getElement();
+};
+Ext.inherits(SectionWriter, ElementWrapper);
+/** @type {!CellWriter}
+* @private
+*/
+SectionWriter.prototype._cellWriter;
+/** @type {!Table}
+* @private
+*/
+SectionWriter.prototype._table;
+
+/** @public
+* @return {number}
+*/
+SectionWriter.prototype.getFirstIndexInView = function () {
+	return 0;
+};
+
+/** @public
+* @return {number}
+*/
+SectionWriter.prototype.getLastIndexInView = function () {
+	return this._table.getRowCount() - 1; // WARNING: This is inclusive
+};
+
+/** @public
+* @return {number}
+*/
+SectionWriter.prototype.getColumnCount = function () {
+	return this._table.getColumnCount();
+};
+/** @public
+ * @param {number} colIndex
+* @return {*}
+*/
+SectionWriter.prototype.getColumn = function (colIndex) {
+	let col = this._columns[colIndex];
+	if (!col) {
+		col = this._columns[colIndex] = {};
+	}
+	return col;
+};
+/** @public
+* @param {number} val
+*/
+SectionWriter.prototype.setColumnCount = function (val) {
+	this._table.setColumnCount(val);
+};
+/** @public
+* @return {number}
+*/
+SectionWriter.prototype.getRowCount = function () {
+	return this._table.getRowCount();
+};
+/** @public
+* @param {number} val
+*/
+SectionWriter.prototype.setRowCount = function (val) {
+	this._table.setRowCount(val);
+};
+
+
+/**
+* @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {CellWriter}
+*/
+SectionWriter.prototype.getCell = function (colIndex, rowIndex) {
+	let cell = this._table.getCell(colIndex, rowIndex);
+	if(cell) {
+		this._cellWriter.cloak(cell);
+		return this._cellWriter;
+	}
+	return null;
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {Element|Node|NodeList}
+*/
+SectionWriter.prototype.getCellContent = function (colIndex, rowIndex) {
+	let cell = this.getCell(colIndex, rowIndex);
+	return cell ? cell.getContent() : null;
+};
+/** Set data to the specified cell
+* @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {string|Element|tr.IElementControl|*} data this can be HTML element, string, number, date, image
+*/
+SectionWriter.prototype.setCellContent = function (colIndex, rowIndex, data) {
+	let cell = this.getCell(colIndex, rowIndex);
+	if(cell) {
+		cell.setContent(data);
+	}
+};
+/** Apply CSS class to each cell in the row
+* @public
+* @param {number} rowIndex
+* @param {string} className
+* @param {boolean} enabled
+* @see {@link tr.ILayoutGrid.#setRowStyle}
+*/
+SectionWriter.prototype.enableRowClass = function (rowIndex, className, enabled) { };
+
+/** This will make the specified cell horizontally span to fit entire row regardless of position of the cell -- cell will shift to the left most of the section.<br>
+* If onlyToTheRight is true, the cell will not extend to the left most position<br>
+* This is different from cell colSpan, which the cell remain in the same position. tr-stretched class will also be added to the cell
+* @public
+* @param {*} cellRef Either column index or cell reference is acceptable
+* @param {number=} rowIndex If the cell instance is given as the first parameter, this parameter will be ignored.
+* @param {boolean=} stretching Default is true
+* @param {boolean=} onlyToTheRight=false By default, cell will be stretched to both left and right directions, covering entire row. Set to true to expand only to the right
+* @return {*} The cell being stretched
+* @example
+* grid.stretchCell(1, 0); // The second cell on the first row will be stretched covering the entire row
+* grid.stretchCell(cellInstance, 0, true); // The given cell will be stretched covering the entire row
+*/
+SectionWriter.prototype.stretchCell = function (cellRef, rowIndex, stretching, onlyToTheRight) {
+	let cell = this._table.getCell(cellRef, rowIndex);
+	if(stretching !== false) {
+		cell.setAttribute("colspan", this._table.getColumnCount());
+	}
+	return cell;
+};
+/** {@link SectionWriter#stretchCell}
+* @public
+* @ignore
+* @param {number} colIndex
+* @param {number} rowIndex
+*/
+SectionWriter.prototype.unstretchCell = function (colIndex, rowIndex) {};
+
+/** @public
+* @return {boolean}
+*/
+SectionWriter.prototype.hasCellSpan = function () { return false; };
+/**
+* @public
+* @param {*} cellRef
+* @param {number=} rowIndex
+* @return {*}
+*/
+SectionWriter.prototype.getStretchedCell = function (cellRef, rowIndex) {
+	if(typeof rowIndex === "number") {
+		let cell = this._table.getCell(cellRef, rowIndex);
+		let colSpan = +cell.getAttribute("colspan");
+		if(colSpan > 1) {
+			return cell;
+		}
+	}
+	return null;
+};
+/** @description Returns zero or negative value, if the cell is spanned over (i.e. occupied by the spanning cell). <br>
+* Negative value is distance from the spanning cell (i.e. -1 means one cell from the spanning cell and -2 means two cells from the spanning cell) <br>
+* Return one, if the cell has no span (normal cell). <br>
+* Return value greater than one, if the cell is spanning (getting expanded)
+* @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {number}
+*/
+SectionWriter.prototype.getCellRowSpan = function (colIndex, rowIndex) { return 1; };
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} rowSpan
+*/
+SectionWriter.prototype.setCellRowSpan = function (colIndex, rowIndex, rowSpan) { };
+/** @description Returns zero or negative value, if the cell is spanned over (i.e. occupied by the spanning cell). <br>
+* Negative value is distance from the spanning cell (i.e. -1 means one cell from the spanning cell and -2 means two cells from the spanning cell) <br>
+* Return one, if the cell has no span (normal cell). <br>
+* Return value greater than one, if the cell is spanning (getting expanded)
+* @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {number}
+*/
+SectionWriter.prototype.getCellColSpan = function (colIndex, rowIndex) { return 1; };
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} colSpan
+*/
+SectionWriter.prototype.setCellColSpan = function (colIndex, rowIndex, colSpan) { };
+/** @public
+*/
+SectionWriter.prototype.clearCellSpans = function () { };
+/** @public
+* @param {number} colIndex
+*/
+SectionWriter.prototype.clearColumnSpans = function (colIndex) { };
+
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+SectionWriter.prototype.isColumnActive = function (colIndex) {
+	return true;
+};
+
+/**
+* @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {Element}
+*/
+SectionWriter.prototype.getCellElement = function (colIndex, rowIndex) {
+	return this._table.getCell(colIndex, rowIndex);
+};
+
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+SectionWriter.prototype._startBindingSession = function (enabled) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+
+
+
+export default SectionWriter;
+export { SectionWriter };

package/lib/tr-grid-printer/es6/index.d.ts

@@ -0,0 +1 @@
+export * from "./GridPrinter";

package/lib/tr-grid-printer/es6/index.js

@@ -0,0 +1 @@
+export * from "./GridPrinter.js";

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

@@ -0,0 +1,56 @@
+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 {
+
+    type ColumnOptions = {
+        rangeBar?: RangeBarPlugin.RangeDefinition|null
+    };
+
+    type RangeDefinition = {
+        field?: string|null,
+        start?: number|null,
+        end?: number|null,
+        low?: string|null,
+        high?: string|null,
+        last?: string|null,
+        vwap?: string|null,
+        close?: string|null,
+        tick?: string|null
+    };
+
+    type Options = {
+        tooltip?: boolean|null
+    };
+
+}
+
+declare class RangeBarPlugin extends GridPlugin {
+
+    constructor();
+
+    public initialize(host: any, options?: any): void;
+
+    public unload(host: any): void;
+
+    public config(options?: any): void;
+
+    public getConfigObject(out_obj?: any): any;
+
+    public getColumnConfigObject(colIndex: number, out_obj?: any): any;
+
+    public getValue(colRef: number|string|null, rowRef: number|string|null): any;
+
+    public getTooltipText(colRef: number|string|null, rowRef: number|string|null): string;
+
+    public isRangeBarColumn(colIndex: number): boolean;
+
+}
+
+declare function colCount(colIndex: number): boolean;
+
+export default RangeBarPlugin;
+export { RangeBarPlugin, RangeBarPlugin as RangeBar, RangeBarPlugin as RangeBarExtension };