@refinitiv-ui/efx-grid 6.0.109 → 6.0.111
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/core/dist/core.js +61 -1
- package/lib/core/dist/core.min.js +1 -1
- package/lib/core/es6/grid/Core.d.ts +4 -0
- package/lib/core/es6/grid/Core.js +61 -1
- package/lib/grid/index.js +1 -1
- package/lib/rt-grid/dist/rt-grid.js +100 -27
- package/lib/rt-grid/dist/rt-grid.min.js +1 -1
- package/lib/rt-grid/es6/ColumnDefinition.d.ts +6 -1
- package/lib/rt-grid/es6/ColumnDefinition.js +19 -0
- package/lib/rt-grid/es6/Grid.d.ts +4 -0
- package/lib/rt-grid/es6/Grid.js +21 -0
- package/lib/tr-grid-filter-input/es6/FilterInput.js +26 -19
- package/lib/tr-grid-util/es6/CellPainter.d.ts +1 -1
- package/lib/tr-grid-util/es6/CellPainter.js +15 -65
- package/lib/tr-grid-util/es6/Color.d.ts +40 -0
- package/lib/tr-grid-util/es6/Color.js +210 -0
- package/lib/tr-grid-util/es6/Util.d.ts +1 -3
- package/lib/tr-grid-util/es6/Util.js +2 -37
- package/lib/types/es6/Core/grid/Core.d.ts +4 -0
- package/lib/types/es6/RealtimeGrid/ColumnDefinition.d.ts +6 -1
- package/lib/types/es6/RealtimeGrid/Grid.d.ts +4 -0
- package/lib/versions.json +2 -2
- package/package.json +2 -1
@@ -44,7 +44,8 @@ declare namespace ColumnDefinition {
|
|
44
44
|
leftPinned?: boolean|null,
|
45
45
|
rightPinned?: boolean|null,
|
46
46
|
info?: any,
|
47
|
-
focusable?: boolean|null
|
47
|
+
focusable?: boolean|null,
|
48
|
+
backgroundColor?: string|null
|
48
49
|
};
|
49
50
|
|
50
51
|
}
|
@@ -161,6 +162,10 @@ declare class ColumnDefinition {
|
|
161
162
|
|
162
163
|
public isFocusable(): boolean;
|
163
164
|
|
165
|
+
public getBackgroundColor(): string;
|
166
|
+
|
167
|
+
public setBackgroundColor(color: string): void;
|
168
|
+
|
164
169
|
}
|
165
170
|
|
166
171
|
declare const COL_DEF: string;
|
@@ -51,6 +51,7 @@ import Engine from "../../tr-grid-util/es6/formula/Engine.js";
|
|
51
51
|
* @property {boolean=} rightPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the right side
|
52
52
|
* @property {Object=} info=null For storing any additional information to the column
|
53
53
|
* @property {boolean=} focusable=false If enabled, the column will be used to find focusable element when pressing tab key
|
54
|
+
* @property {string=} backgroundColor CSS color value
|
54
55
|
*/
|
55
56
|
|
56
57
|
/** mapping of field type to javascript type
|
@@ -1169,6 +1170,24 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
|
|
1169
1170
|
ColumnDefinition.prototype.isFocusable = function() {
|
1170
1171
|
return this._focusable;
|
1171
1172
|
};
|
1173
|
+
/** @public
|
1174
|
+
* @return {string}
|
1175
|
+
*/
|
1176
|
+
ColumnDefinition.prototype.getBackgroundColor = function() {
|
1177
|
+
let core = this._eventArg["core"];
|
1178
|
+
let grid = this._eventArg["grid"];
|
1179
|
+
let colIndex = grid.getColumnIndex(this);
|
1180
|
+
return core.getColumnBackgroundColor(colIndex);
|
1181
|
+
};
|
1182
|
+
/** @public
|
1183
|
+
* @param {string} color
|
1184
|
+
*/
|
1185
|
+
ColumnDefinition.prototype.setBackgroundColor = function(color) {
|
1186
|
+
let core = this._eventArg["core"];
|
1187
|
+
let grid = this._eventArg["grid"];
|
1188
|
+
let colIndex = grid.getColumnIndex(this);
|
1189
|
+
core.setColumnBackgroundColor(colIndex, color);
|
1190
|
+
};
|
1172
1191
|
|
1173
1192
|
export {ColumnDefinition, COL_DEF};
|
1174
1193
|
export default ColumnDefinition;
|
@@ -174,6 +174,10 @@ declare class Grid extends EventDispatcher {
|
|
174
174
|
|
175
175
|
public setColumnName(colIndex: number, str: string): void;
|
176
176
|
|
177
|
+
public getColumnBackgroundColor(colRef: Grid.ColumnReference|null): string;
|
178
|
+
|
179
|
+
public setColumnBackgroundColor(colRef: Grid.ColumnReference|null, color: string): void;
|
180
|
+
|
177
181
|
public setColumnRenderer(colRef: Grid.ColumnReference|null, func?: ((...params: any[]) => any)|null): void;
|
178
182
|
|
179
183
|
public activateColumnRenderer(colRef: Grid.ColumnReference|null, id?: string|null, func?: ((...params: any[]) => any)|null): void;
|
package/lib/rt-grid/es6/Grid.js
CHANGED
@@ -2170,6 +2170,27 @@ Grid.prototype.setColumnName = function(colIndex, str) {
|
|
2170
2170
|
};
|
2171
2171
|
/** @public
|
2172
2172
|
* @param {Grid~ColumnReference} colRef
|
2173
|
+
* @return {string}
|
2174
|
+
*/
|
2175
|
+
Grid.prototype.getColumnBackgroundColor = function(colRef) {
|
2176
|
+
let colDef = this.getColumnDefinition(colRef);
|
2177
|
+
if(colDef) {
|
2178
|
+
return colDef.getBackgroundColor();
|
2179
|
+
}
|
2180
|
+
return "";
|
2181
|
+
};
|
2182
|
+
/** @public
|
2183
|
+
* @param {Grid~ColumnReference} colRef
|
2184
|
+
* @param {string} color
|
2185
|
+
*/
|
2186
|
+
Grid.prototype.setColumnBackgroundColor = function(colRef, color) {
|
2187
|
+
let colDef = this.getColumnDefinition(colRef);
|
2188
|
+
if(colDef) {
|
2189
|
+
colDef.setBackgroundColor(color);
|
2190
|
+
}
|
2191
|
+
};
|
2192
|
+
/** @public
|
2193
|
+
* @param {Grid~ColumnReference} colRef
|
2173
2194
|
* @param {Function=} func
|
2174
2195
|
*/
|
2175
2196
|
Grid.prototype.setColumnRenderer = function(colRef, func) {
|
@@ -47,11 +47,24 @@ import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
|
|
47
47
|
* @property {Object} section Section(ILayoutGrid) contains all of the filter inputs
|
48
48
|
*/
|
49
49
|
|
50
|
+
/** @private
|
51
|
+
* @param {string} str
|
52
|
+
* @return {string}
|
53
|
+
*/
|
54
|
+
|
55
|
+
function convertToLowerCase(str) {
|
56
|
+
if (typeof str === "string") {
|
57
|
+
return str.toLowerCase();
|
58
|
+
}
|
59
|
+
|
60
|
+
return "";
|
61
|
+
}
|
50
62
|
/** @constructor
|
51
63
|
* @extends {GridPlugin}
|
52
64
|
* @param {FilterInputPlugin~Options=} options
|
53
65
|
*/
|
54
66
|
|
67
|
+
|
55
68
|
var FilterInputPlugin = function FilterInputPlugin(options) {
|
56
69
|
this._onInputChanged = this._onInputChanged.bind(this);
|
57
70
|
this._onOpenedChanged = this._onOpenedChanged.bind(this);
|
@@ -465,14 +478,14 @@ FilterInputPlugin.prototype._createColumnInputs = function (section, host) {
|
|
465
478
|
var defaultValue = colOpt.defaultValue;
|
466
479
|
|
467
480
|
if (defaultValue) {
|
468
|
-
var
|
481
|
+
var elemType = convertToLowerCase(colOpt.type);
|
469
482
|
|
470
|
-
if (
|
483
|
+
if (elemType === "date") {
|
471
484
|
var dateObj = ElfDate.from(defaultValue);
|
472
485
|
defaultValue = dateObj ? dateObj.toDateString().substr(4) : "";
|
473
486
|
}
|
474
487
|
|
475
|
-
if (
|
488
|
+
if (elemType === "multiselect") {
|
476
489
|
var textMap = FilterInputPlugin._createMapObject(defaultValue);
|
477
490
|
|
478
491
|
this.filterColumn(c, "", textMap);
|
@@ -500,12 +513,7 @@ FilterInputPlugin._uiMap = {
|
|
500
513
|
*/
|
501
514
|
|
502
515
|
FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
|
503
|
-
var elemType = colOpt.type;
|
504
|
-
|
505
|
-
if (elemType) {
|
506
|
-
elemType = elemType.toLowerCase();
|
507
|
-
}
|
508
|
-
|
516
|
+
var elemType = convertToLowerCase(colOpt.type);
|
509
517
|
var defaultValue = colOpt.defaultValue;
|
510
518
|
var elemTrigger = colOpt.trigger != null ? colOpt.trigger : this._inputTrigger;
|
511
519
|
var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
|
@@ -663,11 +671,10 @@ FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef)
|
|
663
671
|
var option = this._newExtColumnOption(colIndex);
|
664
672
|
|
665
673
|
if (filterOption) {
|
666
|
-
var
|
674
|
+
var elemType = convertToLowerCase(filterOption["type"]);
|
667
675
|
|
668
|
-
if (
|
669
|
-
type =
|
670
|
-
option["type"] = type;
|
676
|
+
if (elemType) {
|
677
|
+
option["type"] = elemType;
|
671
678
|
}
|
672
679
|
|
673
680
|
var defaultLogic = filterOption["filterLogic"] || filterOption["defaultLogic"];
|
@@ -680,7 +687,7 @@ FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef)
|
|
680
687
|
}
|
681
688
|
}
|
682
689
|
|
683
|
-
if (
|
690
|
+
if (elemType === "multiselect" && option._comparingLogic === FilterInputPlugin._containingFilter) {
|
684
691
|
option._comparingLogic = FilterInputPlugin._multiSelectionFilter;
|
685
692
|
}
|
686
693
|
|
@@ -700,7 +707,7 @@ FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef)
|
|
700
707
|
|
701
708
|
if (Array.isArray(entries)) {
|
702
709
|
// Add Clear filter option
|
703
|
-
if (
|
710
|
+
if (elemType === "select") {
|
704
711
|
entries.push({
|
705
712
|
label: 'No Filter',
|
706
713
|
value: 'No Filter'
|
@@ -851,15 +858,15 @@ FilterInputPlugin.prototype.setInputValue = function (colIndex, value) {
|
|
851
858
|
|
852
859
|
var colOpt = this._getExtColumnOption(colIndex);
|
853
860
|
|
854
|
-
var
|
861
|
+
var elemType = convertToLowerCase(colOpt.type);
|
855
862
|
var dateValue;
|
856
863
|
|
857
|
-
if (
|
864
|
+
if (elemType === "date") {
|
858
865
|
var dateObj = ElfDate.from(value);
|
859
866
|
dateValue = dateObj ? dateObj.toDateString().substr(4) : "";
|
860
867
|
}
|
861
868
|
|
862
|
-
if (
|
869
|
+
if (elemType === "multiselect") {
|
863
870
|
inputElem.values = value;
|
864
871
|
|
865
872
|
var textMap = FilterInputPlugin._createMapObject(value);
|
@@ -867,7 +874,7 @@ FilterInputPlugin.prototype.setInputValue = function (colIndex, value) {
|
|
867
874
|
this.filterColumn(colIndex, "", textMap);
|
868
875
|
} else {
|
869
876
|
inputElem.value = value;
|
870
|
-
this.filterColumn(colIndex,
|
877
|
+
this.filterColumn(colIndex, elemType === "date" ? dateValue : value);
|
871
878
|
}
|
872
879
|
};
|
873
880
|
/** @public
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { TickCodes, TickFields } from "./TickCodes.js";
|
2
|
-
import { rgb2Hex } from "./
|
2
|
+
import { rgb2Hex, num2Hex, num2Rgb, hex2Num, hex2Rgb, blendColor, getContrastColor } from "./Color.js";
|
3
3
|
import { ElfUtil } from "./ElfUtil.js";
|
4
4
|
import { ExpressionParser } from "./ExpressionParser.js";
|
5
5
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { TickCodes, TickFields } from "./TickCodes.js";
|
2
|
-
import { rgb2Hex } from "./
|
2
|
+
import { rgb2Hex, num2Hex, num2Rgb, hex2Num, hex2Rgb, blendColor, getContrastColor } from "./Color.js";
|
3
3
|
import { ElfUtil } from "./ElfUtil.js";
|
4
4
|
import { ExpressionParser } from "./ExpressionParser.js";
|
5
5
|
|
@@ -709,17 +709,17 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
|
|
709
709
|
if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) {
|
710
710
|
let blendedColor;
|
711
711
|
if(ret > 0) {
|
712
|
-
blendedColor =
|
712
|
+
blendedColor = blendColor(curCond["baseColor"], curCond["upColor"], ret);
|
713
713
|
} else {
|
714
|
-
blendedColor =
|
714
|
+
blendedColor = blendColor(curCond["baseColor"], curCond["downColor"], -ret);
|
715
715
|
}
|
716
716
|
|
717
717
|
if(curCond["textMode"]) {
|
718
|
-
CellPainter._colorObj["color"] =
|
718
|
+
CellPainter._colorObj["color"] = num2Hex(blendedColor);
|
719
719
|
return CellPainter._colorObj;
|
720
720
|
} else {
|
721
|
-
CellPainter._bgObj["backgroundColor"] =
|
722
|
-
CellPainter._bgObj["color"] =
|
721
|
+
CellPainter._bgObj["backgroundColor"] = num2Hex(blendedColor);
|
722
|
+
CellPainter._bgObj["color"] = getContrastColor(blendedColor);
|
723
723
|
|
724
724
|
return CellPainter._bgObj;
|
725
725
|
}
|
@@ -751,94 +751,44 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
|
|
751
751
|
};
|
752
752
|
|
753
753
|
/** @public
|
754
|
+
* @function
|
754
755
|
* @param {string} baseColor
|
755
756
|
* @param {string} maxColor
|
756
757
|
* @param {number} ratio [0, 1]
|
757
758
|
* @return {Array.<number>} resultColor
|
758
759
|
*/
|
759
|
-
CellPainter.blendColor =
|
760
|
-
if (ratio > 1) {
|
761
|
-
ratio = 1;
|
762
|
-
} else if(ratio < 0) {
|
763
|
-
ratio = 0;
|
764
|
-
}
|
765
|
-
|
766
|
-
let baseColorTriplet = CellPainter.hex2Num(baseColor);
|
767
|
-
let maxColorTriplet = CellPainter.hex2Num(maxColor);
|
768
|
-
let blendResult = [];
|
769
|
-
for (let i = 0; i < 3; ++i) {
|
770
|
-
let gap = (maxColorTriplet[i] - baseColorTriplet[i]) * ratio;
|
771
|
-
blendResult.push(baseColorTriplet[i] + gap);
|
772
|
-
}
|
773
|
-
|
774
|
-
return blendResult;
|
775
|
-
};
|
776
|
-
|
777
|
-
/** @private
|
778
|
-
* @param {Array.<number>} triplet
|
779
|
-
* @return {string} resultColor
|
780
|
-
*/
|
781
|
-
CellPainter.blackAndWhite = function (triplet) {
|
782
|
-
let brightness = Math.sqrt(triplet[0] * triplet[0] * 0.241 + triplet[1] * triplet[1] * 0.691 + triplet[2] * triplet[2] * 0.068);
|
783
|
-
|
784
|
-
if (brightness >= 135) { // Brighter color has more impact to human eye than the darker color
|
785
|
-
return '#000000';
|
786
|
-
}
|
787
|
-
return '#FFFFFF';
|
788
|
-
};
|
789
|
-
|
760
|
+
CellPainter.blendColor = blendColor; // For backward compatability
|
790
761
|
/** @public
|
791
762
|
* @function
|
792
763
|
* @param {string} rgbCode
|
793
764
|
* @return {string} resultColor E.g. "#10FF0D"
|
794
765
|
*/
|
795
766
|
CellPainter.rgb2Hex = rgb2Hex; // For backward compatability
|
796
|
-
|
797
767
|
/** @public
|
798
768
|
* @function
|
799
769
|
* @param {Array.<number>} triplet
|
800
770
|
* @return {string} resultColor
|
801
771
|
*/
|
802
|
-
CellPainter.num2Hex =
|
803
|
-
let rgb = triplet[2] | (triplet[1] << 8) | (triplet[0] << 16);
|
804
|
-
return ('#' + (0x1000000 + rgb).toString(16).slice(1));
|
805
|
-
};
|
772
|
+
CellPainter.num2Hex = num2Hex; // For backward compatability
|
806
773
|
/** Note that Chrome, IE, and Firefox store color in rgb representation.
|
807
774
|
* @public
|
808
775
|
* @function
|
809
776
|
* @param {Array.<number>} triplet
|
810
777
|
* @return {string} Color string in RGB represetation (e.g. rgb(100, 44, 1))
|
811
778
|
*/
|
812
|
-
CellPainter.num2Rgb =
|
813
|
-
return 'rgb(' + triplet[0] + ', ' + triplet[1] + ', ' + triplet[2] + ')';
|
814
|
-
};
|
779
|
+
CellPainter.num2Rgb = num2Rgb; // For backward compatability
|
815
780
|
/** @public
|
816
781
|
* @function
|
817
782
|
* @param {string} hex
|
818
783
|
* @return {Array.<number>} array of size 3 which contains [red, green, blue]
|
819
784
|
*/
|
820
|
-
CellPainter.hex2Num =
|
821
|
-
let hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ''), 16);
|
822
|
-
let r = (hexInt >> 16) & 255;
|
823
|
-
let g = (hexInt >> 8) & 255;
|
824
|
-
let b = hexInt & 255;
|
825
|
-
return [r, g, b];
|
826
|
-
};
|
785
|
+
CellPainter.hex2Num = hex2Num; // For backward compatability
|
827
786
|
/** @public
|
828
787
|
* @function
|
829
788
|
* @param {string} hex Color string with leading # character (e.g. #FFAA00)
|
830
789
|
* @return {string} Color string in RGB represetation (e.g. rgb(100, 44, 1))
|
831
790
|
*/
|
832
|
-
CellPainter.hex2Rgb =
|
833
|
-
if(hex) {
|
834
|
-
let hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ''), 16);
|
835
|
-
let r = (hexInt >> 16) & 255;
|
836
|
-
let g = (hexInt >> 8) & 255;
|
837
|
-
let b = hexInt & 255;
|
838
|
-
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
|
839
|
-
}
|
840
|
-
return '';
|
841
|
-
};
|
791
|
+
CellPainter.hex2Rgb = hex2Rgb; // For backward compatability
|
842
792
|
|
843
793
|
/** Deprecated. Colors should be changed according to user's settings by CellPainter#loadThemeColors
|
844
794
|
* @private
|
@@ -974,11 +924,11 @@ CellPainter._clearBlinkTimer = function(scp, opt_restoreColor) {
|
|
974
924
|
CellPainter.getOppositeColor = function (hexCode) {
|
975
925
|
if(typeof hexCode === "string") {
|
976
926
|
if(hexCode.charAt(0) === "#") {
|
977
|
-
let triplet =
|
978
|
-
return
|
927
|
+
let triplet = hex2Num(hexCode);
|
928
|
+
return getContrastColor(triplet);
|
979
929
|
}
|
980
930
|
} else if(Array.isArray(hexCode)) {
|
981
|
-
return
|
931
|
+
return getContrastColor(hexCode);
|
982
932
|
}
|
983
933
|
return "";
|
984
934
|
};
|
@@ -0,0 +1,40 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
declare namespace Color {
|
4
|
+
|
5
|
+
}
|
6
|
+
|
7
|
+
declare function rgb2Hex(rgbCode: string): string;
|
8
|
+
|
9
|
+
declare function num2Hex(triplet: (number)[]|null): string;
|
10
|
+
|
11
|
+
declare function num2Rgb(triplet: (number)[]|null): string;
|
12
|
+
|
13
|
+
declare function hex2Num(hex: string): (number)[]|null;
|
14
|
+
|
15
|
+
declare function hex2Rgb(hex: string): string;
|
16
|
+
|
17
|
+
declare function getColorLuminance(color: number): number;
|
18
|
+
|
19
|
+
declare function getRelativeLuminance(triplet: (number)[]|null): number;
|
20
|
+
|
21
|
+
declare function getContrastRatio(lumin1: number, lumin2: number): number;
|
22
|
+
|
23
|
+
declare function getContrastColor(triplet: (number)[]|null): string;
|
24
|
+
|
25
|
+
declare function blendColor(baseColor: string, maxColor: string, ratio: number): (number)[]|null;
|
26
|
+
|
27
|
+
export default Color;
|
28
|
+
export {
|
29
|
+
Color,
|
30
|
+
rgb2Hex,
|
31
|
+
num2Hex,
|
32
|
+
num2Rgb,
|
33
|
+
hex2Num,
|
34
|
+
hex2Rgb,
|
35
|
+
getColorLuminance,
|
36
|
+
getRelativeLuminance,
|
37
|
+
getContrastRatio,
|
38
|
+
getContrastColor,
|
39
|
+
blendColor
|
40
|
+
};
|
@@ -0,0 +1,210 @@
|
|
1
|
+
/** @namespace */
|
2
|
+
let Color = {};
|
3
|
+
|
4
|
+
/** @private
|
5
|
+
* @constant
|
6
|
+
* @type {RegExp}
|
7
|
+
*/
|
8
|
+
const NumRegExp = /\d+/g;
|
9
|
+
|
10
|
+
/** Convert CSS rgb or rgba formats to CSS hex color string (with # prefix)
|
11
|
+
* @public
|
12
|
+
* @param {string} rgbCode RGB values without # prefix
|
13
|
+
* @return {string} RGB in hex code (with # prefix)
|
14
|
+
* @example
|
15
|
+
* rgb2Hex("rgb(255, 255, 0)"); // "#FFFF00"
|
16
|
+
* rgb2Hex("rgba(255, 255, 0, 1)"); // "#FFFF00"
|
17
|
+
* rgb2Hex("255 255.0"); // "#FFFF00"
|
18
|
+
* rgb2Hex("#FFFF00"); // "#FFFF00"
|
19
|
+
* rgb2Hex("#1a1a1a"); // "#1a1a1a"
|
20
|
+
* rgb2Hex("2552550"); // "2552550"
|
21
|
+
* rgb2Hex("invalid"); // "invalid"
|
22
|
+
* rgb2Hex(null); // ""
|
23
|
+
*/
|
24
|
+
let rgb2Hex = function (rgbCode) {
|
25
|
+
if(!rgbCode || typeof rgbCode !== "string") {
|
26
|
+
return "";
|
27
|
+
}
|
28
|
+
if(rgbCode.charAt(0) === "#") {
|
29
|
+
return rgbCode;
|
30
|
+
}
|
31
|
+
let rgb = rgbCode.match(NumRegExp);
|
32
|
+
if(!rgb || rgb.length < 3) {
|
33
|
+
return rgbCode;
|
34
|
+
}
|
35
|
+
|
36
|
+
let hex = "#";
|
37
|
+
for(let i = 0; i < 3; i++) {
|
38
|
+
let num = +rgb[i];
|
39
|
+
if(!(num >= 16)) { // Handle NaN case
|
40
|
+
hex += "0";
|
41
|
+
}
|
42
|
+
hex += (num) ? num.toString(16).toUpperCase() : "0";
|
43
|
+
}
|
44
|
+
return hex;
|
45
|
+
};
|
46
|
+
|
47
|
+
/** @public
|
48
|
+
* @function
|
49
|
+
* @param {Array.<number>} triplet
|
50
|
+
* @return {string} resultColor
|
51
|
+
*/
|
52
|
+
let num2Hex = function (triplet) {
|
53
|
+
let rgb = triplet[2] | (triplet[1] << 8) | (triplet[0] << 16);
|
54
|
+
return ("#" + (0x1000000 + rgb).toString(16).slice(1));
|
55
|
+
};
|
56
|
+
/** Note that Chrome, IE, and Firefox store color in rgb representation.
|
57
|
+
* @public
|
58
|
+
* @function
|
59
|
+
* @param {Array.<number>} triplet
|
60
|
+
* @return {string} Color string in RGB represetation (e.g. rgb(100, 44, 1))
|
61
|
+
*/
|
62
|
+
let num2Rgb = function (triplet) {
|
63
|
+
return "rgb(" + triplet[0] + ", " + triplet[1] + ", " + triplet[2] + ")";
|
64
|
+
};
|
65
|
+
/** @public
|
66
|
+
* @function
|
67
|
+
* @param {string} hex
|
68
|
+
* @return {Array.<number>} Array of size 3 which contains [red, green, blue]
|
69
|
+
*/
|
70
|
+
let hex2Num = function (hex) {
|
71
|
+
let hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ""), 16);
|
72
|
+
let r = (hexInt >> 16) & 255;
|
73
|
+
let g = (hexInt >> 8) & 255;
|
74
|
+
let b = hexInt & 255;
|
75
|
+
return [r, g, b];
|
76
|
+
};
|
77
|
+
/** @public
|
78
|
+
* @function
|
79
|
+
* @param {string} hex Color string with leading # character (e.g. #FFAA00)
|
80
|
+
* @return {string} Color string in RGB represetation (e.g. rgb(100, 44, 1))
|
81
|
+
*/
|
82
|
+
let hex2Rgb = function (hex) {
|
83
|
+
if(hex) {
|
84
|
+
let hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ""), 16);
|
85
|
+
let r = (hexInt >> 16) & 255;
|
86
|
+
let g = (hexInt >> 8) & 255;
|
87
|
+
let b = hexInt & 255;
|
88
|
+
return "rgb(" + r + ", " + g + ", " + b + ")";
|
89
|
+
}
|
90
|
+
return "";
|
91
|
+
};
|
92
|
+
|
93
|
+
/** @public
|
94
|
+
* @function
|
95
|
+
* @param {number} color A color component (e.g., R, G, or B) with value between 0 and 255 (inclusive)
|
96
|
+
* @return {number} Normalized luminance value between 0 and 1
|
97
|
+
*/
|
98
|
+
let getColorLuminance = function (color) {
|
99
|
+
if(!color || color < 0) {
|
100
|
+
return 0;
|
101
|
+
}
|
102
|
+
if(color >= 255) {
|
103
|
+
return 1;
|
104
|
+
}
|
105
|
+
let normalizedColor = color / 255;
|
106
|
+
if(normalizedColor <= 0.03928) {
|
107
|
+
return normalizedColor / 12.92;
|
108
|
+
}
|
109
|
+
return Math.pow((normalizedColor + 0.055) / 1.055, 2.4);
|
110
|
+
};
|
111
|
+
/** The relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white (https://www.w3.org/TR/WCAG20/#relativeluminancedef)
|
112
|
+
* @public
|
113
|
+
* @function
|
114
|
+
* @param {Array.<number>} triplet
|
115
|
+
* @return {number} Normalized value between 0 and 1
|
116
|
+
*/
|
117
|
+
let getRelativeLuminance = function (triplet) {
|
118
|
+
let R = getColorLuminance(triplet[0]);
|
119
|
+
let G = getColorLuminance(triplet[1]);
|
120
|
+
let B = getColorLuminance(triplet[2]);
|
121
|
+
|
122
|
+
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
123
|
+
};
|
124
|
+
/** @public
|
125
|
+
* @function
|
126
|
+
* @param {number} lumin1
|
127
|
+
* @param {number} lumin2
|
128
|
+
* @return {number} Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
|
129
|
+
*/
|
130
|
+
let getContrastRatio = function (lumin1, lumin2) {
|
131
|
+
if(lumin1 === lumin2) {
|
132
|
+
return 1;
|
133
|
+
}
|
134
|
+
let darker = lumin1;
|
135
|
+
let lighter = lumin2;
|
136
|
+
|
137
|
+
if(lumin1 > lumin2) {
|
138
|
+
lighter = lumin1;
|
139
|
+
darker = lumin2;
|
140
|
+
}
|
141
|
+
return (lighter + 0.05) / (darker + 0.05);
|
142
|
+
};
|
143
|
+
/** @public
|
144
|
+
* @function
|
145
|
+
* @param {Array.<number>} triplet
|
146
|
+
* @return {string} white or black color in hex code
|
147
|
+
*/
|
148
|
+
let getContrastColor = function (triplet) {
|
149
|
+
let luminance = getRelativeLuminance(triplet);
|
150
|
+
let contrastW = getContrastRatio(1, luminance);
|
151
|
+
let contrastB = getContrastRatio(0, luminance);
|
152
|
+
|
153
|
+
if (contrastB >= contrastW) { // Brighter color has more impact to human eye than the darker color
|
154
|
+
return "#000000";
|
155
|
+
}
|
156
|
+
return "#ffffff";
|
157
|
+
};
|
158
|
+
|
159
|
+
/** Blend two colors into single color with the specified ratio
|
160
|
+
* @public
|
161
|
+
* @function
|
162
|
+
* @param {string} baseColor
|
163
|
+
* @param {string} maxColor
|
164
|
+
* @param {number} ratio [0, 1]
|
165
|
+
* @return {Array.<number>} resultColor
|
166
|
+
*/
|
167
|
+
let blendColor = function (baseColor, maxColor, ratio) { // This can be optimized further
|
168
|
+
if (ratio > 1) {
|
169
|
+
ratio = 1;
|
170
|
+
} else if(ratio < 0) {
|
171
|
+
ratio = 0;
|
172
|
+
}
|
173
|
+
|
174
|
+
let baseColorTriplet = hex2Num(baseColor);
|
175
|
+
let maxColorTriplet = hex2Num(maxColor);
|
176
|
+
let blendResult = [];
|
177
|
+
for (let i = 0; i < 3; ++i) {
|
178
|
+
let gap = (maxColorTriplet[i] - baseColorTriplet[i]) * ratio;
|
179
|
+
blendResult.push(baseColorTriplet[i] + gap);
|
180
|
+
}
|
181
|
+
|
182
|
+
return blendResult;
|
183
|
+
};
|
184
|
+
|
185
|
+
|
186
|
+
Color.rgb2Hex = rgb2Hex;
|
187
|
+
Color.num2Hex = num2Hex;
|
188
|
+
Color.num2Rgb = num2Rgb;
|
189
|
+
Color.hex2Num = hex2Num;
|
190
|
+
Color.hex2Rgb = hex2Rgb;
|
191
|
+
Color.getColorLuminance = getColorLuminance;
|
192
|
+
Color.getRelativeLuminance = getRelativeLuminance;
|
193
|
+
Color.getContrastRatio = getContrastRatio;
|
194
|
+
Color.getContrastColor = getContrastColor;
|
195
|
+
Color.blendColor = blendColor;
|
196
|
+
|
197
|
+
export default Color;
|
198
|
+
export {
|
199
|
+
Color,
|
200
|
+
rgb2Hex,
|
201
|
+
num2Hex,
|
202
|
+
num2Rgb,
|
203
|
+
hex2Num,
|
204
|
+
hex2Rgb,
|
205
|
+
getColorLuminance,
|
206
|
+
getRelativeLuminance,
|
207
|
+
getContrastRatio,
|
208
|
+
getContrastColor,
|
209
|
+
blendColor
|
210
|
+
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
import { rgb2Hex } from "./Color.js";
|
2
2
|
|
3
3
|
declare namespace Util {
|
4
4
|
|
@@ -42,8 +42,6 @@ declare function isTouchDevice(): boolean;
|
|
42
42
|
|
43
43
|
declare function nestedObjectToArray(obj: any, ary?: any[]|null): any[]|null;
|
44
44
|
|
45
|
-
declare function rgb2Hex(rgbCode: string): string;
|
46
|
-
|
47
45
|
declare function prepareTSVContent(data: any): string;
|
48
46
|
|
49
47
|
export default Util;
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import { rgb2Hex } from "./Color.js";
|
2
|
+
|
1
3
|
/** @namespace */
|
2
4
|
let Util = {};
|
3
5
|
|
@@ -453,43 +455,6 @@ let nestedObjectToArray = function (obj, ary) {
|
|
453
455
|
return ary;
|
454
456
|
};
|
455
457
|
|
456
|
-
/** Convert CSS rgb or rgba formats to CSS hex color string (# prefix)
|
457
|
-
* @public
|
458
|
-
* @param {string} rgbCode
|
459
|
-
* @return {string}
|
460
|
-
* @example
|
461
|
-
* rgb2Hex("rgb(255, 255, 0)"); // "#FFFF00"
|
462
|
-
* rgb2Hex("rgba(255, 255, 0, 1)"); // "#FFFF00"
|
463
|
-
* rgb2Hex("255 255.0"); // "#FFFF00"
|
464
|
-
* rgb2Hex("#FFFF00"); // "#FFFF00"
|
465
|
-
* rgb2Hex("#1a1a1a"); // "#1a1a1a"
|
466
|
-
* rgb2Hex("2552550"); // "2552550"
|
467
|
-
* rgb2Hex("invalid"); // "invalid"
|
468
|
-
* rgb2Hex(null); // ""
|
469
|
-
*/
|
470
|
-
let rgb2Hex = function (rgbCode) {
|
471
|
-
if(!rgbCode || typeof rgbCode !== "string") {
|
472
|
-
return "";
|
473
|
-
}
|
474
|
-
if(rgbCode.charAt(0) === "#") {
|
475
|
-
return rgbCode;
|
476
|
-
}
|
477
|
-
let rgb = rgbCode.match(/\d+/g);
|
478
|
-
if(!rgb || rgb.length < 3) {
|
479
|
-
return rgbCode;
|
480
|
-
}
|
481
|
-
|
482
|
-
let hex = "#";
|
483
|
-
for(let i = 0; i < 3; i++) {
|
484
|
-
let num = +rgb[i];
|
485
|
-
if(!(num >= 16)) { // Handle NaN case
|
486
|
-
hex += "0";
|
487
|
-
}
|
488
|
-
hex += (num) ? num.toString(16).toUpperCase() : "0";
|
489
|
-
}
|
490
|
-
return hex;
|
491
|
-
};
|
492
|
-
|
493
458
|
/** transform data to tab seperated value
|
494
459
|
* @public
|
495
460
|
* @param {*} data
|
@@ -175,6 +175,10 @@ declare class Core extends ElementWrapper {
|
|
175
175
|
|
176
176
|
public setColumnStyle(colIndex: number, style: string, value: string, opt_type?: string|null): void;
|
177
177
|
|
178
|
+
public getColumnBackgroundColor(colIndex: number): string;
|
179
|
+
|
180
|
+
public setColumnBackgroundColor(colIndex: number, color?: string|null): void;
|
181
|
+
|
178
182
|
public enableColumnClass(colIndex: number, clsName: string, enabled?: boolean|null, opt_type?: string|null): boolean;
|
179
183
|
|
180
184
|
public hasColumnClass(colIndex: number, clsName: string, opt_type?: string|null): boolean;
|