@hpcc-js/html 3.3.13 → 3.3.15
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/dist/index.js +2 -2
- 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/BreakdownTable.ts +218 -218
- package/src/HTMLTooltip.ts +384 -384
- package/src/JSXWidget.ts +13 -13
- package/src/SimpleTable.ts +63 -63
- package/src/StatsTable.ts +103 -103
- package/src/StyledTable.ts +68 -68
- package/src/TitleBar.css +94 -94
- package/src/TitleBar.ts +136 -136
- package/src/VizComponent.tsx +39 -39
- package/src/VizInstance.tsx +39 -39
- package/src/__package__.ts +3 -3
- package/src/index.ts +11 -11
- package/src/reactD3.ts +127 -127
package/src/reactD3.ts
CHANGED
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
import { select as d3Select } from "@hpcc-js/common";
|
|
2
|
-
|
|
3
|
-
export type ReactFn = (attrs: { [key: string]: string }) => VNode;
|
|
4
|
-
|
|
5
|
-
export type IVNode = new (attrs: { [key: string]: string }, children: VNode[]) => VNode;
|
|
6
|
-
|
|
7
|
-
export class VNode {
|
|
8
|
-
protected _attrs: { [key: string]: string };
|
|
9
|
-
protected _children: VNode[];
|
|
10
|
-
|
|
11
|
-
constructor(attrs: { [key: string]: string }, children: VNode[]) {
|
|
12
|
-
this._attrs = attrs;
|
|
13
|
-
this._children = children;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
type(): string {
|
|
17
|
-
return "div";
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
attrs(): { [key: string]: string } {
|
|
21
|
-
return this._attrs;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
attr(key) {
|
|
25
|
-
return this._attrs[key];
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
children(): VNode[] {
|
|
29
|
-
return this._children;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
update(targetElement) {
|
|
33
|
-
for (const key in this._attrs) {
|
|
34
|
-
targetElement.attr(key, this._attrs[key]);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
render(targetElement) {
|
|
39
|
-
const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data([this]);
|
|
40
|
-
thisElement.exit()
|
|
41
|
-
.remove();
|
|
42
|
-
return thisElement.enter().append(this.type())
|
|
43
|
-
.attr("reactd3", 0)
|
|
44
|
-
.merge(thisElement)
|
|
45
|
-
.each(function (this: HTMLElement, d: VNode) {
|
|
46
|
-
const element = d3Select(this);
|
|
47
|
-
d.update(element);
|
|
48
|
-
d.renderChildren(element);
|
|
49
|
-
})
|
|
50
|
-
;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
renderChildren(targetElement) {
|
|
54
|
-
const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data(this._children);
|
|
55
|
-
thisElement.exit()
|
|
56
|
-
.remove();
|
|
57
|
-
return thisElement.enter().append(d => document.createElement(d.type()))
|
|
58
|
-
.attr("reactd3", (_d, i) => i)
|
|
59
|
-
.merge(thisElement)
|
|
60
|
-
.each(function (this: HTMLElement, d: VNode) {
|
|
61
|
-
const element = d3Select(this);
|
|
62
|
-
d.update(element);
|
|
63
|
-
d.renderChildren(element);
|
|
64
|
-
})
|
|
65
|
-
;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
class ConstVNode extends VNode {
|
|
70
|
-
protected _type: string;
|
|
71
|
-
|
|
72
|
-
constructor(type: string, attrs: { [key: string]: string }, children: VNode[]) {
|
|
73
|
-
super(attrs, children);
|
|
74
|
-
this._type = type;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
type(): string {
|
|
78
|
-
return this._type;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
class TextVNode extends VNode {
|
|
83
|
-
protected _text: string;
|
|
84
|
-
|
|
85
|
-
constructor(text: string) {
|
|
86
|
-
super({}, []);
|
|
87
|
-
this._text = text;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
type(): string {
|
|
91
|
-
return "span";
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
update(targetElement) {
|
|
95
|
-
super.update(targetElement);
|
|
96
|
-
targetElement.text(this._text);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function isReactFn(_): _ is ReactFn {
|
|
101
|
-
return typeof _ === "function";
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
function isIVNode(_: any): _ is IVNode {
|
|
105
|
-
return _.prototype && _.prototype instanceof VNode;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export class ReactD3 {
|
|
109
|
-
// static createElementXXX(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
|
|
110
|
-
static createElement(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
|
|
111
|
-
if (isIVNode(type)) {
|
|
112
|
-
return new (type as any)(attrs);
|
|
113
|
-
} else if (isReactFn(type)) {
|
|
114
|
-
return type(attrs);
|
|
115
|
-
}
|
|
116
|
-
return new ConstVNode(type, attrs, children.map(child => {
|
|
117
|
-
if (typeof child === "string") {
|
|
118
|
-
return new TextVNode(child);
|
|
119
|
-
}
|
|
120
|
-
return child;
|
|
121
|
-
}));
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
static render(vdom: VNode, targetElement) {
|
|
125
|
-
vdom.render(targetElement);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
1
|
+
import { select as d3Select } from "@hpcc-js/common";
|
|
2
|
+
|
|
3
|
+
export type ReactFn = (attrs: { [key: string]: string }) => VNode;
|
|
4
|
+
|
|
5
|
+
export type IVNode = new (attrs: { [key: string]: string }, children: VNode[]) => VNode;
|
|
6
|
+
|
|
7
|
+
export class VNode {
|
|
8
|
+
protected _attrs: { [key: string]: string };
|
|
9
|
+
protected _children: VNode[];
|
|
10
|
+
|
|
11
|
+
constructor(attrs: { [key: string]: string }, children: VNode[]) {
|
|
12
|
+
this._attrs = attrs;
|
|
13
|
+
this._children = children;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
type(): string {
|
|
17
|
+
return "div";
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
attrs(): { [key: string]: string } {
|
|
21
|
+
return this._attrs;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
attr(key) {
|
|
25
|
+
return this._attrs[key];
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
children(): VNode[] {
|
|
29
|
+
return this._children;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
update(targetElement) {
|
|
33
|
+
for (const key in this._attrs) {
|
|
34
|
+
targetElement.attr(key, this._attrs[key]);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
render(targetElement) {
|
|
39
|
+
const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data([this]);
|
|
40
|
+
thisElement.exit()
|
|
41
|
+
.remove();
|
|
42
|
+
return thisElement.enter().append(this.type())
|
|
43
|
+
.attr("reactd3", 0)
|
|
44
|
+
.merge(thisElement)
|
|
45
|
+
.each(function (this: HTMLElement, d: VNode) {
|
|
46
|
+
const element = d3Select(this);
|
|
47
|
+
d.update(element);
|
|
48
|
+
d.renderChildren(element);
|
|
49
|
+
})
|
|
50
|
+
;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
renderChildren(targetElement) {
|
|
54
|
+
const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data(this._children);
|
|
55
|
+
thisElement.exit()
|
|
56
|
+
.remove();
|
|
57
|
+
return thisElement.enter().append(d => document.createElement(d.type()))
|
|
58
|
+
.attr("reactd3", (_d, i) => i)
|
|
59
|
+
.merge(thisElement)
|
|
60
|
+
.each(function (this: HTMLElement, d: VNode) {
|
|
61
|
+
const element = d3Select(this);
|
|
62
|
+
d.update(element);
|
|
63
|
+
d.renderChildren(element);
|
|
64
|
+
})
|
|
65
|
+
;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
class ConstVNode extends VNode {
|
|
70
|
+
protected _type: string;
|
|
71
|
+
|
|
72
|
+
constructor(type: string, attrs: { [key: string]: string }, children: VNode[]) {
|
|
73
|
+
super(attrs, children);
|
|
74
|
+
this._type = type;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
type(): string {
|
|
78
|
+
return this._type;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
class TextVNode extends VNode {
|
|
83
|
+
protected _text: string;
|
|
84
|
+
|
|
85
|
+
constructor(text: string) {
|
|
86
|
+
super({}, []);
|
|
87
|
+
this._text = text;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
type(): string {
|
|
91
|
+
return "span";
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
update(targetElement) {
|
|
95
|
+
super.update(targetElement);
|
|
96
|
+
targetElement.text(this._text);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
function isReactFn(_): _ is ReactFn {
|
|
101
|
+
return typeof _ === "function";
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
function isIVNode(_: any): _ is IVNode {
|
|
105
|
+
return _.prototype && _.prototype instanceof VNode;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export class ReactD3 {
|
|
109
|
+
// static createElementXXX(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
|
|
110
|
+
static createElement(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
|
|
111
|
+
if (isIVNode(type)) {
|
|
112
|
+
return new (type as any)(attrs);
|
|
113
|
+
} else if (isReactFn(type)) {
|
|
114
|
+
return type(attrs);
|
|
115
|
+
}
|
|
116
|
+
return new ConstVNode(type, attrs, children.map(child => {
|
|
117
|
+
if (typeof child === "string") {
|
|
118
|
+
return new TextVNode(child);
|
|
119
|
+
}
|
|
120
|
+
return child;
|
|
121
|
+
}));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
static render(vdom: VNode, targetElement) {
|
|
125
|
+
vdom.render(targetElement);
|
|
126
|
+
}
|
|
127
|
+
}
|