@refinitiv-ui/efx-grid 6.0.130 → 6.0.132
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/grid/index.js +1 -1
- package/lib/tr-grid-auto-tooltip/es6/AutoTooltip.js +69 -66
- package/lib/tr-grid-column-grouping/es6/ColumnGrouping.d.ts +5 -2
- package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js +37 -5
- package/lib/tr-grid-range-bar/es6/LEDGuage.d.ts +39 -0
- package/lib/tr-grid-range-bar/es6/LEDGuage.js +261 -0
- package/lib/tr-grid-range-bar/es6/RangeBar.d.ts +4 -3
- package/lib/tr-grid-range-bar/es6/RangeBar.js +309 -419
- package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts +2 -0
- package/lib/tr-grid-row-dragging/es6/RowDragging.js +161 -113
- package/lib/tr-grid-row-filtering/es6/RowFiltering.js +24 -2
- package/lib/tr-grid-row-selection/es6/RowSelection.js +37 -32
- package/lib/tr-grid-util/es6/jet/DataGenerator.js +6 -6
- package/lib/types/es6/RowDragging.d.ts +2 -0
- package/lib/versions.json +7 -7
- package/package.json +1 -1
@@ -1,8 +1,8 @@
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
1
|
import { Ext } from '../../tr-grid-util/es6/Ext.js';
|
3
2
|
import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
|
4
3
|
import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
|
5
4
|
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
5
|
+
import { LEDGuage } from "./LEDGuage.js";
|
6
6
|
|
7
7
|
/** @typedef {Object} RangeBarPlugin~ColumnOptions
|
8
8
|
* @description Extension column options that can be specified on each individual grid's column option:
|
@@ -29,67 +29,24 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
|
29
29
|
// TODO: promote "valueLabel" option, that provide the user can show valueLabel in ef-led-gauge (default is false)
|
30
30
|
// @property {boolean=} valueLabel=false If disabled, it will be show text label in top of ef-led-gaguge
|
31
31
|
|
32
|
-
/** Used for tranfrom value from raw value to normalize value (Percent value between -100 to 100)
|
33
|
-
* @private
|
34
|
-
* @param {number} low
|
35
|
-
* @param {number} current
|
36
|
-
* @param {number} high
|
37
|
-
* @return {number}
|
38
|
-
*/
|
39
|
-
var _normalizeValue = function _normalizeValue(low, current, high) {
|
40
|
-
return (low - current) * 200 / (low - high) - 100;
|
41
|
-
};
|
42
|
-
|
43
|
-
/** Used for convert the rangeBarOption and rowData into an object that has the properties of low, last, and high.
|
44
|
-
* @private
|
45
|
-
* @param {RangeBarPlugin~RangeDefinition} rBarOpt
|
46
|
-
* @param {Object} rowData
|
47
|
-
* @return {Object}
|
48
|
-
*/
|
49
|
-
var _getRangeBarData = function _getRangeBarData(rBarOpt, rowData) {
|
50
|
-
var low, high, last, close, vwap, tick;
|
51
|
-
if (rBarOpt.field) {
|
52
|
-
// Doesn't defined range bar data, use field instead
|
53
|
-
low = rBarOpt.start;
|
54
|
-
last = rowData[rBarOpt.field];
|
55
|
-
high = rBarOpt.end;
|
56
|
-
} else {
|
57
|
-
// Defined range bar data
|
58
|
-
low = rowData[rBarOpt.low];
|
59
|
-
last = rowData[rBarOpt.last];
|
60
|
-
high = rowData[rBarOpt.high];
|
61
|
-
close = rowData[rBarOpt.close];
|
62
|
-
vwap = rowData[rBarOpt.vwap];
|
63
|
-
tick = rowData[rBarOpt.tick];
|
64
|
-
}
|
65
|
-
return {
|
66
|
-
low: low,
|
67
|
-
last: last,
|
68
|
-
high: high,
|
69
|
-
close: close,
|
70
|
-
vwap: vwap,
|
71
|
-
tick: tick
|
72
|
-
};
|
73
|
-
};
|
74
|
-
|
75
32
|
/** @type {Array<string>}
|
76
33
|
* @constant
|
77
34
|
*/
|
78
|
-
var TICK_COLOR_MAPPING = ["var(--color-scheme-neutral)", "var(--color-scheme-tickup)", "var(--color-scheme-tickdown)"]; // ["level", "up", "down"]
|
79
35
|
|
80
36
|
/** @constructor
|
81
37
|
* @extends {GridPlugin}
|
82
38
|
*/
|
83
|
-
var RangeBarPlugin = function
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
39
|
+
var RangeBarPlugin = function () {
|
40
|
+
this._onPostSectionBinding = this._onPostSectionBinding.bind(this);
|
41
|
+
this._onColumnAdded = this._onColumnAdded.bind(this);
|
42
|
+
this._onColumnRemoved = this._onColumnRemoved.bind(this);
|
43
|
+
this._renderer = this._renderer.bind(this);
|
44
|
+
this._onThemeLoaded = this._onThemeLoaded.bind(this);
|
45
|
+
this._hosts = [];
|
90
46
|
};
|
91
47
|
Ext.inherits(RangeBarPlugin, GridPlugin);
|
92
48
|
|
49
|
+
|
93
50
|
/** @type {boolean}
|
94
51
|
* @private
|
95
52
|
*/
|
@@ -117,96 +74,106 @@ RangeBarPlugin.prototype.valueLabel = false;
|
|
117
74
|
/** @private
|
118
75
|
* @type {string}
|
119
76
|
*/
|
120
|
-
RangeBarPlugin._styles = prettifyCss([
|
121
|
-
|
77
|
+
RangeBarPlugin._styles = prettifyCss([
|
78
|
+
"ef-led-gauge", [
|
79
|
+
"padding: 0;",
|
80
|
+
"height: 16px;",
|
81
|
+
"--led-width: 3px;",
|
82
|
+
"--led-spacing: 2px;",
|
83
|
+
"overflow: visible;" // TODO: currently, we have to set this overwrite hidden from elf component, however currently show text value label didn't work with grid default row
|
84
|
+
]
|
85
|
+
]);
|
122
86
|
/** @override
|
123
87
|
* @return {string}
|
124
88
|
*/
|
125
89
|
RangeBarPlugin.prototype.getName = function () {
|
126
|
-
|
90
|
+
return "RangeBarPlugin"; // Readonly
|
127
91
|
};
|
128
92
|
/** @public
|
129
93
|
* @param {Object} host core grid object
|
130
94
|
* @param {Object=} options
|
131
95
|
*/
|
132
96
|
RangeBarPlugin.prototype.initialize = function (host, options) {
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
97
|
+
if (this._hosts.indexOf(host) >= 0) { return; }
|
98
|
+
this._hosts.push(host);
|
99
|
+
|
100
|
+
this.config(options);
|
101
|
+
|
102
|
+
host.listen("columnAdded", this._onColumnAdded);
|
103
|
+
host.listen("columnRemoved", this._onColumnRemoved);
|
104
|
+
host.listen("postSectionDataBinding", this._onPostSectionBinding);
|
105
|
+
|
106
|
+
RangeBarPlugin._applyThemeColor(host);
|
107
|
+
if (!this._themeLoading) {
|
108
|
+
this._themeLoading = true;
|
109
|
+
ElfUtil.getThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded);
|
110
|
+
}
|
146
111
|
};
|
147
112
|
/** @override
|
148
113
|
* @ignore
|
149
114
|
*/
|
150
115
|
RangeBarPlugin.prototype._afterInit = function () {
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
116
|
+
if (!ElfUtil.hasComponent("ef-led-gauge")) {
|
117
|
+
console.log("The LED Gauge component is required for the range bar extension. Please make sure to import both the LED Gauge component and its theme.");
|
118
|
+
RangeBarPlugin._LEDGuage = false;
|
119
|
+
}
|
120
|
+
let colCount = this.getColumnCount();
|
121
|
+
for (let i = 0; i < colCount; ++i) {
|
122
|
+
this._setColumnRenderer(i);
|
123
|
+
}
|
159
124
|
};
|
160
125
|
/** @public
|
161
126
|
* @param {Object} host core grid object
|
162
127
|
*/
|
163
128
|
RangeBarPlugin.prototype.unload = function (host) {
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
129
|
+
let at = this._hosts.indexOf(host);
|
130
|
+
if (at < 0) { return; }
|
131
|
+
this._hosts.splice(at, 1);
|
132
|
+
|
133
|
+
host.unlisten("columnAdded", this._onColumnAdded);
|
134
|
+
host.unlisten("columnRemoved", this._onColumnRemoved);
|
135
|
+
host.unlisten("postSectionDataBinding", this._onPostSectionBinding);
|
136
|
+
|
137
|
+
this._dispose();
|
173
138
|
};
|
174
139
|
/** @public
|
175
140
|
* @param {Object=} options
|
176
141
|
*/
|
177
142
|
RangeBarPlugin.prototype.config = function (options) {
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
143
|
+
if (!options) { return; }
|
144
|
+
|
145
|
+
let extOptions = options["rangeBar"];
|
146
|
+
if (typeof extOptions === "object") {
|
147
|
+
|
148
|
+
let val = extOptions["tooltip"];
|
149
|
+
if (val != null) {
|
150
|
+
this._tooltip = val;
|
151
|
+
LEDGuage.tooltip = val;
|
152
|
+
}
|
153
|
+
|
154
|
+
val = extOptions["valueLabel"];
|
155
|
+
if (val != null) {
|
156
|
+
this.valueLabel = val;
|
157
|
+
}
|
158
|
+
|
159
|
+
}
|
160
|
+
|
161
|
+
let columns = options["columns"];
|
162
|
+
if (!columns) { return; }
|
163
|
+
let len = columns.length;
|
164
|
+
for (let i = 0; i < len; ++i) {
|
165
|
+
this._setColumnRangeBar(i, columns[i]);
|
166
|
+
}
|
200
167
|
};
|
201
168
|
|
202
169
|
/** @private
|
203
170
|
* @param {Object} grid core grid object
|
204
171
|
*/
|
205
172
|
RangeBarPlugin._applyThemeColor = function (grid) {
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
173
|
+
if (!grid._rangeBarStyles) {
|
174
|
+
grid._rangeBarStyles = true;
|
175
|
+
injectCss(RangeBarPlugin._styles, grid.getElement());
|
176
|
+
}
|
210
177
|
};
|
211
178
|
|
212
179
|
/** Get a current state of grid and extension config
|
@@ -215,33 +182,40 @@ RangeBarPlugin._applyThemeColor = function (grid) {
|
|
215
182
|
* @returns {!Object}
|
216
183
|
*/
|
217
184
|
RangeBarPlugin.prototype.getConfigObject = function (out_obj) {
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
185
|
+
let obj = out_obj || {};
|
186
|
+
|
187
|
+
let columns = obj.columns;
|
188
|
+
if (!columns) {
|
189
|
+
columns = obj.columns = [];
|
190
|
+
}
|
191
|
+
|
192
|
+
let len = this.getColumnCount();
|
193
|
+
for (let i = 0; i < len; ++i) {
|
194
|
+
if (!columns[i]) {
|
195
|
+
columns[i] = {};
|
196
|
+
}
|
197
|
+
this.getColumnConfigObject(i, columns[i]);
|
198
|
+
}
|
199
|
+
|
200
|
+
let extOptions = obj.rangeBar;
|
201
|
+
if (!extOptions) {
|
202
|
+
extOptions = obj.rangeBar = {};
|
203
|
+
}
|
204
|
+
|
205
|
+
let val = this._tooltip;
|
206
|
+
if (val != true) {
|
207
|
+
extOptions.tooltip = val;
|
208
|
+
}
|
209
|
+
|
210
|
+
val = this.valueLabel;
|
211
|
+
if (val != false) {
|
212
|
+
extOptions.valueLabel = val;
|
213
|
+
}
|
214
|
+
|
215
|
+
return obj;
|
243
216
|
};
|
244
217
|
|
218
|
+
|
245
219
|
/** Get a column percent bar options from column index
|
246
220
|
* @public
|
247
221
|
* @param {number} colIndex
|
@@ -249,74 +223,79 @@ RangeBarPlugin.prototype.getConfigObject = function (out_obj) {
|
|
249
223
|
* @returns {!Object}
|
250
224
|
*/
|
251
225
|
RangeBarPlugin.prototype.getColumnConfigObject = function (colIndex, out_obj) {
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
226
|
+
if (!out_obj) {
|
227
|
+
out_obj = {};
|
228
|
+
}
|
229
|
+
|
230
|
+
let opt = this._getColumnRangeBarOptions(colIndex);
|
231
|
+
if (!opt) {
|
232
|
+
return out_obj;
|
233
|
+
}
|
234
|
+
let rangeBar = out_obj.rangeBar = {};
|
235
|
+
|
236
|
+
if (opt.field != null) {
|
237
|
+
rangeBar.field = opt.field;
|
238
|
+
}
|
239
|
+
if (opt.start != null) {
|
240
|
+
rangeBar.start = opt.start;
|
241
|
+
}
|
242
|
+
if (opt.end != null) {
|
243
|
+
rangeBar.end = opt.end;
|
244
|
+
}
|
245
|
+
if (opt.low != null) {
|
246
|
+
rangeBar.low = opt.low;
|
247
|
+
}
|
248
|
+
|
249
|
+
if (opt.last != null) {
|
250
|
+
rangeBar.last = opt.last;
|
251
|
+
}
|
252
|
+
|
253
|
+
if (opt.high != null) {
|
254
|
+
rangeBar.high = opt.high;
|
255
|
+
}
|
256
|
+
|
257
|
+
if (opt.close != null) {
|
258
|
+
rangeBar.close = opt.close;
|
259
|
+
}
|
260
|
+
|
261
|
+
if (opt.vwap != null) {
|
262
|
+
rangeBar.vwap = opt.vwap;
|
263
|
+
}
|
264
|
+
|
265
|
+
if (opt.tick != null) {
|
266
|
+
rangeBar.tick = opt.tick;
|
267
|
+
}
|
268
|
+
|
269
|
+
return out_obj;
|
288
270
|
};
|
289
271
|
|
272
|
+
|
290
273
|
/** @public
|
291
274
|
* @param {number|string} colRef
|
292
275
|
* @param {number|string} rowRef
|
293
276
|
* @return {Object}
|
294
277
|
*/
|
295
278
|
RangeBarPlugin.prototype.getValue = function (colRef, rowRef) {
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
if (!rowData) {
|
317
|
-
return null;
|
318
|
-
}
|
319
|
-
return _getRangeBarData(rBarOpt, rowData);
|
279
|
+
colRef = this.getColumnIndex(colRef);
|
280
|
+
if (colRef < 0) { return null; }
|
281
|
+
|
282
|
+
let rBarOpt = this._getColumnRangeBarOptions(colRef);
|
283
|
+
if (!rBarOpt) { return null; }
|
284
|
+
|
285
|
+
let host = this._hosts[0];
|
286
|
+
let dv = host.getDataSource();
|
287
|
+
if (!dv) { return null; }
|
288
|
+
|
289
|
+
if (typeof rowRef === "string") {
|
290
|
+
rowRef = dv.getRowIndex(rowRef);
|
291
|
+
}
|
292
|
+
|
293
|
+
if (rowRef == null || rowRef < 0) { return null; }
|
294
|
+
|
295
|
+
let rowData = this._getRow(dv, rowRef);
|
296
|
+
if (!rowData) { return null; }
|
297
|
+
|
298
|
+
return LEDGuage.getRangeBarData(rBarOpt, rowData);
|
320
299
|
};
|
321
300
|
|
322
301
|
/** @public
|
@@ -325,67 +304,34 @@ RangeBarPlugin.prototype.getValue = function (colRef, rowRef) {
|
|
325
304
|
* @return {string} text tooltip of cell, otherwise empty string ""
|
326
305
|
*/
|
327
306
|
RangeBarPlugin.prototype.getTooltipText = function (colRef, rowRef) {
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
}
|
356
|
-
return "";
|
357
|
-
};
|
307
|
+
colRef = this.getColumnIndex(colRef);
|
308
|
+
if (colRef < 0) { return ""; }
|
309
|
+
|
310
|
+
let rBarOpt = this._getColumnRangeBarOptions(colRef);
|
311
|
+
if (!rBarOpt) { return ""; }
|
312
|
+
|
313
|
+
let host = this._hosts[0];
|
314
|
+
let dv = host.getDataSource();
|
315
|
+
if (!dv) { return ""; }
|
316
|
+
|
317
|
+
if (typeof rowRef === "string") {
|
318
|
+
rowRef = dv.getRowIndex(rowRef);
|
319
|
+
}
|
320
|
+
|
321
|
+
if (rowRef < 0) { return ""; }
|
322
|
+
|
323
|
+
let rowData = this._getRow(dv, rowRef);
|
324
|
+
if (!rowData) { return ""; }
|
325
|
+
|
326
|
+
let rangeBarValues = LEDGuage.getRangeBarData(rBarOpt, rowData);
|
327
|
+
|
328
|
+
if (this._tooltip) {
|
329
|
+
let textTooltip = LEDGuage.calculateTooltip(rBarOpt, rangeBarValues);
|
330
|
+
return textTooltip;
|
331
|
+
}
|
332
|
+
|
333
|
+
return "";
|
358
334
|
|
359
|
-
/** @private
|
360
|
-
* @param {RangeBarPlugin~RangeDefinition} rBarOpt range
|
361
|
-
* @param {!Object} rangeBarValues
|
362
|
-
* @return {string} tooltip string value
|
363
|
-
*/
|
364
|
-
RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, rangeBarValues) {
|
365
|
-
var low = rangeBarValues.low;
|
366
|
-
var last = rangeBarValues.last;
|
367
|
-
var high = rangeBarValues.high;
|
368
|
-
var vwap = rangeBarValues.vwap;
|
369
|
-
var close = rangeBarValues.close;
|
370
|
-
var priceGraph = rBarOpt.priceGraph;
|
371
|
-
var textTooltip;
|
372
|
-
if (rBarOpt["field"]) {
|
373
|
-
// doesn't provide low,last,high case
|
374
|
-
textTooltip = last != null ? last : '--';
|
375
|
-
} else {
|
376
|
-
// provide low,last,high case
|
377
|
-
var lowValue = low != null ? low : '--';
|
378
|
-
var lastValue = last != null ? last : '--';
|
379
|
-
var highValue = high != null ? high : '--';
|
380
|
-
if (priceGraph) {
|
381
|
-
var vwapValue = vwap != null ? vwap : '--';
|
382
|
-
var closeValue = close != null ? close : '--';
|
383
|
-
textTooltip = 'Low: ' + lowValue + " " + 'Last: ' + lastValue + " " + 'High: ' + highValue + " " + 'VWAP: ' + vwapValue + " " + 'Close: ' + closeValue + " ";
|
384
|
-
} else {
|
385
|
-
textTooltip = 'Low: ' + lowValue + " " + 'Last: ' + lastValue + " " + 'High: ' + highValue;
|
386
|
-
}
|
387
|
-
}
|
388
|
-
return textTooltip;
|
389
335
|
};
|
390
336
|
|
391
337
|
/** @private
|
@@ -413,168 +359,112 @@ RangeBarPlugin.prototype._calculateTooltip = function (rBarOpt, rangeBarValues)
|
|
413
359
|
* };
|
414
360
|
*/
|
415
361
|
RangeBarPlugin.prototype._setColumnRangeBar = function (colIndex, columnOptions) {
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
}
|
362
|
+
let rDef = columnOptions["rangeBar"];
|
363
|
+
if (rDef) {
|
364
|
+
if (rDef["vwap"] || rDef["close"] || rDef["tick"]) {
|
365
|
+
rDef["priceGraph"] = true; // activate price graph mode
|
366
|
+
}
|
367
|
+
let colData = this._newColumnData(colIndex);
|
368
|
+
if ((rDef === true) || (typeof rDef["field"] === "string")) {
|
369
|
+
// The start and end properties were overwritten by the extension, so the value will be returned from the get configuration even if the user does not set it (minor issue).
|
370
|
+
rDef = {
|
371
|
+
"field": rDef["field"] || columnOptions["field"],
|
372
|
+
"start": rDef["start"] || this._start,
|
373
|
+
"end": typeof rDef["end"] == "number" ? rDef["end"] : this._end
|
374
|
+
};
|
375
|
+
}
|
376
|
+
colData["rangeBar"] = rDef;
|
377
|
+
this._setColumnRenderer(colIndex);
|
378
|
+
}
|
434
379
|
};
|
435
380
|
/** @private
|
436
381
|
* @param {number} colIndex
|
437
382
|
*/
|
438
383
|
RangeBarPlugin.prototype._setColumnRenderer = function (colIndex) {
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
384
|
+
let rangeBarOption = this._getColumnRangeBarOptions(colIndex);
|
385
|
+
if (rangeBarOption && this._initializedGrid) {
|
386
|
+
if (this._realTimeGrid) {
|
387
|
+
this._realTimeGrid.setColumnRenderer(colIndex, this._renderer);
|
388
|
+
} else {
|
389
|
+
this._hosts[0].setColumnDataBindingHandler(colIndex, this._renderer);
|
390
|
+
}
|
391
|
+
}
|
447
392
|
};
|
448
393
|
|
449
394
|
/** @private */
|
450
395
|
RangeBarPlugin.prototype._onThemeLoaded = function () {
|
451
|
-
|
452
|
-
|
453
|
-
|
396
|
+
for (let i = this._hosts.length; --i >= 0;) {
|
397
|
+
this._hosts[i].requestRowRefresh();
|
398
|
+
}
|
454
399
|
};
|
455
400
|
|
456
401
|
/** @private
|
457
402
|
* @param {Object} e
|
458
403
|
*/
|
459
404
|
RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
// Clear the current range for apply a new one.
|
525
|
-
rangeBar.range.length = 0;
|
526
|
-
if (priceGraph) {
|
527
|
-
var close = rangeBarData.close;
|
528
|
-
var vwap = rangeBarData.vwap;
|
529
|
-
var vwapNormalize = _normalizeValue(low, vwap, high);
|
530
|
-
var rangeColor;
|
531
|
-
if (close > last) {
|
532
|
-
rangeColor = "var(--color-scheme-tickdown)";
|
533
|
-
} else {
|
534
|
-
rangeColor = "var(--color-scheme-tickup)";
|
535
|
-
}
|
536
|
-
var leftSegmentValue = _normalizeValue(low, close, high);
|
537
|
-
var rangeValue;
|
538
|
-
if (lastNormalize < leftSegmentValue) {
|
539
|
-
rangeValue = [lastNormalize, leftSegmentValue];
|
540
|
-
} else {
|
541
|
-
rangeValue = [leftSegmentValue, lastNormalize];
|
542
|
-
}
|
543
|
-
rangeBar.range = rangeValue;
|
544
|
-
rangeBar.topValue = lastNormalize;
|
545
|
-
rangeBar.bottomValue = vwapNormalize;
|
546
|
-
rangeBar.style.setProperty("--range-color", rangeColor);
|
547
|
-
rangeBar.style.setProperty("--bottom-selected-color", "var(--neutral-color)");
|
548
|
-
rangeBar.style.setProperty("--top-selected-color", TICK_COLOR_MAPPING[rangeBarData.tick]);
|
549
|
-
rangeBar.style.setProperty("--clash-color", "var(--color-scheme-secondary)");
|
550
|
-
} else {
|
551
|
-
// applied range when the last value out of range, by set new low/high with last value
|
552
|
-
if (last < low) {
|
553
|
-
var lowNormalize = _normalizeValue(last, low, high);
|
554
|
-
rangeBar.range = [lastNormalize, lowNormalize];
|
555
|
-
} else if (last > high) {
|
556
|
-
var highNormalize = _normalizeValue(low, high, last);
|
557
|
-
rangeBar.range = [highNormalize, lastNormalize];
|
558
|
-
}
|
559
|
-
if (low === high) {
|
560
|
-
// low equal high case (avoid normalize to infinity)
|
561
|
-
rangeBar.range = [-100, 100];
|
562
|
-
lastNormalize = last < low ? -100 : 100; // topValue will be left or right
|
563
|
-
}
|
564
|
-
|
565
|
-
if (last == null) {
|
566
|
-
// only last is empty (low and high should have value)
|
567
|
-
rangeBar.range = [];
|
568
|
-
lastNormalize = null;
|
569
|
-
}
|
570
|
-
rangeBar.topValue = lastNormalize;
|
571
|
-
if (this.valueLabel) {
|
572
|
-
rangeBar.topLabel = last;
|
573
|
-
}
|
574
|
-
}
|
575
|
-
cell.setContent(content);
|
576
|
-
}
|
577
|
-
}
|
405
|
+
if (!RangeBarPlugin._LEDGuage) {
|
406
|
+
return;
|
407
|
+
}
|
408
|
+
let section = e["section"];
|
409
|
+
let dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
|
410
|
+
let colCount = section.getColumnCount();
|
411
|
+
let fromR = /** @type{number} */(e["fromRowIndex"]);
|
412
|
+
let toR = /** @type{number} */(e["toRowIndex"]);
|
413
|
+
|
414
|
+
for (let c = 0; c < colCount; ++c) {
|
415
|
+
let rBarOpt = this._getColumnRangeBarOptions(c);
|
416
|
+
if (!rBarOpt) { continue; }
|
417
|
+
let priceGraph = rBarOpt["priceGraph"];
|
418
|
+
|
419
|
+
for (let r = fromR; r < toR; ++r) {
|
420
|
+
let cell = section.getCell(c, r, false);
|
421
|
+
if (!cell) { continue; }
|
422
|
+
|
423
|
+
let rowData = this._getRowData(dataRows[r]);
|
424
|
+
if (!rowData) {
|
425
|
+
continue;
|
426
|
+
}
|
427
|
+
|
428
|
+
let content = cell.getContent();
|
429
|
+
let ledGuage = content;
|
430
|
+
if(!content || !content._ledGuage) {
|
431
|
+
content = new LEDGuage();
|
432
|
+
ledGuage = content._ledGuage = content;
|
433
|
+
}
|
434
|
+
let rangeBarValue = LEDGuage.getRangeBarData(rBarOpt, rowData);
|
435
|
+
ledGuage.setRangeValue(rangeBarValue);
|
436
|
+
if(this._tooltip) {
|
437
|
+
cell.setTooltip(LEDGuage.calculateTooltip(rBarOpt, rangeBarValue));
|
438
|
+
}
|
439
|
+
if(priceGraph != null) {
|
440
|
+
ledGuage.setPriceGraph(priceGraph);
|
441
|
+
}
|
442
|
+
let elContent;
|
443
|
+
if(ledGuage.isNoRangeValue()) {
|
444
|
+
if(this._realTimeGrid && this._realTimeGrid.getRic && this._realTimeGrid.getRic(r)){ // Have prevent update only extension
|
445
|
+
elContent = LEDGuage.createElementWithText("N/A");
|
446
|
+
} else {
|
447
|
+
elContent = LEDGuage.createElementWithText();
|
448
|
+
}
|
449
|
+
cell.setContent(elContent);
|
450
|
+
continue;
|
451
|
+
}
|
452
|
+
|
453
|
+
if(ledGuage.isInvalidRangeValue()) { // invald low or high
|
454
|
+
cell.setContent(LEDGuage.createElementWithText("N/A"));
|
455
|
+
continue;
|
456
|
+
}
|
457
|
+
|
458
|
+
if(ledGuage.isHighLowEqual()) {
|
459
|
+
// all value equal, highlight all bar and value in the middle case
|
460
|
+
cell.setContent(ledGuage.getEqualRangeElement());
|
461
|
+
continue;
|
462
|
+
}
|
463
|
+
|
464
|
+
elContent = ledGuage.getLEDGuageElement();
|
465
|
+
cell.setContent(elContent);
|
466
|
+
}
|
467
|
+
}
|
578
468
|
};
|
579
469
|
|
580
470
|
/** @public
|
@@ -582,43 +472,43 @@ RangeBarPlugin.prototype._onPostSectionBinding = function (e) {
|
|
582
472
|
* @return {boolean}
|
583
473
|
*/
|
584
474
|
RangeBarPlugin.prototype.isRangeBarColumn = function (colIndex) {
|
585
|
-
|
475
|
+
return this._getColumnOption(colIndex, "rangeBar") ? true : false;
|
586
476
|
};
|
587
477
|
|
588
478
|
/** @private
|
589
479
|
* @param {Object} e
|
590
480
|
*/
|
591
|
-
RangeBarPlugin.prototype._renderer = function (e) {};
|
481
|
+
RangeBarPlugin.prototype._renderer = function (e) { };
|
592
482
|
|
593
483
|
/** @private
|
594
484
|
* @param {number} colIndex
|
595
485
|
* @return {Object}
|
596
486
|
*/
|
597
487
|
RangeBarPlugin.prototype._getColumnRangeBarOptions = function (colIndex) {
|
598
|
-
|
488
|
+
return this._getColumnOption(colIndex, "rangeBar");
|
599
489
|
};
|
600
490
|
|
601
491
|
/** @private
|
602
492
|
* @param {Object} e
|
603
493
|
*/
|
604
494
|
RangeBarPlugin.prototype._onColumnAdded = function (e) {
|
605
|
-
|
606
|
-
|
607
|
-
|
495
|
+
if (e["context"]) {
|
496
|
+
this._setColumnRangeBar(e["colIndex"], e["context"]);
|
497
|
+
}
|
608
498
|
};
|
609
499
|
/** @private
|
610
500
|
* @param {Object} e
|
611
501
|
*/
|
612
502
|
RangeBarPlugin.prototype._onColumnRemoved = function (e) {
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
}
|
621
|
-
colData["rangeBar"] = null;
|
503
|
+
let colData = /** @type{Object} */(e.columnData);
|
504
|
+
if (!colData) { return; }
|
505
|
+
|
506
|
+
let rDef = colData["rangeBar"];
|
507
|
+
if (!rDef) { return; }
|
508
|
+
|
509
|
+
colData["rangeBar"] = null;
|
622
510
|
};
|
511
|
+
|
512
|
+
|
623
513
|
export default RangeBarPlugin;
|
624
|
-
export { RangeBarPlugin, RangeBarPlugin as RangeBar, RangeBarPlugin as RangeBarExtension };
|
514
|
+
export { RangeBarPlugin, RangeBarPlugin as RangeBar, RangeBarPlugin as RangeBarExtension };
|