@hpcc-js/graph 2.79.1 → 2.79.4

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.
Files changed (15) hide show
  1. package/README.md +210 -1
  2. package/dist/index.es6.js +8462 -52
  3. package/dist/index.es6.js.map +1 -1
  4. package/dist/index.js +8454 -44
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +1 -1
  7. package/dist/index.min.js.map +1 -1
  8. package/package.json +4 -4
  9. package/src/__package__.ts +2 -2
  10. package/src/test.ts +2 -2
  11. package/types/__package__.d.ts +2 -2
  12. package/types/__package__.d.ts.map +1 -1
  13. package/types/test.d.ts +1 -1
  14. package/types-3.4/__package__.d.ts +2 -2
  15. package/types-3.4/test.d.ts +1 -1
package/README.md CHANGED
@@ -45,4 +45,213 @@ This package is part of the mono repository "@hpcc-js" (aka Visualization Framew
45
45
  </script>
46
46
  </body>
47
47
  </html>
48
- ```
48
+ ```
49
+
50
+ <ClientOnly>
51
+ <hpcc-vitepress style="width:100%;height:600px">
52
+ <div id="target" style="height:600px">
53
+ </div>
54
+ <script type="module">
55
+ import { Graph2 } from "@hpcc-js/graph";
56
+ import { CentroidVertex3, Vertex3 } from "@hpcc-js/react";
57
+
58
+ const vertices = [
59
+ {
60
+ id: 0,
61
+ text: "JAKE MCKEE",
62
+ centroid: true,
63
+ icon: {
64
+ imageChar: ""
65
+ },
66
+ subText: {
67
+ text: "03/26/2020",
68
+ textFill: "#555555"
69
+ },
70
+ annotationMeta: [
71
+ greyAnno(10, 15, -5),
72
+ dAnno(15, -4),
73
+ exclamationAnno(15, -4),
74
+ ]
75
+
76
+ },
77
+ {
78
+ id: 1,
79
+ text: "123 Main St",
80
+ icon: {
81
+ imageChar: "",
82
+ },
83
+ subText: {
84
+ text: "03/26/2020",
85
+ textFill: "#555555"
86
+ },
87
+ annotationMeta: [
88
+ greyAnno(13,5,-1),
89
+ exclamationAnno(),
90
+ ]
91
+ },
92
+ {
93
+ id: 2,
94
+ text: "555-55-5555",
95
+ icon: {
96
+ imageChar: "",
97
+ },
98
+ subText: {
99
+ text: "03/26/2020",
100
+ textFill: "#555555"
101
+ },
102
+ annotationMeta: [
103
+ greyAnno(8,5,-1),
104
+ exclamationAnno(),
105
+ ]
106
+ },
107
+ {
108
+ id: 3,
109
+ text: "Jmckee@gmail.com",
110
+ icon: {
111
+ imageChar: ""
112
+ },
113
+ subText: {
114
+ text: "03/26/2020",
115
+ textFill: "#555555"
116
+ },
117
+ annotationMeta: [
118
+ greyAnno(5,5,-1),
119
+ exclamationAnno(),
120
+ ]
121
+ },
122
+ {
123
+ id: 4,
124
+ text: "303-123-1234",
125
+ icon: {
126
+ imageChar: ""
127
+ },
128
+ subText: {
129
+ text: "03/26/2020",
130
+ textFill: "#555555"
131
+ },
132
+ annotationMeta: [
133
+ greyAnno(5,5,-1),
134
+ checkmarkAnno(),
135
+ ]
136
+ },
137
+ {
138
+ id: 5,
139
+ text: "123039923",
140
+ icon: {
141
+ imageChar: "",
142
+ },
143
+ subText: {
144
+ text: "03/26/2020",
145
+ textFill: "#555555"
146
+ },
147
+ annotationMeta: [
148
+ greyAnno(5,5,-1),
149
+ checkmarkAnno()
150
+ ]
151
+ },
152
+ {
153
+ id: 6,
154
+ text: "FL-2372-3982-9292-2929",
155
+ icon: {
156
+ imageChar: "",
157
+ },
158
+ subText: {
159
+ text: "03/26/2020",
160
+ textFill: "#555555"
161
+ },
162
+ annotationMeta: [
163
+ greyAnno(5,5,-1),
164
+ checkmarkAnno(),
165
+ ]
166
+ },
167
+ {
168
+ id: 7,
169
+ text: "11.12.3.301.31",
170
+ icon: {
171
+ imageChar: ""
172
+ },
173
+ subText: {
174
+ text: "03/26/2020",
175
+ },
176
+ annotationMeta: [
177
+ greyAnno(8,5,-1),
178
+ exclamationAnno(),
179
+ ]
180
+ },
181
+ ];
182
+
183
+ function greyAnno(text, padding = 5, yOffset = -1){
184
+ return {
185
+ text: text+"",
186
+ fill: "#555555",
187
+ stroke: "#555555",
188
+ textFill: "#ffffff",
189
+ padding: padding,
190
+ yOffset: yOffset
191
+ }
192
+ }
193
+ function dAnno(){
194
+ return {
195
+ text: "D",
196
+ fill: "#ED1C24",
197
+ stroke: "#ED1C24",
198
+ textFill: "#ffffff",
199
+ fontFamily: "Arial",
200
+ padding: 15,
201
+ yOffset: -4
202
+ };
203
+ }
204
+ function exclamationAnno(padding, yOffset){
205
+ return {
206
+ text: "",
207
+ fill: "#ED1C24",
208
+ stroke: "#ED1C24",
209
+ textFill: "#ffffff",
210
+ fontFamily: "Arial",
211
+ padding: padding,
212
+ yOffset: yOffset,
213
+ fontFamily: "'Font Awesome 5 Free'",
214
+ };
215
+ }
216
+ function checkmarkAnno(padding, yOffset){
217
+ return {
218
+ text: "",
219
+ fill: "#00802B",
220
+ stroke: "#00802B",
221
+ textFill: "#ffffff",
222
+ fontFamily: "'Font Awesome 5 Free'",
223
+ padding: padding,
224
+ yOffset: yOffset,
225
+ };
226
+ }
227
+ const graphData = { vertices };
228
+ graphData.edges = vertices.slice(1).map((n,i)=>{
229
+ return {
230
+ id: i,
231
+ source: graphData.vertices[0],
232
+ target: graphData.vertices[i+1],
233
+ }
234
+ })
235
+
236
+ new Graph2()
237
+ .target("target")
238
+ .centroidRenderer(CentroidVertex3)
239
+ .vertexRenderer(Vertex3)
240
+ .edgeColor("#287EC4")
241
+ .edgeStrokeWidth(2)
242
+ .edgeArcDepth(0)
243
+ .data(graphData)
244
+ .centroidColor("#777777")
245
+ .on("vertex_click", (row, col, sel) => console.log("click", row, col, sel))
246
+ .on("vertex_dblclick", (row, col, sel) => console.log("dblclick", row, col, sel))
247
+ .on("vertex_mousein", (row, col, sel) => console.log("mousein", row, col, sel))
248
+ .on("vertex_mouseover", (row, col, sel) => console.log("mouseover", row, col, sel))
249
+ .on("vertex_mouseout", (row, col, sel) => console.log("mouseout", row, col, sel))
250
+ .forceDirectedAlphaDecay(0.003)
251
+ .layout("ForceDirected")
252
+ .transitionDuration(0)
253
+ .render()
254
+ ;
255
+ </script>
256
+ </hpcc-vitepress>
257
+ </ClientOnly>