@hpcc-js/other 3.4.7 → 3.4.10
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/LICENSE +43 -43
- package/README.md +41 -41
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +6 -6
- package/src/Audio.ts +86 -86
- package/src/AutoCompleteText.css +21 -21
- package/src/AutoCompleteText.ts +132 -132
- package/src/CalendarHeatMap.css +26 -26
- package/src/CalendarHeatMap.ts +250 -250
- package/src/Comms.ts +1083 -1083
- package/src/ESP.ts +451 -451
- package/src/HPCCBadge.ts +220 -220
- package/src/HeatMap.ts +150 -150
- package/src/Html.css +5 -5
- package/src/Html.ts +48 -48
- package/src/IconList.css +3 -3
- package/src/IconList.ts +86 -86
- package/src/Legend.css +85 -85
- package/src/Legend.ts +227 -227
- package/src/MorphText.css +11 -11
- package/src/MorphText.ts +109 -109
- package/src/NestedTable.ts +51 -51
- package/src/Opportunity.css +80 -80
- package/src/Opportunity.ts +500 -500
- package/src/Paginator.css +120 -120
- package/src/Paginator.ts +172 -172
- package/src/Persist.ts +151 -151
- package/src/PropertyEditor.css +130 -130
- package/src/PropertyEditor.ts +762 -762
- package/src/RadioCheckbox.css +6 -6
- package/src/RadioCheckbox.ts +130 -130
- package/src/Select.css +7 -7
- package/src/Select.ts +130 -130
- package/src/Table.css +92 -92
- package/src/Table.ts +1099 -1099
- package/src/ThemeEditor.css +195 -195
- package/src/ThemeEditor.ts +758 -758
- package/src/__package__.ts +3 -3
- package/src/index.ts +23 -23
package/src/HeatMap.ts
CHANGED
|
@@ -1,150 +1,150 @@
|
|
|
1
|
-
import { CanvasWidget, Palette } from "@hpcc-js/common";
|
|
2
|
-
import * as _simpleheat from "simpleheat";
|
|
3
|
-
|
|
4
|
-
const simpleheat = (window as any).simpleheat || (_simpleheat && _simpleheat.default) || _simpleheat;
|
|
5
|
-
|
|
6
|
-
export class HeatMap extends CanvasWidget {
|
|
7
|
-
_heat;
|
|
8
|
-
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
enter(domNode, element) {
|
|
14
|
-
super.enter(domNode, element);
|
|
15
|
-
// canvas size needs to be set before render
|
|
16
|
-
this.resize(this._size);
|
|
17
|
-
this._heat = simpleheat(domNode);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
update(domNode, element) {
|
|
21
|
-
super.update(domNode, element);
|
|
22
|
-
|
|
23
|
-
this._palette = this._palette.switch(this.paletteID());
|
|
24
|
-
if (this.useClonedPalette()) {
|
|
25
|
-
this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
if (this.topLeftX_exists() && this.topLeftY_exists() && this.bottomRightX_exists() && this.bottomRightY_exists()) {
|
|
29
|
-
this._heat.data(this.skewedData());
|
|
30
|
-
} else {
|
|
31
|
-
this._heat.data(this.data());
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
if (this.radius()) {
|
|
35
|
-
this._heat.radius(this.radius(), this.blur());
|
|
36
|
-
}
|
|
37
|
-
if (this.usePalette()) {
|
|
38
|
-
const grad = {};
|
|
39
|
-
for (let idx = 1; idx <= this.colorCount(); idx++) {
|
|
40
|
-
const value = idx / this.colorCount();
|
|
41
|
-
grad[value] = this._palette(idx, 1, this.colorCount());
|
|
42
|
-
}
|
|
43
|
-
this._heat.defaultGradient = grad;
|
|
44
|
-
this._heat.gradient(grad);
|
|
45
|
-
} else if (this.gradient()) {
|
|
46
|
-
this._heat.defaultGradient = this.gradient();
|
|
47
|
-
this._heat.gradient(this.gradient());
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
this._heat.draw();
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
exit(domNode, element) {
|
|
54
|
-
delete this._heat;
|
|
55
|
-
super.exit(domNode, element);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
resize(size: any): this {
|
|
59
|
-
const retVal = CanvasWidget.prototype.resize.apply(this, arguments);
|
|
60
|
-
if (this._heat !== undefined) {
|
|
61
|
-
this._heat.resize();
|
|
62
|
-
}
|
|
63
|
-
return retVal;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
skewedData() {
|
|
67
|
-
const context = this;
|
|
68
|
-
const retArr = [];
|
|
69
|
-
const arr = this.data();
|
|
70
|
-
const box = this.size();
|
|
71
|
-
|
|
72
|
-
const coordsWidth = this.bottomRightX() - this.topLeftX();
|
|
73
|
-
const coordsHeight = this.bottomRightY() - this.topLeftY();
|
|
74
|
-
|
|
75
|
-
const pixelValueX = coordsWidth / box.width;
|
|
76
|
-
const pixelValueY = coordsHeight / box.height;
|
|
77
|
-
|
|
78
|
-
arr.forEach(function (n) {
|
|
79
|
-
const left = Math.abs(n[0] - context.topLeftX());
|
|
80
|
-
const top = Math.abs(n[1] - context.topLeftY());
|
|
81
|
-
|
|
82
|
-
const newX = left / pixelValueX;
|
|
83
|
-
const newY = top / pixelValueY;
|
|
84
|
-
|
|
85
|
-
retArr.push([newX, newY, n[2]]);
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
return retArr;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
HeatMap.prototype._class += " other_HeatMap";
|
|
92
|
-
HeatMap.prototype._palette = Palette.rainbow("default");
|
|
93
|
-
|
|
94
|
-
export interface HeatMap {
|
|
95
|
-
_palette;
|
|
96
|
-
|
|
97
|
-
radius(): number;
|
|
98
|
-
radius(_: number): this;
|
|
99
|
-
radius_exists(): boolean;
|
|
100
|
-
blur(): number;
|
|
101
|
-
blur(_: number): this;
|
|
102
|
-
blur_exists(): boolean;
|
|
103
|
-
max(): number;
|
|
104
|
-
max(_: number): this;
|
|
105
|
-
max_exists(): boolean;
|
|
106
|
-
gradient(): object;
|
|
107
|
-
gradient(_: object): this;
|
|
108
|
-
gradient_exists(): boolean;
|
|
109
|
-
usePalette(): boolean;
|
|
110
|
-
usePalette(_: boolean): this;
|
|
111
|
-
usePalette_exists(): boolean;
|
|
112
|
-
colorCount(): number;
|
|
113
|
-
colorCount(_: number): this;
|
|
114
|
-
colorCount_exists(): boolean;
|
|
115
|
-
paletteID(): string;
|
|
116
|
-
paletteID(_: string): this;
|
|
117
|
-
paletteID_exists(): boolean;
|
|
118
|
-
useClonedPalette(): boolean;
|
|
119
|
-
useClonedPalette(_: boolean): this;
|
|
120
|
-
useClonedPalette_exists(): boolean;
|
|
121
|
-
topLeftX(): number;
|
|
122
|
-
topLeftX(_: number): this;
|
|
123
|
-
topLeftX_exists(): boolean;
|
|
124
|
-
topLeftY(): number;
|
|
125
|
-
topLeftY(_: number): this;
|
|
126
|
-
topLeftY_exists(): boolean;
|
|
127
|
-
bottomRightX(): number;
|
|
128
|
-
bottomRightX(_: number): this;
|
|
129
|
-
bottomRightX_exists(): boolean;
|
|
130
|
-
bottomRightY(): number;
|
|
131
|
-
bottomRightY(_: number): this;
|
|
132
|
-
bottomRightY_exists(): boolean;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
HeatMap.prototype.publish("radius", 15, "number", "Set point radius", null, { tags: ["Basic"] });
|
|
136
|
-
HeatMap.prototype.publish("blur", 15, "number", "Set point blur", null, { tags: ["Basic"] });
|
|
137
|
-
HeatMap.prototype.publish("max", 1, "number", "Set max data value", null, { tags: ["Basic"] });
|
|
138
|
-
|
|
139
|
-
HeatMap.prototype.publish("gradient", { 0.4: "blue", 0.6: "cyan", 0.7: "lime", 0.8: "yellow", 1.0: "red" }, "object", "Set gradient colors", null, { tags: ["Basic"] });
|
|
140
|
-
|
|
141
|
-
HeatMap.prototype.publish("usePalette", false, "boolean", "If true, uses paletteID and colorCount to determine gradient", null, { tags: ["Basic"] });
|
|
142
|
-
|
|
143
|
-
HeatMap.prototype.publish("colorCount", 10, "number", "Top left x-value", null, { tags: ["Basic"] });
|
|
144
|
-
HeatMap.prototype.publish("paletteID", "default", "set", "Color palette for this widget", HeatMap.prototype._palette.switch(), { tags: ["Basic"] });
|
|
145
|
-
HeatMap.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
|
|
146
|
-
|
|
147
|
-
HeatMap.prototype.publish("topLeftX", null, "number", "Top left x-value", null, { tags: ["Basic"], optional: true });
|
|
148
|
-
HeatMap.prototype.publish("topLeftY", null, "number", "Top left y-value", null, { tags: ["Basic"], optional: true });
|
|
149
|
-
HeatMap.prototype.publish("bottomRightX", null, "number", "Bottom right x-value", null, { tags: ["Basic"], optional: true });
|
|
150
|
-
HeatMap.prototype.publish("bottomRightY", null, "number", "Bottom right y-value", null, { tags: ["Basic"], optional: true });
|
|
1
|
+
import { CanvasWidget, Palette } from "@hpcc-js/common";
|
|
2
|
+
import * as _simpleheat from "simpleheat";
|
|
3
|
+
|
|
4
|
+
const simpleheat = (window as any).simpleheat || (_simpleheat && _simpleheat.default) || _simpleheat;
|
|
5
|
+
|
|
6
|
+
export class HeatMap extends CanvasWidget {
|
|
7
|
+
_heat;
|
|
8
|
+
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
enter(domNode, element) {
|
|
14
|
+
super.enter(domNode, element);
|
|
15
|
+
// canvas size needs to be set before render
|
|
16
|
+
this.resize(this._size);
|
|
17
|
+
this._heat = simpleheat(domNode);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
update(domNode, element) {
|
|
21
|
+
super.update(domNode, element);
|
|
22
|
+
|
|
23
|
+
this._palette = this._palette.switch(this.paletteID());
|
|
24
|
+
if (this.useClonedPalette()) {
|
|
25
|
+
this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
if (this.topLeftX_exists() && this.topLeftY_exists() && this.bottomRightX_exists() && this.bottomRightY_exists()) {
|
|
29
|
+
this._heat.data(this.skewedData());
|
|
30
|
+
} else {
|
|
31
|
+
this._heat.data(this.data());
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (this.radius()) {
|
|
35
|
+
this._heat.radius(this.radius(), this.blur());
|
|
36
|
+
}
|
|
37
|
+
if (this.usePalette()) {
|
|
38
|
+
const grad = {};
|
|
39
|
+
for (let idx = 1; idx <= this.colorCount(); idx++) {
|
|
40
|
+
const value = idx / this.colorCount();
|
|
41
|
+
grad[value] = this._palette(idx, 1, this.colorCount());
|
|
42
|
+
}
|
|
43
|
+
this._heat.defaultGradient = grad;
|
|
44
|
+
this._heat.gradient(grad);
|
|
45
|
+
} else if (this.gradient()) {
|
|
46
|
+
this._heat.defaultGradient = this.gradient();
|
|
47
|
+
this._heat.gradient(this.gradient());
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
this._heat.draw();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
exit(domNode, element) {
|
|
54
|
+
delete this._heat;
|
|
55
|
+
super.exit(domNode, element);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
resize(size: any): this {
|
|
59
|
+
const retVal = CanvasWidget.prototype.resize.apply(this, arguments);
|
|
60
|
+
if (this._heat !== undefined) {
|
|
61
|
+
this._heat.resize();
|
|
62
|
+
}
|
|
63
|
+
return retVal;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
skewedData() {
|
|
67
|
+
const context = this;
|
|
68
|
+
const retArr = [];
|
|
69
|
+
const arr = this.data();
|
|
70
|
+
const box = this.size();
|
|
71
|
+
|
|
72
|
+
const coordsWidth = this.bottomRightX() - this.topLeftX();
|
|
73
|
+
const coordsHeight = this.bottomRightY() - this.topLeftY();
|
|
74
|
+
|
|
75
|
+
const pixelValueX = coordsWidth / box.width;
|
|
76
|
+
const pixelValueY = coordsHeight / box.height;
|
|
77
|
+
|
|
78
|
+
arr.forEach(function (n) {
|
|
79
|
+
const left = Math.abs(n[0] - context.topLeftX());
|
|
80
|
+
const top = Math.abs(n[1] - context.topLeftY());
|
|
81
|
+
|
|
82
|
+
const newX = left / pixelValueX;
|
|
83
|
+
const newY = top / pixelValueY;
|
|
84
|
+
|
|
85
|
+
retArr.push([newX, newY, n[2]]);
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
return retArr;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
HeatMap.prototype._class += " other_HeatMap";
|
|
92
|
+
HeatMap.prototype._palette = Palette.rainbow("default");
|
|
93
|
+
|
|
94
|
+
export interface HeatMap {
|
|
95
|
+
_palette;
|
|
96
|
+
|
|
97
|
+
radius(): number;
|
|
98
|
+
radius(_: number): this;
|
|
99
|
+
radius_exists(): boolean;
|
|
100
|
+
blur(): number;
|
|
101
|
+
blur(_: number): this;
|
|
102
|
+
blur_exists(): boolean;
|
|
103
|
+
max(): number;
|
|
104
|
+
max(_: number): this;
|
|
105
|
+
max_exists(): boolean;
|
|
106
|
+
gradient(): object;
|
|
107
|
+
gradient(_: object): this;
|
|
108
|
+
gradient_exists(): boolean;
|
|
109
|
+
usePalette(): boolean;
|
|
110
|
+
usePalette(_: boolean): this;
|
|
111
|
+
usePalette_exists(): boolean;
|
|
112
|
+
colorCount(): number;
|
|
113
|
+
colorCount(_: number): this;
|
|
114
|
+
colorCount_exists(): boolean;
|
|
115
|
+
paletteID(): string;
|
|
116
|
+
paletteID(_: string): this;
|
|
117
|
+
paletteID_exists(): boolean;
|
|
118
|
+
useClonedPalette(): boolean;
|
|
119
|
+
useClonedPalette(_: boolean): this;
|
|
120
|
+
useClonedPalette_exists(): boolean;
|
|
121
|
+
topLeftX(): number;
|
|
122
|
+
topLeftX(_: number): this;
|
|
123
|
+
topLeftX_exists(): boolean;
|
|
124
|
+
topLeftY(): number;
|
|
125
|
+
topLeftY(_: number): this;
|
|
126
|
+
topLeftY_exists(): boolean;
|
|
127
|
+
bottomRightX(): number;
|
|
128
|
+
bottomRightX(_: number): this;
|
|
129
|
+
bottomRightX_exists(): boolean;
|
|
130
|
+
bottomRightY(): number;
|
|
131
|
+
bottomRightY(_: number): this;
|
|
132
|
+
bottomRightY_exists(): boolean;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
HeatMap.prototype.publish("radius", 15, "number", "Set point radius", null, { tags: ["Basic"] });
|
|
136
|
+
HeatMap.prototype.publish("blur", 15, "number", "Set point blur", null, { tags: ["Basic"] });
|
|
137
|
+
HeatMap.prototype.publish("max", 1, "number", "Set max data value", null, { tags: ["Basic"] });
|
|
138
|
+
|
|
139
|
+
HeatMap.prototype.publish("gradient", { 0.4: "blue", 0.6: "cyan", 0.7: "lime", 0.8: "yellow", 1.0: "red" }, "object", "Set gradient colors", null, { tags: ["Basic"] });
|
|
140
|
+
|
|
141
|
+
HeatMap.prototype.publish("usePalette", false, "boolean", "If true, uses paletteID and colorCount to determine gradient", null, { tags: ["Basic"] });
|
|
142
|
+
|
|
143
|
+
HeatMap.prototype.publish("colorCount", 10, "number", "Top left x-value", null, { tags: ["Basic"] });
|
|
144
|
+
HeatMap.prototype.publish("paletteID", "default", "set", "Color palette for this widget", HeatMap.prototype._palette.switch(), { tags: ["Basic"] });
|
|
145
|
+
HeatMap.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
|
|
146
|
+
|
|
147
|
+
HeatMap.prototype.publish("topLeftX", null, "number", "Top left x-value", null, { tags: ["Basic"], optional: true });
|
|
148
|
+
HeatMap.prototype.publish("topLeftY", null, "number", "Top left y-value", null, { tags: ["Basic"], optional: true });
|
|
149
|
+
HeatMap.prototype.publish("bottomRightX", null, "number", "Bottom right x-value", null, { tags: ["Basic"], optional: true });
|
|
150
|
+
HeatMap.prototype.publish("bottomRightY", null, "number", "Bottom right y-value", null, { tags: ["Basic"], optional: true });
|
package/src/Html.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.other_Html{
|
|
2
|
-
height:100%;
|
|
3
|
-
width:100%;
|
|
4
|
-
overflow-x:auto;
|
|
5
|
-
overflow-y:scroll;
|
|
1
|
+
.other_Html{
|
|
2
|
+
height:100%;
|
|
3
|
+
width:100%;
|
|
4
|
+
overflow-x:auto;
|
|
5
|
+
overflow-y:scroll;
|
|
6
6
|
}
|
package/src/Html.ts
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import { HTMLWidget } from "@hpcc-js/common";
|
|
2
|
-
|
|
3
|
-
import "../src/Html.css";
|
|
4
|
-
|
|
5
|
-
export class Html extends HTMLWidget {
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
|
|
9
|
-
this._tag = "div";
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
enter(domNode, element) {
|
|
13
|
-
super.enter(domNode, element);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
update(domNode, element) {
|
|
17
|
-
super.update(domNode, element);
|
|
18
|
-
|
|
19
|
-
element
|
|
20
|
-
.style("overflow-x", this.overflowX_exists() ? this.overflowX() : "")
|
|
21
|
-
.style("overflow-y", this.overflowY_exists() ? this.overflowY() : "")
|
|
22
|
-
;
|
|
23
|
-
|
|
24
|
-
const html = element.selectAll(".htmlWrapper").data(this.data().length > 0 ? this.data() : [this.html()]);
|
|
25
|
-
html.enter().append("div")
|
|
26
|
-
.attr("class", "htmlWrapper")
|
|
27
|
-
.merge(html)
|
|
28
|
-
.html(function (d) { return d; })
|
|
29
|
-
;
|
|
30
|
-
html.exit().remove();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
Html.prototype._class += " other_Html";
|
|
34
|
-
|
|
35
|
-
export interface Html {
|
|
36
|
-
html(): string;
|
|
37
|
-
html(_: string): Html;
|
|
38
|
-
overflowX(): string;
|
|
39
|
-
overflowX(_: string): Html;
|
|
40
|
-
overflowX_exists(): boolean;
|
|
41
|
-
overflowY(): string;
|
|
42
|
-
overflowY(_: string): Html;
|
|
43
|
-
overflowY_exists(): boolean;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
Html.prototype.publish("html", "", "string", "Html to render", null, { tags: ["Basic"] });
|
|
47
|
-
Html.prototype.publish("overflowX", null, "set", "CSS overflow-x", ["", "visible", "hidden", "scroll", "auto", "initial", "inherit"], { tags: ["Basic"], optional: true });
|
|
48
|
-
Html.prototype.publish("overflowY", null, "set", "CSS overflow-y", ["", "visible", "hidden", "scroll", "auto", "initial", "inherit"], { tags: ["Basic"], optional: true });
|
|
1
|
+
import { HTMLWidget } from "@hpcc-js/common";
|
|
2
|
+
|
|
3
|
+
import "../src/Html.css";
|
|
4
|
+
|
|
5
|
+
export class Html extends HTMLWidget {
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
|
|
9
|
+
this._tag = "div";
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
enter(domNode, element) {
|
|
13
|
+
super.enter(domNode, element);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
update(domNode, element) {
|
|
17
|
+
super.update(domNode, element);
|
|
18
|
+
|
|
19
|
+
element
|
|
20
|
+
.style("overflow-x", this.overflowX_exists() ? this.overflowX() : "")
|
|
21
|
+
.style("overflow-y", this.overflowY_exists() ? this.overflowY() : "")
|
|
22
|
+
;
|
|
23
|
+
|
|
24
|
+
const html = element.selectAll(".htmlWrapper").data(this.data().length > 0 ? this.data() : [this.html()]);
|
|
25
|
+
html.enter().append("div")
|
|
26
|
+
.attr("class", "htmlWrapper")
|
|
27
|
+
.merge(html)
|
|
28
|
+
.html(function (d) { return d; })
|
|
29
|
+
;
|
|
30
|
+
html.exit().remove();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
Html.prototype._class += " other_Html";
|
|
34
|
+
|
|
35
|
+
export interface Html {
|
|
36
|
+
html(): string;
|
|
37
|
+
html(_: string): Html;
|
|
38
|
+
overflowX(): string;
|
|
39
|
+
overflowX(_: string): Html;
|
|
40
|
+
overflowX_exists(): boolean;
|
|
41
|
+
overflowY(): string;
|
|
42
|
+
overflowY(_: string): Html;
|
|
43
|
+
overflowY_exists(): boolean;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
Html.prototype.publish("html", "", "string", "Html to render", null, { tags: ["Basic"] });
|
|
47
|
+
Html.prototype.publish("overflowX", null, "set", "CSS overflow-x", ["", "visible", "hidden", "scroll", "auto", "initial", "inherit"], { tags: ["Basic"], optional: true });
|
|
48
|
+
Html.prototype.publish("overflowY", null, "set", "CSS overflow-y", ["", "visible", "hidden", "scroll", "auto", "initial", "inherit"], { tags: ["Basic"], optional: true });
|
package/src/IconList.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.other_IconList .other_Html{
|
|
2
|
-
overflow-x: hidden;
|
|
3
|
-
overflow-y: hidden;
|
|
1
|
+
.other_IconList .other_Html{
|
|
2
|
+
overflow-x: hidden;
|
|
3
|
+
overflow-y: hidden;
|
|
4
4
|
}
|
package/src/IconList.ts
CHANGED
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
import { Entity, HTMLWidget } from "@hpcc-js/common";
|
|
2
|
-
import { HorizontalList, VerticalList } from "@hpcc-js/layout";
|
|
3
|
-
import { select as d3Select } from "d3-selection";
|
|
4
|
-
import { Html } from "./Html.ts";
|
|
5
|
-
|
|
6
|
-
import "../src/IconList.css";
|
|
7
|
-
|
|
8
|
-
export class IconList extends HTMLWidget {
|
|
9
|
-
protected _list;
|
|
10
|
-
protected _entity_list = [];
|
|
11
|
-
protected _content_list = [];
|
|
12
|
-
constructor() {
|
|
13
|
-
super();
|
|
14
|
-
this._list = new HorizontalList()
|
|
15
|
-
.orientation_default("horizontal")
|
|
16
|
-
.flexWrap_default("nowrap")
|
|
17
|
-
;
|
|
18
|
-
}
|
|
19
|
-
enter(domNode, element) {
|
|
20
|
-
super.enter(domNode, element);
|
|
21
|
-
element
|
|
22
|
-
.style("height", "100%")
|
|
23
|
-
.style("width", "100%")
|
|
24
|
-
;
|
|
25
|
-
d3Select(domNode.parentElement)
|
|
26
|
-
.style("height", "100%")
|
|
27
|
-
.style("width", "100%")
|
|
28
|
-
;
|
|
29
|
-
this._list.target(domNode);
|
|
30
|
-
}
|
|
31
|
-
update(domNode, element) {
|
|
32
|
-
super.update(domNode, element);
|
|
33
|
-
const listWidgets = this._list.widgets();
|
|
34
|
-
this.data().forEach((row, idx) => {
|
|
35
|
-
if (!listWidgets[idx]) {
|
|
36
|
-
listWidgets[idx] = this.updateListProperties(new VerticalList(), idx)
|
|
37
|
-
.widgets([
|
|
38
|
-
this.updateEntityProperties(new Entity(), idx),
|
|
39
|
-
new Html().html(this.data()[idx][this.htmlColumnIndex_exists() ? this.htmlColumnIndex() : 1])
|
|
40
|
-
]);
|
|
41
|
-
} else {
|
|
42
|
-
listWidgets[idx] = this.updateListProperties(listWidgets[idx], idx);
|
|
43
|
-
this.updateEntityProperties(listWidgets[idx].widgets()[0], idx);
|
|
44
|
-
listWidgets[idx]
|
|
45
|
-
.widgets()[1]
|
|
46
|
-
.html(this.data()[idx][this.htmlColumnIndex_exists() ? this.htmlColumnIndex() : 1])
|
|
47
|
-
;
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
this._list.widgets(listWidgets.slice(0, this.data().length));
|
|
51
|
-
this._list.resize().render();
|
|
52
|
-
}
|
|
53
|
-
updateListProperties(list, idx) {
|
|
54
|
-
return list
|
|
55
|
-
.disableScroll(true)
|
|
56
|
-
.widgetsFlexBasis([this.iconSize() + "px", `calc(100% - ${this.iconSize()}px)`])
|
|
57
|
-
;
|
|
58
|
-
}
|
|
59
|
-
updateEntityProperties(entity, idx) {
|
|
60
|
-
return entity
|
|
61
|
-
.icon(this.iconColumnIndex_exists() ? this.data()[idx][this.iconColumnIndex()] : "?")
|
|
62
|
-
.iconColor(this.iconColorColumnIndex_exists() ? this.data()[idx][this.iconColorColumnIndex()] : "#000")
|
|
63
|
-
.iconDiameter(this.iconSize())
|
|
64
|
-
.iconPaddingPercent(0)
|
|
65
|
-
;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
IconList.prototype._class += " other_IconList";
|
|
69
|
-
|
|
70
|
-
export interface IconList {
|
|
71
|
-
iconSize(): number;
|
|
72
|
-
iconSize(_: number): this;
|
|
73
|
-
iconColumnIndex(): number;
|
|
74
|
-
iconColumnIndex(_: number): this;
|
|
75
|
-
iconColumnIndex_exists(): boolean;
|
|
76
|
-
iconColorColumnIndex(): number;
|
|
77
|
-
iconColorColumnIndex(_: number): this;
|
|
78
|
-
iconColorColumnIndex_exists(): boolean;
|
|
79
|
-
htmlColumnIndex(): number;
|
|
80
|
-
htmlColumnIndex(_: number): this;
|
|
81
|
-
htmlColumnIndex_exists(): boolean;
|
|
82
|
-
}
|
|
83
|
-
IconList.prototype.publish("iconSize", 72, "number", "Size of icon (pixels)");
|
|
84
|
-
IconList.prototype.publish("iconColumnIndex", 0, "number", "Index of column containing icon character");
|
|
85
|
-
IconList.prototype.publish("iconColorColumnIndex", 1, "number", "Index of column containing icon color");
|
|
86
|
-
IconList.prototype.publish("htmlColumnIndex", 2, "number", "Index of column containing html string");
|
|
1
|
+
import { Entity, HTMLWidget } from "@hpcc-js/common";
|
|
2
|
+
import { HorizontalList, VerticalList } from "@hpcc-js/layout";
|
|
3
|
+
import { select as d3Select } from "d3-selection";
|
|
4
|
+
import { Html } from "./Html.ts";
|
|
5
|
+
|
|
6
|
+
import "../src/IconList.css";
|
|
7
|
+
|
|
8
|
+
export class IconList extends HTMLWidget {
|
|
9
|
+
protected _list;
|
|
10
|
+
protected _entity_list = [];
|
|
11
|
+
protected _content_list = [];
|
|
12
|
+
constructor() {
|
|
13
|
+
super();
|
|
14
|
+
this._list = new HorizontalList()
|
|
15
|
+
.orientation_default("horizontal")
|
|
16
|
+
.flexWrap_default("nowrap")
|
|
17
|
+
;
|
|
18
|
+
}
|
|
19
|
+
enter(domNode, element) {
|
|
20
|
+
super.enter(domNode, element);
|
|
21
|
+
element
|
|
22
|
+
.style("height", "100%")
|
|
23
|
+
.style("width", "100%")
|
|
24
|
+
;
|
|
25
|
+
d3Select(domNode.parentElement)
|
|
26
|
+
.style("height", "100%")
|
|
27
|
+
.style("width", "100%")
|
|
28
|
+
;
|
|
29
|
+
this._list.target(domNode);
|
|
30
|
+
}
|
|
31
|
+
update(domNode, element) {
|
|
32
|
+
super.update(domNode, element);
|
|
33
|
+
const listWidgets = this._list.widgets();
|
|
34
|
+
this.data().forEach((row, idx) => {
|
|
35
|
+
if (!listWidgets[idx]) {
|
|
36
|
+
listWidgets[idx] = this.updateListProperties(new VerticalList(), idx)
|
|
37
|
+
.widgets([
|
|
38
|
+
this.updateEntityProperties(new Entity(), idx),
|
|
39
|
+
new Html().html(this.data()[idx][this.htmlColumnIndex_exists() ? this.htmlColumnIndex() : 1])
|
|
40
|
+
]);
|
|
41
|
+
} else {
|
|
42
|
+
listWidgets[idx] = this.updateListProperties(listWidgets[idx], idx);
|
|
43
|
+
this.updateEntityProperties(listWidgets[idx].widgets()[0], idx);
|
|
44
|
+
listWidgets[idx]
|
|
45
|
+
.widgets()[1]
|
|
46
|
+
.html(this.data()[idx][this.htmlColumnIndex_exists() ? this.htmlColumnIndex() : 1])
|
|
47
|
+
;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
this._list.widgets(listWidgets.slice(0, this.data().length));
|
|
51
|
+
this._list.resize().render();
|
|
52
|
+
}
|
|
53
|
+
updateListProperties(list, idx) {
|
|
54
|
+
return list
|
|
55
|
+
.disableScroll(true)
|
|
56
|
+
.widgetsFlexBasis([this.iconSize() + "px", `calc(100% - ${this.iconSize()}px)`])
|
|
57
|
+
;
|
|
58
|
+
}
|
|
59
|
+
updateEntityProperties(entity, idx) {
|
|
60
|
+
return entity
|
|
61
|
+
.icon(this.iconColumnIndex_exists() ? this.data()[idx][this.iconColumnIndex()] : "?")
|
|
62
|
+
.iconColor(this.iconColorColumnIndex_exists() ? this.data()[idx][this.iconColorColumnIndex()] : "#000")
|
|
63
|
+
.iconDiameter(this.iconSize())
|
|
64
|
+
.iconPaddingPercent(0)
|
|
65
|
+
;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
IconList.prototype._class += " other_IconList";
|
|
69
|
+
|
|
70
|
+
export interface IconList {
|
|
71
|
+
iconSize(): number;
|
|
72
|
+
iconSize(_: number): this;
|
|
73
|
+
iconColumnIndex(): number;
|
|
74
|
+
iconColumnIndex(_: number): this;
|
|
75
|
+
iconColumnIndex_exists(): boolean;
|
|
76
|
+
iconColorColumnIndex(): number;
|
|
77
|
+
iconColorColumnIndex(_: number): this;
|
|
78
|
+
iconColorColumnIndex_exists(): boolean;
|
|
79
|
+
htmlColumnIndex(): number;
|
|
80
|
+
htmlColumnIndex(_: number): this;
|
|
81
|
+
htmlColumnIndex_exists(): boolean;
|
|
82
|
+
}
|
|
83
|
+
IconList.prototype.publish("iconSize", 72, "number", "Size of icon (pixels)");
|
|
84
|
+
IconList.prototype.publish("iconColumnIndex", 0, "number", "Index of column containing icon character");
|
|
85
|
+
IconList.prototype.publish("iconColorColumnIndex", 1, "number", "Index of column containing icon color");
|
|
86
|
+
IconList.prototype.publish("htmlColumnIndex", 2, "number", "Index of column containing html string");
|