@hpcc-js/layout 3.1.0 → 3.2.0
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/dist/index.js +2599 -580
- package/dist/index.js.map +1 -7
- package/dist/index.umd.cjs +8 -0
- package/dist/index.umd.cjs.map +1 -0
- package/package.json +15 -13
- package/src/__package__.ts +2 -2
- package/src/index.ts +1 -0
- package/types/__package__.d.ts +2 -2
package/dist/index.js
CHANGED
|
@@ -1,582 +1,2601 @@
|
|
|
1
|
-
var ee=Object.create;var gt=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var d=(l,e)=>gt(l,"name",{value:e,configurable:!0});var le=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports);var ne=(l,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of oe(e))!se.call(l,o)&&o!==t&>(l,o,{get:()=>e[o],enumerable:!(i=ie(e,o))||i.enumerable});return l};var ae=(l,e,t)=>(t=l!=null?ee(re(l)):{},ne(e||!l||!l.__esModule?gt(t,"default",{value:l,enumerable:!0}):t,l));var qt=le((Pt,Ut)=>{(function(l,e){typeof define=="function"&&define.amd?define([],e):typeof Pt=="object"?Ut.exports=e():l.GridList=e()})(Pt,function(){var l=d(function(t,i){this._options=i;for(var o in this.defaults)this._options.hasOwnProperty(o)||(this._options[o]=this.defaults[o]);this.items=t,this._adjustSizeOfItems(),this.generateGrid()},"GridList");l.cloneItems=function(t,i){var o,r,s;for(i===void 0&&(i=[]),r=0;r<t.length;r++){i[r]||(i[r]={});for(s in t[r])i[r][s]=t[r][s]}return i},l.prototype={defaults:{lanes:5,direction:"horizontal"},toString:d(function(){var t=this.grid.length,i=`
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
width
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
.
|
|
49
|
-
.
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
.
|
|
61
|
-
.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
.
|
|
65
|
-
.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
.
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
.
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.
|
|
134
|
-
.
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
div
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
.
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}
|
|
207
|
-
.
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
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
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.
|
|
249
|
-
|
|
250
|
-
}
|
|
251
|
-
|
|
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
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
.
|
|
312
|
-
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.layout_AbsoluteSurface{pointer-events:none!important}.layout_AbsoluteSurface>.placeholder{position:relative;overflow:hidden;pointer-events:all}.layout_Accordion>ul{position:relative}.layout_Accordion.open>span{font-style:italic}.layout_Accordion.closed>ul{height:0px;overflow:hidden}.layout_Accordion.open>ul{display:block}.layout_Accordion>.collapsible-icon,.layout_Accordion>.collapsible-title{cursor:pointer;box-sizing:border-box}.layout_Accordion>.collapsible-title{display:block;width:100%}.layout_Accordion>.collapsible-title{font-size:13px;color:#fff;padding:4px 8px;height:26px;-webkit-box-shadow:inset 0px -1px 1px 0px rgba(0,0,0,.2);-moz-box-shadow:inset 0px -1px 1px 0px rgba(0,0,0,.2);box-shadow:inset 0 -1px 1px #0003}.layout_Accordion li{background-color:#fff}.layout_Accordion>ul,.layout_Accordion>.collapsible-title{background-color:#333}.layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion>.collapsible-title{background-color:#555}.layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#777}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#999}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#bbb}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#ccc}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#ddd}.layout_Accordion>ul,.layout_Accordion>span{padding-left:0}.layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion>span{padding-left:12px}.layout_Accordion>.collapsible-title:before{padding:4px 8px;position:absolute;left:0;top:0}.layout_Accordion>.collapsible-icon{position:absolute;top:0;right:0;width:24px;height:24px;color:#fff}.layout_Surface{box-sizing:border-box;margin:0;border:1px solid #e5e5e5;overflow:hidden;height:100%;width:100%}.layout_Surface.shadow2{box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0003,0 1px 5px #0000001f}.layout_Surface>h3{margin:0;padding:2px;background-color:#e5e5e5}.layout_Surface .html-button-container{position:absolute;right:0;top:3px}.layout_Surface>div{padding:8px}.layout_Surface .html-button-container .surface-button{margin-right:5px}.layout_Surface .html-button-container .surface-button i{opacity:.8}.layout_Surface .html-button-container .surface-button:hover{opacity:1}.layout_Surface .html-button-container .surface-button:active{opacity:.5}div[draggable=true].hideDragCellContent.content-icon:before{content:"";font-family:FontAwesome;position:absolute;top:calc(50% - 74px);left:calc(50% - 56px);font-size:100px}div[draggable=true].hideDragCellContent.content-icon-Line:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Pie:before{top:calc(50% - 72px);left:calc(50% - 45px);content:""}div[draggable=true].hideDragCellContent.content-icon-Area:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Gauge:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Table:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Form:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Grid:before,div[draggable=true].hideDragCellContent.content-icon-Graph:before,div[draggable=true].hideDragCellContent.content-icon-Border:before,div[draggable=true].hideDragCellContent.content-icon-Tabbed:before,div[draggable=true].hideDragCellContent.content-icon-Accordion:before,div[draggable=true].hideDragCellContent.content-icon-MultiChart:before,div[draggable=true].hideDragCellContent.content-icon-MultiChartSurface:before{content:""}div[draggable=true].hideDragCellContent.content-icon-ChoroplethStates:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethStatesHeat:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethCounties:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethCountries:before,div[draggable=true].hideDragCellContent.content-icon-GMap:before,div[draggable=true].hideDragCellContent.content-icon-GMapHeat:before,div[draggable=true].hideDragCellContent.content-icon-GMapGraph:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Text:before,div[draggable=true].hideDragCellContent.content-icon-TextBox:before,div[draggable=true].hideDragCellContent.content-icon-FAChar:before{content:""}.layout_Cell .update-indicator{box-sizing:border-box;position:absolute;top:0;left:0;padding:0;z-index:1000;border-width:0px;border-style:solid;pointer-events:none}.layout_Border{width:100%;height:100%}.layout_Border>.border-content{width:100%;height:100%;position:relative}.layout_Border>.borderHandle{width:6px;height:6px;background-color:#444;opacity:.3;position:absolute;visibility:hidden}.layout_Border.design-mode>.borderHandle{visibility:visible}.layout_Border>.borderHandle:hover{background-color:#666}.layout_Border>.borderHandle.borderHandleDisabled{display:none}.layout_Border>.borderHandle_top,.layout_Border>.borderHandle_bottom{cursor:ns-resize}.layout_Border>.borderHandle_left,.layout_Border>.borderHandle_right{cursor:ew-resize}.layout_Border .cell{border-radius:5px;border:1px solid #e5e5e5;display:inline-block;overflow:hidden}.layout_Border .cell h2{margin:0;padding-top:4px;-webkit-margin:0px;text-align:center}.layout_Border .layout_BorderCell.over{border:2px dashed #000}.layout_Border .dragItem{z-index:-1;opacity:.33}.layout_Border .notDragItem{z-index:-1;opacity:1}.layout_Border div[draggable=true]{opacity:.75;cursor:default}.layout_Border div[draggable=true] .dragHandle{opacity:1}.layout_Border div[draggable=true] .dragHandle_n,.layout_Border div[draggable=true] .dragHandle_e,.layout_Border div[draggable=true] .dragHandle_s,.layout_Border div[draggable=true] .dragHandle_w{background-color:#aaa}.layout_Border div[draggable=true] .dragHandle_nw,.layout_Border div[draggable=true] .dragHandle_ne,.layout_Border div[draggable=true] .dragHandle_se,.layout_Border div[draggable=true] .dragHandle_sw{background-color:#333}.layout_Border div[draggable=true] .dragHandle_nw{cursor:nw-resize}.layout_Border div[draggable=true] .dragHandle_n{cursor:n-resize}.layout_Border div[draggable=true] .dragHandle_ne{cursor:ne-resize}.layout_Border div[draggable=true] .dragHandle_e{cursor:e-resize}.layout_Border div[draggable=true] .dragHandle_se{cursor:se-resize}.layout_Border div[draggable=true] .dragHandle_s{cursor:s-resize}.layout_Border div[draggable=true] .dragHandle_sw{cursor:sw-resize}.layout_Border div[draggable=true] .dragHandle_w{cursor:w-resize}.layout_Border div[draggable=false]>div>.dragHandle{display:none}.layout_Border .grid-drop-target{position:fixed;box-sizing:border-box;border:2px dashed #7f8c8d;border-radius:0;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6464641a 4px,#6464641a 8px)}.layout_Border .grid-drop-target.drop-target-over{border:2px dashed #179BD7;background:repeating-linear-gradient(-45deg,#0000,#0000 6px,#119bd71a 6px,#119bd71a 12px)}.layout_Border2{display:flex;flex-direction:column}.layout_Border2>.body{margin:0;padding:0;display:flex;flex-flow:row}.layout_Border2>.body>.center{flex:1}.layout_Border2>.header{display:block}.layout_Border2>.footer{display:block}.layout_Carousel>div{position:relative;overflow:hidden}.layout_Carousel>div>.carouselItem{position:absolute}.layout_Modal-header{background-color:#3f51b5;overflow:hidden}.layout_Modal-body{background-color:#fff;overflow-y:scroll;overflow-x:hidden}.layout_Modal-title,.layout_Modal-annotations{position:absolute}.layout_Modal-closeButton{cursor:pointer}.layout_Modal-closeButton:hover{opacity:.7}.layout_Modal-closeButton:active{opacity:.5}.layout_Modal-fade{position:fixed;background-color:#000;opacity:.5;z-index:10000}.layout_Modal-content{position:fixed;background-color:#fff;z-index:10100}.layout_Modal-fade-hidden{display:none}.layout_Modal-fadeClickable{cursor:pointer}.layout_ChartPanel .series.highlight{stroke-width:2px;opacity:1}.layout_ChartPanel .series.lowlight{opacity:.3!important}.layout_FlexGrid{display:flex}.FlexGrid-list-item{overflow:hidden;border-style:solid;flex-grow:1}.layout_Grid>.ddCell{position:absolute}.layout_Grid>.laneBackground{position:absolute;border-style:solid;border-width:1px;background:#f5f5f5}.layout_Grid>.lane{position:absolute;border-style:none;opacity:.25;border-radius:0;pointer-events:none}.layout_Grid>.ddCell.draggable{border-style:solid;border-width:1px;background-color:#f8f8ff;border-radius:0;cursor:move}.layout_Grid>.ddCell.draggable>.resizeHandle{bottom:0;right:0;width:8px;height:8px;border-style:none;position:absolute;cursor:nwse-resize}.layout_Grid>.ddCell.draggable .resizeHandleDisplay{bottom:2px;right:2px;width:4px;height:4px;border-style:solid;border-left-width:0px;border-top-width:0px;border-right-width:2px;border-bottom-width:2px;border-color:#a9a9a9;background-color:none;position:absolute}.layout_Grid>.ddCell.draggable .resizeHandleDisplay:hover{border-color:orange}.layout_Grid>.dragging{border-style:solid;border-width:1px;border-color:gray;border-radius:0;position:absolute;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6464641a 4px,#6464641a 8px)}.layout_Grid>.resizing{border-style:solid;border-width:1px;border-color:gray;background-color:orange;border-radius:0;position:absolute;opacity:.3;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,orange 4px,orange 8px)}.layout_Grid>.ddCell.draggable .common_Widget.selected{border-style:solid;border-width:1px;border-color:red;background-color:gray;border-radius:0;position:absolute;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6400001a 4px,#6400001a 8px)}.layout_Grid #drag-me:before{content:"#" attr(id);font-weight:700}.layout_Layered{pointer-events:none}.layout_Layered>.container>.content{position:absolute}.layout_Layered>.container>.content>div>.common_Widget,.layout_Layered>.container>.content>div>svg>.common_Widget{pointer-events:all}.layout_Tabbed .tab-button{position:relative;top:1px;display:inline-block;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;background-color:transparent;margin-right:4px;padding:2px 2px 4px;background-color:#ccc}.layout_Tabbed .tab-button.active{background-color:#fff;z-index:999}.layout_Tabbed .on_bottom .tab-button{border-bottom:1px solid #ddd;border-top:none;top:-1px}.layout_Toolbar{height:100%;background-color:#ddd;white-space:nowrap;overflow:hidden}.layout_Toolbar .toolbar-title{display:inline-block;position:relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);margin-left:4px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layout_Toolbar .toolbar-child{position:relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);float:right;margin-left:4px;margin-right:4px;line-height:16px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
|
|
4
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
|
|
5
|
+
import { HTMLWidget, FAChar, select, selectAll, Utility, d3Event, Platform, drag, scaleLinear, dispatch, formatLocale, formatSpecifier, format, formatPrefix, sum, SVGWidget, Database, Palette, scaleOrdinal, ProgressBar, ToggleButton, Text, Button, Spacer, TitleBar, IconBar } from "@hpcc-js/common";
|
|
6
|
+
import { Table } from "@hpcc-js/dgrid2";
|
|
7
|
+
import { instanceOfIHighlight } from "@hpcc-js/api";
|
|
8
|
+
function _mergeNamespaces(n, m) {
|
|
9
|
+
for (var i = 0; i < m.length; i++) {
|
|
10
|
+
const e = m[i];
|
|
11
|
+
if (typeof e != "string" && !Array.isArray(e)) {
|
|
12
|
+
for (const k2 in e)
|
|
13
|
+
if (k2 !== "default" && !(k2 in n)) {
|
|
14
|
+
const d = Object.getOwnPropertyDescriptor(e, k2);
|
|
15
|
+
d && Object.defineProperty(n, k2, d.get ? d : {
|
|
16
|
+
enumerable: !0,
|
|
17
|
+
get: () => e[k2]
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
|
|
23
|
+
}
|
|
24
|
+
const PKG_NAME = "@hpcc-js/layout", PKG_VERSION = "3.1.1", BUILD_VERSION = "3.2.1";
|
|
25
|
+
class AbsoluteSurface extends HTMLWidget {
|
|
26
|
+
constructor() {
|
|
27
|
+
super(), this._tag = "div";
|
|
28
|
+
}
|
|
29
|
+
enter(domNode, element) {
|
|
30
|
+
super.enter(domNode, element);
|
|
31
|
+
}
|
|
32
|
+
update(domNode, element) {
|
|
33
|
+
super.update(domNode, element);
|
|
34
|
+
let xPos = 0, yPos = 0, width = this.clientWidth(), height = this.clientHeight();
|
|
35
|
+
switch (this.units()) {
|
|
36
|
+
case "pixels":
|
|
37
|
+
xPos = this.widgetX(), yPos = this.widgetY(), width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth()), height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight());
|
|
38
|
+
break;
|
|
39
|
+
case "percent":
|
|
40
|
+
xPos = this.widgetX() * width / 100, yPos = this.widgetY() * height / 100, width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth()) * width / 100, height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight()) * height / 100;
|
|
41
|
+
break;
|
|
42
|
+
}
|
|
43
|
+
element.style("opacity", this.opacity());
|
|
44
|
+
const widgets = element.selectAll("#" + this._id + " > .placeholder").data(this.widget() ? [this.widget()] : [], function(d) {
|
|
45
|
+
return d._id;
|
|
46
|
+
});
|
|
47
|
+
widgets.enter().append("div").attr("class", "placeholder").each(function(d) {
|
|
48
|
+
d.target(this);
|
|
49
|
+
}).merge(widgets).style("left", xPos + "px").style("top", yPos + "px").style("width", width + "px").style("bottom", height + "px").each(function(d) {
|
|
50
|
+
d.resize({ width, height });
|
|
51
|
+
}), widgets.exit().each(function(d) {
|
|
52
|
+
d.target(null);
|
|
53
|
+
}).remove();
|
|
54
|
+
}
|
|
55
|
+
exit(domNode, element) {
|
|
56
|
+
this.widget() && this.widget().target(null), super.exit(domNode, element);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
AbsoluteSurface.prototype._class += " layout_AbsoluteSurface";
|
|
60
|
+
AbsoluteSurface.prototype.publish("units", "percent", "set", "Units", ["pixels", "percent"]);
|
|
61
|
+
AbsoluteSurface.prototype.publish("widgetX", 0, "number", "Widget XPos");
|
|
62
|
+
AbsoluteSurface.prototype.publish("widgetY", 0, "number", "Widget YPos");
|
|
63
|
+
AbsoluteSurface.prototype.publish("widgetWidth", "100", "string", "Widget Width, omit for full");
|
|
64
|
+
AbsoluteSurface.prototype.publish("widgetHeight", "100", "string", "Widget Height, omit for full");
|
|
65
|
+
AbsoluteSurface.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
|
|
66
|
+
AbsoluteSurface.prototype.publish("opacity", 1, "number", "Opacity");
|
|
67
|
+
class Accordion extends HTMLWidget {
|
|
68
|
+
constructor() {
|
|
69
|
+
super();
|
|
70
|
+
__publicField(this, "_isClosed");
|
|
71
|
+
__publicField(this, "titleSpan");
|
|
72
|
+
__publicField(this, "iconDiv");
|
|
73
|
+
__publicField(this, "ul");
|
|
74
|
+
__publicField(this, "icon");
|
|
75
|
+
this._tag = "div", this._isClosed = !1;
|
|
76
|
+
}
|
|
77
|
+
pushListItem(widget, prepend = !1, protect = !1) {
|
|
78
|
+
const contentArr = this.content();
|
|
79
|
+
return widget._protected = protect, prepend ? contentArr.unshift(widget) : contentArr.push(widget), this.content(contentArr), this;
|
|
80
|
+
}
|
|
81
|
+
clearListItems() {
|
|
82
|
+
const arr = [];
|
|
83
|
+
for (const i in this.content())
|
|
84
|
+
this.content()[i]._protected && arr.push(this.content()[i]);
|
|
85
|
+
return this.content(arr), this;
|
|
86
|
+
}
|
|
87
|
+
collapseClick(element) {
|
|
88
|
+
element.classed("closed") ? (this._isClosed = !1, element.classed("open", !0), element.classed("closed", !1)) : (this._isClosed = !0, element.classed("open", !1), element.classed("closed", !0));
|
|
89
|
+
}
|
|
90
|
+
enter(domNode, element) {
|
|
91
|
+
super.enter(domNode, element);
|
|
92
|
+
const context = this;
|
|
93
|
+
this._isClosed = this.defaultCollapsed(), element.classed(this._isClosed ? "closed" : "open", !0), this.titleSpan = element.append("span").classed("collapsible-title", !0), this.iconDiv = element.append("div").classed("collapsible-icon", !0), this.ul = element.append("ul"), this.icon = new FAChar().size({ height: 24, width: 24 }).target(this.iconDiv.node()), this.iconDiv.on("click", function() {
|
|
94
|
+
context.collapseClick(element), context.render();
|
|
95
|
+
}), this.titleSpan.on("click", function() {
|
|
96
|
+
context.collapseClick(element), context.render();
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
update(domNode, element) {
|
|
100
|
+
super.update(domNode, element);
|
|
101
|
+
const context = this, this_id = "";
|
|
102
|
+
this.titleSpan.text(context.title().length > 0 ? context.title() + this_id : "Accordion [" + context._id + "]" + this_id);
|
|
103
|
+
const rows = this.ul.selectAll("#" + context._id + " > ul > li").data(this.content(), function(d) {
|
|
104
|
+
return d._id;
|
|
105
|
+
});
|
|
106
|
+
rows.enter().append(function(widget) {
|
|
107
|
+
const li = document.createElement("li");
|
|
108
|
+
if (widget._target === null) {
|
|
109
|
+
const wSize = widget.size();
|
|
110
|
+
if (wSize.width === 0 || wSize.height === 0) {
|
|
111
|
+
const cSize = context.size();
|
|
112
|
+
widget.size({
|
|
113
|
+
width: cSize.width,
|
|
114
|
+
height: cSize.width
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
widget.target(li);
|
|
118
|
+
} else
|
|
119
|
+
return widget._target;
|
|
120
|
+
return li;
|
|
121
|
+
}), rows.exit().remove(), this.icon.text_colorFill(this.titleFontColor()).char(this._isClosed ? this.closedIcon() : this.openIcon()).render();
|
|
122
|
+
}
|
|
123
|
+
exit(domNode, element) {
|
|
124
|
+
super.exit(domNode, element);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
Accordion.prototype._class += " layout_Accordion";
|
|
128
|
+
Accordion.prototype.publish("content", [], "widgetArray", "Array of widgets", null, { tags: ["Basic"] });
|
|
129
|
+
Accordion.prototype.publish("title", "", "string", "Title of collapsible section", null, { tags: ["Private"] });
|
|
130
|
+
Accordion.prototype.publish("openIcon", "", "string", "Icon to display when list is open", null, { tags: ["Private"] });
|
|
131
|
+
Accordion.prototype.publish("closedIcon", "", "string", "Icon to display when list is closed", null, { tags: ["Private"] });
|
|
132
|
+
Accordion.prototype.publish("titleFontColor", "#FFFFFF", "html-color", "Title font color", null, { tags: ["Private"] });
|
|
133
|
+
Accordion.prototype.publish("titleBackgroundColor", "#333333", "html-color", "Title background color", null, { tags: ["Private"] });
|
|
134
|
+
Accordion.prototype.publish("defaultCollapsed", !1, "boolean", "Collapsed by default if true", null, { tags: ["Private"] });
|
|
135
|
+
class Surface extends HTMLWidget {
|
|
136
|
+
constructor() {
|
|
137
|
+
super();
|
|
138
|
+
__publicField(this, "_surfaceButtons");
|
|
139
|
+
this._tag = "div", this._surfaceButtons = [];
|
|
140
|
+
}
|
|
141
|
+
widgetSize(titleDiv, widgetDiv) {
|
|
142
|
+
let width = this.clientWidth(), height = this.clientHeight();
|
|
143
|
+
return this.title() && (height -= this.calcHeight(titleDiv)), height -= this.calcFrameHeight(widgetDiv), width -= this.calcFrameWidth(widgetDiv), { width, height };
|
|
144
|
+
}
|
|
145
|
+
enter(domNode, element) {
|
|
146
|
+
super.enter(domNode, element);
|
|
147
|
+
}
|
|
148
|
+
update(domNode, element2) {
|
|
149
|
+
super.update(domNode, element2);
|
|
150
|
+
const context = this;
|
|
151
|
+
element2.classed("shadow2", this.surfaceShadow()).style("border-width", this.surfaceBorderWidth_exists() ? this.surfaceBorderWidth() + "px" : null).style("border-color", this.surfaceBorderColor()).style("border-radius", this.surfaceBorderRadius_exists() ? this.surfaceBorderRadius() + "px" : null).style("background-color", this.surfaceBackgroundColor());
|
|
152
|
+
const titles = element2.selectAll(".surfaceTitle").data(this.title() ? [this.title()] : []);
|
|
153
|
+
titles.enter().insert("h3", "div").attr("class", "surfaceTitle").merge(titles).text(function(d) {
|
|
154
|
+
return d;
|
|
155
|
+
}).style("text-align", this.surfaceTitleAlignment()).style("color", this.surfaceTitleFontColor()).style("font-size", this.surfaceTitleFontSize_exists() ? this.surfaceTitleFontSize() + "px" : null).style("font-family", this.surfaceTitleFontFamily()).style("font-weight", this.surfaceTitleFontBold() ? "bold" : "normal").style("background-color", this.surfaceTitleBackgroundColor()).style("padding", this.surfaceTitlePadding_exists() ? this.surfaceTitlePadding() + "px" : null).style("title", this.altText_exists() ? this.altText() : null), titles.exit().remove();
|
|
156
|
+
const surfaceButtons = element2.select(".surfaceTitle").append("div").attr("class", "html-button-container").selectAll(".surface-button").data(this.buttonAnnotations());
|
|
157
|
+
surfaceButtons.enter().append("button").classed("surface-button", !0).each(function(button, idx) {
|
|
158
|
+
const el = context._surfaceButtons[idx] = select(this).attr("class", "surface-button" + (button.class ? " " + button.class : "")).attr("id", button.id).style("padding", button.padding).style("width", button.width).style("height", button.height).style("cursor", "pointer");
|
|
159
|
+
button.font === "FontAwesome" ? el.style("background", "transparent").style("border", "none").on("click", function(d) {
|
|
160
|
+
context.click(d);
|
|
161
|
+
}).append("i").attr("class", "fa").text(function() {
|
|
162
|
+
return button.label;
|
|
163
|
+
}) : el.text(function() {
|
|
164
|
+
return button.label;
|
|
165
|
+
}).on("click", function(d) {
|
|
166
|
+
context.click(d);
|
|
167
|
+
});
|
|
168
|
+
}), surfaceButtons.exit().each(function(_d, idx) {
|
|
169
|
+
const element = select(this);
|
|
170
|
+
delete context._surfaceButtons[idx], element.remove();
|
|
171
|
+
});
|
|
172
|
+
const widgets = element2.selectAll("#" + this._id + " > .surfaceWidget").data(this.widget() ? [this.widget()] : [], function(d) {
|
|
173
|
+
return d._id;
|
|
174
|
+
});
|
|
175
|
+
widgets.enter().append("div").attr("class", "surfaceWidget").each(function(d) {
|
|
176
|
+
select(context.element().node().parentElement).classed("content-icon content-icon-" + d.classID().split("_")[1], !0), d.target(this);
|
|
177
|
+
}).merge(widgets).style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null).each(function(d) {
|
|
178
|
+
const widgetSize = context.widgetSize(element2.select("h3"), select(this));
|
|
179
|
+
widgetSize.width < 0 && (widgetSize.width = 0), widgetSize.height < 0 && (widgetSize.height = 0), d.resize({ width: widgetSize.width, height: widgetSize.height });
|
|
180
|
+
}), widgets.exit().each(function(d) {
|
|
181
|
+
d.target(null);
|
|
182
|
+
}).remove();
|
|
183
|
+
}
|
|
184
|
+
exit(domNode, element) {
|
|
185
|
+
this.widget() && this.widget().target(null), super.exit(domNode, element);
|
|
186
|
+
}
|
|
187
|
+
// Events ---
|
|
188
|
+
click(obj) {
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
Surface.prototype._class += " layout_Surface";
|
|
192
|
+
Surface.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
|
|
193
|
+
Surface.prototype.publish("altText", null, "string", "Alt text", null, { optional: !0 });
|
|
194
|
+
Surface.prototype.publish("surfaceTitlePadding", null, "number", "Title Padding (px)", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
195
|
+
Surface.prototype.publish("surfaceTitleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
196
|
+
Surface.prototype.publish("surfaceTitleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
197
|
+
Surface.prototype.publish("surfaceTitleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
198
|
+
Surface.prototype.publish("surfaceTitleFontBold", !0, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
199
|
+
Surface.prototype.publish("surfaceTitleBackgroundColor", null, "html-color", "Title Background Color", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
200
|
+
Surface.prototype.publish("surfaceTitleAlignment", "center", "set", "Title Alignment", ["left", "right", "center"], { tags: ["Basic"], disable: (w) => !w.title() });
|
|
201
|
+
Surface.prototype.publish("surfaceShadow", !1, "boolean", "3D Shadow");
|
|
202
|
+
Surface.prototype.publish("surfacePadding", null, "string", "Surface Padding (px)", null, { tags: ["Intermediate"] });
|
|
203
|
+
Surface.prototype.publish("surfaceBackgroundColor", null, "html-color", "Surface Background Color", null, { tags: ["Advanced"] });
|
|
204
|
+
Surface.prototype.publish("surfaceBorderWidth", null, "number", "Surface Border Width (px)", null, { tags: ["Advanced"] });
|
|
205
|
+
Surface.prototype.publish("surfaceBorderColor", null, "html-color", "Surface Border Color", null, { tags: ["Advanced"] });
|
|
206
|
+
Surface.prototype.publish("surfaceBorderRadius", null, "number", "Surface Border Radius (px)", null, { tags: ["Advanced"] });
|
|
207
|
+
Surface.prototype.publish("buttonAnnotations", [], "array", "Button Array", null, { tags: ["Private"] });
|
|
208
|
+
Surface.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Basic"] });
|
|
209
|
+
class Cell extends Surface {
|
|
210
|
+
constructor() {
|
|
211
|
+
super();
|
|
212
|
+
__publicField(this, "_indicateTheseIds");
|
|
213
|
+
this._indicateTheseIds = [];
|
|
214
|
+
}
|
|
215
|
+
indicateTheseIds(_) {
|
|
216
|
+
return arguments.length ? (this._indicateTheseIds = _, this) : this._indicateTheseIds;
|
|
217
|
+
}
|
|
218
|
+
enter(domNode, element) {
|
|
219
|
+
super.enter(domNode, element);
|
|
220
|
+
const context = this;
|
|
221
|
+
element.classed("layout_Surface", !0).on("mouseenter", function() {
|
|
222
|
+
context.onMouseEnter();
|
|
223
|
+
}).on("mouseleave", function() {
|
|
224
|
+
context.onMouseLeave();
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
update(domNode, element) {
|
|
228
|
+
super.update(domNode, element);
|
|
229
|
+
}
|
|
230
|
+
onMouseEnter() {
|
|
231
|
+
const arr = this.indicateTheseIds(), opacity = this.indicatorOpacity(), indicatorBorderColor = this.indicatorBorderColor(), indicatorGlowColor = this.indicatorGlowColor();
|
|
232
|
+
for (let i = 0; i < arr.length; i++) {
|
|
233
|
+
const otherElement = select("#" + arr[i]), otherWidget = otherElement.datum();
|
|
234
|
+
otherElement && otherWidget && otherElement.append("div").attr("class", "update-indicator").style("width", otherWidget.width() + "px").style("height", otherWidget.height() + "px").style("opacity", opacity).style("border-color", indicatorBorderColor).style("-webkit-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor).style("-moz-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor).style("box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
onMouseLeave() {
|
|
238
|
+
const arr = this.indicateTheseIds();
|
|
239
|
+
for (let i = 0; i < arr.length; i++)
|
|
240
|
+
selectAll("#" + arr[i] + " > div.update-indicator").remove();
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
Cell.prototype._class += " layout_Cell";
|
|
244
|
+
Cell.prototype.publish("gridRow", 0, "number", "Grid Row Position", null, { tags: ["Private"] });
|
|
245
|
+
Cell.prototype.publish("gridCol", 0, "number", "Grid Column Position", null, { tags: ["Private"] });
|
|
246
|
+
Cell.prototype.publish("gridRowSpan", 1, "number", "Grid Row Span", null, { tags: ["Private"] });
|
|
247
|
+
Cell.prototype.publish("gridColSpan", 1, "number", "Grid Column Span", null, { tags: ["Private"] });
|
|
248
|
+
Cell.prototype.publish("indicatorGlowColor", "#EEEE11", "html-color", "Glow color of update-indicator", null, { tags: ["Basic"] });
|
|
249
|
+
Cell.prototype.publish("indicatorBorderColor", "#F48A00", "html-color", "Border color of update-indicator", null, { tags: ["Basic"] });
|
|
250
|
+
Cell.prototype.publish("indicatorOpacity", 0.8, "number", "Opacity of update-indicator", null, { tags: ["Basic"] });
|
|
251
|
+
class Border extends HTMLWidget {
|
|
252
|
+
constructor() {
|
|
253
|
+
super();
|
|
254
|
+
__publicField(this, "_colCount");
|
|
255
|
+
__publicField(this, "_rowCount");
|
|
256
|
+
__publicField(this, "_colSize");
|
|
257
|
+
__publicField(this, "_rowSize");
|
|
258
|
+
__publicField(this, "_shrinkWrapBoxes");
|
|
259
|
+
__publicField(this, "_watch");
|
|
260
|
+
__publicField(this, "_offsetX");
|
|
261
|
+
__publicField(this, "_offsetY");
|
|
262
|
+
__publicField(this, "_dragCell");
|
|
263
|
+
__publicField(this, "_dragCellSize");
|
|
264
|
+
__publicField(this, "_dragCellStartSize");
|
|
265
|
+
__publicField(this, "_handleTop");
|
|
266
|
+
__publicField(this, "_handleLeft");
|
|
267
|
+
__publicField(this, "_dragPrevX");
|
|
268
|
+
__publicField(this, "_dragPrevY");
|
|
269
|
+
__publicField(this, "_cellSizes");
|
|
270
|
+
__publicField(this, "contentDiv");
|
|
271
|
+
__publicField(this, "_scrollBarWidth");
|
|
272
|
+
__publicField(this, "_borderHandles");
|
|
273
|
+
__publicField(this, "_sectionTypeArr");
|
|
274
|
+
__publicField(this, "lazyPostUpdate", Utility.debounce(function() {
|
|
275
|
+
this.postUpdate();
|
|
276
|
+
}, 100));
|
|
277
|
+
this._tag = "div", this._colCount = 0, this._rowCount = 0, this._colSize = 0, this._rowSize = 0, this._shrinkWrapBoxes = {}, this.content([]), this.sectionTypes([]);
|
|
278
|
+
}
|
|
279
|
+
watchWidget(widget) {
|
|
280
|
+
if (this._watch === void 0 && (this._watch = {}), this._watch[widget.id()] && (this._watch[widget.id()].remove(), delete this._watch[widget.id()]), widget) {
|
|
281
|
+
const context = this;
|
|
282
|
+
this._watch[widget.id()] = widget.monitor(function(paramId, newVal, oldVal) {
|
|
283
|
+
oldVal !== newVal && context.lazyPostUpdate();
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
applyLayoutType() {
|
|
288
|
+
const layoutObj = this.borderLayoutObject();
|
|
289
|
+
this.content().forEach(function(cell, i) {
|
|
290
|
+
cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left, cell._fixedTop = layoutObj[this.sectionTypes()[i]].top, cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width, cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height, cell._dragHandles = this.cellSpecificDragHandles(this.sectionTypes()[i]);
|
|
291
|
+
}, this);
|
|
292
|
+
}
|
|
293
|
+
cellSpecificDragHandles(sectionType) {
|
|
294
|
+
switch (sectionType) {
|
|
295
|
+
case "top":
|
|
296
|
+
return ["s"];
|
|
297
|
+
case "right":
|
|
298
|
+
return ["w"];
|
|
299
|
+
case "bottom":
|
|
300
|
+
return ["n"];
|
|
301
|
+
case "left":
|
|
302
|
+
return ["e"];
|
|
303
|
+
case "center":
|
|
304
|
+
return [];
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
borderLayoutObject(layoutType) {
|
|
308
|
+
const retObj = {}, context = this;
|
|
309
|
+
let topSize, topPerc, bottomSize, bottomPerc, leftSize, leftPerc, rightSize, rightPerc;
|
|
310
|
+
const bcRect = this.target().getBoundingClientRect();
|
|
311
|
+
bcRect.top, bcRect.left, bcRect.bottom, bcRect.right, this.target() instanceof SVGElement ? (parseFloat(this.target().getAttribute("width")), parseFloat(this.target().getAttribute("height"))) : (bcRect.width, bcRect.height), this.sectionTypes().indexOf("top") !== -1 && (topSize = this.topSize(), topPerc = this.topPercentage(), typeof this._shrinkWrapBoxes.top < "u" && (topSize = this._shrinkWrapBoxes.top.height + this.gutter(), topPerc = 0)), this.sectionTypes().indexOf("bottom") !== -1 && (bottomSize = this.bottomSize(), bottomPerc = this.bottomPercentage(), typeof this._shrinkWrapBoxes.bottom < "u" && (bottomSize = this._shrinkWrapBoxes.bottom.height + this.gutter(), bottomPerc = 0)), this.sectionTypes().indexOf("left") !== -1 && (leftSize = this.leftSize(), leftPerc = this.leftPercentage(), typeof this._shrinkWrapBoxes.left < "u" && (leftSize = this._shrinkWrapBoxes.left.width + this.gutter(), leftPerc = 0)), this.sectionTypes().indexOf("right") !== -1 && (rightSize = this.rightSize(), rightPerc = this.rightPercentage(), typeof this._shrinkWrapBoxes.right < "u" && (rightSize = this._shrinkWrapBoxes.right.width + this.gutter(), rightPerc = 0));
|
|
312
|
+
const t = _sectionPlacementObject({
|
|
313
|
+
width: { px: 0, "%": 100 },
|
|
314
|
+
height: { px: topSize, "%": topPerc },
|
|
315
|
+
top: { px: 0, "%": 0 },
|
|
316
|
+
left: { px: 0, "%": 0 }
|
|
317
|
+
}), b = _sectionPlacementObject({
|
|
318
|
+
width: { px: 0, "%": 100 },
|
|
319
|
+
height: { px: bottomSize, "%": bottomPerc },
|
|
320
|
+
top: { px: 0, "%": 100 },
|
|
321
|
+
left: { px: 0, "%": 0 }
|
|
322
|
+
});
|
|
323
|
+
b.top -= b.height;
|
|
324
|
+
const l = _sectionPlacementObject({
|
|
325
|
+
width: { px: leftSize, "%": leftPerc },
|
|
326
|
+
height: { px: -t.height - b.height, "%": 100 },
|
|
327
|
+
top: { px: t.height, "%": 0 },
|
|
328
|
+
left: { px: 0, "%": 0 }
|
|
329
|
+
}), r = _sectionPlacementObject({
|
|
330
|
+
width: { px: rightSize, "%": rightPerc },
|
|
331
|
+
height: { px: -t.height - b.height, "%": 100 },
|
|
332
|
+
top: { px: t.height, "%": 0 },
|
|
333
|
+
left: { px: 0, "%": 100 }
|
|
334
|
+
});
|
|
335
|
+
r.left -= r.width;
|
|
336
|
+
const c2 = _sectionPlacementObject({
|
|
337
|
+
width: { px: -r.width - l.width, "%": 100 },
|
|
338
|
+
height: { px: -t.height - b.height, "%": 100 },
|
|
339
|
+
top: { px: t.height, "%": 0 },
|
|
340
|
+
left: { px: l.width, "%": 0 }
|
|
341
|
+
});
|
|
342
|
+
return retObj.top = t, retObj.bottom = b, retObj.right = r, retObj.left = l, retObj.center = c2, retObj;
|
|
343
|
+
function _sectionPlacementObject(obj) {
|
|
344
|
+
return obj.width.px = typeof obj.width.px < "u" ? obj.width.px : 0, obj.width["%"] = typeof obj.width["%"] < "u" ? obj.width["%"] : 0, obj.height.px = typeof obj.height.px < "u" ? obj.height.px : 0, obj.height["%"] = typeof obj.height["%"] < "u" ? obj.height["%"] : 0, {
|
|
345
|
+
width: obj.width.px + obj.width["%"] / 100 * context.width(),
|
|
346
|
+
height: obj.height.px + obj.height["%"] / 100 * context.height(),
|
|
347
|
+
top: obj.top.px + obj.top["%"] / 100 * context.height() + context.gutter() / 2,
|
|
348
|
+
left: obj.left.px + obj.left["%"] / 100 * context.width() + context.gutter() / 2
|
|
349
|
+
};
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
clearContent(sectionType) {
|
|
353
|
+
if (!sectionType)
|
|
354
|
+
this.content().forEach(function(contentWidget) {
|
|
355
|
+
return contentWidget.target(null), !1;
|
|
356
|
+
}), select("#" + this.id() + " > div.borderHandle").classed("borderHandleDisabled", !0), delete this._watch, this.content([]), this.sectionTypes([]);
|
|
357
|
+
else {
|
|
358
|
+
const idx = this.sectionTypes().indexOf(sectionType);
|
|
359
|
+
idx >= 0 && (this._watch && this.content()[idx] && delete this._watch[this.content()[idx].id()], this.content()[idx].target(null), select("#" + this.id() + " > div.borderHandle_" + sectionType).classed("borderHandleDisabled", !0), this.content().splice(idx, 1), this.sectionTypes().splice(idx, 1));
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
hasContent(sectionType, widget, title) {
|
|
363
|
+
return this.sectionTypes().indexOf(sectionType) >= 0;
|
|
364
|
+
}
|
|
365
|
+
setContent(sectionType, widget, title) {
|
|
366
|
+
if (this.clearContent(sectionType), title = typeof title < "u" ? title : "", widget) {
|
|
367
|
+
const cell = new Cell().surfaceBorderWidth(0).widget(widget).title(title);
|
|
368
|
+
this.watchWidget(widget), this.content().push(cell), this.sectionTypes().push(sectionType);
|
|
369
|
+
}
|
|
370
|
+
return this;
|
|
371
|
+
}
|
|
372
|
+
getCell(id) {
|
|
373
|
+
const idx = this.sectionTypes().indexOf(id);
|
|
374
|
+
return idx >= 0 ? this.content()[idx] : null;
|
|
375
|
+
}
|
|
376
|
+
getContent(id) {
|
|
377
|
+
const idx = this.sectionTypes().indexOf(id);
|
|
378
|
+
return idx >= 0 ? this.content()[idx].widget() : null;
|
|
379
|
+
}
|
|
380
|
+
setLayoutOffsets() {
|
|
381
|
+
this._offsetX = this._element.node().getBoundingClientRect().left + this.gutter() / 2, this._offsetY = this._element.node().getBoundingClientRect().top + this.gutter() / 2;
|
|
382
|
+
}
|
|
383
|
+
dragStart(handle) {
|
|
384
|
+
const event = d3Event();
|
|
385
|
+
event.sourceEvent.stopPropagation();
|
|
386
|
+
const context = this;
|
|
387
|
+
this._dragCell = handle, this._dragCellStartSize = this[handle + "Size"](), this[handle + "ShrinkWrap"]() && (this[handle + "Percentage"](0), this[handle + "ShrinkWrap"](!1));
|
|
388
|
+
const handleElm = select("#" + context.id() + " > div.borderHandle_" + handle);
|
|
389
|
+
context._handleTop = parseFloat(handleElm.style("top").split("px")[0]), context._handleLeft = parseFloat(handleElm.style("left").split("px")[0]), this._dragPrevX = event.sourceEvent.clientX, this._dragPrevY = event.sourceEvent.clientY;
|
|
390
|
+
}
|
|
391
|
+
dragTick(handle) {
|
|
392
|
+
const context = this, event = d3Event(), xDelta = this._dragPrevX - event.sourceEvent.clientX, yDelta = this._dragPrevY - event.sourceEvent.clientY;
|
|
393
|
+
switch (handle) {
|
|
394
|
+
case "top":
|
|
395
|
+
case "bottom":
|
|
396
|
+
_moveHandles(handle, yDelta);
|
|
397
|
+
break;
|
|
398
|
+
case "right":
|
|
399
|
+
case "left":
|
|
400
|
+
_moveHandles(handle, xDelta);
|
|
401
|
+
break;
|
|
402
|
+
}
|
|
403
|
+
function _moveHandles(handle2, delta) {
|
|
404
|
+
if (delta === 0) return;
|
|
405
|
+
const handles = selectAll("#" + context.id() + " > div.borderHandle"), grabbedHandle = select("#" + context.id() + " > div.borderHandle_" + handle2);
|
|
406
|
+
grabbedHandle.classed("borderHandle_top") ? (grabbedHandle.style("top", context._handleTop - delta + "px"), context._cellSizes.topHeight = context._handleTop - delta, context._cellSizes.leftHeight = context._cellSizes.height, context._cellSizes.leftHeight -= context._cellSizes.topHeight, context._cellSizes.leftHeight -= context._cellSizes.bottomHeight, context._cellSizes.rightHeight = context._cellSizes.leftHeight) : grabbedHandle.classed("borderHandle_right") ? (grabbedHandle.style("left", context._handleLeft - delta + "px"), context._cellSizes.rightWidth = context._cellSizes.width - context._handleLeft + delta) : grabbedHandle.classed("borderHandle_bottom") ? (grabbedHandle.style("top", context._handleTop - delta + "px"), context._cellSizes.bottomHeight = context._cellSizes.height - context._handleTop + delta, context._cellSizes.leftHeight = context._cellSizes.height, context._cellSizes.leftHeight -= context._cellSizes.bottomHeight, context._cellSizes.leftHeight -= context._cellSizes.topHeight, context._cellSizes.rightHeight = context._cellSizes.leftHeight) : grabbedHandle.classed("borderHandle_left") && (grabbedHandle.style("left", context._handleLeft - delta + "px"), context._cellSizes.leftWidth = context._handleLeft - delta), handles.each(function() {
|
|
407
|
+
const handle3 = select(this);
|
|
408
|
+
handle3.classed("borderHandle_top") ? (handle3.style("width", context._cellSizes.width + "px"), handle3.style("top", context._cellSizes.topHeight - 3 + "px")) : handle3.classed("borderHandle_right") ? (handle3.style("left", context._cellSizes.width - context._cellSizes.rightWidth + "px"), handle3.style("top", context._cellSizes.topHeight + 3 + "px"), handle3.style("height", context._cellSizes.rightHeight + "px")) : handle3.classed("borderHandle_bottom") ? (handle3.style("width", context._cellSizes.width + "px"), handle3.style("top", context._cellSizes.height - context._cellSizes.bottomHeight - 3 + "px")) : handle3.classed("borderHandle_left") && (handle3.style("left", context._cellSizes.leftWidth + "px"), handle3.style("height", context._cellSizes.leftHeight + "px"), handle3.style("top", context._cellSizes.topHeight + 3 + "px"));
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
dragEnd(handle) {
|
|
413
|
+
if (handle) {
|
|
414
|
+
const event = d3Event(), xDelta = this._dragPrevX - event.sourceEvent.clientX, yDelta = this._dragPrevY - event.sourceEvent.clientY;
|
|
415
|
+
switch (handle) {
|
|
416
|
+
case "top":
|
|
417
|
+
yDelta !== 0 && (this.topPercentage(0), this.topSize(this.topSize() === 0 ? this.getContent("top").getBBox().height - yDelta : this.topSize() - yDelta));
|
|
418
|
+
break;
|
|
419
|
+
case "right":
|
|
420
|
+
xDelta !== 0 && (this.rightPercentage(0), this.rightSize(this.rightSize() === 0 ? this.getContent("right").getBBox().width + xDelta : this.rightSize() + xDelta));
|
|
421
|
+
break;
|
|
422
|
+
case "bottom":
|
|
423
|
+
yDelta !== 0 && (this.bottomPercentage(0), this.bottomSize(this.bottomSize() === 0 ? this.getContent("bottom").getBBox().height + yDelta : this.bottomSize() + yDelta));
|
|
424
|
+
break;
|
|
425
|
+
case "left":
|
|
426
|
+
xDelta !== 0 && (this.leftPercentage(0), this.leftSize(this.leftSize() === 0 ? this.getContent("left").getBBox().width - xDelta : this.leftSize() - xDelta));
|
|
427
|
+
break;
|
|
428
|
+
}
|
|
429
|
+
this._dragPrevX = event.sourceEvent.clientX, this._dragPrevY = event.sourceEvent.clientY;
|
|
430
|
+
}
|
|
431
|
+
this.render();
|
|
432
|
+
}
|
|
433
|
+
size(_) {
|
|
434
|
+
const retVal = HTMLWidget.prototype.size.apply(this, arguments);
|
|
435
|
+
return arguments.length && this.contentDiv && this.contentDiv.style("width", this._size.width + "px").style("height", this._size.height + "px"), retVal;
|
|
436
|
+
}
|
|
437
|
+
enter(domNode, element) {
|
|
438
|
+
super.enter(domNode, element);
|
|
439
|
+
const context = this;
|
|
440
|
+
element.style("position", "relative"), this.contentDiv = element.append("div").classed("border-content", !0), this._scrollBarWidth = Platform.getScrollbarWidth(), this._borderHandles = ["top", "left", "right", "bottom"], element.selectAll("div.borderHandle").data(this._borderHandles).enter().append("div").classed("borderHandle", !0).each(function(handle) {
|
|
441
|
+
select(this).classed("borderHandle_" + handle, !0).classed("borderHandleDisabled", context.getContent(handle) === null);
|
|
442
|
+
});
|
|
443
|
+
}
|
|
444
|
+
update(domNode, element) {
|
|
445
|
+
super.update(domNode, element), this._sectionTypeArr = this.sectionTypes();
|
|
446
|
+
const context = this;
|
|
447
|
+
element.classed("design-mode", this.designMode()), this.setLayoutOffsets();
|
|
448
|
+
const rows = this.contentDiv.selectAll(".cell_" + this._id).data(this.content(), function(d) {
|
|
449
|
+
return d._id;
|
|
450
|
+
}), rowsUpdate = rows.enter().append("div").classed("cell_" + this._id, !0).style("position", "absolute").each(function(d, i) {
|
|
451
|
+
select(this).classed("border-cell border-cell-" + context._sectionTypeArr[i], !0), d.target(this), select("#" + context.id() + " > div.borderHandle_" + context._sectionTypeArr[i]).classed("borderHandleDisabled", !1);
|
|
452
|
+
}).merge(rows);
|
|
453
|
+
rowsUpdate.each(function(d, idx) {
|
|
454
|
+
const sectionType = context.sectionTypes()[idx];
|
|
455
|
+
typeof context[sectionType + "ShrinkWrap"] < "u" && context[sectionType + "ShrinkWrap"]() ? (d.render(), context._shrinkWrapBoxes[sectionType] = d.widget().getBBox(!0)) : delete context._shrinkWrapBoxes[sectionType];
|
|
456
|
+
});
|
|
457
|
+
const drag$1 = drag().on("start", function(d, i) {
|
|
458
|
+
context.dragStart.call(context, d, i);
|
|
459
|
+
}).on("drag", function(d, i) {
|
|
460
|
+
context.dragTick.call(context, d, i);
|
|
461
|
+
}).on("end", function(d, i) {
|
|
462
|
+
context.dragEnd.call(context, d, i);
|
|
463
|
+
});
|
|
464
|
+
this.designMode() ? element.selectAll("#" + this.id() + " > div.borderHandle").call(drag$1) : element.selectAll("#" + this.id() + " > div.borderHandle").on(".drag", null);
|
|
465
|
+
const layoutObj = this.borderLayoutObject();
|
|
466
|
+
this.content().forEach(function(cell, i) {
|
|
467
|
+
cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left, cell._fixedTop = layoutObj[this.sectionTypes()[i]].top, cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width, cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height, cell._dragHandles = [];
|
|
468
|
+
}, this), rowsUpdate.style("left", function(d) {
|
|
469
|
+
return d._fixedLeft + "px";
|
|
470
|
+
}).style("top", function(d) {
|
|
471
|
+
return d._fixedTop + "px";
|
|
472
|
+
}).style("width", function(d) {
|
|
473
|
+
return d._fixedWidth - context.gutter() + "px";
|
|
474
|
+
}).style("height", function(d) {
|
|
475
|
+
return d._fixedHeight - context.gutter() + "px";
|
|
476
|
+
}).each(function(d) {
|
|
477
|
+
d._placeholderElement.attr("draggable", context.designMode()).selectAll(".dragHandle").attr("draggable", context.designMode()), d.surfacePadding(context.surfacePadding()).resize();
|
|
478
|
+
}), rows.exit().each(function(d) {
|
|
479
|
+
d.target(null);
|
|
480
|
+
}).remove(), this.getCellSizes(), element.selectAll("#" + this.id() + " > div.borderHandle").each(function() {
|
|
481
|
+
const handle = select(this);
|
|
482
|
+
handle.classed("borderHandle_top") ? (handle.style("width", context._cellSizes.width + "px"), handle.style("top", context._cellSizes.topHeight - 3 + "px")) : handle.classed("borderHandle_right") ? (handle.style("left", context._cellSizes.width - context._cellSizes.rightWidth + "px"), handle.style("top", context._cellSizes.topHeight + 3 + "px"), handle.style("height", context._cellSizes.rightHeight + "px")) : handle.classed("borderHandle_bottom") ? (handle.style("width", context._cellSizes.width + "px"), handle.style("top", context._cellSizes.height - context._cellSizes.bottomHeight - 3 + "px")) : handle.classed("borderHandle_left") && (handle.style("left", context._cellSizes.leftWidth + "px"), handle.style("height", context._cellSizes.leftHeight + "px"), handle.style("top", context._cellSizes.topHeight + 3 + "px"));
|
|
483
|
+
});
|
|
484
|
+
}
|
|
485
|
+
getCellSizes() {
|
|
486
|
+
const context = this;
|
|
487
|
+
context._cellSizes = {};
|
|
488
|
+
const contentRect = this.element().node().getBoundingClientRect();
|
|
489
|
+
context._cellSizes.width = contentRect.width, context._cellSizes.height = contentRect.height, this.element().selectAll("#" + this.id() + " > div > div.border-cell").each(function() {
|
|
490
|
+
const cell = select(this);
|
|
491
|
+
if (typeof cell.node == "function") {
|
|
492
|
+
const rect = cell.node().getBoundingClientRect();
|
|
493
|
+
cell.classed("border-cell-top") ? context._cellSizes.topHeight = rect.height : cell.classed("border-cell-left") ? (context._cellSizes.leftWidth = rect.width, context._cellSizes.leftHeight = rect.height) : cell.classed("border-cell-right") ? (context._cellSizes.rightWidth = rect.width, context._cellSizes.rightHeight = rect.height) : cell.classed("border-cell-bottom") && (context._cellSizes.bottomHeight = rect.height);
|
|
494
|
+
}
|
|
495
|
+
}), ["height", "width", "topHeight", "bottomHeight", "leftHeight", "rightHeight", "leftWidth", "rightWidth"].forEach(function(size) {
|
|
496
|
+
context._cellSizes[size] = context._cellSizes[size] === void 0 ? 0 : context._cellSizes[size];
|
|
497
|
+
});
|
|
498
|
+
}
|
|
499
|
+
postUpdate(domNode, element) {
|
|
500
|
+
const context = this;
|
|
501
|
+
this.content().forEach(function(n) {
|
|
502
|
+
if (n._element.node() !== null && n.widget()) {
|
|
503
|
+
const prevBox = n.widget().getBBox(!1, !0), currBox = n.widget().getBBox(!0, !0);
|
|
504
|
+
(prevBox.width !== currBox.width || prevBox.height !== currBox.height) && context.lazyRender();
|
|
505
|
+
}
|
|
506
|
+
});
|
|
507
|
+
}
|
|
508
|
+
exit(domNode, element) {
|
|
509
|
+
this.content().forEach((w) => w.target(null)), super.exit(domNode, element);
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
Border.prototype._class += " layout_Border";
|
|
513
|
+
Border.prototype.publish("designMode", !1, "boolean", "Design Mode", null, { tags: ["Basic"] });
|
|
514
|
+
Border.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Intermediate"] });
|
|
515
|
+
Border.prototype.publish("gutter", 0, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
|
|
516
|
+
Border.prototype.publish("topShrinkWrap", !1, "boolean", "'Top' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
517
|
+
Border.prototype.publish("leftShrinkWrap", !1, "boolean", "'Left' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
518
|
+
Border.prototype.publish("rightShrinkWrap", !1, "boolean", "'Right' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
519
|
+
Border.prototype.publish("bottomShrinkWrap", !1, "boolean", "'Bottom' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
520
|
+
Border.prototype.publish("topSize", 0, "number", "Height of the 'Top' Cell (px)", null, { tags: ["Private"] });
|
|
521
|
+
Border.prototype.publish("leftSize", 0, "number", "Width of the 'Left' Cell (px)", null, { tags: ["Private"] });
|
|
522
|
+
Border.prototype.publish("rightSize", 0, "number", "Width of the 'Right' Cell (px)", null, { tags: ["Private"] });
|
|
523
|
+
Border.prototype.publish("bottomSize", 0, "number", "Height of the 'Bottom' Cell (px)", null, { tags: ["Private"] });
|
|
524
|
+
Border.prototype.publish("topPercentage", 20, "number", "Percentage (of parent) Height of the 'Top' Cell", null, { tags: ["Private"] });
|
|
525
|
+
Border.prototype.publish("leftPercentage", 20, "number", "Percentage (of parent) Width of the 'Left' Cell", null, { tags: ["Private"] });
|
|
526
|
+
Border.prototype.publish("rightPercentage", 20, "number", "Percentage (of parent) Width of the 'Right' Cell", null, { tags: ["Private"] });
|
|
527
|
+
Border.prototype.publish("bottomPercentage", 20, "number", "Percentage (of parent) Height of the 'Bottom' Cell", null, { tags: ["Private"] });
|
|
528
|
+
Border.prototype.publish("surfacePadding", 0, "number", "Cell Padding (px)", null, { tags: ["Intermediate"] });
|
|
529
|
+
Border.prototype.publish("sectionTypes", [], "array", "Section Types sharing an index with 'content' - Used to determine position/size.", null, { tags: ["Private"] });
|
|
530
|
+
class WidgetDiv {
|
|
531
|
+
constructor(div) {
|
|
532
|
+
__publicField(this, "_div");
|
|
533
|
+
__publicField(this, "_overlay", !1);
|
|
534
|
+
__publicField(this, "_overflowX", "visible");
|
|
535
|
+
__publicField(this, "_overflowY", "visible");
|
|
536
|
+
__publicField(this, "_widget");
|
|
537
|
+
this._div = div;
|
|
538
|
+
}
|
|
539
|
+
overlay(_) {
|
|
540
|
+
return arguments.length ? (this._overlay = _, this) : this._overlay;
|
|
541
|
+
}
|
|
542
|
+
overflowX(_) {
|
|
543
|
+
return arguments.length ? (this._overflowX = _, this._div.style("overflow-x", _), this) : this._overflowX;
|
|
544
|
+
}
|
|
545
|
+
overflowY(_) {
|
|
546
|
+
return arguments.length ? (this._overflowY = _, this._div.style("overflow-y", _), this) : this._overflowY;
|
|
547
|
+
}
|
|
548
|
+
element() {
|
|
549
|
+
return this._div;
|
|
550
|
+
}
|
|
551
|
+
node() {
|
|
552
|
+
return this._div.node();
|
|
553
|
+
}
|
|
554
|
+
widget(_) {
|
|
555
|
+
return arguments.length ? (this._widget !== _ && (this._widget && this._widget.target(null), this._widget = _, this._widget && this._widget.target(this._div.node())), this) : this._widget;
|
|
556
|
+
}
|
|
557
|
+
resize(size) {
|
|
558
|
+
return this._widget && (this._div.style("width", `${size.width}px`).style("height", `${size.height}px`), this._widget.resize(size)), this;
|
|
559
|
+
}
|
|
560
|
+
async render(getBBox, availableHeight, availableWidth) {
|
|
561
|
+
let overflowX = this.overflowX();
|
|
562
|
+
!this.overlay() && overflowX === "visible" && (overflowX = null);
|
|
563
|
+
let overflowY = this.overflowY();
|
|
564
|
+
return !this.overlay() && overflowY === "visible" && (overflowY = null), this._div.style("height", this.overlay() ? "0px" : null).style("overflow-x", overflowX).style("overflow-y", overflowY), this._widget ? this._widget.renderPromise().then((w) => {
|
|
565
|
+
if (getBBox && this._widget.visible()) {
|
|
566
|
+
const retVal = this._widget.getBBox();
|
|
567
|
+
return retVal.width += 8, availableHeight !== void 0 && retVal.height > availableHeight && (retVal.width += Platform.getScrollbarWidth()), availableWidth !== void 0 && retVal.width > availableWidth && (retVal.height += Platform.getScrollbarWidth()), this.overlay() ? retVal.height = 0 : retVal.height += 4, retVal;
|
|
568
|
+
}
|
|
569
|
+
return getBBox ? { x: 0, y: 0, width: 0, height: 0 } : void 0;
|
|
570
|
+
}) : Promise.resolve(getBBox ? { x: 0, y: 0, width: 0, height: 0 } : void 0);
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
class Border2 extends HTMLWidget {
|
|
574
|
+
constructor() {
|
|
575
|
+
super();
|
|
576
|
+
__publicField(this, "_bodyElement");
|
|
577
|
+
__publicField(this, "_topWA");
|
|
578
|
+
__publicField(this, "_leftWA");
|
|
579
|
+
__publicField(this, "_centerWA");
|
|
580
|
+
__publicField(this, "_rightWA");
|
|
581
|
+
__publicField(this, "_bottomWA");
|
|
582
|
+
__publicField(this, "_topPrevOverflow");
|
|
583
|
+
__publicField(this, "_leftPrevOverflow");
|
|
584
|
+
__publicField(this, "_rightPrevOverflow");
|
|
585
|
+
__publicField(this, "_bottomPrevOverflow");
|
|
586
|
+
this._tag = "div";
|
|
587
|
+
}
|
|
588
|
+
enter(domNode, element) {
|
|
589
|
+
super.enter(domNode, element);
|
|
590
|
+
const topElement = element.append("header");
|
|
591
|
+
this._bodyElement = element.append("div").attr("class", "body");
|
|
592
|
+
const centerElement = this._bodyElement.append("div").attr("class", "center"), leftElement = this._bodyElement.append("div").attr("class", "lhs"), rightElement = this._bodyElement.append("div").attr("class", "rhs"), bottomElement = element.append("div").attr("class", "footer");
|
|
593
|
+
this._topWA = new WidgetDiv(topElement), this._centerWA = new WidgetDiv(centerElement), this._leftWA = new WidgetDiv(leftElement), this._rightWA = new WidgetDiv(rightElement), this._bottomWA = new WidgetDiv(bottomElement);
|
|
594
|
+
}
|
|
595
|
+
update(domNode, element) {
|
|
596
|
+
super.update(domNode, element), this._topWA.element().style("display", this.showTop() ? null : "none"), this._rightWA.element().style("display", this.showRight() ? null : "none"), this._bottomWA.element().style("display", this.showBottom() ? null : "none"), this._leftWA.element().style("display", this.showLeft() ? null : "none"), this.topOverflowX() !== this._topWA.overflowX() && this._topWA.overflowX(this.topOverflowX()), this.rightOverflowX() !== this._rightWA.overflowX() && this._rightWA.overflowX(this.rightOverflowX()), this.bottomOverflowX() !== this._bottomWA.overflowX() && this._bottomWA.overflowX(this.bottomOverflowX()), this.leftOverflowX() !== this._leftWA.overflowX() && this._leftWA.overflowX(this.leftOverflowX()), this.topOverflowY() !== this._topWA.overflowY() && this._topWA.overflowY(this.topOverflowY()), this.rightOverflowY() !== this._rightWA.overflowY() && this._rightWA.overflowY(this.rightOverflowY()), this.bottomOverflowY() !== this._bottomWA.overflowY() && this._bottomWA.overflowY(this.bottomOverflowY()), this.leftOverflowY() !== this._leftWA.overflowY() && this._leftWA.overflowY(this.leftOverflowY()), this.element().style("width", `${this.width()}px`).style("height", `${this.height()}px`);
|
|
597
|
+
}
|
|
598
|
+
targetNull(w) {
|
|
599
|
+
w && w.target(null);
|
|
600
|
+
}
|
|
601
|
+
exit(domNode, element) {
|
|
602
|
+
this.targetNull(this.center()), this.targetNull(this.bottom()), this.targetNull(this.right()), this.targetNull(this.left()), this.targetNull(this.top()), super.exit(domNode, element);
|
|
603
|
+
}
|
|
604
|
+
swap(sectionA, sectionB) {
|
|
605
|
+
const a2 = this[sectionA](), b = this[sectionB]();
|
|
606
|
+
return this.targetNull(a2), this.targetNull(b), this[`_${sectionA}WA`].widget(null), this[`_${sectionB}WA`].widget(null), this[sectionA](b), this[sectionB](a2), this;
|
|
607
|
+
}
|
|
608
|
+
render(callback) {
|
|
609
|
+
return super.render((w) => {
|
|
610
|
+
this._topWA ? this._topWA.widget(this.top()).overlay(this.topOverlay()).render(!0).then(async (topBBox) => {
|
|
611
|
+
const bottomBBox = await this._bottomWA.widget(this.bottom()).render(!0, void 0, this.width()), availableHeight = this.height() - (topBBox.height + bottomBBox.height), leftBBox = await this._leftWA.widget(this.left()).render(!0, availableHeight), rightBBox = await this._rightWA.widget(this.right()).render(!0, availableHeight);
|
|
612
|
+
this.bottomHeight_exists() && (bottomBBox.height = this.bottomHeight());
|
|
613
|
+
const bodyWidth = this.width() - (leftBBox.width + rightBBox.width), bodyHeight = this.height() - (topBBox.height + bottomBBox.height), centerOverflowX = this.centerOverflowX(), centerOverflowY = this.centerOverflowY(), scrollCenterX = ["auto", "scroll"].indexOf(centerOverflowX) !== -1, scrollCenterY = ["auto", "scroll"].indexOf(centerOverflowY) !== -1;
|
|
614
|
+
(scrollCenterX || scrollCenterY) && this._centerWA.overflowX(this.centerOverflowX()).overflowY(this.centerOverflowY()).widget(this.center()).resize({
|
|
615
|
+
width: bodyWidth,
|
|
616
|
+
height: bodyHeight
|
|
617
|
+
}).render(), this._bodyElement.style("height", `${bodyHeight}px`);
|
|
618
|
+
const promises = [
|
|
619
|
+
this._topWA.overflowX(this.topOverflowX()).overflowY(this.topOverflowY()).resize({
|
|
620
|
+
width: this.width(),
|
|
621
|
+
height: topBBox.height
|
|
622
|
+
}).render(),
|
|
623
|
+
this._leftWA.overflowX(this.leftOverflowX()).overflowY(this.leftOverflowY()).resize({
|
|
624
|
+
width: leftBBox.width,
|
|
625
|
+
height: bodyHeight
|
|
626
|
+
}).render(),
|
|
627
|
+
this._rightWA.overflowX(this.rightOverflowX()).overflowY(this.rightOverflowY()).resize({
|
|
628
|
+
width: rightBBox.width,
|
|
629
|
+
height: bodyHeight
|
|
630
|
+
}).render(),
|
|
631
|
+
this._centerWA.overflowX(this.centerOverflowX()).overflowY(this.centerOverflowY()).widget(this.center()).resize({
|
|
632
|
+
width: bodyWidth,
|
|
633
|
+
height: bodyHeight
|
|
634
|
+
}).render(),
|
|
635
|
+
this._bottomWA.overflowX(this.bottomOverflowX()).overflowY(this.bottomOverflowY()).resize({
|
|
636
|
+
width: this.width(),
|
|
637
|
+
height: bottomBBox.height
|
|
638
|
+
}).render()
|
|
639
|
+
];
|
|
640
|
+
Promise.all(promises).then((promises2) => {
|
|
641
|
+
callback && callback(this);
|
|
642
|
+
});
|
|
643
|
+
}) : callback && callback(this);
|
|
644
|
+
});
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
Border2.prototype._class += " layout_Border2";
|
|
648
|
+
Border2.prototype.publish("showTop", !0, "boolean", "If true, top widget adapter will display");
|
|
649
|
+
Border2.prototype.publish("showRight", !0, "boolean", "If true, right widget adapter will display");
|
|
650
|
+
Border2.prototype.publish("showBottom", !0, "boolean", "If true, bottom widget adapter will display");
|
|
651
|
+
Border2.prototype.publish("showLeft", !0, "boolean", "If true, left widget adapter will display");
|
|
652
|
+
Border2.prototype.publish("topOverflowX", "visible", "set", "Sets the overflow-x css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
653
|
+
Border2.prototype.publish("rightOverflowX", "visible", "set", "Sets the overflow-x css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
654
|
+
Border2.prototype.publish("bottomOverflowX", "visible", "set", "Sets the overflow-x css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
655
|
+
Border2.prototype.publish("leftOverflowX", "visible", "set", "Sets the overflow-x css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
656
|
+
Border2.prototype.publish("centerOverflowX", "visible", "set", "Sets the overflow-x css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
657
|
+
Border2.prototype.publish("topOverflowY", "visible", "set", "Sets the overflow-y css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
658
|
+
Border2.prototype.publish("rightOverflowY", "visible", "set", "Sets the overflow-y css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
659
|
+
Border2.prototype.publish("bottomOverflowY", "visible", "set", "Sets the overflow-y css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
660
|
+
Border2.prototype.publish("leftOverflowY", "visible", "set", "Sets the overflow-y css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
661
|
+
Border2.prototype.publish("centerOverflowY", "visible", "set", "Sets the overflow-y css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
662
|
+
Border2.prototype.publish("top", null, "widget", "Top Widget", void 0, { render: !1 });
|
|
663
|
+
Border2.prototype.publish("topOverlay", !1, "boolean", "Overlay Top Widget");
|
|
664
|
+
Border2.prototype.publish("left", null, "widget", "Left Widget", void 0, { render: !1 });
|
|
665
|
+
Border2.prototype.publish("center", null, "widget", "Center Widget", void 0, { render: !1 });
|
|
666
|
+
Border2.prototype.publish("right", null, "widget", "Right Widget", void 0, { render: !1 });
|
|
667
|
+
Border2.prototype.publish("bottom", null, "widget", "Bottom Widget", void 0, { render: !1 });
|
|
668
|
+
Border2.prototype.publish("bottomHeight", null, "number", "Bottom Fixed Height", void 0, { optional: !0 });
|
|
669
|
+
class Carousel extends HTMLWidget {
|
|
670
|
+
constructor() {
|
|
671
|
+
super(...arguments);
|
|
672
|
+
__publicField(this, "_prevActive", 0);
|
|
673
|
+
__publicField(this, "_root");
|
|
674
|
+
}
|
|
675
|
+
activeWidget() {
|
|
676
|
+
return this.widgets()[this.active()];
|
|
677
|
+
}
|
|
678
|
+
enter(domNode, element) {
|
|
679
|
+
super.enter(domNode, element), this._root = element.append("div").attr("id", `${this.id()}_root`);
|
|
680
|
+
}
|
|
681
|
+
update(domNode, element) {
|
|
682
|
+
super.update(domNode, element);
|
|
683
|
+
const active = this.active(), width = this.width();
|
|
684
|
+
this._root.style("width", `${width}px`).style("height", `${this.height()}px`);
|
|
685
|
+
const widgetElements = this._root.selectAll(`#${this.id()}_root > .carouselItem`).data(this.widgets(), (d) => d.id()), update = widgetElements.enter().append("div").attr("class", "carouselItem").each(function(w) {
|
|
686
|
+
w.target(this);
|
|
687
|
+
}).merge(widgetElements).style("left", (d, i) => `${(i - this._prevActive) * width}px`).style("width", `${width}px`);
|
|
688
|
+
this._prevActive !== active && (update.style("display", (d, i) => i === this._prevActive || i === active ? null : "none").transition().duration(this.transitionDuration()).style("left", (d, i) => `${(i - active) * width}px`).on("end", function(d, i) {
|
|
689
|
+
select(this).style("display", () => i === active ? null : "none");
|
|
690
|
+
}), this._prevActive = active), widgetElements.exit().each(function(w) {
|
|
691
|
+
w.target(null);
|
|
692
|
+
}).remove();
|
|
693
|
+
}
|
|
694
|
+
exit(domNode, element) {
|
|
695
|
+
this.widgets().forEach((w) => w.target(null)), super.exit(domNode, element);
|
|
696
|
+
}
|
|
697
|
+
render(callback) {
|
|
698
|
+
return super.render((w) => {
|
|
699
|
+
if (!this.visible() || this.isDOMHidden())
|
|
700
|
+
callback && callback(w);
|
|
701
|
+
else {
|
|
702
|
+
const aw = this.activeWidget();
|
|
703
|
+
aw && aw.resize(this.size()).render((w2) => {
|
|
704
|
+
callback && callback(w);
|
|
705
|
+
});
|
|
706
|
+
}
|
|
707
|
+
});
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
Carousel.prototype._class += " layout_Carousel";
|
|
711
|
+
Carousel.prototype.publish("widgets", [], "widgetArray", "Widgets", null, { render: !1 });
|
|
712
|
+
Carousel.prototype.publish("active", 0, "number", "Active widget");
|
|
713
|
+
Carousel.prototype.publish("transitionDuration", 500, "number", "Transition duration");
|
|
714
|
+
var pi$1 = Math.PI, tau$1 = 2 * pi$1, epsilon = 1e-6, tauEpsilon = tau$1 - epsilon;
|
|
715
|
+
function Path() {
|
|
716
|
+
this._x0 = this._y0 = // start of current subpath
|
|
717
|
+
this._x1 = this._y1 = null, this._ = "";
|
|
718
|
+
}
|
|
719
|
+
function path() {
|
|
720
|
+
return new Path();
|
|
721
|
+
}
|
|
722
|
+
Path.prototype = path.prototype = {
|
|
723
|
+
constructor: Path,
|
|
724
|
+
moveTo: function(x, y) {
|
|
725
|
+
this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y);
|
|
726
|
+
},
|
|
727
|
+
closePath: function() {
|
|
728
|
+
this._x1 !== null && (this._x1 = this._x0, this._y1 = this._y0, this._ += "Z");
|
|
729
|
+
},
|
|
730
|
+
lineTo: function(x, y) {
|
|
731
|
+
this._ += "L" + (this._x1 = +x) + "," + (this._y1 = +y);
|
|
732
|
+
},
|
|
733
|
+
quadraticCurveTo: function(x1, y1, x, y) {
|
|
734
|
+
this._ += "Q" + +x1 + "," + +y1 + "," + (this._x1 = +x) + "," + (this._y1 = +y);
|
|
735
|
+
},
|
|
736
|
+
bezierCurveTo: function(x1, y1, x2, y2, x, y) {
|
|
737
|
+
this._ += "C" + +x1 + "," + +y1 + "," + +x2 + "," + +y2 + "," + (this._x1 = +x) + "," + (this._y1 = +y);
|
|
738
|
+
},
|
|
739
|
+
arcTo: function(x1, y1, x2, y2, r) {
|
|
740
|
+
x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
|
|
741
|
+
var x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
|
|
742
|
+
if (r < 0) throw new Error("negative radius: " + r);
|
|
743
|
+
if (this._x1 === null)
|
|
744
|
+
this._ += "M" + (this._x1 = x1) + "," + (this._y1 = y1);
|
|
745
|
+
else if (l01_2 > epsilon) if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r)
|
|
746
|
+
this._ += "L" + (this._x1 = x1) + "," + (this._y1 = y1);
|
|
747
|
+
else {
|
|
748
|
+
var x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l = r * Math.tan((pi$1 - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l / l01, t21 = l / l21;
|
|
749
|
+
Math.abs(t01 - 1) > epsilon && (this._ += "L" + (x1 + t01 * x01) + "," + (y1 + t01 * y01)), this._ += "A" + r + "," + r + ",0,0," + +(y01 * x20 > x01 * y20) + "," + (this._x1 = x1 + t21 * x21) + "," + (this._y1 = y1 + t21 * y21);
|
|
750
|
+
}
|
|
751
|
+
},
|
|
752
|
+
arc: function(x, y, r, a0, a1, ccw) {
|
|
753
|
+
x = +x, y = +y, r = +r, ccw = !!ccw;
|
|
754
|
+
var dx = r * Math.cos(a0), dy = r * Math.sin(a0), x0 = x + dx, y0 = y + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
|
|
755
|
+
if (r < 0) throw new Error("negative radius: " + r);
|
|
756
|
+
this._x1 === null ? this._ += "M" + x0 + "," + y0 : (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) && (this._ += "L" + x0 + "," + y0), r && (da < 0 && (da = da % tau$1 + tau$1), da > tauEpsilon ? this._ += "A" + r + "," + r + ",0,1," + cw + "," + (x - dx) + "," + (y - dy) + "A" + r + "," + r + ",0,1," + cw + "," + (this._x1 = x0) + "," + (this._y1 = y0) : da > epsilon && (this._ += "A" + r + "," + r + ",0," + +(da >= pi$1) + "," + cw + "," + (this._x1 = x + r * Math.cos(a1)) + "," + (this._y1 = y + r * Math.sin(a1))));
|
|
757
|
+
},
|
|
758
|
+
rect: function(x, y, w, h) {
|
|
759
|
+
this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y) + "h" + +w + "v" + +h + "h" + -w + "Z";
|
|
760
|
+
},
|
|
761
|
+
toString: function() {
|
|
762
|
+
return this._;
|
|
763
|
+
}
|
|
764
|
+
};
|
|
765
|
+
function constant(x) {
|
|
766
|
+
return function() {
|
|
767
|
+
return x;
|
|
768
|
+
};
|
|
769
|
+
}
|
|
770
|
+
var pi = Math.PI, tau = 2 * pi;
|
|
771
|
+
const d3SymbolCircle = {
|
|
772
|
+
draw: function(context, size) {
|
|
773
|
+
var r = Math.sqrt(size / pi);
|
|
774
|
+
context.moveTo(r, 0), context.arc(0, 0, r, 0, tau);
|
|
775
|
+
}
|
|
776
|
+
}, d3SymbolCross = {
|
|
777
|
+
draw: function(context, size) {
|
|
778
|
+
var r = Math.sqrt(size / 5) / 2;
|
|
779
|
+
context.moveTo(-3 * r, -r), context.lineTo(-r, -r), context.lineTo(-r, -3 * r), context.lineTo(r, -3 * r), context.lineTo(r, -r), context.lineTo(3 * r, -r), context.lineTo(3 * r, r), context.lineTo(r, r), context.lineTo(r, 3 * r), context.lineTo(-r, 3 * r), context.lineTo(-r, r), context.lineTo(-3 * r, r), context.closePath();
|
|
780
|
+
}
|
|
781
|
+
};
|
|
782
|
+
var tan30 = Math.sqrt(1 / 3), tan30_2 = tan30 * 2;
|
|
783
|
+
const d3SymbolDiamond = {
|
|
784
|
+
draw: function(context, size) {
|
|
785
|
+
var y = Math.sqrt(size / tan30_2), x = y * tan30;
|
|
786
|
+
context.moveTo(0, -y), context.lineTo(x, 0), context.lineTo(0, y), context.lineTo(-x, 0), context.closePath();
|
|
787
|
+
}
|
|
788
|
+
};
|
|
789
|
+
var ka = 0.8908130915292852, kr = Math.sin(pi / 10) / Math.sin(7 * pi / 10), kx = Math.sin(tau / 10) * kr, ky = -Math.cos(tau / 10) * kr;
|
|
790
|
+
const d3SymbolStar = {
|
|
791
|
+
draw: function(context, size) {
|
|
792
|
+
var r = Math.sqrt(size * ka), x = kx * r, y = ky * r;
|
|
793
|
+
context.moveTo(0, -r), context.lineTo(x, y);
|
|
794
|
+
for (var i = 1; i < 5; ++i) {
|
|
795
|
+
var a2 = tau * i / 5, c2 = Math.cos(a2), s2 = Math.sin(a2);
|
|
796
|
+
context.lineTo(s2 * r, -c2 * r), context.lineTo(c2 * x - s2 * y, s2 * x + c2 * y);
|
|
797
|
+
}
|
|
798
|
+
context.closePath();
|
|
799
|
+
}
|
|
800
|
+
}, d3SymbolSquare = {
|
|
801
|
+
draw: function(context, size) {
|
|
802
|
+
var w = Math.sqrt(size), x = -w / 2;
|
|
803
|
+
context.rect(x, x, w, w);
|
|
804
|
+
}
|
|
805
|
+
};
|
|
806
|
+
var sqrt3 = Math.sqrt(3);
|
|
807
|
+
const d3SymbolTriangle = {
|
|
808
|
+
draw: function(context, size) {
|
|
809
|
+
var y = -Math.sqrt(size / (sqrt3 * 3));
|
|
810
|
+
context.moveTo(0, y * 2), context.lineTo(-sqrt3 * y, -y), context.lineTo(sqrt3 * y, -y), context.closePath();
|
|
811
|
+
}
|
|
812
|
+
};
|
|
813
|
+
var c = -0.5, s = Math.sqrt(3) / 2, k = 1 / Math.sqrt(12), a = (k / 2 + 1) * 3;
|
|
814
|
+
const d3SymbolWye = {
|
|
815
|
+
draw: function(context, size) {
|
|
816
|
+
var r = Math.sqrt(size / a), x0 = r / 2, y0 = r * k, x1 = x0, y1 = r * k + r, x2 = -x1, y2 = y1;
|
|
817
|
+
context.moveTo(x0, y0), context.lineTo(x1, y1), context.lineTo(x2, y2), context.lineTo(c * x0 - s * y0, s * x0 + c * y0), context.lineTo(c * x1 - s * y1, s * x1 + c * y1), context.lineTo(c * x2 - s * y2, s * x2 + c * y2), context.lineTo(c * x0 + s * y0, c * y0 - s * x0), context.lineTo(c * x1 + s * y1, c * y1 - s * x1), context.lineTo(c * x2 + s * y2, c * y2 - s * x2), context.closePath();
|
|
818
|
+
}
|
|
819
|
+
};
|
|
820
|
+
function d3Symbol() {
|
|
821
|
+
var type = constant(d3SymbolCircle), size = constant(64), context = null;
|
|
822
|
+
function symbol() {
|
|
823
|
+
var buffer;
|
|
824
|
+
if (context || (context = buffer = path()), type.apply(this, arguments).draw(context, +size.apply(this, arguments)), buffer) return context = null, buffer + "" || null;
|
|
825
|
+
}
|
|
826
|
+
return symbol.type = function(_) {
|
|
827
|
+
return arguments.length ? (type = typeof _ == "function" ? _ : constant(_), symbol) : type;
|
|
828
|
+
}, symbol.size = function(_) {
|
|
829
|
+
return arguments.length ? (size = typeof _ == "function" ? _ : constant(+_), symbol) : size;
|
|
830
|
+
}, symbol.context = function(_) {
|
|
831
|
+
return arguments.length ? (context = _ ?? null, symbol) : context;
|
|
832
|
+
}, symbol;
|
|
833
|
+
}
|
|
834
|
+
var _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(obj) {
|
|
835
|
+
return typeof obj;
|
|
836
|
+
} : function(obj) {
|
|
837
|
+
return obj && typeof Symbol == "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
838
|
+
}, d3_identity = function(d) {
|
|
839
|
+
return d;
|
|
840
|
+
}, d3_reverse = function(arr) {
|
|
841
|
+
for (var mirror = [], i = 0, l = arr.length; i < l; i++)
|
|
842
|
+
mirror[i] = arr[l - i - 1];
|
|
843
|
+
return mirror;
|
|
844
|
+
}, d3_textWrapping = function(text, width) {
|
|
845
|
+
text.each(function() {
|
|
846
|
+
var text2 = select(this), words = text2.text().split(/\s+/).reverse(), word, line = [], lineHeight = 1.2;
|
|
847
|
+
text2.attr("y");
|
|
848
|
+
for (var dy = parseFloat(text2.attr("dy")) || 0, tspan = text2.text(null).append("tspan").attr("x", 0).attr("dy", dy + "em"); word = words.pop(); )
|
|
849
|
+
line.push(word), tspan.text(line.join(" ")), tspan.node().getComputedTextLength() > width && line.length > 1 && (line.pop(), tspan.text(line.join(" ")), line = [word], tspan = text2.append("tspan").attr("x", 0).attr("dy", lineHeight + dy + "em").text(word));
|
|
850
|
+
});
|
|
851
|
+
}, d3_mergeLabels = function() {
|
|
852
|
+
var gen = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], labels = arguments[1], domain = arguments[2], range = arguments[3], labelDelimiter = arguments[4];
|
|
853
|
+
if ((typeof labels > "u" ? "undefined" : _typeof(labels)) === "object") {
|
|
854
|
+
if (labels.length === 0) return gen;
|
|
855
|
+
for (var i = labels.length; i < gen.length; i++)
|
|
856
|
+
labels.push(gen[i]);
|
|
857
|
+
return labels;
|
|
858
|
+
} else if (typeof labels == "function") {
|
|
859
|
+
for (var customLabels = [], genLength = gen.length, _i = 0; _i < genLength; _i++)
|
|
860
|
+
customLabels.push(labels({
|
|
861
|
+
i: _i,
|
|
862
|
+
genLength,
|
|
863
|
+
generatedLabels: gen,
|
|
864
|
+
domain,
|
|
865
|
+
range,
|
|
866
|
+
labelDelimiter
|
|
867
|
+
}));
|
|
868
|
+
return customLabels;
|
|
869
|
+
}
|
|
870
|
+
return gen;
|
|
871
|
+
}, d3_linearLegend = function(scale, cells, labelFormat) {
|
|
872
|
+
var data = [];
|
|
873
|
+
if (cells.length > 1)
|
|
874
|
+
data = cells;
|
|
875
|
+
else
|
|
876
|
+
for (var domain = scale.domain(), increment = (domain[domain.length - 1] - domain[0]) / (cells - 1), i = 0; i < cells; i++)
|
|
877
|
+
data.push(domain[0] + i * increment);
|
|
878
|
+
var labels = data.map(labelFormat);
|
|
879
|
+
return {
|
|
880
|
+
data,
|
|
881
|
+
labels,
|
|
882
|
+
feature: function(d) {
|
|
883
|
+
return scale(d);
|
|
884
|
+
}
|
|
885
|
+
};
|
|
886
|
+
}, d3_quantLegend = function(scale, labelFormat, labelDelimiter) {
|
|
887
|
+
var labels = scale.range().map(function(d) {
|
|
888
|
+
var invert = scale.invertExtent(d);
|
|
889
|
+
return labelFormat(invert[0]) + " " + labelDelimiter + " " + labelFormat(invert[1]);
|
|
890
|
+
});
|
|
891
|
+
return {
|
|
892
|
+
data: scale.range(),
|
|
893
|
+
labels,
|
|
894
|
+
feature: d3_identity
|
|
895
|
+
};
|
|
896
|
+
}, d3_ordinalLegend = function(scale) {
|
|
897
|
+
return {
|
|
898
|
+
data: scale.domain(),
|
|
899
|
+
labels: scale.domain(),
|
|
900
|
+
feature: function(d) {
|
|
901
|
+
return scale(d);
|
|
902
|
+
}
|
|
903
|
+
};
|
|
904
|
+
}, d3_cellOver = function(cellDispatcher, d, obj) {
|
|
905
|
+
cellDispatcher.call("cellover", obj, d);
|
|
906
|
+
}, d3_cellOut = function(cellDispatcher, d, obj) {
|
|
907
|
+
cellDispatcher.call("cellout", obj, d);
|
|
908
|
+
}, d3_cellClick = function(cellDispatcher, d, obj) {
|
|
909
|
+
cellDispatcher.call("cellclick", obj, d);
|
|
910
|
+
}, helper = {
|
|
911
|
+
d3_drawShapes: function(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path2) {
|
|
912
|
+
shape === "rect" ? shapes.attr("height", shapeHeight).attr("width", shapeWidth) : shape === "circle" ? shapes.attr("r", shapeRadius) : shape === "line" ? shapes.attr("x1", 0).attr("x2", shapeWidth).attr("y1", 0).attr("y2", 0) : shape === "path" && shapes.attr("d", path2);
|
|
913
|
+
},
|
|
914
|
+
d3_addText: function(svg, enter, labels, classPrefix, labelWidth) {
|
|
915
|
+
enter.append("text").attr("class", classPrefix + "label");
|
|
916
|
+
var text = svg.selectAll("g." + classPrefix + "cell text." + classPrefix + "label").data(labels).text(d3_identity);
|
|
917
|
+
return labelWidth && svg.selectAll("g." + classPrefix + "cell text." + classPrefix + "label").call(d3_textWrapping, labelWidth), text;
|
|
918
|
+
},
|
|
919
|
+
d3_calcType: function(scale, ascending, cells, labels, labelFormat, labelDelimiter) {
|
|
920
|
+
var type = scale.invertExtent ? d3_quantLegend(scale, labelFormat, labelDelimiter) : scale.ticks ? d3_linearLegend(scale, cells, labelFormat) : d3_ordinalLegend(scale), range = scale.range && scale.range() || scale.domain();
|
|
921
|
+
return type.labels = d3_mergeLabels(type.labels, labels, scale.domain(), range, labelDelimiter), ascending && (type.labels = d3_reverse(type.labels), type.data = d3_reverse(type.data)), type;
|
|
922
|
+
},
|
|
923
|
+
d3_filterCells: function(type, cellFilter) {
|
|
924
|
+
var filterCells = type.data.map(function(d, i) {
|
|
925
|
+
return { data: d, label: type.labels[i] };
|
|
926
|
+
}).filter(cellFilter), dataValues = filterCells.map(function(d) {
|
|
927
|
+
return d.data;
|
|
928
|
+
}), labelValues = filterCells.map(function(d) {
|
|
929
|
+
return d.label;
|
|
930
|
+
});
|
|
931
|
+
return type.data = type.data.filter(function(d) {
|
|
932
|
+
return dataValues.indexOf(d) !== -1;
|
|
933
|
+
}), type.labels = type.labels.filter(function(d) {
|
|
934
|
+
return labelValues.indexOf(d) !== -1;
|
|
935
|
+
}), type;
|
|
936
|
+
},
|
|
937
|
+
d3_placement: function(orient, cell, cellTrans, text, textTrans, labelAlign) {
|
|
938
|
+
cell.attr("transform", cellTrans), text.attr("transform", textTrans), orient === "horizontal" && text.style("text-anchor", labelAlign);
|
|
939
|
+
},
|
|
940
|
+
d3_addEvents: function(cells, dispatcher) {
|
|
941
|
+
cells.on("mouseover.legend", function(d) {
|
|
942
|
+
d3_cellOver(dispatcher, d, this);
|
|
943
|
+
}).on("mouseout.legend", function(d) {
|
|
944
|
+
d3_cellOut(dispatcher, d, this);
|
|
945
|
+
}).on("click.legend", function(d) {
|
|
946
|
+
d3_cellClick(dispatcher, d, this);
|
|
947
|
+
});
|
|
948
|
+
},
|
|
949
|
+
d3_title: function(svg, title, classPrefix, titleWidth) {
|
|
950
|
+
if (title !== "") {
|
|
951
|
+
var titleText = svg.selectAll("text." + classPrefix + "legendTitle");
|
|
952
|
+
titleText.data([title]).enter().append("text").attr("class", classPrefix + "legendTitle"), svg.selectAll("text." + classPrefix + "legendTitle").text(title), titleWidth && svg.selectAll("text." + classPrefix + "legendTitle").call(d3_textWrapping, titleWidth);
|
|
953
|
+
var cellsSvg = svg.select("." + classPrefix + "legendCells"), yOffset = svg.select("." + classPrefix + "legendTitle").nodes().map(function(d) {
|
|
954
|
+
return d.getBBox().height;
|
|
955
|
+
})[0], xOffset = -cellsSvg.nodes().map(function(d) {
|
|
956
|
+
return d.getBBox().x;
|
|
957
|
+
})[0];
|
|
958
|
+
cellsSvg.attr("transform", "translate(" + xOffset + "," + yOffset + ")");
|
|
959
|
+
}
|
|
960
|
+
},
|
|
961
|
+
d3_defaultLocale: {
|
|
962
|
+
format,
|
|
963
|
+
formatPrefix
|
|
964
|
+
},
|
|
965
|
+
d3_defaultFormatSpecifier: ".01f",
|
|
966
|
+
d3_defaultDelimiter: "to"
|
|
967
|
+
};
|
|
968
|
+
function color() {
|
|
969
|
+
var scale = scaleLinear(), shape = "rect", shapeWidth = 15, shapeHeight = 15, shapeRadius = 10, shapePadding = 2, cells = [5], cellFilter = void 0, labels = [], classPrefix = "", useClass = !1, title = "", locale = helper.d3_defaultLocale, specifier = helper.d3_defaultFormatSpecifier, labelOffset = 10, labelAlign = "middle", labelDelimiter = helper.d3_defaultDelimiter, labelWrap = void 0, orient = "vertical", ascending = !1, path2 = void 0, titleWidth = void 0, legendDispatcher = dispatch("cellover", "cellout", "cellclick");
|
|
970
|
+
function legend(svg) {
|
|
971
|
+
var type = helper.d3_calcType(scale, ascending, cells, labels, locale.format(specifier), labelDelimiter), legendG = svg.selectAll("g").data([scale]);
|
|
972
|
+
legendG.enter().append("g").attr("class", classPrefix + "legendCells"), cellFilter && helper.d3_filterCells(type, cellFilter);
|
|
973
|
+
var cell = svg.select("." + classPrefix + "legendCells").selectAll("." + classPrefix + "cell").data(type.data), cellEnter = cell.enter().append("g").attr("class", classPrefix + "cell");
|
|
974
|
+
cellEnter.append(shape).attr("class", classPrefix + "swatch");
|
|
975
|
+
var shapes = svg.selectAll("g." + classPrefix + "cell " + shape + "." + classPrefix + "swatch").data(type.data);
|
|
976
|
+
helper.d3_addEvents(cellEnter, legendDispatcher), cell.exit().transition().style("opacity", 0).remove(), shapes.exit().transition().style("opacity", 0).remove(), shapes = shapes.merge(shapes), helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path2);
|
|
977
|
+
var text = helper.d3_addText(svg, cellEnter, type.labels, classPrefix, labelWrap);
|
|
978
|
+
cell = cellEnter.merge(cell);
|
|
979
|
+
var textSize = text.nodes().map(function(d) {
|
|
980
|
+
return d.getBBox();
|
|
981
|
+
}), shapeSize = shapes.nodes().map(function(d) {
|
|
982
|
+
return d.getBBox();
|
|
983
|
+
});
|
|
984
|
+
useClass ? shapes.attr("class", function(d) {
|
|
985
|
+
return classPrefix + "swatch " + type.feature(d);
|
|
986
|
+
}) : shape == "line" ? shapes.style("stroke", type.feature) : shapes.style("fill", type.feature);
|
|
987
|
+
var cellTrans = void 0, textTrans = void 0, textAlign = labelAlign == "start" ? 0 : labelAlign == "middle" ? 0.5 : 1;
|
|
988
|
+
orient === "vertical" ? function() {
|
|
989
|
+
var cellSize = textSize.map(function(d, i) {
|
|
990
|
+
return Math.max(d.height, shapeSize[i].height);
|
|
991
|
+
});
|
|
992
|
+
cellTrans = function(d, i) {
|
|
993
|
+
var height = sum(cellSize.slice(0, i));
|
|
994
|
+
return "translate(0, " + (height + i * shapePadding) + ")";
|
|
995
|
+
}, textTrans = function(d, i) {
|
|
996
|
+
return "translate( " + (shapeSize[i].width + shapeSize[i].x + labelOffset) + ", " + (shapeSize[i].y + shapeSize[i].height / 2 + 5) + ")";
|
|
997
|
+
};
|
|
998
|
+
}() : orient === "horizontal" && (cellTrans = function(d, i) {
|
|
999
|
+
return "translate(" + i * (shapeSize[i].width + shapePadding) + ",0)";
|
|
1000
|
+
}, textTrans = function(d, i) {
|
|
1001
|
+
return "translate(" + (shapeSize[i].width * textAlign + shapeSize[i].x) + `,
|
|
1002
|
+
` + (shapeSize[i].height + shapeSize[i].y + labelOffset + 8) + ")";
|
|
1003
|
+
}), helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign), helper.d3_title(svg, title, classPrefix, titleWidth), cell.transition().style("opacity", 1);
|
|
1004
|
+
}
|
|
1005
|
+
return legend.scale = function(_) {
|
|
1006
|
+
return arguments.length ? (scale = _, legend) : scale;
|
|
1007
|
+
}, legend.cells = function(_) {
|
|
1008
|
+
return arguments.length ? ((_.length > 1 || _ >= 2) && (cells = _), legend) : cells;
|
|
1009
|
+
}, legend.cellFilter = function(_) {
|
|
1010
|
+
return arguments.length ? (cellFilter = _, legend) : cellFilter;
|
|
1011
|
+
}, legend.shape = function(_, d) {
|
|
1012
|
+
return arguments.length ? ((_ == "rect" || _ == "circle" || _ == "line" || _ == "path" && typeof d == "string") && (shape = _, path2 = d), legend) : shape;
|
|
1013
|
+
}, legend.shapeWidth = function(_) {
|
|
1014
|
+
return arguments.length ? (shapeWidth = +_, legend) : shapeWidth;
|
|
1015
|
+
}, legend.shapeHeight = function(_) {
|
|
1016
|
+
return arguments.length ? (shapeHeight = +_, legend) : shapeHeight;
|
|
1017
|
+
}, legend.shapeRadius = function(_) {
|
|
1018
|
+
return arguments.length ? (shapeRadius = +_, legend) : shapeRadius;
|
|
1019
|
+
}, legend.shapePadding = function(_) {
|
|
1020
|
+
return arguments.length ? (shapePadding = +_, legend) : shapePadding;
|
|
1021
|
+
}, legend.labels = function(_) {
|
|
1022
|
+
return arguments.length ? (labels = _, legend) : labels;
|
|
1023
|
+
}, legend.labelAlign = function(_) {
|
|
1024
|
+
return arguments.length ? ((_ == "start" || _ == "end" || _ == "middle") && (labelAlign = _), legend) : labelAlign;
|
|
1025
|
+
}, legend.locale = function(_) {
|
|
1026
|
+
return arguments.length ? (locale = formatLocale(_), legend) : locale;
|
|
1027
|
+
}, legend.labelFormat = function(_) {
|
|
1028
|
+
return arguments.length ? (specifier = formatSpecifier(_), legend) : legend.locale().format(specifier);
|
|
1029
|
+
}, legend.labelOffset = function(_) {
|
|
1030
|
+
return arguments.length ? (labelOffset = +_, legend) : labelOffset;
|
|
1031
|
+
}, legend.labelDelimiter = function(_) {
|
|
1032
|
+
return arguments.length ? (labelDelimiter = _, legend) : labelDelimiter;
|
|
1033
|
+
}, legend.labelWrap = function(_) {
|
|
1034
|
+
return arguments.length ? (labelWrap = _, legend) : labelWrap;
|
|
1035
|
+
}, legend.useClass = function(_) {
|
|
1036
|
+
return arguments.length ? ((_ === !0 || _ === !1) && (useClass = _), legend) : useClass;
|
|
1037
|
+
}, legend.orient = function(_) {
|
|
1038
|
+
return arguments.length ? (_ = _.toLowerCase(), (_ == "horizontal" || _ == "vertical") && (orient = _), legend) : orient;
|
|
1039
|
+
}, legend.ascending = function(_) {
|
|
1040
|
+
return arguments.length ? (ascending = !!_, legend) : ascending;
|
|
1041
|
+
}, legend.classPrefix = function(_) {
|
|
1042
|
+
return arguments.length ? (classPrefix = _, legend) : classPrefix;
|
|
1043
|
+
}, legend.title = function(_) {
|
|
1044
|
+
return arguments.length ? (title = _, legend) : title;
|
|
1045
|
+
}, legend.titleWidth = function(_) {
|
|
1046
|
+
return arguments.length ? (titleWidth = _, legend) : titleWidth;
|
|
1047
|
+
}, legend.textWrap = function(_) {
|
|
1048
|
+
return arguments.length ? (textWrap = _, legend) : textWrap;
|
|
1049
|
+
}, legend.on = function() {
|
|
1050
|
+
var value = legendDispatcher.on.apply(legendDispatcher, arguments);
|
|
1051
|
+
return value === legendDispatcher ? legend : value;
|
|
1052
|
+
}, legend;
|
|
1053
|
+
}
|
|
1054
|
+
class Legend extends SVGWidget {
|
|
1055
|
+
constructor(owner) {
|
|
1056
|
+
super();
|
|
1057
|
+
__publicField(this, "_owner");
|
|
1058
|
+
__publicField(this, "_targetWidget");
|
|
1059
|
+
__publicField(this, "_targetWidgetMonitor");
|
|
1060
|
+
__publicField(this, "_legendOrdinal");
|
|
1061
|
+
__publicField(this, "_disabled", []);
|
|
1062
|
+
__publicField(this, "_symbolTypeMap", {
|
|
1063
|
+
circle: d3SymbolCircle,
|
|
1064
|
+
cross: d3SymbolCross,
|
|
1065
|
+
diamond: d3SymbolDiamond,
|
|
1066
|
+
square: d3SymbolSquare,
|
|
1067
|
+
star: d3SymbolStar,
|
|
1068
|
+
triangle: d3SymbolTriangle,
|
|
1069
|
+
wye: d3SymbolWye
|
|
1070
|
+
});
|
|
1071
|
+
__publicField(this, "_g");
|
|
1072
|
+
__publicField(this, "_containerSize");
|
|
1073
|
+
this._owner = owner, this._drawStartPos = "origin";
|
|
1074
|
+
const context = this;
|
|
1075
|
+
this._legendOrdinal = color().shape("path", d3Symbol().type(d3SymbolCircle).size(150)()).shapePadding(10).shapeRadius(10).on("cellclick", function(d) {
|
|
1076
|
+
context.onClick(d, this);
|
|
1077
|
+
}).on("cellover", (d) => {
|
|
1078
|
+
context.onOver(d, this);
|
|
1079
|
+
}).on("cellout", (d) => {
|
|
1080
|
+
context.onOut(d, this);
|
|
1081
|
+
});
|
|
1082
|
+
}
|
|
1083
|
+
isDisabled(d) {
|
|
1084
|
+
return typeof d > "u" ? !1 : typeof d == "string" ? d.indexOf("__") === 0 || this._disabled.indexOf(d) >= 0 : d instanceof Database.Field ? d.id().indexOf("__") === 0 || this._disabled.indexOf(d.id()) >= 0 : this._disabled.indexOf(d) >= 0;
|
|
1085
|
+
}
|
|
1086
|
+
filteredFields() {
|
|
1087
|
+
switch (this.dataFamily()) {
|
|
1088
|
+
case "2D":
|
|
1089
|
+
return this.fields();
|
|
1090
|
+
case "ND":
|
|
1091
|
+
return this.fields().filter((d) => !this.isDisabled(d));
|
|
1092
|
+
}
|
|
1093
|
+
return this.fields();
|
|
1094
|
+
}
|
|
1095
|
+
filteredColumns() {
|
|
1096
|
+
switch (this.dataFamily()) {
|
|
1097
|
+
case "2D":
|
|
1098
|
+
return this.columns();
|
|
1099
|
+
case "ND":
|
|
1100
|
+
return this.columns().filter((d) => !this.isDisabled(d));
|
|
1101
|
+
}
|
|
1102
|
+
return this.columns();
|
|
1103
|
+
}
|
|
1104
|
+
filteredData() {
|
|
1105
|
+
switch (this.dataFamily()) {
|
|
1106
|
+
case "2D":
|
|
1107
|
+
return this.data().filter((row) => !this.isDisabled(row[0]));
|
|
1108
|
+
case "ND":
|
|
1109
|
+
const disabledCols = {};
|
|
1110
|
+
let anyDisabled = !1;
|
|
1111
|
+
return this.columns().forEach((col, idx) => {
|
|
1112
|
+
const disabled = this.isDisabled(col);
|
|
1113
|
+
disabledCols[idx] = disabled, disabled && (anyDisabled = !0);
|
|
1114
|
+
}), anyDisabled ? this.data().map((row) => row.filter((cell, idx) => !disabledCols[idx])) : this.data();
|
|
1115
|
+
}
|
|
1116
|
+
return this.data();
|
|
1117
|
+
}
|
|
1118
|
+
isRainbow() {
|
|
1119
|
+
const widget = this.getWidget();
|
|
1120
|
+
return widget && widget._palette && widget._palette.type() === "rainbow";
|
|
1121
|
+
}
|
|
1122
|
+
targetWidget(_) {
|
|
1123
|
+
if (!arguments.length) return this._targetWidget;
|
|
1124
|
+
if (this._targetWidget = _, this._targetWidgetMonitor && (this._targetWidgetMonitor.remove(), delete this._targetWidgetMonitor), this._targetWidget) {
|
|
1125
|
+
const context = this;
|
|
1126
|
+
this._targetWidgetMonitor = this._targetWidget.monitor(function(key, newProp, oldProp, source) {
|
|
1127
|
+
switch (key) {
|
|
1128
|
+
case "chart":
|
|
1129
|
+
case "columns":
|
|
1130
|
+
case "data":
|
|
1131
|
+
case "paletteID":
|
|
1132
|
+
context.lazyRender();
|
|
1133
|
+
break;
|
|
1134
|
+
}
|
|
1135
|
+
});
|
|
1136
|
+
}
|
|
1137
|
+
return this;
|
|
1138
|
+
}
|
|
1139
|
+
getWidget() {
|
|
1140
|
+
if (this._targetWidget)
|
|
1141
|
+
switch (this._targetWidget.classID()) {
|
|
1142
|
+
case "composite_MultiChart":
|
|
1143
|
+
return this._targetWidget.chart();
|
|
1144
|
+
}
|
|
1145
|
+
return this._targetWidget;
|
|
1146
|
+
}
|
|
1147
|
+
getPalette() {
|
|
1148
|
+
const widget = this.getWidget();
|
|
1149
|
+
if (widget && widget._palette)
|
|
1150
|
+
switch (widget._palette.type()) {
|
|
1151
|
+
case "ordinal":
|
|
1152
|
+
return Palette.ordinal(widget._palette.id());
|
|
1153
|
+
case "rainbow":
|
|
1154
|
+
return Palette.rainbow(widget._palette.id());
|
|
1155
|
+
}
|
|
1156
|
+
return Palette.ordinal("default");
|
|
1157
|
+
}
|
|
1158
|
+
getPaletteType() {
|
|
1159
|
+
return this.getPalette().type();
|
|
1160
|
+
}
|
|
1161
|
+
fillColorFunc() {
|
|
1162
|
+
const widget = this.getWidget();
|
|
1163
|
+
if (widget && widget.fillColor)
|
|
1164
|
+
return widget._palette && widget.paletteID && widget._palette.name !== widget.paletteID() && (widget._palette = widget._palette.switch(widget.paletteID())), (row, col, sel) => widget.fillColor(row, col, sel);
|
|
1165
|
+
const palette = Palette.ordinal(widget && widget.paletteID && widget.paletteID() || "default");
|
|
1166
|
+
return (row, col, sel) => palette(col);
|
|
1167
|
+
}
|
|
1168
|
+
fillColor(row, col, sel) {
|
|
1169
|
+
return this.fillColorFunc()(row, col, sel);
|
|
1170
|
+
}
|
|
1171
|
+
enter(domNode, element) {
|
|
1172
|
+
super.enter(domNode, element), this._g = element.append("g").attr("class", "legendOrdinal");
|
|
1173
|
+
}
|
|
1174
|
+
calcMetaData() {
|
|
1175
|
+
let dataArr = [], total = 0, maxLabelWidth = 0;
|
|
1176
|
+
const colLength = this.columns().length;
|
|
1177
|
+
if (this._targetWidget) {
|
|
1178
|
+
const columns = this.columns();
|
|
1179
|
+
switch (this.getPaletteType()) {
|
|
1180
|
+
case "ordinal":
|
|
1181
|
+
const fillColor = this.fillColorFunc();
|
|
1182
|
+
let val = 0;
|
|
1183
|
+
switch (this.dataFamily()) {
|
|
1184
|
+
case "2D":
|
|
1185
|
+
dataArr = this.data().map(function(n, i) {
|
|
1186
|
+
val = this.data()[i].slice(1, colLength).reduce((acc, n2) => acc + n2, 0);
|
|
1187
|
+
const disabled = this.isDisabled(n[0]);
|
|
1188
|
+
disabled || (total += val);
|
|
1189
|
+
const label = n[0] + (!disabled && this.showSeriesTotal() ? ` (${val})` : ""), textSize = this.textSize(label);
|
|
1190
|
+
return maxLabelWidth < textSize.width && (maxLabelWidth = textSize.width), [fillColor(n, n[0], !1), n[0], label];
|
|
1191
|
+
}, this);
|
|
1192
|
+
break;
|
|
1193
|
+
case "ND":
|
|
1194
|
+
dataArr = this.columns().filter((col) => col.indexOf("__") !== 0).filter(function(n, i) {
|
|
1195
|
+
return i > 0;
|
|
1196
|
+
}).map(function(n, i) {
|
|
1197
|
+
val = this.data().reduce((acc, n2) => acc + n2[i + 1], 0);
|
|
1198
|
+
const disabled = this.isDisabled(columns[i + 1]), label = n + (!disabled && this.showSeriesTotal() ? ` (${val})` : "");
|
|
1199
|
+
disabled || (total += val);
|
|
1200
|
+
const textSize = this.textSize(label);
|
|
1201
|
+
return maxLabelWidth < textSize.width && (maxLabelWidth = textSize.width), [fillColor(void 0, n, !1), n, label];
|
|
1202
|
+
}, this);
|
|
1203
|
+
break;
|
|
1204
|
+
default:
|
|
1205
|
+
dataArr = this.columns().map(function(n) {
|
|
1206
|
+
return [fillColor(void 0, n, !1), n];
|
|
1207
|
+
}, this);
|
|
1208
|
+
break;
|
|
1209
|
+
}
|
|
1210
|
+
break;
|
|
1211
|
+
case "rainbow":
|
|
1212
|
+
const palette = this.getPalette(), format$1 = format(this.rainbowFormat()), widget = this.getWidget(), steps = this.rainbowBins(), weightMin = widget._dataMinWeight, weightMax = widget._dataMaxWeight, stepWeightDiff = (weightMax - weightMin) / (steps - 1);
|
|
1213
|
+
dataArr.push([palette(weightMin, weightMin, weightMax), format$1(weightMin)]);
|
|
1214
|
+
for (let x = 1; x < steps - 1; ++x) {
|
|
1215
|
+
let mid = stepWeightDiff * x;
|
|
1216
|
+
Math.floor(mid) > parseInt(dataArr[0][1]) && (mid = Math.floor(mid)), dataArr.push([palette(mid, weightMin, weightMax), format$1(mid)]);
|
|
1217
|
+
}
|
|
1218
|
+
dataArr.push([palette(weightMax, weightMin, weightMax), format$1(weightMax)]);
|
|
1219
|
+
break;
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
return {
|
|
1223
|
+
dataArr,
|
|
1224
|
+
total,
|
|
1225
|
+
maxLabelWidth
|
|
1226
|
+
};
|
|
1227
|
+
}
|
|
1228
|
+
update(domNode, element) {
|
|
1229
|
+
super.update(domNode, element);
|
|
1230
|
+
const { dataArr, maxLabelWidth, total } = this.calcMetaData(), radius = this.shapeRadius(), size = this.radiusToSymbolSize(radius), strokeWidth = 1;
|
|
1231
|
+
let shapePadding = this.itemPadding();
|
|
1232
|
+
this.orientation() === "horizontal" && (shapePadding += maxLabelWidth - radius * 2);
|
|
1233
|
+
const ordinal = scaleOrdinal().domain(dataArr.map((row) => row[1])).range(dataArr.map((row) => row[0]));
|
|
1234
|
+
this._legendOrdinal.shape("path", d3Symbol().type(this._symbolTypeMap[this.symbolType()]).size(size)()).orient(this.orientation()).title(this.title()).labelWrap(this.labelMaxWidth()).labelAlign(this.labelAlign()).shapePadding(shapePadding).scale(ordinal).labels((d) => dataArr[d.i][2]), this._g.call(this._legendOrdinal), this.updateDisabled(element, dataArr);
|
|
1235
|
+
const legendCellsBbox = this._g.select(".legendCells").node().getBBox();
|
|
1236
|
+
let offsetX = Math.abs(legendCellsBbox.x), offsetY = Math.abs(legendCellsBbox.y) + strokeWidth;
|
|
1237
|
+
if (this.orientation() === "horizontal") {
|
|
1238
|
+
if (this.labelAlign() === "start" ? offsetX += strokeWidth : this.labelAlign() === "end" && (offsetX -= strokeWidth), this.width() > legendCellsBbox.width) {
|
|
1239
|
+
const extraWidth = this.width() - legendCellsBbox.width;
|
|
1240
|
+
offsetX += extraWidth / 2;
|
|
1241
|
+
}
|
|
1242
|
+
} else if (this.orientation() === "vertical" && (offsetX += strokeWidth, this._containerSize.height > legendCellsBbox.height)) {
|
|
1243
|
+
const extraHeight = this.height() - legendCellsBbox.height;
|
|
1244
|
+
offsetY += extraHeight / 2;
|
|
1245
|
+
}
|
|
1246
|
+
this._g.attr("transform", `translate(${offsetX}, ${offsetY})`), this.pos({
|
|
1247
|
+
x: 0,
|
|
1248
|
+
y: 0
|
|
1249
|
+
}), this._legendOrdinal.labelOffset(this.itemPadding());
|
|
1250
|
+
const legendTotal = this._g.selectAll(".legendTotal").data(dataArr.length && this.showLegendTotal() ? [total] : []), totalText = `Total: ${total}`, totalOffsetX = -offsetX, totalOffsetY = legendCellsBbox.height + this.itemPadding() + strokeWidth;
|
|
1251
|
+
this.enableOverflowScroll(!1), this.enableOverflow(!0), legendTotal.enter().append("text").classed("legendTotal", !0).merge(legendTotal).attr("transform", `translate(${totalOffsetX}, ${totalOffsetY})`).text(totalText), legendTotal.exit().remove();
|
|
1252
|
+
}
|
|
1253
|
+
updateDisabled(element, dataArr) {
|
|
1254
|
+
element.style("cursor", "pointer").selectAll("path.swatch").filter((d, i) => i < dataArr.length).style("stroke", (d, i) => dataArr[i][0]).style(
|
|
1255
|
+
"fill",
|
|
1256
|
+
(d, i) => this._disabled.indexOf(d) < 0 ? dataArr[i][0] : "white"
|
|
341
1257
|
);
|
|
342
|
-
}`,document.head.appendChild(l)}})();var z=class extends Ht{static{d(this,"Border")}_colCount;_rowCount;_colSize;_rowSize;_shrinkWrapBoxes;_watch;_offsetX;_offsetY;_dragCell;_dragCellSize;_dragCellStartSize;_handleTop;_handleLeft;_dragPrevX;_dragPrevY;_cellSizes;contentDiv;_scrollBarWidth;_borderHandles;_sectionTypeArr;constructor(){super(),this._tag="div",this._colCount=0,this._rowCount=0,this._colSize=0,this._rowSize=0,this._shrinkWrapBoxes={},this.content([]),this.sectionTypes([])}watchWidget(e){if(this._watch===void 0&&(this._watch={}),this._watch[e.id()]&&(this._watch[e.id()].remove(),delete this._watch[e.id()]),e){let t=this;this._watch[e.id()]=e.monitor(function(i,o,r){r!==o&&t.lazyPostUpdate()})}}lazyPostUpdate=_e.debounce(function(){this.postUpdate()},100);applyLayoutType(){let e=this.borderLayoutObject();this.content().forEach(function(t,i){t._fixedLeft=e[this.sectionTypes()[i]].left,t._fixedTop=e[this.sectionTypes()[i]].top,t._fixedWidth=e[this.sectionTypes()[i]].width,t._fixedHeight=e[this.sectionTypes()[i]].height,t._dragHandles=this.cellSpecificDragHandles(this.sectionTypes()[i])},this)}cellSpecificDragHandles(e){switch(e){case"top":return["s"];case"right":return["w"];case"bottom":return["n"];case"left":return["e"];case"center":return[]}}borderLayoutObject(e){let t={},i=this,o,r,s,a,n,h,u,p,b=this.target().getBoundingClientRect(),m={};m.top=b.top,m.left=b.left,m.bottom=b.bottom,m.right=b.right,this.target()instanceof SVGElement?(m.width=parseFloat(this.target().getAttribute("width")),m.height=parseFloat(this.target().getAttribute("height"))):(m.width=b.width,m.height=b.height),this.sectionTypes().indexOf("top")!==-1&&(o=this.topSize(),r=this.topPercentage(),typeof this._shrinkWrapBoxes.top<"u"&&(o=this._shrinkWrapBoxes.top.height+this.gutter(),r=0)),this.sectionTypes().indexOf("bottom")!==-1&&(s=this.bottomSize(),a=this.bottomPercentage(),typeof this._shrinkWrapBoxes.bottom<"u"&&(s=this._shrinkWrapBoxes.bottom.height+this.gutter(),a=0)),this.sectionTypes().indexOf("left")!==-1&&(n=this.leftSize(),h=this.leftPercentage(),typeof this._shrinkWrapBoxes.left<"u"&&(n=this._shrinkWrapBoxes.left.width+this.gutter(),h=0)),this.sectionTypes().indexOf("right")!==-1&&(u=this.rightSize(),p=this.rightPercentage(),typeof this._shrinkWrapBoxes.right<"u"&&(u=this._shrinkWrapBoxes.right.width+this.gutter(),p=0));let C=P({width:{px:0,"%":100},height:{px:o,"%":r},top:{px:0,"%":0},left:{px:0,"%":0}}),T=P({width:{px:0,"%":100},height:{px:s,"%":a},top:{px:0,"%":100},left:{px:0,"%":0}});T.top-=T.height;let W=P({width:{px:n,"%":h},height:{px:-C.height-T.height,"%":100},top:{px:C.height,"%":0},left:{px:0,"%":0}}),y=P({width:{px:u,"%":p},height:{px:-C.height-T.height,"%":100},top:{px:C.height,"%":0},left:{px:0,"%":100}});y.left-=y.width;let w=P({width:{px:-y.width-W.width,"%":100},height:{px:-C.height-T.height,"%":100},top:{px:C.height,"%":0},left:{px:W.width,"%":0}});return t.top=C,t.bottom=T,t.right=y,t.left=W,t.center=w,t;function P(_){return _.width.px=typeof _.width.px<"u"?_.width.px:0,_.width["%"]=typeof _.width["%"]<"u"?_.width["%"]:0,_.height.px=typeof _.height.px<"u"?_.height.px:0,_.height["%"]=typeof _.height["%"]<"u"?_.height["%"]:0,{width:_.width.px+_.width["%"]/100*i.width(),height:_.height.px+_.height["%"]/100*i.height(),top:_.top.px+_.top["%"]/100*i.height()+i.gutter()/2,left:_.left.px+_.left["%"]/100*i.width()+i.gutter()/2}}d(P,"_sectionPlacementObject")}clearContent(e){if(!e)this.content().forEach(function(t){return t.target(null),!1}),X("#"+this.id()+" > div.borderHandle").classed("borderHandleDisabled",!0),delete this._watch,this.content([]),this.sectionTypes([]);else{let t=this.sectionTypes().indexOf(e);t>=0&&(this._watch&&this.content()[t]&&delete this._watch[this.content()[t].id()],this.content()[t].target(null),X("#"+this.id()+" > div.borderHandle_"+e).classed("borderHandleDisabled",!0),this.content().splice(t,1),this.sectionTypes().splice(t,1))}}hasContent(e,t,i){return this.sectionTypes().indexOf(e)>=0}setContent(e,t,i){if(this.clearContent(e),i=typeof i<"u"?i:"",t){let o=new k().surfaceBorderWidth(0).widget(t).title(i);this.watchWidget(t),this.content().push(o),this.sectionTypes().push(e)}return this}getCell(e){let t=this.sectionTypes().indexOf(e);return t>=0?this.content()[t]:null}getContent(e){let t=this.sectionTypes().indexOf(e);return t>=0?this.content()[t].widget():null}setLayoutOffsets(){this._offsetX=this._element.node().getBoundingClientRect().left+this.gutter()/2,this._offsetY=this._element.node().getBoundingClientRect().top+this.gutter()/2}dragStart(e){let t=ft();t.sourceEvent.stopPropagation();let i=this;this._dragCell=e,this._dragCellStartSize=this[e+"Size"](),this[e+"ShrinkWrap"]()&&(this[e+"Percentage"](0),this[e+"ShrinkWrap"](!1));let o=X("#"+i.id()+" > div.borderHandle_"+e);i._handleTop=parseFloat(o.style("top").split("px")[0]),i._handleLeft=parseFloat(o.style("left").split("px")[0]),this._dragPrevX=t.sourceEvent.clientX,this._dragPrevY=t.sourceEvent.clientY}dragTick(e){let t=this,i=ft(),o=this._dragPrevX-i.sourceEvent.clientX,r=this._dragPrevY-i.sourceEvent.clientY;switch(e){case"top":case"bottom":s(e,r);break;case"right":case"left":s(e,o);break}function s(a,n){if(n===0)return;let h=be("#"+t.id()+" > div.borderHandle"),u=X("#"+t.id()+" > div.borderHandle_"+a);u.classed("borderHandle_top")?(u.style("top",t._handleTop-n+"px"),t._cellSizes.topHeight=t._handleTop-n,t._cellSizes.leftHeight=t._cellSizes.height,t._cellSizes.leftHeight-=t._cellSizes.topHeight,t._cellSizes.leftHeight-=t._cellSizes.bottomHeight,t._cellSizes.rightHeight=t._cellSizes.leftHeight):u.classed("borderHandle_right")?(u.style("left",t._handleLeft-n+"px"),t._cellSizes.rightWidth=t._cellSizes.width-t._handleLeft+n):u.classed("borderHandle_bottom")?(u.style("top",t._handleTop-n+"px"),t._cellSizes.bottomHeight=t._cellSizes.height-t._handleTop+n,t._cellSizes.leftHeight=t._cellSizes.height,t._cellSizes.leftHeight-=t._cellSizes.bottomHeight,t._cellSizes.leftHeight-=t._cellSizes.topHeight,t._cellSizes.rightHeight=t._cellSizes.leftHeight):u.classed("borderHandle_left")&&(u.style("left",t._handleLeft-n+"px"),t._cellSizes.leftWidth=t._handleLeft-n),h.each(function(){let p=X(this);p.classed("borderHandle_top")?(p.style("width",t._cellSizes.width+"px"),p.style("top",t._cellSizes.topHeight-3+"px")):p.classed("borderHandle_right")?(p.style("left",t._cellSizes.width-t._cellSizes.rightWidth+"px"),p.style("top",t._cellSizes.topHeight+3+"px"),p.style("height",t._cellSizes.rightHeight+"px")):p.classed("borderHandle_bottom")?(p.style("width",t._cellSizes.width+"px"),p.style("top",t._cellSizes.height-t._cellSizes.bottomHeight-3+"px")):p.classed("borderHandle_left")&&(p.style("left",t._cellSizes.leftWidth+"px"),p.style("height",t._cellSizes.leftHeight+"px"),p.style("top",t._cellSizes.topHeight+3+"px"))})}d(s,"_moveHandles")}dragEnd(e){if(e){let t=ft(),i=this._dragPrevX-t.sourceEvent.clientX,o=this._dragPrevY-t.sourceEvent.clientY;switch(e){case"top":o!==0&&(this.topPercentage(0),this.topSize(this.topSize()===0?this.getContent("top").getBBox().height-o:this.topSize()-o));break;case"right":i!==0&&(this.rightPercentage(0),this.rightSize(this.rightSize()===0?this.getContent("right").getBBox().width+i:this.rightSize()+i));break;case"bottom":o!==0&&(this.bottomPercentage(0),this.bottomSize(this.bottomSize()===0?this.getContent("bottom").getBBox().height+o:this.bottomSize()+o));break;case"left":i!==0&&(this.leftPercentage(0),this.leftSize(this.leftSize()===0?this.getContent("left").getBBox().width-i:this.leftSize()-i));break}this._dragPrevX=t.sourceEvent.clientX,this._dragPrevY=t.sourceEvent.clientY}this.render()}size(e){let t=Ht.prototype.size.apply(this,arguments);return arguments.length&&this.contentDiv&&this.contentDiv.style("width",this._size.width+"px").style("height",this._size.height+"px"),t}enter(e,t){super.enter(e,t);let i=this;t.style("position","relative"),this.contentDiv=t.append("div").classed("border-content",!0),this._scrollBarWidth=fe.getScrollbarWidth(),this._borderHandles=["top","left","right","bottom"],t.selectAll("div.borderHandle").data(this._borderHandles).enter().append("div").classed("borderHandle",!0).each(function(r){X(this).classed("borderHandle_"+r,!0).classed("borderHandleDisabled",i.getContent(r)===null)})}update(e,t){super.update(e,t),this._sectionTypeArr=this.sectionTypes();let i=this;t.classed("design-mode",this.designMode()),this.setLayoutOffsets();let o=this.contentDiv.selectAll(".cell_"+this._id).data(this.content(),function(n){return n._id}),r=o.enter().append("div").classed("cell_"+this._id,!0).style("position","absolute").each(function(n,h){X(this).classed("border-cell border-cell-"+i._sectionTypeArr[h],!0),n.target(this),X("#"+i.id()+" > div.borderHandle_"+i._sectionTypeArr[h]).classed("borderHandleDisabled",!1)}).merge(o);r.each(function(n,h){let u=i.sectionTypes()[h];typeof i[u+"ShrinkWrap"]<"u"&&i[u+"ShrinkWrap"]()?(n.render(),i._shrinkWrapBoxes[u]=n.widget().getBBox(!0)):delete i._shrinkWrapBoxes[u]});let s=me().on("start",function(n,h){i.dragStart.call(i,n,h)}).on("drag",function(n,h){i.dragTick.call(i,n,h)}).on("end",function(n,h){i.dragEnd.call(i,n,h)});this.designMode()?t.selectAll("#"+this.id()+" > div.borderHandle").call(s):t.selectAll("#"+this.id()+" > div.borderHandle").on(".drag",null);let a=this.borderLayoutObject();this.content().forEach(function(n,h){n._fixedLeft=a[this.sectionTypes()[h]].left,n._fixedTop=a[this.sectionTypes()[h]].top,n._fixedWidth=a[this.sectionTypes()[h]].width,n._fixedHeight=a[this.sectionTypes()[h]].height,n._dragHandles=[]},this),r.style("left",function(n){return n._fixedLeft+"px"}).style("top",function(n){return n._fixedTop+"px"}).style("width",function(n){return n._fixedWidth-i.gutter()+"px"}).style("height",function(n){return n._fixedHeight-i.gutter()+"px"}).each(function(n){n._placeholderElement.attr("draggable",i.designMode()).selectAll(".dragHandle").attr("draggable",i.designMode()),n.surfacePadding(i.surfacePadding()).resize()}),o.exit().each(function(n){n.target(null)}).remove(),this.getCellSizes(),t.selectAll("#"+this.id()+" > div.borderHandle").each(function(){let n=X(this);n.classed("borderHandle_top")?(n.style("width",i._cellSizes.width+"px"),n.style("top",i._cellSizes.topHeight-3+"px")):n.classed("borderHandle_right")?(n.style("left",i._cellSizes.width-i._cellSizes.rightWidth+"px"),n.style("top",i._cellSizes.topHeight+3+"px"),n.style("height",i._cellSizes.rightHeight+"px")):n.classed("borderHandle_bottom")?(n.style("width",i._cellSizes.width+"px"),n.style("top",i._cellSizes.height-i._cellSizes.bottomHeight-3+"px")):n.classed("borderHandle_left")&&(n.style("left",i._cellSizes.leftWidth+"px"),n.style("height",i._cellSizes.leftHeight+"px"),n.style("top",i._cellSizes.topHeight+3+"px"))})}getCellSizes(){let e=this;e._cellSizes={};let t=this.element().node().getBoundingClientRect();e._cellSizes.width=t.width,e._cellSizes.height=t.height,this.element().selectAll("#"+this.id()+" > div > div.border-cell").each(function(){let o=X(this);if(typeof o.node=="function"){let r=o.node().getBoundingClientRect();o.classed("border-cell-top")?e._cellSizes.topHeight=r.height:o.classed("border-cell-left")?(e._cellSizes.leftWidth=r.width,e._cellSizes.leftHeight=r.height):o.classed("border-cell-right")?(e._cellSizes.rightWidth=r.width,e._cellSizes.rightHeight=r.height):o.classed("border-cell-bottom")&&(e._cellSizes.bottomHeight=r.height)}}),["height","width","topHeight","bottomHeight","leftHeight","rightHeight","leftWidth","rightWidth"].forEach(function(o){e._cellSizes[o]=e._cellSizes[o]===void 0?0:e._cellSizes[o]})}postUpdate(e,t){let i=this;this.content().forEach(function(o){if(o._element.node()!==null&&o.widget()){let r=o.widget().getBBox(!1,!0),s=o.widget().getBBox(!0,!0);(r.width!==s.width||r.height!==s.height)&&i.lazyRender()}})}exit(e,t){this.content().forEach(i=>i.target(null)),super.exit(e,t)}};z.prototype._class+=" layout_Border";z.prototype.publish("designMode",!1,"boolean","Design Mode",null,{tags:["Basic"]});z.prototype.publish("content",[],"widgetArray","widgets",null,{tags:["Intermediate"]});z.prototype.publish("gutter",0,"number","Gap Between Widgets",null,{tags:["Basic"]});z.prototype.publish("topShrinkWrap",!1,"boolean","'Top' Cell shrinks to fit content",null,{tags:["Intermediate"]});z.prototype.publish("leftShrinkWrap",!1,"boolean","'Left' Cell shrinks to fit content",null,{tags:["Intermediate"]});z.prototype.publish("rightShrinkWrap",!1,"boolean","'Right' Cell shrinks to fit content",null,{tags:["Intermediate"]});z.prototype.publish("bottomShrinkWrap",!1,"boolean","'Bottom' Cell shrinks to fit content",null,{tags:["Intermediate"]});z.prototype.publish("topSize",0,"number","Height of the 'Top' Cell (px)",null,{tags:["Private"]});z.prototype.publish("leftSize",0,"number","Width of the 'Left' Cell (px)",null,{tags:["Private"]});z.prototype.publish("rightSize",0,"number","Width of the 'Right' Cell (px)",null,{tags:["Private"]});z.prototype.publish("bottomSize",0,"number","Height of the 'Bottom' Cell (px)",null,{tags:["Private"]});z.prototype.publish("topPercentage",20,"number","Percentage (of parent) Height of the 'Top' Cell",null,{tags:["Private"]});z.prototype.publish("leftPercentage",20,"number","Percentage (of parent) Width of the 'Left' Cell",null,{tags:["Private"]});z.prototype.publish("rightPercentage",20,"number","Percentage (of parent) Width of the 'Right' Cell",null,{tags:["Private"]});z.prototype.publish("bottomPercentage",20,"number","Percentage (of parent) Height of the 'Bottom' Cell",null,{tags:["Private"]});z.prototype.publish("surfacePadding",0,"number","Cell Padding (px)",null,{tags:["Intermediate"]});z.prototype.publish("sectionTypes",[],"array","Section Types sharing an index with 'content' - Used to determine position/size.",null,{tags:["Private"]});import{HTMLWidget as ye,Platform as It}from"@hpcc-js/common";(function(){if(!document.getElementById("23362289")){var l=document.createElement("style");l.id="23362289",l.textContent=`.layout_Border2 {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
}`,document.head.appendChild(l)}})();var K=class extends we{static{d(this,"Carousel")}_prevActive=0;_root;activeWidget(){return this.widgets()[this.active()]}enter(e,t){super.enter(e,t),this._root=t.append("div").attr("id",`${this.id()}_root`)}update(e,t){super.update(e,t);let i=this.active(),o=this.width();this._root.style("width",`${o}px`).style("height",`${this.height()}px`);let r=this._root.selectAll(`#${this.id()}_root > .carouselItem`).data(this.widgets(),a=>a.id()),s=r.enter().append("div").attr("class","carouselItem").each(function(a){a.target(this)}).merge(r).style("left",(a,n)=>`${(n-this._prevActive)*o}px`).style("width",`${o}px`);this._prevActive!==i&&(s.style("display",(a,n)=>n===this._prevActive||n===i?null:"none").transition().duration(this.transitionDuration()).style("left",(a,n)=>`${(n-i)*o}px`).on("end",function(a,n){xe(this).style("display",()=>n===i?null:"none")}),this._prevActive=i),r.exit().each(function(a){a.target(null)}).remove()}exit(e,t){this.widgets().forEach(i=>i.target(null)),super.exit(e,t)}render(e){return super.render(t=>{if(!this.visible()||this.isDOMHidden())e&&e(t);else{let i=this.activeWidget();i&&i.resize(this.size()).render(o=>{e&&e(t)})}})}};K.prototype._class+=" layout_Carousel";K.prototype.publish("widgets",[],"widgetArray","Widgets",null,{render:!1});K.prototype.publish("active",0,"number","Active widget");K.prototype.publish("transitionDuration",500,"number","Transition duration");import{Button as Xt,IconBar as Ke,ProgressBar as Je,Spacer as Vt,SVGWidget as Nt,Text as Ze,TitleBar as je,ToggleButton as zt,Utility as $t}from"@hpcc-js/common";import{Table as Qe}from"@hpcc-js/dgrid2";import{select as ti}from"@hpcc-js/common";import{instanceOfIHighlight as Yt}from"@hpcc-js/api";import{Database as Ve,Palette as ht,SVGWidget as Ne}from"@hpcc-js/common";import{format as $e}from"@hpcc-js/common";import{scaleOrdinal as Ue}from"@hpcc-js/common";var bt=Math.PI,_t=2*bt,j=1e-6,ve=_t-j;function mt(){this._x0=this._y0=this._x1=this._y1=null,this._=""}d(mt,"Path");function Ft(){return new mt}d(Ft,"path");mt.prototype=Ft.prototype={constructor:mt,moveTo:d(function(l,e){this._+="M"+(this._x0=this._x1=+l)+","+(this._y0=this._y1=+e)},"moveTo"),closePath:d(function(){this._x1!==null&&(this._x1=this._x0,this._y1=this._y0,this._+="Z")},"closePath"),lineTo:d(function(l,e){this._+="L"+(this._x1=+l)+","+(this._y1=+e)},"lineTo"),quadraticCurveTo:d(function(l,e,t,i){this._+="Q"+ +l+","+ +e+","+(this._x1=+t)+","+(this._y1=+i)},"quadraticCurveTo"),bezierCurveTo:d(function(l,e,t,i,o,r){this._+="C"+ +l+","+ +e+","+ +t+","+ +i+","+(this._x1=+o)+","+(this._y1=+r)},"bezierCurveTo"),arcTo:d(function(l,e,t,i,o){l=+l,e=+e,t=+t,i=+i,o=+o;var r=this._x1,s=this._y1,a=t-l,n=i-e,h=r-l,u=s-e,p=h*h+u*u;if(o<0)throw new Error("negative radius: "+o);if(this._x1===null)this._+="M"+(this._x1=l)+","+(this._y1=e);else if(p>j)if(!(Math.abs(u*a-n*h)>j)||!o)this._+="L"+(this._x1=l)+","+(this._y1=e);else{var b=t-r,m=i-s,C=a*a+n*n,T=b*b+m*m,W=Math.sqrt(C),y=Math.sqrt(p),w=o*Math.tan((bt-Math.acos((C+p-T)/(2*W*y)))/2),P=w/y,_=w/W;Math.abs(P-1)>j&&(this._+="L"+(l+P*h)+","+(e+P*u)),this._+="A"+o+","+o+",0,0,"+ +(u*b>h*m)+","+(this._x1=l+_*a)+","+(this._y1=e+_*n)}},"arcTo"),arc:d(function(l,e,t,i,o,r){l=+l,e=+e,t=+t,r=!!r;var s=t*Math.cos(i),a=t*Math.sin(i),n=l+s,h=e+a,u=1^r,p=r?i-o:o-i;if(t<0)throw new Error("negative radius: "+t);this._x1===null?this._+="M"+n+","+h:(Math.abs(this._x1-n)>j||Math.abs(this._y1-h)>j)&&(this._+="L"+n+","+h),t&&(p<0&&(p=p%_t+_t),p>ve?this._+="A"+t+","+t+",0,1,"+u+","+(l-s)+","+(e-a)+"A"+t+","+t+",0,1,"+u+","+(this._x1=n)+","+(this._y1=h):p>j&&(this._+="A"+t+","+t+",0,"+ +(p>=bt)+","+u+","+(this._x1=l+t*Math.cos(o))+","+(this._y1=e+t*Math.sin(o))))},"arc"),rect:d(function(l,e,t,i){this._+="M"+(this._x0=this._x1=+l)+","+(this._y0=this._y1=+e)+"h"+ +t+"v"+ +i+"h"+-t+"Z"},"rect"),toString:d(function(){return this._},"toString")};var yt=Ft;function it(l){return d(function(){return l},"constant")}d(it,"default");var Q=Math.PI,uo=Q/2,ot=2*Q;var rt={draw:d(function(l,e){var t=Math.sqrt(e/Q);l.moveTo(t,0),l.arc(0,0,t,0,ot)},"draw")};var wt={draw:d(function(l,e){var t=Math.sqrt(e/5)/2;l.moveTo(-3*t,-t),l.lineTo(-t,-t),l.lineTo(-t,-3*t),l.lineTo(t,-3*t),l.lineTo(t,-t),l.lineTo(3*t,-t),l.lineTo(3*t,t),l.lineTo(t,t),l.lineTo(t,3*t),l.lineTo(-t,3*t),l.lineTo(-t,t),l.lineTo(-3*t,t),l.closePath()},"draw")};var Mt=Math.sqrt(.3333333333333333),Ce=Mt*2,xt={draw:d(function(l,e){var t=Math.sqrt(e/Ce),i=t*Mt;l.moveTo(0,-t),l.lineTo(i,0),l.lineTo(0,t),l.lineTo(-i,0),l.closePath()},"draw")};var Te=.8908130915292852,Dt=Math.sin(Q/10)/Math.sin(7*Q/10),Se=Math.sin(ot/10)*Dt,Be=-Math.cos(ot/10)*Dt,vt={draw:d(function(l,e){var t=Math.sqrt(e*Te),i=Se*t,o=Be*t;l.moveTo(0,-t),l.lineTo(i,o);for(var r=1;r<5;++r){var s=ot*r/5,a=Math.cos(s),n=Math.sin(s);l.lineTo(n*t,-a*t),l.lineTo(a*i-n*o,n*i+a*o)}l.closePath()},"draw")};var Ct={draw:d(function(l,e){var t=Math.sqrt(e),i=-t/2;l.rect(i,i,t,t)},"draw")};var Tt=Math.sqrt(3),St={draw:d(function(l,e){var t=-Math.sqrt(e/(Tt*3));l.moveTo(0,t*2),l.lineTo(-Tt*t,-t),l.lineTo(Tt*t,-t),l.closePath()},"draw")};var H=-.5,I=Math.sqrt(3)/2,Bt=1/Math.sqrt(12),We=(Bt/2+1)*3,Wt={draw:d(function(l,e){var t=Math.sqrt(e/We),i=t/2,o=t*Bt,r=i,s=t*Bt+t,a=-r,n=s;l.moveTo(i,o),l.lineTo(r,s),l.lineTo(a,n),l.lineTo(H*i-I*o,I*i+H*o),l.lineTo(H*r-I*s,I*r+H*s),l.lineTo(H*a-I*n,I*a+H*n),l.lineTo(H*i+I*o,H*o-I*i),l.lineTo(H*r+I*s,H*s-I*r),l.lineTo(H*a+I*n,H*n-I*a),l.closePath()},"draw")};function lt(){var l=it(rt),e=it(64),t=null;function i(){var o;if(t||(t=o=yt()),l.apply(this,arguments).draw(t,+e.apply(this,arguments)),o)return t=null,o+""||null}return d(i,"symbol"),i.type=function(o){return arguments.length?(l=typeof o=="function"?o:it(o),i):l},i.size=function(o){return arguments.length?(e=typeof o=="function"?o:it(+o),i):e},i.context=function(o){return arguments.length?(t=o??null,i):t},i}d(lt,"default");import{select as ze}from"@hpcc-js/common";import{format as Pe,formatLocale as Ae,formatPrefix as Oe,formatSpecifier as ke}from"@hpcc-js/common";import{dispatch as He}from"@hpcc-js/common";import{scaleLinear as Ie}from"@hpcc-js/common";import{max as Jo,sum as Fe}from"@hpcc-js/common";var Me=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(l){return typeof l}:function(l){return l&&typeof Symbol=="function"&&l.constructor===Symbol&&l!==Symbol.prototype?"symbol":typeof l},Et=d(function(e){return e},"d3_identity"),Lt=d(function(e){for(var t=[],i=0,o=e.length;i<o;i++)t[i]=e[o-i-1];return t},"d3_reverse"),Rt=d(function(e,t){e.each(function(){for(var i=ze(this),o=i.text().split(/\s+/).reverse(),r,s=[],a=0,n=1.2,h=i.attr("y"),u=parseFloat(i.attr("dy"))||0,p=i.text(null).append("tspan").attr("x",0).attr("dy",u+"em");r=o.pop();)s.push(r),p.text(s.join(" ")),p.node().getComputedTextLength()>t&&s.length>1&&(s.pop(),p.text(s.join(" ")),s=[r],p=i.append("tspan").attr("x",0).attr("dy",n+u+"em").text(r))})},"d3_textWrapping"),De=d(function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:[],t=arguments[1],i=arguments[2],o=arguments[3],r=arguments[4];if((typeof t>"u"?"undefined":Me(t))==="object"){if(t.length===0)return e;for(var s=t.length;s<e.length;s++)t.push(e[s]);return t}else if(typeof t=="function"){for(var a=[],n=e.length,h=0;h<n;h++)a.push(t({i:h,genLength:n,generatedLabels:e,domain:i,range:o,labelDelimiter:r}));return a}return e},"d3_mergeLabels"),Le=d(function(e,t,i){var o=[];if(t.length>1)o=t;else for(var r=e.domain(),s=(r[r.length-1]-r[0])/(t-1),a=0;a<t;a++)o.push(r[0]+a*s);var n=o.map(i);return{data:o,labels:n,feature:d(function(u){return e(u)},"feature")}},"d3_linearLegend"),Re=d(function(e,t,i){var o=e.range().map(function(r){var s=e.invertExtent(r);return t(s[0])+" "+i+" "+t(s[1])});return{data:e.range(),labels:o,feature:Et}},"d3_quantLegend"),Ee=d(function(e){return{data:e.domain(),labels:e.domain(),feature:d(function(i){return e(i)},"feature")}},"d3_ordinalLegend"),Ge=d(function(e,t,i){e.call("cellover",i,t)},"d3_cellOver"),Ye=d(function(e,t,i){e.call("cellout",i,t)},"d3_cellOut"),Xe=d(function(e,t,i){e.call("cellclick",i,t)},"d3_cellClick"),V={d3_drawShapes:d(function(e,t,i,o,r,s){e==="rect"?t.attr("height",i).attr("width",o):e==="circle"?t.attr("r",r):e==="line"?t.attr("x1",0).attr("x2",o).attr("y1",0).attr("y2",0):e==="path"&&t.attr("d",s)},"d3_drawShapes"),d3_addText:d(function(e,t,i,o,r){t.append("text").attr("class",o+"label");var s=e.selectAll("g."+o+"cell text."+o+"label").data(i).text(Et);return r&&e.selectAll("g."+o+"cell text."+o+"label").call(Rt,r),s},"d3_addText"),d3_calcType:d(function(e,t,i,o,r,s){var a=e.invertExtent?Re(e,r,s):e.ticks?Le(e,i,r):Ee(e),n=e.range&&e.range()||e.domain();return a.labels=De(a.labels,o,e.domain(),n,s),t&&(a.labels=Lt(a.labels),a.data=Lt(a.data)),a},"d3_calcType"),d3_filterCells:d(function(e,t){var i=e.data.map(function(s,a){return{data:s,label:e.labels[a]}}).filter(t),o=i.map(function(s){return s.data}),r=i.map(function(s){return s.label});return e.data=e.data.filter(function(s){return o.indexOf(s)!==-1}),e.labels=e.labels.filter(function(s){return r.indexOf(s)!==-1}),e},"d3_filterCells"),d3_placement:d(function(e,t,i,o,r,s){t.attr("transform",i),o.attr("transform",r),e==="horizontal"&&o.style("text-anchor",s)},"d3_placement"),d3_addEvents:d(function(e,t){e.on("mouseover.legend",function(i){Ge(t,i,this)}).on("mouseout.legend",function(i){Ye(t,i,this)}).on("click.legend",function(i){Xe(t,i,this)})},"d3_addEvents"),d3_title:d(function(e,t,i,o){if(t!==""){var r=e.selectAll("text."+i+"legendTitle");r.data([t]).enter().append("text").attr("class",i+"legendTitle"),e.selectAll("text."+i+"legendTitle").text(t),o&&e.selectAll("text."+i+"legendTitle").call(Rt,o);var s=e.select("."+i+"legendCells"),a=e.select("."+i+"legendTitle").nodes().map(function(h){return h.getBBox().height})[0],n=-s.nodes().map(function(h){return h.getBBox().x})[0];s.attr("transform","translate("+n+","+a+")")}},"d3_title"),d3_defaultLocale:{format:Pe,formatPrefix:Oe},d3_defaultFormatSpecifier:".01f",d3_defaultDelimiter:"to"};function Gt(){var l=Ie(),e="rect",t=15,i=15,o=10,r=2,s=[5],a=void 0,n=[],h="",u=!1,p="",b=V.d3_defaultLocale,m=V.d3_defaultFormatSpecifier,C=10,T="middle",W=V.d3_defaultDelimiter,y=void 0,w="vertical",P=!1,_=void 0,L=void 0,q=He("cellover","cellout","cellclick");function g(c){var R=V.d3_calcType(l,P,s,n,b.format(m),W),Zt=c.selectAll("g").data([l]);Zt.enter().append("g").attr("class",h+"legendCells"),a&&V.d3_filterCells(R,a);var et=c.select("."+h+"legendCells").selectAll("."+h+"cell").data(R.data),at=et.enter().append("g").attr("class",h+"cell");at.append(e).attr("class",h+"swatch");var N=c.selectAll("g."+h+"cell "+e+"."+h+"swatch").data(R.data);V.d3_addEvents(at,q),et.exit().transition().style("opacity",0).remove(),N.exit().transition().style("opacity",0).remove(),N=N.merge(N),V.d3_drawShapes(e,N,i,t,o,_);var kt=V.d3_addText(c,at,R.labels,h,y);et=at.merge(et);var jt=kt.nodes().map(function($){return $.getBBox()}),E=N.nodes().map(function($){return $.getBBox()});u?N.attr("class",function($){return h+"swatch "+R.feature($)}):e=="line"?N.style("stroke",R.feature):N.style("fill",R.feature);var ct=void 0,pt=void 0,Qt=T=="start"?0:T=="middle"?.5:1;w==="vertical"?function(){var $=jt.map(function(st,D){return Math.max(st.height,E[D].height)});ct=d(function(D,J){var te=Fe($.slice(0,J));return"translate(0, "+(te+J*r)+")"},"cellTrans"),pt=d(function(D,J){return"translate( "+(E[J].width+E[J].x+C)+", "+(E[J].y+E[J].height/2+5)+")"},"textTrans")}():w==="horizontal"&&(ct=d(function(st,D){return"translate("+D*(E[D].width+r)+",0)"},"cellTrans"),pt=d(function(st,D){return"translate("+(E[D].width*Qt+E[D].x)+`,
|
|
372
|
-
`+(E[D].height+E[D].y+C+8)+")"},"textTrans")),V.d3_placement(w,et,ct,kt,pt,T),V.d3_title(c,p,h,L),et.transition().style("opacity",1)}return d(g,"legend"),g.scale=function(c){return arguments.length?(l=c,g):l},g.cells=function(c){return arguments.length?((c.length>1||c>=2)&&(s=c),g):s},g.cellFilter=function(c){return arguments.length?(a=c,g):a},g.shape=function(c,R){return arguments.length?((c=="rect"||c=="circle"||c=="line"||c=="path"&&typeof R=="string")&&(e=c,_=R),g):e},g.shapeWidth=function(c){return arguments.length?(t=+c,g):t},g.shapeHeight=function(c){return arguments.length?(i=+c,g):i},g.shapeRadius=function(c){return arguments.length?(o=+c,g):o},g.shapePadding=function(c){return arguments.length?(r=+c,g):r},g.labels=function(c){return arguments.length?(n=c,g):n},g.labelAlign=function(c){return arguments.length?((c=="start"||c=="end"||c=="middle")&&(T=c),g):T},g.locale=function(c){return arguments.length?(b=Ae(c),g):b},g.labelFormat=function(c){return arguments.length?(m=ke(c),g):g.locale().format(m)},g.labelOffset=function(c){return arguments.length?(C=+c,g):C},g.labelDelimiter=function(c){return arguments.length?(W=c,g):W},g.labelWrap=function(c){return arguments.length?(y=c,g):y},g.useClass=function(c){return arguments.length?((c===!0||c===!1)&&(u=c),g):u},g.orient=function(c){return arguments.length?(c=c.toLowerCase(),(c=="horizontal"||c=="vertical")&&(w=c),g):w},g.ascending=function(c){return arguments.length?(P=!!c,g):P},g.classPrefix=function(c){return arguments.length?(h=c,g):h},g.title=function(c){return arguments.length?(p=c,g):p},g.titleWidth=function(c){return arguments.length?(L=c,g):L},g.textWrap=function(c){return arguments.length?(textWrap=c,g):textWrap},g.on=function(){var c=q.on.apply(q,arguments);return c===q?g:c},g}d(Gt,"color");var A=class extends Ne{static{d(this,"Legend")}_owner;_targetWidget;_targetWidgetMonitor;_legendOrdinal;_disabled=[];_symbolTypeMap={circle:rt,cross:wt,diamond:xt,square:Ct,star:vt,triangle:St,wye:Wt};constructor(e){super(),this._owner=e,this._drawStartPos="origin";let t=this;this._legendOrdinal=Gt().shape("path",lt().type(rt).size(150)()).shapePadding(10).shapeRadius(10).on("cellclick",function(i){t.onClick(i,this)}).on("cellover",i=>{t.onOver(i,this)}).on("cellout",i=>{t.onOut(i,this)})}isDisabled(e){return typeof e>"u"?!1:typeof e=="string"?e.indexOf("__")===0||this._disabled.indexOf(e)>=0:e instanceof Ve.Field?e.id().indexOf("__")===0||this._disabled.indexOf(e.id())>=0:this._disabled.indexOf(e)>=0}filteredFields(){switch(this.dataFamily()){case"2D":return this.fields();case"ND":return this.fields().filter(e=>!this.isDisabled(e))}return this.fields()}filteredColumns(){switch(this.dataFamily()){case"2D":return this.columns();case"ND":return this.columns().filter(e=>!this.isDisabled(e))}return this.columns()}filteredData(){switch(this.dataFamily()){case"2D":return this.data().filter(i=>!this.isDisabled(i[0]));case"ND":let e={},t=!1;return this.columns().forEach((i,o)=>{let r=this.isDisabled(i);e[o]=r,r&&(t=!0)}),t?this.data().map(i=>i.filter((o,r)=>!e[r])):this.data()}return this.data()}isRainbow(){let e=this.getWidget();return e&&e._palette&&e._palette.type()==="rainbow"}targetWidget(e){if(!arguments.length)return this._targetWidget;if(this._targetWidget=e,this._targetWidgetMonitor&&(this._targetWidgetMonitor.remove(),delete this._targetWidgetMonitor),this._targetWidget){let t=this;this._targetWidgetMonitor=this._targetWidget.monitor(function(i,o,r,s){switch(i){case"chart":case"columns":case"data":case"paletteID":t.lazyRender();break}})}return this}getWidget(){if(this._targetWidget)switch(this._targetWidget.classID()){case"composite_MultiChart":return this._targetWidget.chart()}return this._targetWidget}getPalette(){let e=this.getWidget();if(e&&e._palette)switch(e._palette.type()){case"ordinal":return ht.ordinal(e._palette.id());case"rainbow":return ht.rainbow(e._palette.id())}return ht.ordinal("default")}getPaletteType(){return this.getPalette().type()}fillColorFunc(){let e=this.getWidget();if(e&&e.fillColor)return e._palette&&e.paletteID&&e._palette.name!==e.paletteID()&&(e._palette=e._palette.switch(e.paletteID())),(i,o,r)=>e.fillColor(i,o,r);let t=ht.ordinal(e&&e.paletteID&&e.paletteID()||"default");return(i,o,r)=>t(o)}fillColor(e,t,i){return this.fillColorFunc()(e,t,i)}_g;enter(e,t){super.enter(e,t),this._g=t.append("g").attr("class","legendOrdinal")}calcMetaData(){let e=[],t=0,i=0,o=this.columns().length;if(this._targetWidget){let r=this.columns();switch(this.getPaletteType()){case"ordinal":let s=this.fillColorFunc(),a=0;switch(this.dataFamily()){case"2D":e=this.data().map(function(y,w){a=this.data()[w].slice(1,o).reduce((q,g)=>q+g,0);let P=this.isDisabled(y[0]);P||(t+=a);let _=y[0]+(!P&&this.showSeriesTotal()?` (${a})`:""),L=this.textSize(_);return i<L.width&&(i=L.width),[s(y,y[0],!1),y[0],_]},this);break;case"ND":e=this.columns().filter(y=>y.indexOf("__")!==0).filter(function(y,w){return w>0}).map(function(y,w){a=this.data().reduce((q,g)=>q+g[w+1],0);let P=this.isDisabled(r[w+1]),_=y+(!P&&this.showSeriesTotal()?` (${a})`:"");P||(t+=a);let L=this.textSize(_);return i<L.width&&(i=L.width),[s(void 0,y,!1),y,_]},this);break;default:e=this.columns().map(function(y){return[s(void 0,y,!1),y]},this);break}break;case"rainbow":let n=this.getPalette(),h=$e(this.rainbowFormat()),u=this.getWidget(),p=this.rainbowBins(),b=u._dataMinWeight,m=u._dataMaxWeight,C=(m-b)/(p-1);e.push([n(b,b,m),h(b)]);for(let T=1;T<p-1;++T){let W=C*T;Math.floor(W)>parseInt(e[0][1])&&(W=Math.floor(W)),e.push([n(W,b,m),h(W)])}e.push([n(m,b,m),h(m)]);break}}return{dataArr:e,total:t,maxLabelWidth:i}}update(e,t){super.update(e,t);let{dataArr:i,maxLabelWidth:o,total:r}=this.calcMetaData(),s=this.shapeRadius(),a=this.radiusToSymbolSize(s),n=1,h=this.itemPadding();this.orientation()==="horizontal"&&(h+=o-s*2);let u=Ue().domain(i.map(w=>w[1])).range(i.map(w=>w[0]));this._legendOrdinal.shape("path",lt().type(this._symbolTypeMap[this.symbolType()]).size(a)()).orient(this.orientation()).title(this.title()).labelWrap(this.labelMaxWidth()).labelAlign(this.labelAlign()).shapePadding(h).scale(u).labels(w=>i[w.i][2]),this._g.call(this._legendOrdinal),this.updateDisabled(t,i);let p=this._g.select(".legendCells").node().getBBox(),b=Math.abs(p.x),m=Math.abs(p.y)+n;if(this.orientation()==="horizontal"){if(this.labelAlign()==="start"?b+=n:this.labelAlign()==="end"&&(b-=n),this.width()>p.width){let w=this.width()-p.width;b+=w/2}}else if(this.orientation()==="vertical"&&(b+=n,this._containerSize.height>p.height)){let w=this.height()-p.height;m+=w/2}this._g.attr("transform",`translate(${b}, ${m})`),this.pos({x:0,y:0}),this._legendOrdinal.labelOffset(this.itemPadding());let C=this._g.selectAll(".legendTotal").data(i.length&&this.showLegendTotal()?[r]:[]),T=`Total: ${r}`,W=-b,y=p.height+this.itemPadding()+n;this.enableOverflowScroll(!1),this.enableOverflow(!0),C.enter().append("text").classed("legendTotal",!0).merge(C).attr("transform",`translate(${W}, ${y})`).text(T),C.exit().remove()}updateDisabled(e,t){e.style("cursor","pointer").selectAll("path.swatch").filter((i,o)=>o<t.length).style("stroke",(i,o)=>t[o][0]).style("fill",(i,o)=>this._disabled.indexOf(i)<0?t[o][0]:"white")}postUpdate(e,t){let i;this._boundingBox&&(i=this._boundingBox.width,this._boundingBox.width=this._size.width),super.postUpdate(e,t),i!==void 0&&(this._boundingBox.width=i),this._parentRelativeDiv.style("overflow","hidden")}exit(e,t){super.exit(e,t)}radiusToSymbolSize(e){let t=Math.pow(e,2)*Math.PI;switch(this.symbolType()){case"star":return t*.45;case"triangle":return t*.65;case"cross":case"diamond":case"wye":return t*.75;case"circle":return t;case"square":return t*1.3}}onClick(e,t){switch(this.getPaletteType()){case"ordinal":switch(this.dataFamily()){case"2D":case"ND":let i=this._disabled.indexOf(e);i<0?this._disabled.push(e):this._disabled.splice(i,1),this._owner.refreshColumns(),this._owner.refreshData(),this._owner.render();break}break}}onOver(e,t){if(Yt(this._owner))switch(this.getPaletteType()){case"ordinal":switch(this.dataFamily()){case"2D":case"ND":this._disabled.indexOf(e)<0&&this._owner.highlightColumn(e);break}break}}onOut(e,t){if(Yt(this._owner))switch(this.getPaletteType()){case"ordinal":switch(this.dataFamily()){case"2D":case"ND":this._owner.highlightColumn();break}break}}onDblClick(e,t){}onMouseOver(e,t){}_containerSize;resize(e){let t;if(this.fitToContent()){this._containerSize=e;let i=this.getBBox();e.width>i.width&&(i.width=e.width),e.height>i.height&&(i.height=e.height),t=super.resize.apply(this,[{...i}])}else t=super.resize.apply(this,arguments);return t}};A.prototype._class+=" layout_Legend";A.prototype.publish("title","","string","Title");A.prototype.publish("symbolType","circle","set","Shape of each legend item",["circle","cross","diamond","square","star","triangle","wye"]);A.prototype.publish("labelMaxWidth",null,"number","Max Label Width (pixels)",null,{optional:!0});A.prototype.publish("orientation","vertical","set","Orientation of Legend rows",["vertical","horizontal"],{tags:["Private"]});A.prototype.publish("dataFamily","ND","set","Type of data",["1D","2D","ND","map","graph","any"],{tags:["Private"]});A.prototype.publish("rainbowFormat",",","string","Rainbow number formatting",null,{tags:["Private"],optional:!0,disable:d(l=>!l.isRainbow(),"disable")});A.prototype.publish("rainbowBins",8,"number","Number of rainbow bins",null,{tags:["Private"],disable:d(l=>!l.isRainbow(),"disable")});A.prototype.publish("showSeriesTotal",!1,"boolean","Show value next to series");A.prototype.publish("showLegendTotal",!1,"boolean","Show a total of the series values under the legend",null);A.prototype.publish("itemPadding",8,"number","Padding between legend items (pixels)");A.prototype.publish("shapeRadius",7,"number","Radius of legend shape (pixels)");A.prototype.publish("fitToContent",!0,"boolean","If true, resize will simply reapply the bounding box dimensions");A.prototype.publish("labelAlign","start","set","Horizontal alignment of legend item label (for horizontal orientation only)",["start","middle","end"],{optional:!0,disable:d(l=>l.orientation()==="vertical","disable")});import{HTMLWidget as qe}from"@hpcc-js/common";(function(){if(!document.getElementById("810b6dee")){var l=document.createElement("style");l.id="810b6dee",l.textContent=`.layout_Modal-header {
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
.
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
.
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
.
|
|
388
|
-
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
}
|
|
420
|
-
`,document.head.appendChild(l)}})();var f=class extends x{static{d(this,"ChartPanel")}_legend=new A(this).enableOverflow(!0);_progressBar=new Je;_autoScale=!1;_resolutions={tiny:{width:100,height:100},small:{width:300,height:300}};_modal=new S;_highlight;_scale;_orig_size;_toggleInfo=new zt().faChar("fa-info-circle").tooltip(".Description").selected(!1).on("enabled",()=>this.description()!=="").on("click",()=>{if(this._toggleInfo.selected()){this._modal.title(this.title()).widget(new Ze().text(this.description())).show(!0).render();let e=this._modal._close;this._modal._close=()=>{this._toggleInfo.selected(!1).render(),this._modal._close=e}}}).on("mouseMove",()=>{}).on("mouseOut",()=>{});_toggleData=new zt().faChar("fa-table").tooltip("Data").on("click",()=>{this.dataVisible(this._toggleData.selected()),this.render()});_buttonDownload=new Xt().faChar("fa-download").tooltip("Download").on("click",()=>{this.downloadCSV()});_buttonDownloadImage=new Xt().faChar("fa-image").tooltip("Download Image").on("click",()=>{this.downloadPNG()});_toggleLegend=new zt().faChar("fa-list-ul").tooltip("Legend").selected(!1).on("click",()=>{let e=this._toggleLegend.selected();this.legendPosition()==="bottom"?this.showBottom(e):this.legendPosition()==="right"&&this.showRight(e),this.legendVisible(e),this.render()});_spacer=new Vt;_titleBar=new je().buttons([this._toggleData,this._buttonDownload,this._buttonDownloadImage,this._spacer,this._toggleLegend]);_carousel=new K;_table=new Qe;_widget;_hideLegendToggleList=["dgrid_Table"];constructor(){super(),this._tag="div"}fields(e){return arguments.length?(super.fields(e),this._legend.fields(e),this.refreshFields(),this):super.fields()}refreshFields(){return this._widget.fields(this._legend.filteredFields()),this._table.fields(this._legend.filteredFields()),this}columns(e,t){return arguments.length?(super.columns(e,t),this._legend.columns(e,t),this.refreshColumns(),this):super.columns()}refreshColumns(){return this._widget.columns(this._legend.filteredColumns()),this._table.columns(this._legend.filteredColumns()),this}data(e){return arguments.length?(super.data(e),this._legend.data(e),this.refreshData(),this):super.data()}refreshData(){return this._widget.data(this._legend.filteredData()),this._table.data(this._legend.filteredData()),this}highlight(e){return arguments.length?(this._highlight=e,this):this._highlight}startProgress(){this._progressBar.start()}finishProgress(){this._progressBar.finish()}buttons(e){return arguments.length?(this._titleBar.buttons(e),this):this._titleBar.buttons()}downloadCSV(){let e=this.downloadTitle()?this.downloadTitle():this.title()?this.title():"data",t=this.downloadTimestampSuffix()?"_"+$t.timestamp():"";return $t.downloadString("CSV",this._widget.export("CSV"),e+t),this}downloadPNG(){let e=this.widget();return e instanceof Nt&&(this.legendVisible()?e.downloadPNG(this.title(),void 0,this._legend):e.downloadPNG(this.title())),this}highlightColumn(e){if(e){let t=`series-${this.cssTag(e)}`;this._centerWA.element().selectAll(".series").each(function(){let i=ti(this),o=i.classed(t);i.classed("highlight",o).classed("lowlight",!o)})}else this._centerWA.element().selectAll(".series").classed("highlight",!1).classed("lowlight",!1);return this}getResponsiveMode(){return this.enableAutoscaling()?this._autoScale?this.size().width<=this._resolutions.tiny.width||this.size().height<=this._resolutions.tiny.height?"tiny":this.size().width<=this._resolutions.small.width||this.size().height<=this._resolutions.small.height?"small":"regular":"regular":"none"}setOrigSize(){this._orig_size=JSON.parse(JSON.stringify(this.size()))}enter(e,t){super.enter(e,t),this._modal.target(this.target()).relativeTargetId(this.id()),this.top(this._titleBar),this.center(this._carousel),this._legend.targetWidget(this._widget).orientation("vertical").title("").visible(!1),this._progressBar.enter(e,t),this.setOrigSize()}preUpdateTiny(e){e.selectAll("div.body,div.title-text,div.icon-bar").style("display","none")}preUpdateSmall(e){let t=this._orig_size.width/this._resolutions.small.width,i=this._orig_size.height/this._resolutions.small.height;this._scale=Math.min(t,i);let o=this._scale===t;this.size({width:o?this._resolutions.small.width:this._orig_size.width*(1/this._scale),height:o?this._orig_size.height*(1/this._scale):this._resolutions.small.height}),e.select("div.title-icon").style("position","static"),e.selectAll("lhs").style("display","none"),e.selectAll("div.body,div.title-text,div.icon-bar").style("display",""),e.selectAll("div.data-count").style("visibility","hidden"),e.style("transform",`scale(${this._scale})`)}preUpdateRegular(e){e.selectAll("div.body,div.title-text,div.icon-bar").style("display",""),e.selectAll("div.data-count").style("visibility","hidden"),e.select("div.title-icon").style("position","static"),e.style("transform","translate(0px,0px) scale(1)")}_prevdataVisible;_prevlegendVisible;_prevLegendPosition;_prevChartDataFamily;_prevChart;_prevButtons;update(e,t){if(super.update(e,t),this._table&&this.widget_exists()&&this.widget().class().indexOf("chart_XYAxis")>=0){let i=this.widget();this._table.columns().forEach((o,r)=>{switch(r===0?i.xAxisType():i.yAxisType()){case"linear":case"log":case"pow":this._table.columnType(o,"number");break;case"time":this._table.columnType(o,"time");break;case"ordinal":default:this._table.columnType(o,"string")}this._table.columnPattern(o,r===0?i.xAxisTypeTimePattern():i.yAxisTypeTimePattern()),this._table.columnFormat(o,r===0?i.xAxisTickFormat():i.yAxisTickFormat())})}}preUpdate(e,t){switch(super.preUpdate(e,t),this._prevLegendPosition!==this.legendPosition()&&(this._legend.target()!==null&&this._legend.target(null),this._prevLegendPosition!==void 0?this.swap(this._prevLegendPosition,this.legendPosition()):this[this.legendPosition()](this._legend),this.legendPosition()==="right"?(this.rightOverflowX("hidden"),this.rightOverflowY("auto"),this.bottomOverflowX("visible"),this.bottomOverflowY("visible")):(this.rightOverflowX("visible"),this.rightOverflowY("visible"),this.bottomOverflowX("auto"),this.bottomOverflowY("hidden")),this._prevLegendPosition=this.legendPosition()),this._prevdataVisible!==this.dataVisible()&&(this._prevdataVisible=this.dataVisible(),this._toggleData.selected(this._prevdataVisible),this._legend.visible(this._prevlegendVisible&&!this._prevdataVisible),this._carousel.active(this._prevdataVisible?1:0)),this._prevlegendVisible!==this.legendVisible()&&(this._prevlegendVisible=this.legendVisible(),this._toggleLegend.selected(this._prevlegendVisible),this._legend.visible(this._prevlegendVisible&&!this._prevdataVisible)),this._legend.orientation(this.legendPosition()==="bottom"?"horizontal":"vertical"),this.showLeft(!this.left()),this.getResponsiveMode()){case"tiny":this.preUpdateTiny(t);break;case"small":this.preUpdateSmall(t);break;case"regular":this.preUpdateRegular(t);break}let i=this._widget.classID()==="composite_MultiChart"?this._widget.chart():this._widget;if(this._legend.dataFamily(i._dataFamily||"any"),this._prevChartDataFamily!==this._legend.dataFamily())switch(this._prevChartDataFamily=this._legend.dataFamily(),this._prevChartDataFamily){case"any":this._toggleLegend.selected(!1),this._legend.visible(!1);break}if(t.style("box-shadow",this.highlight()?`inset 0px 0px 0px ${this.highlightSize()}px ${this.highlightColor()}`:"none"),this._hideLegendToggleList.indexOf(i.classID())!==-1?(this._spacer.visible(!1),this._toggleLegend.visible(!1)):(this._spacer.visible(!0),this._toggleLegend.visible(!0)),this._prevChart!==i){this._prevChart=i;let r=i?i._titleBar||i._iconBar:void 0;if(r&&r instanceof Ke){this._prevButtons=this._prevButtons||[...this.buttons()];let s=[...r.buttons(),new Vt,...this._prevButtons];r.buttons([]).render(),this.buttons(s)}else this._prevButtons&&this.buttons(this._prevButtons)}let o=[];this.dataButtonVisible()||o.push(this._toggleData),this.downloadButtonVisible()||o.push(this._buttonDownload),this.downloadImageButtonVisible()||o.push(this._buttonDownloadImage),this.legendButtonVisible()||o.push(this._toggleLegend),this._buttonDownloadImage.enabled(this.widget()instanceof Nt),this._titleBar.hiddenButtons(o).visible(this.titleVisible()),this.topOverlay(this.titleOverlay()||!this.titleVisible())}postUpdate(e,t){switch(super.postUpdate(e,t),this.getResponsiveMode()){case"tiny":this.postUpdateTiny(t);break;case"small":this.postUpdateSmall(t);break;case"regular":this.postUpdateRegular(t);break}}postUpdateTiny(e){e.selectAll("div.body,div.title-text,div.icon-bar").style("display","none"),e.selectAll("div.data-count").style("visibility","visible").style("font-size",this.titleIconFontSize()/3+"px").style("line-height",this.titleIconFontSize()/3+"px").style("left",this.titleIconFontSize()+"px").text(this.data().length),e.style("transform","translate(0px,0px) scale(1)");let t=e.selectAll("div.title-icon"),i=t.node(),r=e.node().parentElement.getBoundingClientRect();if(i){let s=t.node().getBoundingClientRect(),a=r.height/2;t.style("position","absolute").style("left",`calc(50% - ${s.width/2}px)`).style("top",`${a-s.height/2}px`),e.selectAll("div.data-count").style("position","absolute").style("left",`calc(50% + ${s.width/2}px)`).style("top",`${a-s.height/2}px`)}}postUpdateSmall(e){e.selectAll("lhs").style("display","none"),e.selectAll("div.title-icon").style("position","static"),e.selectAll("div.body,div.title-text,div.icon-bar").style("display",""),e.selectAll("div.data-count").style("visibility","hidden");let t=e.node().getBoundingClientRect(),i=e.node().parentElement.getBoundingClientRect();e.style("transform",`translate(${i.x-t.x}px, ${i.y-t.y}px) scale(${this._scale})`)}postUpdateRegular(e){e.selectAll("div.title-icon").style("position","static"),e.selectAll("div.body,div.title-text,div.icon-bar").style("display",""),e.selectAll("div.data-count").style("visibility","hidden")}exit(e,t){this._progressBar.exit(e,t),this.right(null),this._legend.target(null),this.center(null),this._carousel.target(null),this.top(null),this._titleBar.target(null),this._modal.target(null),delete this._prevChart,delete this._prevButtons,delete this._prevChartDataFamily,delete this._prevPos,delete this._prevdataVisible,delete this._prevlegendVisible,super.exit(e,t)}click(e,t,i){}dblclick(e,t,i){}vertex_click(e,t,i,o){o&&o.vertex}vertex_dblclick(e,t,i,o){o&&o.vertex}edge_click(e,t,i,o){o&&o.edge}edge_dblclick(e,t,i,o){o&&o.edge}};f.prototype._class+=" layout_ChartPanel";f.prototype.publishReset();f.prototype.publishProxy("title","_titleBar");f.prototype.publish("titleVisible",!0,"boolean");f.prototype.publish("titleOverlay",!1,"boolean");f.prototype.publishProxy("titleIcon","_titleBar");f.prototype.publishProxy("titleIconFont","_titleBar");f.prototype.publishProxy("titleFont","_titleBar");f.prototype.publishProxy("titleIconFontSize","_titleBar");f.prototype.publishProxy("titleFontSize","_titleBar");f.prototype.publishProxy("description","_titleBar");f.prototype.publishProxy("descriptionFont","_titleBar");f.prototype.publishProxy("descriptionFontSize","_titleBar");f.prototype.publish("dataVisible",!1,"boolean","Show data table");f.prototype.publish("dataButtonVisible",!0,"boolean","Show data table button");f.prototype.publish("downloadButtonVisible",!0,"boolean","Show data download button");f.prototype.publish("downloadImageButtonVisible",!1,"boolean","Show image download button");f.prototype.publish("downloadTitle","","string","File name when downloaded");f.prototype.publish("downloadTimestampSuffix",!0,"boolean","Use timestamp as file name suffix");f.prototype.publish("legendVisible",!1,"boolean","Show legend");f.prototype.publish("legendButtonVisible",!0,"boolean","Show legend button");f.prototype.publish("legendPosition","right","set","Position of legend",["right","bottom"]);f.prototype.publishProxy("legend_labelMaxWidth","_legend","labelMaxWidth");f.prototype.publishProxy("legend_showSeriesTotal","_legend","showSeriesTotal");f.prototype.publishProxy("legend_showLegendTotal","_legend","showLegendTotal");f.prototype.publishProxy("legend_itemPadding","_legend","itemPadding");f.prototype.publishProxy("legend_shapeRadius","_legend","shapeRadius");f.prototype.publishProxy("legend_symbolType","_legend","symbolType");f.prototype.publishProxy("legend_labelAlign","_legend","labelAlign");f.prototype.publish("widget",null,"widget","Widget",void 0,{render:!1});f.prototype.publish("enableAutoscaling",!1,"boolean");f.prototype.publish("highlightSize",4,"number");f.prototype.publish("highlightColor","#e67e22","html-color");f.prototype.publishProxy("progress_halfLife","_progressBar","halfLife");f.prototype.publishProxy("progress_decay","_progressBar","decay");f.prototype.publishProxy("progress_size","_progressBar","size");f.prototype.publishProxy("progress_color","_progressBar","color");f.prototype.publishProxy("progress_blurBar","_progressBar","blurBar");f.prototype.publishProxy("progress_blurSize","_progressBar","blurSize");f.prototype.publishProxy("progress_blurColor","_progressBar","blurColor");f.prototype.publishProxy("progress_blurOpacity","_progressBar","blurOpacity");f.prototype.widget=function(l){if(!arguments.length)return this._widget;this._carousel.widgets([l,this._table]),this._widget=l,this._widget.fields(this._legend.filteredFields()).data(this._legend.filteredData());let e=this,t=this._widget;return t.click=function(){e.click.apply(e,arguments)},t.dblclick=function(){e.dblclick.apply(e,arguments)},t.vertex_click=function(){e.vertex_click.apply(e,arguments)},t.vertex_dblclick=function(){e.vertex_dblclick.apply(e,arguments)},t.edge_click=function(){e.edge_click.apply(e,arguments)},t.edge_dblclick=function(){e.edge_dblclick.apply(e,arguments)},this};import{HTMLWidget as ei}from"@hpcc-js/common";import{select as ii}from"@hpcc-js/common";(function(){if(!document.getElementById("1c68d178")){var l=document.createElement("style");l.id="1c68d178",l.textContent=`.layout_FlexGrid{
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
.
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
.
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
.layout_Grid
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
width:
|
|
458
|
-
|
|
459
|
-
|
|
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
|
-
`,document.head.appendChild(l)}})();var li=ut&&ut.default||ut,O=class extends oi{static{d(this,"Grid")}divItems;gridList;items;itemsMap;origItems;cellWidth;cellHeight;dragItem;dragItemPos;_d3Drag;_d3DragResize;_selectionBag;_scrollBarWidth;constructor(){super(),this._tag="div",this._selectionBag=new si.Selection(this),this.content([])}getDimensions(){let e={width:0,height:0};return this.content().forEach(function(t){e.width<t.gridCol()+t.gridColSpan()&&(e.width=t.gridCol()+t.gridColSpan()),e.height<t.gridRow()+t.gridRowSpan()&&(e.height=t.gridRow()+t.gridRowSpan())},this),e}clearContent(e){this.content(this.content().filter(function(t){if(!e)return t.target(null),!1;let i=t;for(;i;){if(e===i)return t.target(null),!1;i=i.widget?i.widget():null}return!0}))}setContent(e,t,i,o,r,s){if(r=r||1,s=s||1,o=o||"",this.content(this.content().filter(function(a){return a.gridRow()===e&&a.gridCol()===t?(a.target(null),!1):!0})),i){let a=new k().gridRow(e).gridCol(t).widget(i).title(o).gridRowSpan(r).gridColSpan(s);this.content().push(a)}return this}sortedContent(){return this.content().sort(function(e,t){return e.gridRow()===t.gridRow()?e.gridCol()-t.gridCol():e.gridRow()-t.gridRow()})}getCell(e,t){let i=null;return this.content().some(function(o){return e>=o.gridRow()&&e<o.gridRow()+o.gridRowSpan()&&t>=o.gridCol()&&t<o.gridCol()+o.gridColSpan()?(i=o,!0):!1}),i}getWidgetCell(e){let t=null;return this.content().some(function(i){return i.widget().id()===e?(t=i,!0):!1}),t}getContent(e){let t=null;return this.content().some(function(i){return i.widget().id()===e?(t=i.widget(),!0):!1}),t}cellToGridItem(e){return{x:e.gridCol(),y:e.gridRow(),w:e.gridColSpan(),h:e.gridRowSpan(),id:e.id(),cell:e}}gridItemToCell(e){e.cell.gridCol(e.x).gridRow(e.y).gridColSpan(e.w).gridRowSpan(e.h)}resetItemsPos(){this.origItems.forEach(function(e){let t=this.itemsMap[e.id];t.x=e.x,t.y=e.y},this)}initGridList(){this.itemsMap={},this.items=this.content().map(function(e){let t=this.cellToGridItem(e);return this.itemsMap[t.id]=t,t},this),this.origItems=this.content().map(this.cellToGridItem),this.gridList=new li(this.items,{direction:this.snapping(),lanes:this.snapping()==="horizontal"?this.snappingRows():this.snappingColumns()})}killGridList(){this.gridList=null,delete this.items,delete this.itemsMap}enter(e,t){super.enter(e,t),this._scrollBarWidth=ri.getScrollbarWidth();let i=this;this._d3Drag=Kt().subject(function(o){let r=i.cellToGridItem(o);return{x:r.x*i.cellWidth,y:r.y*i.cellHeight}}).on("start",function(o){if(!i.designMode())return;tt().sourceEvent.stopPropagation(),i.initGridList();let r=i.itemsMap[o.id()];i.dragItem=t.append("div").attr("class","dragging").style("transform",function(){return"translate("+r.x*i.cellWidth+"px, "+r.y*i.cellHeight+"px)"}).style("width",function(){return r.w*i.cellWidth-i.gutter()+"px"}).style("height",function(){return r.h*i.cellHeight-i.gutter()+"px"}),i.selectionBagClick(o)}).on("drag",function(o){if(!i.designMode())return;let r=tt();r.sourceEvent.stopPropagation();let s=i.itemsMap[o.id()];r.x<0&&(r.x=0),r.x+s.w*i.cellWidth>i.snappingColumns()*i.cellWidth&&(r.x=i.snappingColumns()*i.cellWidth-s.w*i.cellWidth),r.y<0&&(r.y=0),r.y+s.h*i.cellWidth>i.snappingRows()*i.cellWidth&&(r.y=i.snappingRows()*i.cellWidth-s.h*i.cellWidth);let a=[Math.max(0,Math.floor((r.x+i.cellWidth/2)/i.cellWidth)),Math.max(0,Math.floor((r.y+i.cellHeight/2)/i.cellHeight))];(s.x!==a[0]||s.y!==a[1])&&(i.snapping()!=="none"?(i.resetItemsPos(),i.gridList.moveItemToPosition(s,a)):(s.x=a[0],s.y=a[1]),(o.gridCol()!==s.x||o.gridRow()!==s.y)&&(i.items.forEach(i.gridItemToCell),i.updateGrid(!1,100))),i.dragItem.style("transform",function(){return"translate("+r.x+"px, "+r.y+"px)"}).style("width",function(){return s.w*i.cellWidth+"px"}).style("height",function(){return s.h*i.cellHeight+"px"})}).on("end",function(){i.designMode()&&(tt().sourceEvent.stopPropagation(),i.dragItem.remove(),i.dragItem=null,i.killGridList())}),this._d3DragResize=Kt().subject(function(o){let r=i.cellToGridItem(o);return{x:(r.x+r.w-1)*i.cellWidth,y:(r.y+r.h-1)*i.cellHeight}}).on("start",function(o){if(!i.designMode())return;tt().sourceEvent.stopPropagation(),i.initGridList();let r=i.itemsMap[o.id()];i.dragItem=t.append("div").attr("class","resizing").style("transform",function(){return"translate("+r.x*i.cellWidth+"px, "+r.y*i.cellHeight+"px)"}).style("width",function(){return r.w*i.cellWidth-i.gutter()+"px"}).style("height",function(){return r.h*i.cellHeight-i.gutter()+"px"}),i.dragItemPos={x:r.x,y:r.y}}).on("drag",function(o){if(!i.designMode())return;let r=tt();r.sourceEvent.stopPropagation();let s=i.itemsMap[o.id()],a=[Math.max(0,Math.round(r.x/i.cellWidth)),Math.max(0,Math.round(r.y/i.cellHeight))],n={w:Math.max(1,a[0]-s.x+1),h:Math.max(1,a[1]-s.y+1)};(s.w!==n.w||s.h!==n.h)&&(i.snapping()!=="none"?(i.resetItemsPos(),i.gridList.resizeItem(s,n)):(s.w=n.w,s.h=n.h),(o.gridColSpan()!==s.w||o.gridRowSpan()!==s.h)&&(i.items.forEach(i.gridItemToCell),i.updateGrid(s.id,100))),i.dragItem.style("width",function(){return(-s.x+1)*i.cellWidth+r.x-i.gutter()+"px"}).style("height",function(){return(-s.y+1)*i.cellHeight+r.y-i.gutter()+"px"})}).on("end",function(){i.designMode()&&(tt().sourceEvent.stopPropagation(),i.dragItem.remove(),i.dragItem=null,i.killGridList())})}updateGrid(e,t=0,i=!1){t=t||0;let o=this;this.divItems.classed("draggable",this.designMode()).transition().duration(t).style("left",function(r){return r.gridCol()*o.cellWidth+o.gutter()/2+"px"}).style("top",function(r){return r.gridRow()*o.cellHeight+o.gutter()/2+"px"}).style("width",function(r){return r.gridColSpan()*o.cellWidth-o.gutter()+"px"}).style("height",function(r){return r.gridRowSpan()*o.cellHeight-o.gutter()+"px"}).on("end",function(r){r.surfaceShadow_default(o.surfaceShadow()).surfacePadding_default(o.surfacePadding()).surfaceBorderWidth_default(o.surfaceBorderWidth()).surfaceBackgroundColor_default(o.surfaceBackgroundColor()),(e===!0||e===r.id())&&r.resize().lazyRender()})}update(e,t){super.update(e,t),this._placeholderElement.style("overflow-x",this.fitTo()==="width"?"hidden":null),this._placeholderElement.style("overflow-y",this.fitTo()==="width"?"scroll":null);let i=this.getDimensions(),o=this.width()-(this.fitTo()==="width"?this._scrollBarWidth:0);if(this.cellWidth=o/i.width,this.cellHeight=this.fitTo()==="all"?this.height()/i.height:this.cellWidth,this.designMode()){let h=Math.min(this.width()/this.snappingColumns(),this.height()/this.snappingRows()),u=Math.floor(h);this.cellWidth=u,this.cellHeight=this.cellWidth}let r=this,s=t.selectAll("#"+this.id()+" > .ddCell").data(this.content(),function(h){return h.id()});this.divItems=s.enter().append("div").attr("class","ddCell").each(function(h){h.target(this),h.__grid_watch=h.monitor(function(p,b,m){r._renderCount&&(p==="snapping"||p.indexOf("grid")===0)&&b!==m&&(r.gridList||(r.initGridList(),r.snapping()!=="none"&&r.gridList.resizeGrid(r.snapping()==="horizontal"?r.snappingRows():r.snappingColumns()),r.items.forEach(r.gridItemToCell),r.updateGrid(h.id(),100),r.killGridList()))}),Jt(this).append("div").attr("class","resizeHandle").call(r._d3DragResize).append("div").attr("class","resizeHandleDisplay")}).merge(s),this.divItems.each(function(h){let u=Jt(this);r.designMode()?u.call(r._d3Drag):u.on("mousedown.drag",null).on("touchstart.drag",null)}),this.divItems.select(".resizeHandle").style("display",this.designMode()?null:"none"),this.updateGrid(!0),s.exit().each(function(h){h.target(null),h.__grid_watch&&h.__grid_watch.remove()}).remove();let a=t.selectAll("#"+this.id()+" > .laneBackground").data(this.designMode()?[""]:[]);a.enter().insert("div",":first-child").attr("class","laneBackground").style("left","1px").style("top","1px").on("click",function(){r.selectionBagClear()}).merge(a).style("width",this.snappingColumns()*this.cellWidth+"px").style("height",this.snappingRows()*this.cellHeight+"px"),a.exit().each(function(){r.selectionBagClear()}).remove();let n=t.selectAll("#"+this.id()+" > .lane").data(this.designMode()?[""]:[]);n.enter().append("div").attr("class","lane").style("left","1px").style("top","1px"),n.style("display",this.showLanes()?null:"none").style("width",this.snappingColumns()*this.cellWidth+"px").style("height",this.snappingRows()*this.cellHeight+"px").style("background-image","linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)").style("background-size",this.cellWidth+"px "+this.cellHeight+"px"),n.exit().remove()}exit(e,t){this.content().forEach(i=>i.target(null)),super.exit(e,t)}_createSelectionObject(e){return{_id:e._id,element:d(()=>e._element,"element"),widget:e}}selection(e){return arguments.length?(this._selectionBag.set(e.map(function(t){return this._createSelectionObject(t)},this)),this):this._selectionBag.get().map(function(t){return t._id})}selectionBagClear(){this._selectionBag.isEmpty()||(this._selectionBag.clear(),this.postSelectionChange())}selectionBagClick(e){if(e!==null){let t=this._createSelectionObject(e);if(tt().sourceEvent.ctrlKey)this._selectionBag.isSelected(t)?(this._selectionBag.remove(t),this.postSelectionChange()):(this._selectionBag.append(t),this.postSelectionChange());else{let i=this._selectionBag.get();i.length===1&&i[0]._id===t._id?this.selectionBagClear():this._selectionBag.set([t]),this.postSelectionChange()}}}postSelectionChange(){}applyLayout(e){this.divItems.each((t,i)=>{if(e[i]){let[o,r,s,a]=e[i];t.gridCol(o).gridRow(r).gridColSpan(s).gridRowSpan(a)}}),this.updateGrid(!0)}vizActivation(e){}};O.prototype._class+=" layout_Grid";O.prototype.publish("designMode",!1,"boolean","Design Mode",null,{tags:["Basic"]});O.prototype.publish("showLanes",!0,"boolean","Show snapping lanes when in design mode",null,{tags:["Basic"],disable:d(l=>!l.designMode(),"disable")});O.prototype.publish("fitTo","all","set","Sizing Strategy",["all","width"],{tags:["Basic"]});O.prototype.publish("snapping","vertical","set","Snapping Strategy",["vertical","horizontal","none"]);O.prototype.publish("snappingColumns",12,"number","Snapping Columns");O.prototype.publish("snappingRows",16,"number","Snapping Rows");O.prototype.publish("gutter",6,"number","Gap Between Widgets",null,{tags:["Basic"]});O.prototype.publish("surfaceShadow",!0,"boolean","3D Shadow");O.prototype.publish("surfacePadding",null,"string","Cell Padding (px)",null,{tags:["Intermediate"]});O.prototype.publish("surfaceBorderWidth",1,"number","Width (px) of Cell Border",null,{tags:["Intermediate"]});O.prototype.publish("surfaceBackgroundColor",null,"html-color","Surface Background Color",null,{tags:["Advanced"]});O.prototype.publish("content",[],"widgetArray","widgets",null,{tags:["Basic"],render:!1});var At=class extends B{static{d(this,"HorizontalList")}constructor(){super(),this.orientation_default("horizontal"),this.flexWrap_default("nowrap")}};At.prototype._class+=" layout_HorizontalList";import{HTMLWidget as ni,Text as ai}from"@hpcc-js/common";(function(){if(!document.getElementById("ed0ab859")){var l=document.createElement("style");l.id="ed0ab859",l.textContent=`.layout_Layered {
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
.
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
.
|
|
524
|
-
.
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
.
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
}
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
.
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
}
|
|
581
|
-
|
|
1258
|
+
}
|
|
1259
|
+
postUpdate(domNode, element) {
|
|
1260
|
+
let w;
|
|
1261
|
+
this._boundingBox && (w = this._boundingBox.width, this._boundingBox.width = this._size.width), super.postUpdate(domNode, element), w !== void 0 && (this._boundingBox.width = w), this._parentRelativeDiv.style("overflow", "hidden");
|
|
1262
|
+
}
|
|
1263
|
+
exit(domNode, element) {
|
|
1264
|
+
super.exit(domNode, element);
|
|
1265
|
+
}
|
|
1266
|
+
radiusToSymbolSize(radius) {
|
|
1267
|
+
const circleSize = Math.pow(radius, 2) * Math.PI;
|
|
1268
|
+
switch (this.symbolType()) {
|
|
1269
|
+
case "star":
|
|
1270
|
+
return circleSize * 0.45;
|
|
1271
|
+
case "triangle":
|
|
1272
|
+
return circleSize * 0.65;
|
|
1273
|
+
case "cross":
|
|
1274
|
+
case "diamond":
|
|
1275
|
+
case "wye":
|
|
1276
|
+
return circleSize * 0.75;
|
|
1277
|
+
case "circle":
|
|
1278
|
+
return circleSize;
|
|
1279
|
+
case "square":
|
|
1280
|
+
return circleSize * 1.3;
|
|
1281
|
+
}
|
|
1282
|
+
}
|
|
1283
|
+
onClick(d, domNode) {
|
|
1284
|
+
switch (this.getPaletteType()) {
|
|
1285
|
+
case "ordinal":
|
|
1286
|
+
switch (this.dataFamily()) {
|
|
1287
|
+
case "2D":
|
|
1288
|
+
case "ND":
|
|
1289
|
+
const disabledIdx = this._disabled.indexOf(d);
|
|
1290
|
+
disabledIdx < 0 ? this._disabled.push(d) : this._disabled.splice(disabledIdx, 1), this._owner.refreshColumns(), this._owner.refreshData(), this._owner.render();
|
|
1291
|
+
break;
|
|
1292
|
+
}
|
|
1293
|
+
break;
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
1296
|
+
onOver(d, domNode) {
|
|
1297
|
+
if (instanceOfIHighlight(this._owner))
|
|
1298
|
+
switch (this.getPaletteType()) {
|
|
1299
|
+
case "ordinal":
|
|
1300
|
+
switch (this.dataFamily()) {
|
|
1301
|
+
case "2D":
|
|
1302
|
+
case "ND":
|
|
1303
|
+
this._disabled.indexOf(d) < 0 && this._owner.highlightColumn(d);
|
|
1304
|
+
break;
|
|
1305
|
+
}
|
|
1306
|
+
break;
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
onOut(d, domNode) {
|
|
1310
|
+
if (instanceOfIHighlight(this._owner))
|
|
1311
|
+
switch (this.getPaletteType()) {
|
|
1312
|
+
case "ordinal":
|
|
1313
|
+
switch (this.dataFamily()) {
|
|
1314
|
+
case "2D":
|
|
1315
|
+
case "ND":
|
|
1316
|
+
this._owner.highlightColumn();
|
|
1317
|
+
break;
|
|
1318
|
+
}
|
|
1319
|
+
break;
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
onDblClick(rowData, rowIdx) {
|
|
1323
|
+
}
|
|
1324
|
+
onMouseOver(rowData, rowIdx) {
|
|
1325
|
+
}
|
|
1326
|
+
resize(_size) {
|
|
1327
|
+
let retVal;
|
|
1328
|
+
if (this.fitToContent()) {
|
|
1329
|
+
this._containerSize = _size;
|
|
1330
|
+
const bbox = this.getBBox();
|
|
1331
|
+
_size.width > bbox.width && (bbox.width = _size.width), _size.height > bbox.height && (bbox.height = _size.height), retVal = super.resize.apply(this, [{ ...bbox }]);
|
|
1332
|
+
} else
|
|
1333
|
+
retVal = super.resize.apply(this, arguments);
|
|
1334
|
+
return retVal;
|
|
1335
|
+
}
|
|
1336
|
+
}
|
|
1337
|
+
Legend.prototype._class += " layout_Legend";
|
|
1338
|
+
Legend.prototype.publish("title", "", "string", "Title");
|
|
1339
|
+
Legend.prototype.publish("symbolType", "circle", "set", "Shape of each legend item", ["circle", "cross", "diamond", "square", "star", "triangle", "wye"]);
|
|
1340
|
+
Legend.prototype.publish("labelMaxWidth", null, "number", "Max Label Width (pixels)", null, { optional: !0 });
|
|
1341
|
+
Legend.prototype.publish("orientation", "vertical", "set", "Orientation of Legend rows", ["vertical", "horizontal"], { tags: ["Private"] });
|
|
1342
|
+
Legend.prototype.publish("dataFamily", "ND", "set", "Type of data", ["1D", "2D", "ND", "map", "graph", "any"], { tags: ["Private"] });
|
|
1343
|
+
Legend.prototype.publish("rainbowFormat", ",", "string", "Rainbow number formatting", null, { tags: ["Private"], optional: !0, disable: (w) => !w.isRainbow() });
|
|
1344
|
+
Legend.prototype.publish("rainbowBins", 8, "number", "Number of rainbow bins", null, { tags: ["Private"], disable: (w) => !w.isRainbow() });
|
|
1345
|
+
Legend.prototype.publish("showSeriesTotal", !1, "boolean", "Show value next to series");
|
|
1346
|
+
Legend.prototype.publish("showLegendTotal", !1, "boolean", "Show a total of the series values under the legend", null);
|
|
1347
|
+
Legend.prototype.publish("itemPadding", 8, "number", "Padding between legend items (pixels)");
|
|
1348
|
+
Legend.prototype.publish("shapeRadius", 7, "number", "Radius of legend shape (pixels)");
|
|
1349
|
+
Legend.prototype.publish("fitToContent", !0, "boolean", "If true, resize will simply reapply the bounding box dimensions");
|
|
1350
|
+
Legend.prototype.publish("labelAlign", "start", "set", "Horizontal alignment of legend item label (for horizontal orientation only)", ["start", "middle", "end"], { optional: !0, disable: (w) => w.orientation() === "vertical" });
|
|
1351
|
+
class Modal extends HTMLWidget {
|
|
1352
|
+
constructor() {
|
|
1353
|
+
super();
|
|
1354
|
+
__publicField(this, "_widget");
|
|
1355
|
+
__publicField(this, "_relativeTarget");
|
|
1356
|
+
__publicField(this, "_fade");
|
|
1357
|
+
__publicField(this, "_modal");
|
|
1358
|
+
__publicField(this, "_modalHeader");
|
|
1359
|
+
__publicField(this, "_modalBody");
|
|
1360
|
+
__publicField(this, "_modalHeaderAnnotations");
|
|
1361
|
+
__publicField(this, "_modalHeaderCloseButton");
|
|
1362
|
+
__publicField(this, "_close");
|
|
1363
|
+
this._tag = "div";
|
|
1364
|
+
}
|
|
1365
|
+
closeModal() {
|
|
1366
|
+
this.visible(!1);
|
|
1367
|
+
}
|
|
1368
|
+
getRelativeTarget() {
|
|
1369
|
+
let relativeTarget;
|
|
1370
|
+
return this.relativeTargetId() && (relativeTarget = document.getElementById(this.relativeTargetId()), relativeTarget) ? relativeTarget : !relativeTarget && (relativeTarget = this.locateAncestor("layout_Grid"), relativeTarget && relativeTarget.element) ? relativeTarget.element().node() : document.body;
|
|
1371
|
+
}
|
|
1372
|
+
setModalSize() {
|
|
1373
|
+
this.fixedHeight() !== null && this.fixedWidth() !== null ? this._modal.style("height", this.fixedHeight()).style("width", this.fixedWidth()).style("min-height", null).style("min-width", null).style("max-height", null).style("max-width", null) : (this.minHeight() || this.minWidth()) && this._modal.style("min-height", this.minHeight()).style("min-width", this.minWidth()).style("max-height", this.maxHeight()).style("max-width", this.maxWidth());
|
|
1374
|
+
const modalRect = this._modal.node().getBoundingClientRect(), headerRect = this._modalHeader.node().getBoundingClientRect();
|
|
1375
|
+
return this._modalBody.style("height", modalRect.height - headerRect.height + "px").style("width", modalRect.width), modalRect;
|
|
1376
|
+
}
|
|
1377
|
+
setFadePosition(rect) {
|
|
1378
|
+
this._fade.style("top", rect.top + "px").style("left", rect.left + "px").style("width", rect.width + "px").style("height", rect.height + "px");
|
|
1379
|
+
}
|
|
1380
|
+
setModalPosition(rect) {
|
|
1381
|
+
const modalRect = this.setModalSize();
|
|
1382
|
+
if (this.fixedTop() !== null && this.fixedLeft() !== null)
|
|
1383
|
+
this._modal.style("top", `calc(${this.fixedTop()} + ${rect.top}px)`).style("left", `calc(${this.fixedLeft()} + ${rect.left}px)`);
|
|
1384
|
+
else if (this.fixedHeight() !== null && this.fixedWidth() !== null)
|
|
1385
|
+
this._modal.style("top", rect.top + rect.height / 2 - modalRect.height / 2 + "px").style("left", rect.left + rect.width / 2 - modalRect.width / 2 + "px");
|
|
1386
|
+
else if (this.minHeight() || this.minWidth()) {
|
|
1387
|
+
const contentRect = this._modal.node().getBoundingClientRect();
|
|
1388
|
+
this._modal.style("top", rect.top + rect.height / 2 - contentRect.height / 2 + "px").style("left", rect.left + rect.width / 2 - contentRect.width / 2 + "px");
|
|
1389
|
+
}
|
|
1390
|
+
}
|
|
1391
|
+
resize(size) {
|
|
1392
|
+
return super.resize(), this._modal && this.setModalSize(), this;
|
|
1393
|
+
}
|
|
1394
|
+
resizeBodySync(width, height) {
|
|
1395
|
+
const headerRect = this._modalHeader.node().getBoundingClientRect();
|
|
1396
|
+
return this._modal.style("width", width + "px").style("height", height + headerRect.height + "px").style("min-width", width + "px").style("min-height", height + headerRect.height + "px"), this._modalHeader.style("width", width + "px"), this._modalBody.style("width", width + "px").style("height", height + "px"), this.minWidth(width + "px").minHeight(height + headerRect.height + "px").resize({
|
|
1397
|
+
height: height + headerRect.height,
|
|
1398
|
+
width
|
|
1399
|
+
});
|
|
1400
|
+
}
|
|
1401
|
+
enter(domNode, element) {
|
|
1402
|
+
super.enter(domNode, element), this._fade = element.append("div").classed("layout_Modal-fade", !0).classed("layout_Modal-fadeClickable", this.enableClickFadeToClose()).classed("layout_Modal-fade-hidden", !this.showFade());
|
|
1403
|
+
const header_h = this.titleFontSize() * 2;
|
|
1404
|
+
this._modal = element.append("div").classed("layout_Modal-content", !0), this._modalHeader = this._modal.append("div").classed("layout_Modal-header", !0).style("color", this.titleFontColor()).style("font-size", this.titleFontSize() + "px").style("height", header_h + "px"), this._modalBody = this._modal.append("div").classed("layout_Modal-body", !0).style("height", `calc( 100% - ${header_h}px )`).style("overflow-x", this.overflowX()).style("overflow-y", this.overflowY()), this._modalHeader.append("div").classed("layout_Modal-title", !0).style("line-height", this.titleFontSize() + "px").style("top", this.titleFontSize() / 2 + "px").style("left", this.titleFontSize() / 2 + "px").text(this.formattedTitle()), this._modalHeaderAnnotations = this._modalHeader.append("div").classed("layout_Modal-annotations", !0), this._modalHeaderCloseButton = this._modalHeaderAnnotations.append("div").classed("layout_Modal-closeButton", !0).html('<i class="fa fa-close"></i>'), this._modalHeaderAnnotations.style("line-height", this.titleFontSize() + "px").style("right", this.titleFontSize() / 2 + "px").style("top", this.titleFontSize() / 2 + "px"), this._modalHeaderCloseButton.on("click", () => {
|
|
1405
|
+
this.closeModal();
|
|
1406
|
+
}), this._fade.on("click", (n) => {
|
|
1407
|
+
this.enableClickFadeToClose() && this.closeModal();
|
|
1408
|
+
});
|
|
1409
|
+
}
|
|
1410
|
+
update(domNode, element) {
|
|
1411
|
+
super.update(domNode, element), element.style("display", this.show() ? null : "none"), this._fade.classed("layout_Modal-fade-hidden", !this.showFade()), this._relativeTarget = this.getRelativeTarget(), this.setModalSize();
|
|
1412
|
+
const rect = this._relativeTarget.getBoundingClientRect();
|
|
1413
|
+
this.setFadePosition(rect), this.setModalPosition(rect), this.show() ? (this._widget.target() || this._widget.target(this._modalBody.node()), this._widget.resize().render()) : this._widget.target(null).render();
|
|
1414
|
+
}
|
|
1415
|
+
exit(domNode, element) {
|
|
1416
|
+
this._widget && this._widget.target(null), super.exit(domNode, element);
|
|
1417
|
+
}
|
|
1418
|
+
formattedTitle() {
|
|
1419
|
+
const title = this.title_exists() ? this.title().trim() : "";
|
|
1420
|
+
return title.length > 0 && title.slice(0, 1) === "(" && title.slice(-1) === ")" ? title.slice(1, -1) : this.title();
|
|
1421
|
+
}
|
|
1422
|
+
}
|
|
1423
|
+
Modal.prototype._class += " layout_Modal";
|
|
1424
|
+
Modal.prototype.publish("title", null, "string", "title");
|
|
1425
|
+
Modal.prototype.publish("widget", null, "widget", "widget");
|
|
1426
|
+
Modal.prototype.publish("titleFontSize", 18, "number", "titleFontSize (in pixels)");
|
|
1427
|
+
Modal.prototype.publish("titleFontColor", "#ffffff", "html-color", "titleFontColor");
|
|
1428
|
+
Modal.prototype.publish("relativeTargetId", null, "string", "relativeTargetId");
|
|
1429
|
+
Modal.prototype.publish("show", !0, "boolean", "show");
|
|
1430
|
+
Modal.prototype.publish("showFade", !0, "boolean", "showFade");
|
|
1431
|
+
Modal.prototype.publish("enableClickFadeToClose", !0, "boolean", "enableClickFadeToClose");
|
|
1432
|
+
Modal.prototype.publish("minWidth", "400px", "string", "minWidth");
|
|
1433
|
+
Modal.prototype.publish("minHeight", "400px", "string", "minHeight");
|
|
1434
|
+
Modal.prototype.publish("maxWidth", "800px", "string", "maxWidth");
|
|
1435
|
+
Modal.prototype.publish("maxHeight", "800px", "string", "maxHeight");
|
|
1436
|
+
Modal.prototype.publish("fixedWidth", null, "string", "fixedWidth");
|
|
1437
|
+
Modal.prototype.publish("fixedHeight", null, "string", "fixedHeight");
|
|
1438
|
+
Modal.prototype.publish("fixedTop", null, "string", "fixedTop");
|
|
1439
|
+
Modal.prototype.publish("fixedLeft", null, "string", "fixedLeft");
|
|
1440
|
+
Modal.prototype.publish("overflowX", "hidden", "string", "overflowX");
|
|
1441
|
+
Modal.prototype.publish("overflowY", "scroll", "string", "overflowY");
|
|
1442
|
+
class ChartPanel extends Border2 {
|
|
1443
|
+
constructor() {
|
|
1444
|
+
super();
|
|
1445
|
+
__publicField(this, "_legend", new Legend(this).enableOverflow(!0));
|
|
1446
|
+
__publicField(this, "_progressBar", new ProgressBar());
|
|
1447
|
+
__publicField(this, "_autoScale", !1);
|
|
1448
|
+
__publicField(this, "_resolutions", {
|
|
1449
|
+
tiny: { width: 100, height: 100 },
|
|
1450
|
+
small: { width: 300, height: 300 }
|
|
1451
|
+
});
|
|
1452
|
+
__publicField(this, "_modal", new Modal());
|
|
1453
|
+
__publicField(this, "_highlight");
|
|
1454
|
+
__publicField(this, "_scale");
|
|
1455
|
+
__publicField(this, "_orig_size");
|
|
1456
|
+
__publicField(this, "_toggleInfo", new ToggleButton().faChar("fa-info-circle").tooltip(".Description").selected(!1).on("enabled", () => this.description() !== "").on("click", () => {
|
|
1457
|
+
if (this._toggleInfo.selected()) {
|
|
1458
|
+
this._modal.title(this.title()).widget(new Text().text(this.description())).show(!0).render();
|
|
1459
|
+
const origCloseFunc = this._modal._close;
|
|
1460
|
+
this._modal._close = () => {
|
|
1461
|
+
this._toggleInfo.selected(!1).render(), this._modal._close = origCloseFunc;
|
|
1462
|
+
};
|
|
1463
|
+
}
|
|
1464
|
+
}).on("mouseMove", () => {
|
|
1465
|
+
}).on("mouseOut", () => {
|
|
1466
|
+
}));
|
|
1467
|
+
__publicField(this, "_toggleData", new ToggleButton().faChar("fa-table").tooltip("Data").on("click", () => {
|
|
1468
|
+
this.dataVisible(this._toggleData.selected()), this.render();
|
|
1469
|
+
}));
|
|
1470
|
+
__publicField(this, "_buttonDownload", new Button().faChar("fa-download").tooltip("Download").on("click", () => {
|
|
1471
|
+
this.downloadCSV();
|
|
1472
|
+
}));
|
|
1473
|
+
__publicField(this, "_buttonDownloadImage", new Button().faChar("fa-image").tooltip("Download Image").on("click", () => {
|
|
1474
|
+
this.downloadPNG();
|
|
1475
|
+
}));
|
|
1476
|
+
__publicField(this, "_toggleLegend", new ToggleButton().faChar("fa-list-ul").tooltip("Legend").selected(!1).on("click", () => {
|
|
1477
|
+
const selected = this._toggleLegend.selected();
|
|
1478
|
+
this.legendPosition() === "bottom" ? this.showBottom(selected) : this.legendPosition() === "right" && this.showRight(selected), this.legendVisible(selected), this.render();
|
|
1479
|
+
}));
|
|
1480
|
+
__publicField(this, "_spacer", new Spacer());
|
|
1481
|
+
__publicField(this, "_titleBar", new TitleBar().buttons([this._toggleData, this._buttonDownload, this._buttonDownloadImage, this._spacer, this._toggleLegend]));
|
|
1482
|
+
__publicField(this, "_carousel", new Carousel());
|
|
1483
|
+
__publicField(this, "_table", new Table());
|
|
1484
|
+
__publicField(this, "_widget");
|
|
1485
|
+
__publicField(this, "_hideLegendToggleList", ["dgrid_Table"]);
|
|
1486
|
+
__publicField(this, "_prevdataVisible");
|
|
1487
|
+
__publicField(this, "_prevlegendVisible");
|
|
1488
|
+
__publicField(this, "_prevLegendPosition");
|
|
1489
|
+
__publicField(this, "_prevChartDataFamily");
|
|
1490
|
+
__publicField(this, "_prevChart");
|
|
1491
|
+
__publicField(this, "_prevButtons");
|
|
1492
|
+
this._tag = "div";
|
|
1493
|
+
}
|
|
1494
|
+
fields(_) {
|
|
1495
|
+
return arguments.length ? (super.fields(_), this._legend.fields(_), this.refreshFields(), this) : super.fields();
|
|
1496
|
+
}
|
|
1497
|
+
refreshFields() {
|
|
1498
|
+
return this._widget.fields(this._legend.filteredFields()), this._table.fields(this._legend.filteredFields()), this;
|
|
1499
|
+
}
|
|
1500
|
+
columns(_, asDefault) {
|
|
1501
|
+
return arguments.length ? (super.columns(_, asDefault), this._legend.columns(_, asDefault), this.refreshColumns(), this) : super.columns();
|
|
1502
|
+
}
|
|
1503
|
+
refreshColumns() {
|
|
1504
|
+
return this._widget.columns(this._legend.filteredColumns()), this._table.columns(this._legend.filteredColumns()), this;
|
|
1505
|
+
}
|
|
1506
|
+
data(_) {
|
|
1507
|
+
return arguments.length ? (super.data(_), this._legend.data(_), this.refreshData(), this) : super.data();
|
|
1508
|
+
}
|
|
1509
|
+
refreshData() {
|
|
1510
|
+
return this._widget.data(this._legend.filteredData()), this._table.data(this._legend.filteredData()), this;
|
|
1511
|
+
}
|
|
1512
|
+
highlight(_) {
|
|
1513
|
+
return arguments.length ? (this._highlight = _, this) : this._highlight;
|
|
1514
|
+
}
|
|
1515
|
+
startProgress() {
|
|
1516
|
+
this._progressBar.start();
|
|
1517
|
+
}
|
|
1518
|
+
finishProgress() {
|
|
1519
|
+
this._progressBar.finish();
|
|
1520
|
+
}
|
|
1521
|
+
buttons(_) {
|
|
1522
|
+
return arguments.length ? (this._titleBar.buttons(_), this) : this._titleBar.buttons();
|
|
1523
|
+
}
|
|
1524
|
+
downloadCSV() {
|
|
1525
|
+
const namePrefix = this.downloadTitle() ? this.downloadTitle() : this.title() ? this.title() : "data", nameSuffix = this.downloadTimestampSuffix() ? "_" + Utility.timestamp() : "";
|
|
1526
|
+
return Utility.downloadString("CSV", this._widget.export("CSV"), namePrefix + nameSuffix), this;
|
|
1527
|
+
}
|
|
1528
|
+
downloadPNG() {
|
|
1529
|
+
const widget = this.widget();
|
|
1530
|
+
return widget instanceof SVGWidget && (this.legendVisible() ? widget.downloadPNG(this.title(), void 0, this._legend) : widget.downloadPNG(this.title())), this;
|
|
1531
|
+
}
|
|
1532
|
+
highlightColumn(column) {
|
|
1533
|
+
if (column) {
|
|
1534
|
+
const cssTag = `series-${this.cssTag(column)}`;
|
|
1535
|
+
this._centerWA.element().selectAll(".series").each(function() {
|
|
1536
|
+
const element = select(this), highlight = element.classed(cssTag);
|
|
1537
|
+
element.classed("highlight", highlight).classed("lowlight", !highlight);
|
|
1538
|
+
});
|
|
1539
|
+
} else
|
|
1540
|
+
this._centerWA.element().selectAll(".series").classed("highlight", !1).classed("lowlight", !1);
|
|
1541
|
+
return this;
|
|
1542
|
+
}
|
|
1543
|
+
getResponsiveMode() {
|
|
1544
|
+
return this.enableAutoscaling() ? this._autoScale ? this.size().width <= this._resolutions.tiny.width || this.size().height <= this._resolutions.tiny.height ? "tiny" : this.size().width <= this._resolutions.small.width || this.size().height <= this._resolutions.small.height ? "small" : "regular" : "regular" : "none";
|
|
1545
|
+
}
|
|
1546
|
+
setOrigSize() {
|
|
1547
|
+
this._orig_size = JSON.parse(JSON.stringify(this.size()));
|
|
1548
|
+
}
|
|
1549
|
+
enter(domNode, element) {
|
|
1550
|
+
super.enter(domNode, element), this._modal.target(this.target()).relativeTargetId(this.id()), this.top(this._titleBar), this.center(this._carousel), this._legend.targetWidget(this._widget).orientation("vertical").title("").visible(!1), this._progressBar.enter(domNode, element), this.setOrigSize();
|
|
1551
|
+
}
|
|
1552
|
+
preUpdateTiny(element) {
|
|
1553
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "none");
|
|
1554
|
+
}
|
|
1555
|
+
preUpdateSmall(element) {
|
|
1556
|
+
const scale_x = this._orig_size.width / this._resolutions.small.width, scale_y = this._orig_size.height / this._resolutions.small.height;
|
|
1557
|
+
this._scale = Math.min(scale_x, scale_y);
|
|
1558
|
+
const x_is_smaller = this._scale === scale_x;
|
|
1559
|
+
this.size({
|
|
1560
|
+
width: x_is_smaller ? this._resolutions.small.width : this._orig_size.width * (1 / this._scale),
|
|
1561
|
+
height: x_is_smaller ? this._orig_size.height * (1 / this._scale) : this._resolutions.small.height
|
|
1562
|
+
}), element.select("div.title-icon").style("position", "static"), element.selectAll("lhs").style("display", "none"), element.selectAll("div.body,div.title-text,div.icon-bar").style("display", ""), element.selectAll("div.data-count").style("visibility", "hidden"), element.style("transform", `scale(${this._scale})`);
|
|
1563
|
+
}
|
|
1564
|
+
preUpdateRegular(element) {
|
|
1565
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", ""), element.selectAll("div.data-count").style("visibility", "hidden"), element.select("div.title-icon").style("position", "static"), element.style("transform", "translate(0px,0px) scale(1)");
|
|
1566
|
+
}
|
|
1567
|
+
update(domNode, element) {
|
|
1568
|
+
if (super.update(domNode, element), this._table && this.widget_exists() && this.widget().class().indexOf("chart_XYAxis") >= 0) {
|
|
1569
|
+
const chart = this.widget();
|
|
1570
|
+
this._table.columns().forEach((column, idx) => {
|
|
1571
|
+
switch (idx === 0 ? chart.xAxisType() : chart.yAxisType()) {
|
|
1572
|
+
case "linear":
|
|
1573
|
+
case "log":
|
|
1574
|
+
case "pow":
|
|
1575
|
+
this._table.columnType(column, "number");
|
|
1576
|
+
break;
|
|
1577
|
+
case "time":
|
|
1578
|
+
this._table.columnType(column, "time");
|
|
1579
|
+
break;
|
|
1580
|
+
case "ordinal":
|
|
1581
|
+
default:
|
|
1582
|
+
this._table.columnType(column, "string");
|
|
1583
|
+
}
|
|
1584
|
+
this._table.columnPattern(column, idx === 0 ? chart.xAxisTypeTimePattern() : chart.yAxisTypeTimePattern()), this._table.columnFormat(column, idx === 0 ? chart.xAxisTickFormat() : chart.yAxisTickFormat());
|
|
1585
|
+
});
|
|
1586
|
+
}
|
|
1587
|
+
}
|
|
1588
|
+
preUpdate(domNode, element) {
|
|
1589
|
+
switch (super.preUpdate(domNode, element), this._prevLegendPosition !== this.legendPosition() && (this._legend.target() !== null && this._legend.target(null), this._prevLegendPosition !== void 0 ? this.swap(this._prevLegendPosition, this.legendPosition()) : this[this.legendPosition()](this._legend), this.legendPosition() === "right" ? (this.rightOverflowX("hidden"), this.rightOverflowY("auto"), this.bottomOverflowX("visible"), this.bottomOverflowY("visible")) : (this.rightOverflowX("visible"), this.rightOverflowY("visible"), this.bottomOverflowX("auto"), this.bottomOverflowY("hidden")), this._prevLegendPosition = this.legendPosition()), this._prevdataVisible !== this.dataVisible() && (this._prevdataVisible = this.dataVisible(), this._toggleData.selected(this._prevdataVisible), this._legend.visible(this._prevlegendVisible && !this._prevdataVisible), this._carousel.active(this._prevdataVisible ? 1 : 0)), this._prevlegendVisible !== this.legendVisible() && (this._prevlegendVisible = this.legendVisible(), this._toggleLegend.selected(this._prevlegendVisible), this._legend.visible(this._prevlegendVisible && !this._prevdataVisible)), this._legend.orientation(this.legendPosition() === "bottom" ? "horizontal" : "vertical"), this.showLeft(!this.left()), this.getResponsiveMode()) {
|
|
1590
|
+
case "tiny":
|
|
1591
|
+
this.preUpdateTiny(element);
|
|
1592
|
+
break;
|
|
1593
|
+
case "small":
|
|
1594
|
+
this.preUpdateSmall(element);
|
|
1595
|
+
break;
|
|
1596
|
+
case "regular":
|
|
1597
|
+
this.preUpdateRegular(element);
|
|
1598
|
+
break;
|
|
1599
|
+
}
|
|
1600
|
+
const chart = this._widget.classID() === "composite_MultiChart" ? this._widget.chart() : this._widget;
|
|
1601
|
+
if (this._legend.dataFamily(chart._dataFamily || "any"), this._prevChartDataFamily !== this._legend.dataFamily())
|
|
1602
|
+
switch (this._prevChartDataFamily = this._legend.dataFamily(), this._prevChartDataFamily) {
|
|
1603
|
+
case "any":
|
|
1604
|
+
this._toggleLegend.selected(!1), this._legend.visible(!1);
|
|
1605
|
+
break;
|
|
1606
|
+
}
|
|
1607
|
+
if (element.style("box-shadow", this.highlight() ? `inset 0px 0px 0px ${this.highlightSize()}px ${this.highlightColor()}` : "none"), this._hideLegendToggleList.indexOf(chart.classID()) !== -1 ? (this._spacer.visible(!1), this._toggleLegend.visible(!1)) : (this._spacer.visible(!0), this._toggleLegend.visible(!0)), this._prevChart !== chart) {
|
|
1608
|
+
this._prevChart = chart;
|
|
1609
|
+
const widgetIconBar = chart ? chart._titleBar || chart._iconBar : void 0;
|
|
1610
|
+
if (widgetIconBar && widgetIconBar instanceof IconBar) {
|
|
1611
|
+
this._prevButtons = this._prevButtons || [...this.buttons()];
|
|
1612
|
+
const buttons = [
|
|
1613
|
+
...widgetIconBar.buttons(),
|
|
1614
|
+
new Spacer(),
|
|
1615
|
+
...this._prevButtons
|
|
1616
|
+
];
|
|
1617
|
+
widgetIconBar.buttons([]).render(), this.buttons(buttons);
|
|
1618
|
+
} else this._prevButtons && this.buttons(this._prevButtons);
|
|
1619
|
+
}
|
|
1620
|
+
const hiddenButtons = [];
|
|
1621
|
+
this.dataButtonVisible() || hiddenButtons.push(this._toggleData), this.downloadButtonVisible() || hiddenButtons.push(this._buttonDownload), this.downloadImageButtonVisible() || hiddenButtons.push(this._buttonDownloadImage), this.legendButtonVisible() || hiddenButtons.push(this._toggleLegend), this._buttonDownloadImage.enabled(this.widget() instanceof SVGWidget), this._titleBar.hiddenButtons(hiddenButtons).visible(this.titleVisible()), this.topOverlay(this.titleOverlay() || !this.titleVisible());
|
|
1622
|
+
}
|
|
1623
|
+
postUpdate(domNode, element) {
|
|
1624
|
+
switch (super.postUpdate(domNode, element), this.getResponsiveMode()) {
|
|
1625
|
+
case "tiny":
|
|
1626
|
+
this.postUpdateTiny(element);
|
|
1627
|
+
break;
|
|
1628
|
+
case "small":
|
|
1629
|
+
this.postUpdateSmall(element);
|
|
1630
|
+
break;
|
|
1631
|
+
case "regular":
|
|
1632
|
+
this.postUpdateRegular(element);
|
|
1633
|
+
break;
|
|
1634
|
+
}
|
|
1635
|
+
}
|
|
1636
|
+
postUpdateTiny(element) {
|
|
1637
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "none"), element.selectAll("div.data-count").style("visibility", "visible").style("font-size", this.titleIconFontSize() / 3 + "px").style("line-height", this.titleIconFontSize() / 3 + "px").style("left", this.titleIconFontSize() + "px").text(this.data().length), element.style("transform", "translate(0px,0px) scale(1)");
|
|
1638
|
+
const iconDiv = element.selectAll("div.title-icon"), _node = iconDiv.node(), containerRect = element.node().parentElement.getBoundingClientRect();
|
|
1639
|
+
if (_node) {
|
|
1640
|
+
const rect = iconDiv.node().getBoundingClientRect(), icon_top = containerRect.height / 2;
|
|
1641
|
+
iconDiv.style("position", "absolute").style("left", `calc(50% - ${rect.width / 2}px)`).style("top", `${icon_top - rect.height / 2}px`), element.selectAll("div.data-count").style("position", "absolute").style("left", `calc(50% + ${rect.width / 2}px)`).style("top", `${icon_top - rect.height / 2}px`);
|
|
1642
|
+
}
|
|
1643
|
+
}
|
|
1644
|
+
postUpdateSmall(element) {
|
|
1645
|
+
element.selectAll("lhs").style("display", "none"), element.selectAll("div.title-icon").style("position", "static"), element.selectAll("div.body,div.title-text,div.icon-bar").style("display", ""), element.selectAll("div.data-count").style("visibility", "hidden");
|
|
1646
|
+
const rect = element.node().getBoundingClientRect(), parentRect = element.node().parentElement.getBoundingClientRect();
|
|
1647
|
+
element.style("transform", `translate(${parentRect.x - rect.x}px, ${parentRect.y - rect.y}px) scale(${this._scale})`);
|
|
1648
|
+
}
|
|
1649
|
+
postUpdateRegular(element) {
|
|
1650
|
+
element.selectAll("div.title-icon").style("position", "static"), element.selectAll("div.body,div.title-text,div.icon-bar").style("display", ""), element.selectAll("div.data-count").style("visibility", "hidden");
|
|
1651
|
+
}
|
|
1652
|
+
exit(domNode, element) {
|
|
1653
|
+
this._progressBar.exit(domNode, element), this.right(null), this._legend.target(null), this.center(null), this._carousel.target(null), this.top(null), this._titleBar.target(null), this._modal.target(null), delete this._prevChart, delete this._prevButtons, delete this._prevChartDataFamily, delete this._prevPos, delete this._prevdataVisible, delete this._prevlegendVisible, super.exit(domNode, element);
|
|
1654
|
+
}
|
|
1655
|
+
// Event Handlers ---
|
|
1656
|
+
// Events ---
|
|
1657
|
+
click(row, column, selected) {
|
|
1658
|
+
}
|
|
1659
|
+
dblclick(row, column, selected) {
|
|
1660
|
+
}
|
|
1661
|
+
vertex_click(row, col, sel, more) {
|
|
1662
|
+
more && more.vertex;
|
|
1663
|
+
}
|
|
1664
|
+
vertex_dblclick(row, col, sel, more) {
|
|
1665
|
+
more && more.vertex;
|
|
1666
|
+
}
|
|
1667
|
+
edge_click(row, col, sel, more) {
|
|
1668
|
+
more && more.edge;
|
|
1669
|
+
}
|
|
1670
|
+
edge_dblclick(row, col, sel, more) {
|
|
1671
|
+
more && more.edge;
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1674
|
+
ChartPanel.prototype._class += " layout_ChartPanel";
|
|
1675
|
+
ChartPanel.prototype.publishReset();
|
|
1676
|
+
ChartPanel.prototype.publishProxy("title", "_titleBar");
|
|
1677
|
+
ChartPanel.prototype.publish("titleVisible", !0, "boolean");
|
|
1678
|
+
ChartPanel.prototype.publish("titleOverlay", !1, "boolean");
|
|
1679
|
+
ChartPanel.prototype.publishProxy("titleIcon", "_titleBar");
|
|
1680
|
+
ChartPanel.prototype.publishProxy("titleIconFont", "_titleBar");
|
|
1681
|
+
ChartPanel.prototype.publishProxy("titleFont", "_titleBar");
|
|
1682
|
+
ChartPanel.prototype.publishProxy("titleIconFontSize", "_titleBar");
|
|
1683
|
+
ChartPanel.prototype.publishProxy("titleFontSize", "_titleBar");
|
|
1684
|
+
ChartPanel.prototype.publishProxy("description", "_titleBar");
|
|
1685
|
+
ChartPanel.prototype.publishProxy("descriptionFont", "_titleBar");
|
|
1686
|
+
ChartPanel.prototype.publishProxy("descriptionFontSize", "_titleBar");
|
|
1687
|
+
ChartPanel.prototype.publish("dataVisible", !1, "boolean", "Show data table");
|
|
1688
|
+
ChartPanel.prototype.publish("dataButtonVisible", !0, "boolean", "Show data table button");
|
|
1689
|
+
ChartPanel.prototype.publish("downloadButtonVisible", !0, "boolean", "Show data download button");
|
|
1690
|
+
ChartPanel.prototype.publish("downloadImageButtonVisible", !1, "boolean", "Show image download button");
|
|
1691
|
+
ChartPanel.prototype.publish("downloadTitle", "", "string", "File name when downloaded");
|
|
1692
|
+
ChartPanel.prototype.publish("downloadTimestampSuffix", !0, "boolean", "Use timestamp as file name suffix");
|
|
1693
|
+
ChartPanel.prototype.publish("legendVisible", !1, "boolean", "Show legend");
|
|
1694
|
+
ChartPanel.prototype.publish("legendButtonVisible", !0, "boolean", "Show legend button");
|
|
1695
|
+
ChartPanel.prototype.publish("legendPosition", "right", "set", "Position of legend", ["right", "bottom"]);
|
|
1696
|
+
ChartPanel.prototype.publishProxy("legend_labelMaxWidth", "_legend", "labelMaxWidth");
|
|
1697
|
+
ChartPanel.prototype.publishProxy("legend_showSeriesTotal", "_legend", "showSeriesTotal");
|
|
1698
|
+
ChartPanel.prototype.publishProxy("legend_showLegendTotal", "_legend", "showLegendTotal");
|
|
1699
|
+
ChartPanel.prototype.publishProxy("legend_itemPadding", "_legend", "itemPadding");
|
|
1700
|
+
ChartPanel.prototype.publishProxy("legend_shapeRadius", "_legend", "shapeRadius");
|
|
1701
|
+
ChartPanel.prototype.publishProxy("legend_symbolType", "_legend", "symbolType");
|
|
1702
|
+
ChartPanel.prototype.publishProxy("legend_labelAlign", "_legend", "labelAlign");
|
|
1703
|
+
ChartPanel.prototype.publish("widget", null, "widget", "Widget", void 0, { render: !1 });
|
|
1704
|
+
ChartPanel.prototype.publish("enableAutoscaling", !1, "boolean");
|
|
1705
|
+
ChartPanel.prototype.publish("highlightSize", 4, "number");
|
|
1706
|
+
ChartPanel.prototype.publish("highlightColor", "#e67e22", "html-color");
|
|
1707
|
+
ChartPanel.prototype.publishProxy("progress_halfLife", "_progressBar", "halfLife");
|
|
1708
|
+
ChartPanel.prototype.publishProxy("progress_decay", "_progressBar", "decay");
|
|
1709
|
+
ChartPanel.prototype.publishProxy("progress_size", "_progressBar", "size");
|
|
1710
|
+
ChartPanel.prototype.publishProxy("progress_color", "_progressBar", "color");
|
|
1711
|
+
ChartPanel.prototype.publishProxy("progress_blurBar", "_progressBar", "blurBar");
|
|
1712
|
+
ChartPanel.prototype.publishProxy("progress_blurSize", "_progressBar", "blurSize");
|
|
1713
|
+
ChartPanel.prototype.publishProxy("progress_blurColor", "_progressBar", "blurColor");
|
|
1714
|
+
ChartPanel.prototype.publishProxy("progress_blurOpacity", "_progressBar", "blurOpacity");
|
|
1715
|
+
ChartPanel.prototype.widget = function(_) {
|
|
1716
|
+
if (!arguments.length) return this._widget;
|
|
1717
|
+
this._carousel.widgets([_, this._table]), this._widget = _, this._widget.fields(this._legend.filteredFields()).data(this._legend.filteredData());
|
|
1718
|
+
const context = this, tmpAny = this._widget;
|
|
1719
|
+
return tmpAny.click = function() {
|
|
1720
|
+
context.click.apply(context, arguments);
|
|
1721
|
+
}, tmpAny.dblclick = function() {
|
|
1722
|
+
context.dblclick.apply(context, arguments);
|
|
1723
|
+
}, tmpAny.vertex_click = function() {
|
|
1724
|
+
context.vertex_click.apply(context, arguments);
|
|
1725
|
+
}, tmpAny.vertex_dblclick = function() {
|
|
1726
|
+
context.vertex_dblclick.apply(context, arguments);
|
|
1727
|
+
}, tmpAny.edge_click = function() {
|
|
1728
|
+
context.edge_click.apply(context, arguments);
|
|
1729
|
+
}, tmpAny.edge_dblclick = function() {
|
|
1730
|
+
context.edge_dblclick.apply(context, arguments);
|
|
1731
|
+
}, this;
|
|
1732
|
+
};
|
|
1733
|
+
class FlexGrid extends HTMLWidget {
|
|
1734
|
+
constructor() {
|
|
1735
|
+
super();
|
|
1736
|
+
}
|
|
1737
|
+
enter(domNode, element) {
|
|
1738
|
+
super.enter(domNode, element), select(domNode.parentNode).style("height", "100%").style("width", "100%");
|
|
1739
|
+
}
|
|
1740
|
+
update(domNode, element) {
|
|
1741
|
+
super.update(domNode, element);
|
|
1742
|
+
const context = this, cachedSizes = [];
|
|
1743
|
+
this.updateFlexParent(element);
|
|
1744
|
+
const listItems = element.selectAll(".FlexGrid-list-item").data(this.widgets(), (w) => w.id());
|
|
1745
|
+
listItems.enter().append("div").classed("FlexGrid-list-item", !0).each(function(w) {
|
|
1746
|
+
w.target(this);
|
|
1747
|
+
}).merge(listItems).style("min-height", this.itemMinHeight() + "px").style("min-width", this.itemMinWidth() + "px").style("flex-basis", (n, i) => {
|
|
1748
|
+
const flexBasis = this.widgetsFlexBasis()[i];
|
|
1749
|
+
return typeof flexBasis < "u" ? flexBasis : this.flexBasis();
|
|
1750
|
+
}).style("flex-grow", (n, i) => {
|
|
1751
|
+
const flexGrow = this.widgetsFlexGrow()[i];
|
|
1752
|
+
return typeof flexGrow < "u" ? flexGrow : this.flexGrow();
|
|
1753
|
+
}).style("border-width", this.borderWidth() + "px").style("border-color", this.itemBorderColor()).each(function() {
|
|
1754
|
+
this.firstChild.style.display = "none";
|
|
1755
|
+
}).each(function() {
|
|
1756
|
+
const rect = this.getBoundingClientRect();
|
|
1757
|
+
cachedSizes.push([
|
|
1758
|
+
rect.width,
|
|
1759
|
+
rect.height
|
|
1760
|
+
]);
|
|
1761
|
+
}).each(function(w, i) {
|
|
1762
|
+
this.firstChild.style.display = "block", w.resize({
|
|
1763
|
+
width: cachedSizes[i][0] - 2 * context.borderWidth(),
|
|
1764
|
+
height: cachedSizes[i][1] - 2 * context.borderWidth()
|
|
1765
|
+
});
|
|
1766
|
+
}), listItems.exit().remove();
|
|
1767
|
+
}
|
|
1768
|
+
exit(domNode, element) {
|
|
1769
|
+
super.exit(domNode, element);
|
|
1770
|
+
}
|
|
1771
|
+
updateFlexParent(element) {
|
|
1772
|
+
element.style("height", "100%").style("flex-direction", this.orientation() === "horizontal" ? "row" : "column").style("flex-wrap", this.flexWrap()).style("align-items", this.alignItems()).style("align-content", this.alignContent()).style("overflow-x", () => this.forceXScroll() || this.orientation() === "horizontal" && this.flexWrap() === "nowrap" && !this.disableScroll() ? "scroll" : "hidden").style("overflow-y", () => this.forceYScroll() || this.orientation() === "vertical" && this.flexWrap() === "nowrap" && !this.disableScroll() ? "scroll" : "hidden");
|
|
1773
|
+
}
|
|
1774
|
+
}
|
|
1775
|
+
FlexGrid.prototype._class += " layout_FlexGrid";
|
|
1776
|
+
FlexGrid.prototype.publish("itemBorderColor", "transparent", "html-color", "Color of list item borders");
|
|
1777
|
+
FlexGrid.prototype.publish("borderWidth", 0, "number", "Width of list item borders (pixels)");
|
|
1778
|
+
FlexGrid.prototype.publish("orientation", "horizontal", "set", "Controls the flex-direction of the list items", ["horizontal", "vertical"]);
|
|
1779
|
+
FlexGrid.prototype.publish("flexWrap", "wrap", "set", "Controls the line wrap when overflow occurs", ["nowrap", "wrap", "wrap-reverse"]);
|
|
1780
|
+
FlexGrid.prototype.publish("disableScroll", !1, "boolean", "If false, scrollbar will show (when flexWrap is set to 'nowrap')", null, { disable: (w) => w.flexWrap() !== "nowrap" });
|
|
1781
|
+
FlexGrid.prototype.publish("forceXScroll", !1, "boolean", "If true, horzontal scrollbar will show");
|
|
1782
|
+
FlexGrid.prototype.publish("forceYScroll", !1, "boolean", "If true, vertical scrollbar will show");
|
|
1783
|
+
FlexGrid.prototype.publish("itemMinHeight", 64, "number", "Minimum height of a list item (pixels)");
|
|
1784
|
+
FlexGrid.prototype.publish("itemMinWidth", 64, "number", "Minimum width of a list item (pixels)");
|
|
1785
|
+
FlexGrid.prototype.publish("alignItems", "stretch", "set", "Controls normal alignment of items", ["flex-start", "center", "flex-end", "stretch"]);
|
|
1786
|
+
FlexGrid.prototype.publish("alignContent", "stretch", "set", "Controls normal alignment of item rows", ["flex-start", "center", "flex-end", "stretch", "space-between", "space-around"]);
|
|
1787
|
+
FlexGrid.prototype.publish("flexGrow", 1, "number", "Default flex-grow style for all list items");
|
|
1788
|
+
FlexGrid.prototype.publish("flexBasis", "10%", "string", "Default flex-basis style for all list items");
|
|
1789
|
+
FlexGrid.prototype.publish("widgetsFlexGrow", [], "array", "Array of flex-grow values keyed on the widgets array");
|
|
1790
|
+
FlexGrid.prototype.publish("widgetsFlexBasis", [], "array", "Array of flex-basis values keyed on the widgets array");
|
|
1791
|
+
FlexGrid.prototype.publish("widgets", [], "widgetArray", "Array of widgets to be rendered as list items");
|
|
1792
|
+
function getDefaultExportFromCjs(x) {
|
|
1793
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
|
|
1794
|
+
}
|
|
1795
|
+
var gridList$2 = { exports: {} }, gridList$1 = gridList$2.exports, hasRequiredGridList;
|
|
1796
|
+
function requireGridList() {
|
|
1797
|
+
return hasRequiredGridList || (hasRequiredGridList = 1, function(module, exports) {
|
|
1798
|
+
(function(root, factory) {
|
|
1799
|
+
module.exports = factory();
|
|
1800
|
+
})(gridList$1, function() {
|
|
1801
|
+
var GridList2 = function(items, options) {
|
|
1802
|
+
this._options = options;
|
|
1803
|
+
for (var k2 in this.defaults)
|
|
1804
|
+
this._options.hasOwnProperty(k2) || (this._options[k2] = this.defaults[k2]);
|
|
1805
|
+
this.items = items, this._adjustSizeOfItems(), this.generateGrid();
|
|
1806
|
+
};
|
|
1807
|
+
GridList2.cloneItems = function(items, _items) {
|
|
1808
|
+
var i, k2;
|
|
1809
|
+
for (_items === void 0 && (_items = []), i = 0; i < items.length; i++) {
|
|
1810
|
+
_items[i] || (_items[i] = {});
|
|
1811
|
+
for (k2 in items[i])
|
|
1812
|
+
_items[i][k2] = items[i][k2];
|
|
1813
|
+
}
|
|
1814
|
+
return _items;
|
|
1815
|
+
}, GridList2.prototype = {
|
|
1816
|
+
defaults: {
|
|
1817
|
+
lanes: 5,
|
|
1818
|
+
direction: "horizontal"
|
|
1819
|
+
},
|
|
1820
|
+
/**
|
|
1821
|
+
* Illustates grid as text-based table, using a number identifier for each
|
|
1822
|
+
* item. E.g.
|
|
1823
|
+
*
|
|
1824
|
+
* #| 0 1 2 3 4 5 6 7 8 9 10 11 12 13
|
|
1825
|
+
* --------------------------------------------
|
|
1826
|
+
* 0| 00 02 03 04 04 06 08 08 08 12 12 13 14 16
|
|
1827
|
+
* 1| 01 -- 03 05 05 07 09 10 11 11 -- 13 15 --
|
|
1828
|
+
*
|
|
1829
|
+
* Warn: Does not work if items don't have a width or height specified
|
|
1830
|
+
* besides their position in the grid.
|
|
1831
|
+
*/
|
|
1832
|
+
toString: function() {
|
|
1833
|
+
var widthOfGrid = this.grid.length, output = `
|
|
1834
|
+
#|`, border = `
|
|
1835
|
+
--`, item, i, j;
|
|
1836
|
+
for (i = 0; i < widthOfGrid; i++)
|
|
1837
|
+
output += " " + this._padNumber(i, " "), border += "---";
|
|
1838
|
+
for (output += border, i = 0; i < this._options.lanes; i++)
|
|
1839
|
+
for (output += `
|
|
1840
|
+
` + this._padNumber(i, " ") + "|", j = 0; j < widthOfGrid; j++)
|
|
1841
|
+
output += " ", item = this.grid[j][i], output += item ? this._padNumber(this.items.indexOf(item), "0") : "--";
|
|
1842
|
+
return output += `
|
|
1843
|
+
`, output;
|
|
1844
|
+
},
|
|
1845
|
+
generateGrid: function() {
|
|
1846
|
+
var i;
|
|
1847
|
+
for (this._resetGrid(), i = 0; i < this.items.length; i++)
|
|
1848
|
+
this._markItemPositionToGrid(this.items[i]);
|
|
1849
|
+
},
|
|
1850
|
+
resizeGrid: function(lanes) {
|
|
1851
|
+
var currentColumn = 0;
|
|
1852
|
+
this._options.lanes = lanes, this._adjustSizeOfItems(), this._sortItemsByPosition(), this._resetGrid();
|
|
1853
|
+
for (var i = 0; i < this.items.length; i++) {
|
|
1854
|
+
var item = this.items[i], position = this._getItemPosition(item);
|
|
1855
|
+
this._updateItemPosition(
|
|
1856
|
+
item,
|
|
1857
|
+
this.findPositionForItem(item, { x: currentColumn, y: 0 })
|
|
1858
|
+
), currentColumn = Math.max(currentColumn, position.x);
|
|
1859
|
+
}
|
|
1860
|
+
this._pullItemsToLeft();
|
|
1861
|
+
},
|
|
1862
|
+
findPositionForItem: function(item, start, fixedRow) {
|
|
1863
|
+
var x, y, position;
|
|
1864
|
+
for (x = start.x; x < this.grid.length; x++)
|
|
1865
|
+
if (fixedRow !== void 0) {
|
|
1866
|
+
if (position = [x, fixedRow], this._itemFitsAtPosition(item, position))
|
|
1867
|
+
return position;
|
|
1868
|
+
} else
|
|
1869
|
+
for (y = start.y; y < this._options.lanes; y++)
|
|
1870
|
+
if (position = [x, y], this._itemFitsAtPosition(item, position))
|
|
1871
|
+
return position;
|
|
1872
|
+
var newCol = this.grid.length, newRow = 0;
|
|
1873
|
+
return fixedRow !== void 0 && this._itemFitsAtPosition(item, [newCol, fixedRow]) && (newRow = fixedRow), [newCol, newRow];
|
|
1874
|
+
},
|
|
1875
|
+
moveItemToPosition: function(item, newPosition) {
|
|
1876
|
+
var position = this._getItemPosition({
|
|
1877
|
+
x: newPosition[0],
|
|
1878
|
+
y: newPosition[1],
|
|
1879
|
+
w: item.w,
|
|
1880
|
+
h: item.h
|
|
1881
|
+
});
|
|
1882
|
+
this._updateItemPosition(item, [position.x, position.y]), this._resolveCollisions(item);
|
|
1883
|
+
},
|
|
1884
|
+
resizeItem: function(item, size) {
|
|
1885
|
+
var width = size.w || item.w, height = size.h || item.h;
|
|
1886
|
+
this._updateItemSize(item, width, height), this._resolveCollisions(item), this._pullItemsToLeft();
|
|
1887
|
+
},
|
|
1888
|
+
getChangedItems: function(initialItems, idAttribute) {
|
|
1889
|
+
for (var changedItems = [], i = 0; i < initialItems.length; i++) {
|
|
1890
|
+
var item = this._getItemByAttribute(
|
|
1891
|
+
idAttribute,
|
|
1892
|
+
initialItems[i][idAttribute]
|
|
1893
|
+
);
|
|
1894
|
+
(item.x !== initialItems[i].x || item.y !== initialItems[i].y || item.w !== initialItems[i].w || item.h !== initialItems[i].h) && changedItems.push(item);
|
|
1895
|
+
}
|
|
1896
|
+
return changedItems;
|
|
1897
|
+
},
|
|
1898
|
+
_sortItemsByPosition: function() {
|
|
1899
|
+
this.items.sort((function(item1, item2) {
|
|
1900
|
+
var position1 = this._getItemPosition(item1), position2 = this._getItemPosition(item2);
|
|
1901
|
+
return position1.x != position2.x ? position1.x - position2.x : position1.y != position2.y ? position1.y - position2.y : 0;
|
|
1902
|
+
}).bind(this));
|
|
1903
|
+
},
|
|
1904
|
+
_adjustSizeOfItems: function() {
|
|
1905
|
+
for (var i = 0; i < this.items.length; i++) {
|
|
1906
|
+
var item = this.items[i];
|
|
1907
|
+
item.autoSize === void 0 && (item.autoSize = item.w === 0 || item.h === 0), item.autoSize && (this._options.direction === "horizontal" ? item.h = this._options.lanes : item.w = this._options.lanes);
|
|
1908
|
+
}
|
|
1909
|
+
},
|
|
1910
|
+
_resetGrid: function() {
|
|
1911
|
+
this.grid = [];
|
|
1912
|
+
},
|
|
1913
|
+
_itemFitsAtPosition: function(item, newPosition) {
|
|
1914
|
+
var position = this._getItemPosition(item), x, y;
|
|
1915
|
+
if (newPosition[0] < 0 || newPosition[1] < 0 || newPosition[1] + position.h > this._options.lanes)
|
|
1916
|
+
return !1;
|
|
1917
|
+
for (x = newPosition[0]; x < newPosition[0] + position.w; x++) {
|
|
1918
|
+
var col = this.grid[x];
|
|
1919
|
+
if (col) {
|
|
1920
|
+
for (y = newPosition[1]; y < newPosition[1] + position.h; y++)
|
|
1921
|
+
if (col[y] && col[y] !== item)
|
|
1922
|
+
return !1;
|
|
1923
|
+
}
|
|
1924
|
+
}
|
|
1925
|
+
return !0;
|
|
1926
|
+
},
|
|
1927
|
+
_updateItemPosition: function(item, position) {
|
|
1928
|
+
item.x !== null && item.y !== null && this._deleteItemPositionFromGrid(item), this._setItemPosition(item, position), this._markItemPositionToGrid(item);
|
|
1929
|
+
},
|
|
1930
|
+
_updateItemSize: function(item, width, height) {
|
|
1931
|
+
item.x !== null && item.y !== null && this._deleteItemPositionFromGrid(item), item.w = width, item.h = height, this._markItemPositionToGrid(item);
|
|
1932
|
+
},
|
|
1933
|
+
_markItemPositionToGrid: function(item) {
|
|
1934
|
+
var position = this._getItemPosition(item), x, y;
|
|
1935
|
+
for (this._ensureColumns(position.x + position.w), x = position.x; x < position.x + position.w; x++)
|
|
1936
|
+
for (y = position.y; y < position.y + position.h; y++)
|
|
1937
|
+
this.grid[x][y] = item;
|
|
1938
|
+
},
|
|
1939
|
+
_deleteItemPositionFromGrid: function(item) {
|
|
1940
|
+
var position = this._getItemPosition(item), x, y;
|
|
1941
|
+
for (x = position.x; x < position.x + position.w; x++)
|
|
1942
|
+
if (this.grid[x])
|
|
1943
|
+
for (y = position.y; y < position.y + position.h; y++)
|
|
1944
|
+
this.grid[x][y] == item && (this.grid[x][y] = null);
|
|
1945
|
+
},
|
|
1946
|
+
_ensureColumns: function(N) {
|
|
1947
|
+
var i;
|
|
1948
|
+
for (i = 0; i < N; i++)
|
|
1949
|
+
this.grid[i] || this.grid.push(new GridCol(this._options.lanes));
|
|
1950
|
+
},
|
|
1951
|
+
_getItemsCollidingWithItem: function(item) {
|
|
1952
|
+
for (var collidingItems = [], i = 0; i < this.items.length; i++)
|
|
1953
|
+
item != this.items[i] && this._itemsAreColliding(item, this.items[i]) && collidingItems.push(i);
|
|
1954
|
+
return collidingItems;
|
|
1955
|
+
},
|
|
1956
|
+
_itemsAreColliding: function(item1, item2) {
|
|
1957
|
+
var position1 = this._getItemPosition(item1), position2 = this._getItemPosition(item2);
|
|
1958
|
+
return !(position2.x >= position1.x + position1.w || position2.x + position2.w <= position1.x || position2.y >= position1.y + position1.h || position2.y + position2.h <= position1.y);
|
|
1959
|
+
},
|
|
1960
|
+
_resolveCollisions: function(item) {
|
|
1961
|
+
this._tryToResolveCollisionsLocally(item) || this._pullItemsToLeft(item), this._pullItemsToLeft();
|
|
1962
|
+
},
|
|
1963
|
+
_tryToResolveCollisionsLocally: function(item) {
|
|
1964
|
+
var collidingItems = this._getItemsCollidingWithItem(item);
|
|
1965
|
+
if (!collidingItems.length)
|
|
1966
|
+
return !0;
|
|
1967
|
+
var _gridList = new GridList2([], this._options), leftOfItem, rightOfItem, aboveOfItem, belowOfItem;
|
|
1968
|
+
GridList2.cloneItems(this.items, _gridList.items), _gridList.generateGrid();
|
|
1969
|
+
for (var i = 0; i < collidingItems.length; i++) {
|
|
1970
|
+
var collidingItem = _gridList.items[collidingItems[i]], collidingPosition = this._getItemPosition(collidingItem), position = this._getItemPosition(item);
|
|
1971
|
+
if (leftOfItem = [position.x - collidingPosition.w, collidingPosition.y], rightOfItem = [position.x + position.w, collidingPosition.y], aboveOfItem = [collidingPosition.x, position.y - collidingPosition.h], belowOfItem = [collidingPosition.x, position.y + position.h], _gridList._itemFitsAtPosition(collidingItem, leftOfItem))
|
|
1972
|
+
_gridList._updateItemPosition(collidingItem, leftOfItem);
|
|
1973
|
+
else if (_gridList._itemFitsAtPosition(collidingItem, aboveOfItem))
|
|
1974
|
+
_gridList._updateItemPosition(collidingItem, aboveOfItem);
|
|
1975
|
+
else if (_gridList._itemFitsAtPosition(collidingItem, belowOfItem))
|
|
1976
|
+
_gridList._updateItemPosition(collidingItem, belowOfItem);
|
|
1977
|
+
else if (_gridList._itemFitsAtPosition(collidingItem, rightOfItem))
|
|
1978
|
+
_gridList._updateItemPosition(collidingItem, rightOfItem);
|
|
1979
|
+
else
|
|
1980
|
+
return !1;
|
|
1981
|
+
}
|
|
1982
|
+
return GridList2.cloneItems(_gridList.items, this.items), this.generateGrid(), !0;
|
|
1983
|
+
},
|
|
1984
|
+
_pullItemsToLeft: function(fixedItem) {
|
|
1985
|
+
if (this._sortItemsByPosition(), this._resetGrid(), fixedItem) {
|
|
1986
|
+
var fixedPosition = this._getItemPosition(fixedItem);
|
|
1987
|
+
this._updateItemPosition(fixedItem, [fixedPosition.x, fixedPosition.y]);
|
|
1988
|
+
}
|
|
1989
|
+
for (var i = 0; i < this.items.length; i++) {
|
|
1990
|
+
var item = this.items[i], position = this._getItemPosition(item);
|
|
1991
|
+
if (!(fixedItem && item == fixedItem)) {
|
|
1992
|
+
var x = this._findLeftMostPositionForItem(item), newPosition = this.findPositionForItem(
|
|
1993
|
+
item,
|
|
1994
|
+
{ x, y: 0 },
|
|
1995
|
+
position.y
|
|
1996
|
+
);
|
|
1997
|
+
this._updateItemPosition(item, newPosition);
|
|
1998
|
+
}
|
|
1999
|
+
}
|
|
2000
|
+
},
|
|
2001
|
+
_findLeftMostPositionForItem: function(item) {
|
|
2002
|
+
for (var tail = 0, position = this._getItemPosition(item), i = 0; i < this.grid.length; i++)
|
|
2003
|
+
for (var j = position.y; j < position.y + position.h; j++) {
|
|
2004
|
+
var otherItem = this.grid[i][j];
|
|
2005
|
+
if (otherItem) {
|
|
2006
|
+
var otherPosition = this._getItemPosition(otherItem);
|
|
2007
|
+
this.items.indexOf(otherItem) < this.items.indexOf(item) && (tail = otherPosition.x + otherPosition.w);
|
|
2008
|
+
}
|
|
2009
|
+
}
|
|
2010
|
+
return tail;
|
|
2011
|
+
},
|
|
2012
|
+
_getItemByAttribute: function(key, value) {
|
|
2013
|
+
for (var i = 0; i < this.items.length; i++)
|
|
2014
|
+
if (this.items[i][key] === value)
|
|
2015
|
+
return this.items[i];
|
|
2016
|
+
return null;
|
|
2017
|
+
},
|
|
2018
|
+
_padNumber: function(nr, prefix) {
|
|
2019
|
+
return nr >= 10 ? nr : prefix + nr;
|
|
2020
|
+
},
|
|
2021
|
+
_getItemPosition: function(item) {
|
|
2022
|
+
return this._options.direction === "horizontal" ? item : {
|
|
2023
|
+
x: item.y,
|
|
2024
|
+
y: item.x,
|
|
2025
|
+
w: item.h,
|
|
2026
|
+
h: item.w
|
|
2027
|
+
};
|
|
2028
|
+
},
|
|
2029
|
+
_setItemPosition: function(item, position) {
|
|
2030
|
+
this._options.direction === "horizontal" ? (item.x = position[0], item.y = position[1]) : (item.x = position[1], item.y = position[0]);
|
|
2031
|
+
}
|
|
2032
|
+
};
|
|
2033
|
+
var GridCol = function(lanes) {
|
|
2034
|
+
for (var i = 0; i < lanes; i++)
|
|
2035
|
+
this.push(null);
|
|
2036
|
+
};
|
|
2037
|
+
return GridCol.prototype = [], GridList2;
|
|
2038
|
+
});
|
|
2039
|
+
}(gridList$2)), gridList$2.exports;
|
|
2040
|
+
}
|
|
2041
|
+
var gridListExports = requireGridList();
|
|
2042
|
+
const gridList = /* @__PURE__ */ getDefaultExportFromCjs(gridListExports), _GridList = /* @__PURE__ */ _mergeNamespaces({
|
|
2043
|
+
__proto__: null,
|
|
2044
|
+
default: gridList
|
|
2045
|
+
}, [gridListExports]), GridList = _GridList && gridList || _GridList;
|
|
2046
|
+
class Grid extends HTMLWidget {
|
|
2047
|
+
constructor() {
|
|
2048
|
+
super();
|
|
2049
|
+
__publicField(this, "divItems");
|
|
2050
|
+
__publicField(this, "gridList");
|
|
2051
|
+
__publicField(this, "items");
|
|
2052
|
+
__publicField(this, "itemsMap");
|
|
2053
|
+
__publicField(this, "origItems");
|
|
2054
|
+
__publicField(this, "cellWidth");
|
|
2055
|
+
__publicField(this, "cellHeight");
|
|
2056
|
+
__publicField(this, "dragItem");
|
|
2057
|
+
__publicField(this, "dragItemPos");
|
|
2058
|
+
__publicField(this, "_d3Drag");
|
|
2059
|
+
__publicField(this, "_d3DragResize");
|
|
2060
|
+
__publicField(this, "_selectionBag");
|
|
2061
|
+
__publicField(this, "_scrollBarWidth");
|
|
2062
|
+
this._tag = "div", this._selectionBag = new Utility.Selection(this), this.content([]);
|
|
2063
|
+
}
|
|
2064
|
+
getDimensions() {
|
|
2065
|
+
const size = { width: 0, height: 0 };
|
|
2066
|
+
return this.content().forEach(function(cell) {
|
|
2067
|
+
size.width < cell.gridCol() + cell.gridColSpan() && (size.width = cell.gridCol() + cell.gridColSpan()), size.height < cell.gridRow() + cell.gridRowSpan() && (size.height = cell.gridRow() + cell.gridRowSpan());
|
|
2068
|
+
}, this), size;
|
|
2069
|
+
}
|
|
2070
|
+
clearContent(widget) {
|
|
2071
|
+
this.content(this.content().filter(function(contentWidget) {
|
|
2072
|
+
if (!widget)
|
|
2073
|
+
return contentWidget.target(null), !1;
|
|
2074
|
+
let w = contentWidget;
|
|
2075
|
+
for (; w; ) {
|
|
2076
|
+
if (widget === w)
|
|
2077
|
+
return contentWidget.target(null), !1;
|
|
2078
|
+
w = w.widget ? w.widget() : null;
|
|
2079
|
+
}
|
|
2080
|
+
return !0;
|
|
2081
|
+
}));
|
|
2082
|
+
}
|
|
2083
|
+
setContent(row, col, widget, title, rowSpan, colSpan) {
|
|
2084
|
+
if (rowSpan = rowSpan || 1, colSpan = colSpan || 1, title = title || "", this.content(this.content().filter(function(contentWidget) {
|
|
2085
|
+
return contentWidget.gridRow() === row && contentWidget.gridCol() === col ? (contentWidget.target(null), !1) : !0;
|
|
2086
|
+
})), widget) {
|
|
2087
|
+
const cell = new Cell().gridRow(row).gridCol(col).widget(widget).title(title).gridRowSpan(rowSpan).gridColSpan(colSpan);
|
|
2088
|
+
this.content().push(cell);
|
|
2089
|
+
}
|
|
2090
|
+
return this;
|
|
2091
|
+
}
|
|
2092
|
+
sortedContent() {
|
|
2093
|
+
return this.content().sort(function(l, r) {
|
|
2094
|
+
return l.gridRow() === r.gridRow() ? l.gridCol() - r.gridCol() : l.gridRow() - r.gridRow();
|
|
2095
|
+
});
|
|
2096
|
+
}
|
|
2097
|
+
getCell(row, col) {
|
|
2098
|
+
let retVal = null;
|
|
2099
|
+
return this.content().some(function(cell) {
|
|
2100
|
+
return row >= cell.gridRow() && row < cell.gridRow() + cell.gridRowSpan() && col >= cell.gridCol() && col < cell.gridCol() + cell.gridColSpan() ? (retVal = cell, !0) : !1;
|
|
2101
|
+
}), retVal;
|
|
2102
|
+
}
|
|
2103
|
+
getWidgetCell(id) {
|
|
2104
|
+
let retVal = null;
|
|
2105
|
+
return this.content().some(function(cell) {
|
|
2106
|
+
return cell.widget().id() === id ? (retVal = cell, !0) : !1;
|
|
2107
|
+
}), retVal;
|
|
2108
|
+
}
|
|
2109
|
+
getContent(id) {
|
|
2110
|
+
let retVal = null;
|
|
2111
|
+
return this.content().some(function(cell) {
|
|
2112
|
+
return cell.widget().id() === id ? (retVal = cell.widget(), !0) : !1;
|
|
2113
|
+
}), retVal;
|
|
2114
|
+
}
|
|
2115
|
+
cellToGridItem(cell) {
|
|
2116
|
+
return {
|
|
2117
|
+
x: cell.gridCol(),
|
|
2118
|
+
y: cell.gridRow(),
|
|
2119
|
+
w: cell.gridColSpan(),
|
|
2120
|
+
h: cell.gridRowSpan(),
|
|
2121
|
+
id: cell.id(),
|
|
2122
|
+
cell
|
|
2123
|
+
};
|
|
2124
|
+
}
|
|
2125
|
+
gridItemToCell(item) {
|
|
2126
|
+
item.cell.gridCol(item.x).gridRow(item.y).gridColSpan(item.w).gridRowSpan(item.h);
|
|
2127
|
+
}
|
|
2128
|
+
resetItemsPos() {
|
|
2129
|
+
this.origItems.forEach(function(origItem) {
|
|
2130
|
+
const item = this.itemsMap[origItem.id];
|
|
2131
|
+
item.x = origItem.x, item.y = origItem.y;
|
|
2132
|
+
}, this);
|
|
2133
|
+
}
|
|
2134
|
+
initGridList() {
|
|
2135
|
+
this.itemsMap = {}, this.items = this.content().map(function(cell) {
|
|
2136
|
+
const retVal = this.cellToGridItem(cell);
|
|
2137
|
+
return this.itemsMap[retVal.id] = retVal, retVal;
|
|
2138
|
+
}, this), this.origItems = this.content().map(this.cellToGridItem), this.gridList = new GridList(this.items, {
|
|
2139
|
+
direction: this.snapping(),
|
|
2140
|
+
lanes: this.snapping() === "horizontal" ? this.snappingRows() : this.snappingColumns()
|
|
2141
|
+
});
|
|
2142
|
+
}
|
|
2143
|
+
killGridList() {
|
|
2144
|
+
this.gridList = null, delete this.items, delete this.itemsMap;
|
|
2145
|
+
}
|
|
2146
|
+
enter(domNode, element) {
|
|
2147
|
+
super.enter(domNode, element), this._scrollBarWidth = Platform.getScrollbarWidth();
|
|
2148
|
+
const context = this;
|
|
2149
|
+
this._d3Drag = drag().subject(function(_d) {
|
|
2150
|
+
const d = context.cellToGridItem(_d);
|
|
2151
|
+
return { x: d.x * context.cellWidth, y: d.y * context.cellHeight };
|
|
2152
|
+
}).on("start", function(_d) {
|
|
2153
|
+
if (!context.designMode()) return;
|
|
2154
|
+
d3Event().sourceEvent.stopPropagation(), context.initGridList();
|
|
2155
|
+
const d = context.itemsMap[_d.id()];
|
|
2156
|
+
context.dragItem = element.append("div").attr("class", "dragging").style("transform", function() {
|
|
2157
|
+
return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)";
|
|
2158
|
+
}).style("width", function() {
|
|
2159
|
+
return d.w * context.cellWidth - context.gutter() + "px";
|
|
2160
|
+
}).style("height", function() {
|
|
2161
|
+
return d.h * context.cellHeight - context.gutter() + "px";
|
|
2162
|
+
}), context.selectionBagClick(_d);
|
|
2163
|
+
}).on("drag", function(_d) {
|
|
2164
|
+
if (!context.designMode()) return;
|
|
2165
|
+
const event = d3Event();
|
|
2166
|
+
event.sourceEvent.stopPropagation();
|
|
2167
|
+
const d = context.itemsMap[_d.id()];
|
|
2168
|
+
event.x < 0 && (event.x = 0), event.x + d.w * context.cellWidth > context.snappingColumns() * context.cellWidth && (event.x = context.snappingColumns() * context.cellWidth - d.w * context.cellWidth), event.y < 0 && (event.y = 0), event.y + d.h * context.cellWidth > context.snappingRows() * context.cellWidth && (event.y = context.snappingRows() * context.cellWidth - d.h * context.cellWidth);
|
|
2169
|
+
const pos = [Math.max(0, Math.floor((event.x + context.cellWidth / 2) / context.cellWidth)), Math.max(0, Math.floor((event.y + context.cellHeight / 2) / context.cellHeight))];
|
|
2170
|
+
(d.x !== pos[0] || d.y !== pos[1]) && (context.snapping() !== "none" ? (context.resetItemsPos(), context.gridList.moveItemToPosition(d, pos)) : (d.x = pos[0], d.y = pos[1]), (_d.gridCol() !== d.x || _d.gridRow() !== d.y) && (context.items.forEach(context.gridItemToCell), context.updateGrid(!1, 100))), context.dragItem.style("transform", function() {
|
|
2171
|
+
return "translate(" + event.x + "px, " + event.y + "px)";
|
|
2172
|
+
}).style("width", function() {
|
|
2173
|
+
return d.w * context.cellWidth + "px";
|
|
2174
|
+
}).style("height", function() {
|
|
2175
|
+
return d.h * context.cellHeight + "px";
|
|
2176
|
+
});
|
|
2177
|
+
}).on("end", function() {
|
|
2178
|
+
context.designMode() && (d3Event().sourceEvent.stopPropagation(), context.dragItem.remove(), context.dragItem = null, context.killGridList());
|
|
2179
|
+
}), this._d3DragResize = drag().subject(function(_d) {
|
|
2180
|
+
const d = context.cellToGridItem(_d);
|
|
2181
|
+
return { x: (d.x + d.w - 1) * context.cellWidth, y: (d.y + d.h - 1) * context.cellHeight };
|
|
2182
|
+
}).on("start", function(_d) {
|
|
2183
|
+
if (!context.designMode()) return;
|
|
2184
|
+
d3Event().sourceEvent.stopPropagation(), context.initGridList();
|
|
2185
|
+
const d = context.itemsMap[_d.id()];
|
|
2186
|
+
context.dragItem = element.append("div").attr("class", "resizing").style("transform", function() {
|
|
2187
|
+
return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)";
|
|
2188
|
+
}).style("width", function() {
|
|
2189
|
+
return d.w * context.cellWidth - context.gutter() + "px";
|
|
2190
|
+
}).style("height", function() {
|
|
2191
|
+
return d.h * context.cellHeight - context.gutter() + "px";
|
|
2192
|
+
}), context.dragItemPos = { x: d.x, y: d.y };
|
|
2193
|
+
}).on("drag", function(_d) {
|
|
2194
|
+
if (!context.designMode()) return;
|
|
2195
|
+
const event = d3Event();
|
|
2196
|
+
event.sourceEvent.stopPropagation();
|
|
2197
|
+
const d = context.itemsMap[_d.id()], pos = [Math.max(0, Math.round(event.x / context.cellWidth)), Math.max(0, Math.round(event.y / context.cellHeight))], size = {
|
|
2198
|
+
w: Math.max(1, pos[0] - d.x + 1),
|
|
2199
|
+
h: Math.max(1, pos[1] - d.y + 1)
|
|
2200
|
+
};
|
|
2201
|
+
(d.w !== size.w || d.h !== size.h) && (context.snapping() !== "none" ? (context.resetItemsPos(), context.gridList.resizeItem(d, size)) : (d.w = size.w, d.h = size.h), (_d.gridColSpan() !== d.w || _d.gridRowSpan() !== d.h) && (context.items.forEach(context.gridItemToCell), context.updateGrid(d.id, 100))), context.dragItem.style("width", function() {
|
|
2202
|
+
return (-d.x + 1) * context.cellWidth + event.x - context.gutter() + "px";
|
|
2203
|
+
}).style("height", function() {
|
|
2204
|
+
return (-d.y + 1) * context.cellHeight + event.y - context.gutter() + "px";
|
|
2205
|
+
});
|
|
2206
|
+
}).on("end", function() {
|
|
2207
|
+
context.designMode() && (d3Event().sourceEvent.stopPropagation(), context.dragItem.remove(), context.dragItem = null, context.killGridList());
|
|
2208
|
+
});
|
|
2209
|
+
}
|
|
2210
|
+
updateGrid(resize, transitionDuration = 0, _noRender = !1) {
|
|
2211
|
+
transitionDuration = transitionDuration || 0;
|
|
2212
|
+
const context = this;
|
|
2213
|
+
this.divItems.classed("draggable", this.designMode()).transition().duration(transitionDuration).style("left", function(d) {
|
|
2214
|
+
return d.gridCol() * context.cellWidth + context.gutter() / 2 + "px";
|
|
2215
|
+
}).style("top", function(d) {
|
|
2216
|
+
return d.gridRow() * context.cellHeight + context.gutter() / 2 + "px";
|
|
2217
|
+
}).style("width", function(d) {
|
|
2218
|
+
return d.gridColSpan() * context.cellWidth - context.gutter() + "px";
|
|
2219
|
+
}).style("height", function(d) {
|
|
2220
|
+
return d.gridRowSpan() * context.cellHeight - context.gutter() + "px";
|
|
2221
|
+
}).on("end", function(d) {
|
|
2222
|
+
d.surfaceShadow_default(context.surfaceShadow()).surfacePadding_default(context.surfacePadding()).surfaceBorderWidth_default(context.surfaceBorderWidth()).surfaceBackgroundColor_default(context.surfaceBackgroundColor()), (resize === !0 || resize === d.id()) && d.resize().lazyRender();
|
|
2223
|
+
});
|
|
2224
|
+
}
|
|
2225
|
+
update(domNode, element2) {
|
|
2226
|
+
super.update(domNode, element2), this._placeholderElement.style("overflow-x", this.fitTo() === "width" ? "hidden" : null), this._placeholderElement.style("overflow-y", this.fitTo() === "width" ? "scroll" : null);
|
|
2227
|
+
const dimensions = this.getDimensions(), clientWidth = this.width() - (this.fitTo() === "width" ? this._scrollBarWidth : 0);
|
|
2228
|
+
if (this.cellWidth = clientWidth / dimensions.width, this.cellHeight = this.fitTo() === "all" ? this.height() / dimensions.height : this.cellWidth, this.designMode()) {
|
|
2229
|
+
const cellLaneRatio = Math.min(this.width() / this.snappingColumns(), this.height() / this.snappingRows()), laneWidth = Math.floor(cellLaneRatio);
|
|
2230
|
+
this.cellWidth = laneWidth, this.cellHeight = this.cellWidth;
|
|
2231
|
+
}
|
|
2232
|
+
const context = this, divItems = element2.selectAll("#" + this.id() + " > .ddCell").data(this.content(), function(d) {
|
|
2233
|
+
return d.id();
|
|
2234
|
+
});
|
|
2235
|
+
this.divItems = divItems.enter().append("div").attr("class", "ddCell").each(function(d) {
|
|
2236
|
+
d.target(this), d.__grid_watch = d.monitor(function(key, newVal, oldVal) {
|
|
2237
|
+
context._renderCount && (key === "snapping" || key.indexOf("grid") === 0) && newVal !== oldVal && (context.gridList || (context.initGridList(), context.snapping() !== "none" && context.gridList.resizeGrid(context.snapping() === "horizontal" ? context.snappingRows() : context.snappingColumns()), context.items.forEach(context.gridItemToCell), context.updateGrid(d.id(), 100), context.killGridList()));
|
|
2238
|
+
}), select(this).append("div").attr("class", "resizeHandle").call(context._d3DragResize).append("div").attr("class", "resizeHandleDisplay");
|
|
2239
|
+
}).merge(divItems), this.divItems.each(function(d) {
|
|
2240
|
+
const element = select(this);
|
|
2241
|
+
context.designMode() ? element.call(context._d3Drag) : element.on("mousedown.drag", null).on("touchstart.drag", null);
|
|
2242
|
+
}), this.divItems.select(".resizeHandle").style("display", this.designMode() ? null : "none"), this.updateGrid(!0), divItems.exit().each(function(d) {
|
|
2243
|
+
d.target(null), d.__grid_watch && d.__grid_watch.remove();
|
|
2244
|
+
}).remove();
|
|
2245
|
+
const lanesBackground = element2.selectAll("#" + this.id() + " > .laneBackground").data(this.designMode() ? [""] : []);
|
|
2246
|
+
lanesBackground.enter().insert("div", ":first-child").attr("class", "laneBackground").style("left", "1px").style("top", "1px").on("click", function() {
|
|
2247
|
+
context.selectionBagClear();
|
|
2248
|
+
}).merge(lanesBackground).style("width", this.snappingColumns() * this.cellWidth + "px").style("height", this.snappingRows() * this.cellHeight + "px"), lanesBackground.exit().each(function() {
|
|
2249
|
+
context.selectionBagClear();
|
|
2250
|
+
}).remove();
|
|
2251
|
+
const lanes = element2.selectAll("#" + this.id() + " > .lane").data(this.designMode() ? [""] : []);
|
|
2252
|
+
lanes.enter().append("div").attr("class", "lane").style("left", "1px").style("top", "1px"), lanes.style("display", this.showLanes() ? null : "none").style("width", this.snappingColumns() * this.cellWidth + "px").style("height", this.snappingRows() * this.cellHeight + "px").style("background-image", "linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)").style("background-size", this.cellWidth + "px " + this.cellHeight + "px"), lanes.exit().remove();
|
|
2253
|
+
}
|
|
2254
|
+
exit(domNode, element) {
|
|
2255
|
+
this.content().forEach((w) => w.target(null)), super.exit(domNode, element);
|
|
2256
|
+
}
|
|
2257
|
+
_createSelectionObject(d) {
|
|
2258
|
+
return {
|
|
2259
|
+
_id: d._id,
|
|
2260
|
+
element: () => d._element,
|
|
2261
|
+
widget: d
|
|
2262
|
+
};
|
|
2263
|
+
}
|
|
2264
|
+
selection(_) {
|
|
2265
|
+
return arguments.length ? (this._selectionBag.set(_.map(function(row) {
|
|
2266
|
+
return this._createSelectionObject(row);
|
|
2267
|
+
}, this)), this) : this._selectionBag.get().map(function(d) {
|
|
2268
|
+
return d._id;
|
|
2269
|
+
});
|
|
2270
|
+
}
|
|
2271
|
+
selectionBagClear() {
|
|
2272
|
+
this._selectionBag.isEmpty() || (this._selectionBag.clear(), this.postSelectionChange());
|
|
2273
|
+
}
|
|
2274
|
+
selectionBagClick(d) {
|
|
2275
|
+
if (d !== null) {
|
|
2276
|
+
const selectionObj = this._createSelectionObject(d);
|
|
2277
|
+
if (d3Event().sourceEvent.ctrlKey)
|
|
2278
|
+
this._selectionBag.isSelected(selectionObj) ? (this._selectionBag.remove(selectionObj), this.postSelectionChange()) : (this._selectionBag.append(selectionObj), this.postSelectionChange());
|
|
2279
|
+
else {
|
|
2280
|
+
const selected = this._selectionBag.get();
|
|
2281
|
+
selected.length === 1 && selected[0]._id === selectionObj._id ? this.selectionBagClear() : this._selectionBag.set([selectionObj]), this.postSelectionChange();
|
|
2282
|
+
}
|
|
2283
|
+
}
|
|
2284
|
+
}
|
|
2285
|
+
postSelectionChange() {
|
|
2286
|
+
}
|
|
2287
|
+
applyLayout(layoutArr) {
|
|
2288
|
+
this.divItems.each((d, i) => {
|
|
2289
|
+
if (layoutArr[i]) {
|
|
2290
|
+
const [x, y, w, h] = layoutArr[i];
|
|
2291
|
+
d.gridCol(x).gridRow(y).gridColSpan(w).gridRowSpan(h);
|
|
2292
|
+
}
|
|
2293
|
+
}), this.updateGrid(!0);
|
|
2294
|
+
}
|
|
2295
|
+
vizActivation(elem) {
|
|
2296
|
+
}
|
|
2297
|
+
}
|
|
2298
|
+
Grid.prototype._class += " layout_Grid";
|
|
2299
|
+
Grid.prototype.publish("designMode", !1, "boolean", "Design Mode", null, { tags: ["Basic"] });
|
|
2300
|
+
Grid.prototype.publish("showLanes", !0, "boolean", "Show snapping lanes when in design mode", null, { tags: ["Basic"], disable: (w) => !w.designMode() });
|
|
2301
|
+
Grid.prototype.publish("fitTo", "all", "set", "Sizing Strategy", ["all", "width"], { tags: ["Basic"] });
|
|
2302
|
+
Grid.prototype.publish("snapping", "vertical", "set", "Snapping Strategy", ["vertical", "horizontal", "none"]);
|
|
2303
|
+
Grid.prototype.publish("snappingColumns", 12, "number", "Snapping Columns");
|
|
2304
|
+
Grid.prototype.publish("snappingRows", 16, "number", "Snapping Rows");
|
|
2305
|
+
Grid.prototype.publish("gutter", 6, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
|
|
2306
|
+
Grid.prototype.publish("surfaceShadow", !0, "boolean", "3D Shadow");
|
|
2307
|
+
Grid.prototype.publish("surfacePadding", null, "string", "Cell Padding (px)", null, { tags: ["Intermediate"] });
|
|
2308
|
+
Grid.prototype.publish("surfaceBorderWidth", 1, "number", "Width (px) of Cell Border", null, { tags: ["Intermediate"] });
|
|
2309
|
+
Grid.prototype.publish("surfaceBackgroundColor", null, "html-color", "Surface Background Color", null, { tags: ["Advanced"] });
|
|
2310
|
+
Grid.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Basic"], render: !1 });
|
|
2311
|
+
class HorizontalList extends FlexGrid {
|
|
2312
|
+
constructor() {
|
|
2313
|
+
super(), this.orientation_default("horizontal"), this.flexWrap_default("nowrap");
|
|
2314
|
+
}
|
|
2315
|
+
}
|
|
2316
|
+
HorizontalList.prototype._class += " layout_HorizontalList";
|
|
2317
|
+
class Layered extends HTMLWidget {
|
|
2318
|
+
constructor() {
|
|
2319
|
+
super();
|
|
2320
|
+
__publicField(this, "_contentContainer");
|
|
2321
|
+
__publicField(this, "_widgetPlacements");
|
|
2322
|
+
__publicField(this, "_widgetRatios");
|
|
2323
|
+
this._tag = "div", this._widgetPlacements = [], this._widgetRatios = [];
|
|
2324
|
+
}
|
|
2325
|
+
addLayer(widget, placement = "default", widthRatio = 1, heightRatio = 1) {
|
|
2326
|
+
const widgets = this.widgets();
|
|
2327
|
+
return widgets.push(widget || new Text().text("No widget defined for layer.")), this.widgets(widgets), this._widgetPlacements.push(placement), this._widgetRatios.push([widthRatio, heightRatio]), this;
|
|
2328
|
+
}
|
|
2329
|
+
enter(domNode, element) {
|
|
2330
|
+
super.enter(domNode, element), this._contentContainer = element.append("div").attr("class", "container");
|
|
2331
|
+
}
|
|
2332
|
+
update(domNode, element) {
|
|
2333
|
+
super.update(domNode, element);
|
|
2334
|
+
const context = this;
|
|
2335
|
+
element.style("padding", this.surfacePadding() + "px");
|
|
2336
|
+
const content = this._contentContainer.selectAll(".content.id" + this.id()).data(this.widgets(), function(d) {
|
|
2337
|
+
return d.id();
|
|
2338
|
+
});
|
|
2339
|
+
content.enter().append("div").attr("class", "content id" + this.id()).each(function(widget, idx) {
|
|
2340
|
+
widget.target(this);
|
|
2341
|
+
}).merge(content).each(function(widget, idx) {
|
|
2342
|
+
const clientSize = {
|
|
2343
|
+
width: context.clientWidth(),
|
|
2344
|
+
height: context.clientHeight()
|
|
2345
|
+
}, widgetSize = context.widgetSize(idx, clientSize), widgetPosition = context.widgetPosition(idx, clientSize, widgetSize);
|
|
2346
|
+
this.style.top = widgetPosition.y + "px", this.style.left = widgetPosition.x + "px", widget.resize(widgetSize).render();
|
|
2347
|
+
}), content.exit().each(function(widget, idx) {
|
|
2348
|
+
widget.target(null);
|
|
2349
|
+
}).remove(), content.order();
|
|
2350
|
+
}
|
|
2351
|
+
widgetSize(idx, clientSize) {
|
|
2352
|
+
return this._widgetPlacements[idx] === "default" ? {
|
|
2353
|
+
width: clientSize.width * this._widgetRatios[idx][0],
|
|
2354
|
+
height: clientSize.height * this._widgetRatios[idx][1]
|
|
2355
|
+
} : {
|
|
2356
|
+
width: clientSize.width * this._widgetRatios[idx][0],
|
|
2357
|
+
height: clientSize.height * this._widgetRatios[idx][1]
|
|
2358
|
+
};
|
|
2359
|
+
}
|
|
2360
|
+
widgetPosition(idx, clientSize, widgetSize) {
|
|
2361
|
+
switch (this._widgetPlacements[idx]) {
|
|
2362
|
+
default:
|
|
2363
|
+
return {
|
|
2364
|
+
x: 0,
|
|
2365
|
+
y: 0
|
|
2366
|
+
};
|
|
2367
|
+
case "top":
|
|
2368
|
+
return {
|
|
2369
|
+
x: clientSize.width / 2 - widgetSize.width / 2,
|
|
2370
|
+
y: 0
|
|
2371
|
+
};
|
|
2372
|
+
case "bottom":
|
|
2373
|
+
return {
|
|
2374
|
+
x: clientSize.width / 2 - widgetSize.width / 2,
|
|
2375
|
+
y: clientSize.height - widgetSize.height
|
|
2376
|
+
};
|
|
2377
|
+
case "left":
|
|
2378
|
+
return {
|
|
2379
|
+
x: 0,
|
|
2380
|
+
y: clientSize.height / 2 - widgetSize.height / 2
|
|
2381
|
+
};
|
|
2382
|
+
case "right":
|
|
2383
|
+
return {
|
|
2384
|
+
x: clientSize.width - widgetSize.width,
|
|
2385
|
+
y: clientSize.height / 2 - widgetSize.height / 2
|
|
2386
|
+
};
|
|
2387
|
+
case "center":
|
|
2388
|
+
return {
|
|
2389
|
+
x: clientSize.width / 2 - widgetSize.width / 2,
|
|
2390
|
+
y: clientSize.height / 2 - widgetSize.height / 2
|
|
2391
|
+
};
|
|
2392
|
+
}
|
|
2393
|
+
}
|
|
2394
|
+
}
|
|
2395
|
+
Layered.prototype._class += " layout_Layered";
|
|
2396
|
+
Layered.prototype.publish("surfacePadding", 0, "number", "Padding");
|
|
2397
|
+
Layered.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });
|
|
2398
|
+
class Popup extends HTMLWidget {
|
|
2399
|
+
constructor() {
|
|
2400
|
+
super();
|
|
2401
|
+
__publicField(this, "_surfaceButtons");
|
|
2402
|
+
__publicField(this, "_originalPosition");
|
|
2403
|
+
this._tag = "div", this._surfaceButtons = [];
|
|
2404
|
+
}
|
|
2405
|
+
updateState(visible) {
|
|
2406
|
+
visible = visible || !this.popupState(), this.popupState(visible).render();
|
|
2407
|
+
}
|
|
2408
|
+
enter(domNode, element) {
|
|
2409
|
+
super.enter(domNode, element), this.widget().target(domNode), this._originalPosition = this.position();
|
|
2410
|
+
}
|
|
2411
|
+
update(domNode, element) {
|
|
2412
|
+
super.update(domNode, element), element.style("visibility", this.popupState() ? null : "hidden").style("opacity", this.popupState() ? null : 0).style("width", this.shrinkWrap() ? this.widget().width() + "px" : this._size.width + "px").style("height", this.shrinkWrap() ? this.widget().height() + "px" : this._size.height + "px"), this.widget().size().height === 0 && this.widget().resize(this.size());
|
|
2413
|
+
}
|
|
2414
|
+
postUpdate(domNode, element) {
|
|
2415
|
+
let left, top;
|
|
2416
|
+
switch (this.centerPopup()) {
|
|
2417
|
+
case "container":
|
|
2418
|
+
this._placeholderElement && (left = parseInt(this._placeholderElement.style("width")) / 2 - this.widget().width() / 2, top = parseInt(this._placeholderElement.style("height")) / 2 - this.widget().height() / 2), this.position("absolute");
|
|
2419
|
+
break;
|
|
2420
|
+
case "window":
|
|
2421
|
+
left = window.innerWidth / 2 - this.widget().width() / 2, top = window.innerHeight / 2 - this.widget().height() / 2, this.position("fixed");
|
|
2422
|
+
break;
|
|
2423
|
+
default:
|
|
2424
|
+
left = 0, top = 0, this.position(this._originalPosition);
|
|
2425
|
+
break;
|
|
2426
|
+
}
|
|
2427
|
+
this.pos({ x: left, y: top }), super.postUpdate(domNode, element), element.style("position", this.position()).style("left", this.left() + "px").style("right", this.right() + "px").style("top", this.top() + "px").style("bottom", this.bottom() + "px");
|
|
2428
|
+
}
|
|
2429
|
+
exit(domNode, element) {
|
|
2430
|
+
this.widget() && this.widget().target(null), super.exit(domNode, element);
|
|
2431
|
+
}
|
|
2432
|
+
click(obj) {
|
|
2433
|
+
}
|
|
2434
|
+
}
|
|
2435
|
+
Popup.prototype._class += " layout_Popup";
|
|
2436
|
+
Popup.prototype.publish("popupState", !1, "boolean", "State of the popup, visible (true) or hidden (false)", null, {});
|
|
2437
|
+
Popup.prototype.publish("shrinkWrap", !1, "boolean", "The popup parent container either shrinks to the size of its contents (true) or expands to fit thge popup's parentDiv (false)", null, {});
|
|
2438
|
+
Popup.prototype.publish("centerPopup", "none", "set", "Center the widget in its container element (target) or in the window", ["none", "container", "window"], {});
|
|
2439
|
+
Popup.prototype.publish("top", null, "number", "Top position property of popup", null, {});
|
|
2440
|
+
Popup.prototype.publish("bottom", null, "number", "Bottom position property of popup", null, {});
|
|
2441
|
+
Popup.prototype.publish("left", null, "number", "Left position property of popup", null, {});
|
|
2442
|
+
Popup.prototype.publish("right", null, "number", "Right position property of popup", null, {});
|
|
2443
|
+
Popup.prototype.publish("position", "relative", "set", "Value of the 'position' property", ["absolute", "relative", "fixed", "static", "initial", "inherit"], { tags: ["Private"] });
|
|
2444
|
+
Popup.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
|
|
2445
|
+
class Tabbed extends HTMLWidget {
|
|
2446
|
+
constructor() {
|
|
2447
|
+
super();
|
|
2448
|
+
__publicField(this, "_tabContainer");
|
|
2449
|
+
__publicField(this, "_contentContainer");
|
|
2450
|
+
this._tag = "div";
|
|
2451
|
+
}
|
|
2452
|
+
clearTabs() {
|
|
2453
|
+
return this.labels([]), this.widgets([]), this;
|
|
2454
|
+
}
|
|
2455
|
+
addTab(widget, label, isActive, callback) {
|
|
2456
|
+
const widgetSize = widget.size();
|
|
2457
|
+
widgetSize.width === 0 && widgetSize.height === 0 && widget.size({ width: "100%", height: "100%" });
|
|
2458
|
+
const labels = this.labels(), widgets = this.widgets();
|
|
2459
|
+
isActive && this.activeTabIdx(this.widgets().length), labels.push(label);
|
|
2460
|
+
const surface = new Surface().widget(widget || new Text().text("No widget defined for tab"));
|
|
2461
|
+
return widgets.push(surface), this.labels(labels), this.widgets(widgets), callback && callback(surface), this;
|
|
2462
|
+
}
|
|
2463
|
+
widgetSize(widgetDiv) {
|
|
2464
|
+
const width = this.clientWidth();
|
|
2465
|
+
let height = this.clientHeight();
|
|
2466
|
+
const tcBox = this._tabContainer.node().getBoundingClientRect();
|
|
2467
|
+
return typeof tcBox.height < "u" && (height -= tcBox.height), { width, height };
|
|
2468
|
+
}
|
|
2469
|
+
enter(domNode, element) {
|
|
2470
|
+
super.enter(domNode, element), this._tabContainer = element.append("div"), this._contentContainer = element.append("div");
|
|
2471
|
+
}
|
|
2472
|
+
update(domNode, element) {
|
|
2473
|
+
super.update(domNode, element);
|
|
2474
|
+
const context = this;
|
|
2475
|
+
element.style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null);
|
|
2476
|
+
const tabs = this._tabContainer.selectAll(".tab-button.id" + this.id()).data(this.showTabs() ? this.labels() : [], function(d) {
|
|
2477
|
+
return d;
|
|
2478
|
+
});
|
|
2479
|
+
tabs.enter().append("span").attr("class", "tab-button id" + this.id()).style("cursor", "pointer").on("click", function(d, idx) {
|
|
2480
|
+
context.click(context.widgets()[idx].widget(), d, idx), context.activeTabIdx(idx).render();
|
|
2481
|
+
}).merge(tabs).classed("active", function(d, idx) {
|
|
2482
|
+
return context.activeTabIdx() === idx;
|
|
2483
|
+
}).text(function(d) {
|
|
2484
|
+
return d;
|
|
2485
|
+
}), tabs.exit().remove();
|
|
2486
|
+
const content = this._contentContainer.selectAll(".tab-content.id" + this.id()).data(this.widgets(), function(d) {
|
|
2487
|
+
return d.id();
|
|
2488
|
+
});
|
|
2489
|
+
switch (content.enter().append("div").attr("class", "tab-content id" + this.id()).each(function(widget, idx) {
|
|
2490
|
+
widget.target(this);
|
|
2491
|
+
}).merge(content).classed("active", function(d, idx) {
|
|
2492
|
+
return context.activeTabIdx() === idx;
|
|
2493
|
+
}).style("display", function(d, idx) {
|
|
2494
|
+
return context.activeTabIdx() === idx ? "block" : "none";
|
|
2495
|
+
}).each(function(surface, idx) {
|
|
2496
|
+
if (surface.visible(context.activeTabIdx() === idx), context.activeTabIdx() === idx) {
|
|
2497
|
+
const wSize = context.widgetSize(select(this));
|
|
2498
|
+
surface.surfaceBorderWidth(context.showTabs() ? null : 0).surfacePadding(context.showTabs() ? null : 0).resize(wSize);
|
|
2499
|
+
}
|
|
2500
|
+
}), content.exit().each(function(widget, idx) {
|
|
2501
|
+
widget.target(null);
|
|
2502
|
+
}).remove(), this.tabLocation()) {
|
|
2503
|
+
case "bottom":
|
|
2504
|
+
this._tabContainer.attr("class", "on_bottom").style("top", this._contentContainer.node().offsetHeight + this.surfacePadding() + "px").style("position", "absolute"), this._contentContainer.style("top", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null).style("position", "absolute");
|
|
2505
|
+
break;
|
|
2506
|
+
default:
|
|
2507
|
+
this._tabContainer.attr("class", "on_top").style("top", null).style("position", "relative"), this._contentContainer.style("top", this._tabContainer.node().offsetHeight + this.surfacePadding() + "px").style("position", "absolute");
|
|
2508
|
+
break;
|
|
2509
|
+
}
|
|
2510
|
+
}
|
|
2511
|
+
click(widget, column, idx) {
|
|
2512
|
+
}
|
|
2513
|
+
}
|
|
2514
|
+
Tabbed.prototype._class += " layout_Tabbed";
|
|
2515
|
+
Tabbed.prototype.publish("showTabs", !0, "boolean", "Show Tabs", null, {});
|
|
2516
|
+
Tabbed.prototype.publish("surfacePadding", 4, "number", "Padding");
|
|
2517
|
+
Tabbed.prototype.publish("activeTabIdx", 0, "number", "Index of active tab", null, {});
|
|
2518
|
+
Tabbed.prototype.publish("labels", [], "array", "Array of tab labels sharing an index with ", null, { tags: ["Private"] });
|
|
2519
|
+
Tabbed.prototype.publish("tabLocation", "top", "set", "Position the tabs at the bottom of the widget", ["top", "bottom"], { tags: ["Private"] });
|
|
2520
|
+
Tabbed.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });
|
|
2521
|
+
class Toolbar extends HTMLWidget {
|
|
2522
|
+
constructor() {
|
|
2523
|
+
super(), this._tag = "div";
|
|
2524
|
+
}
|
|
2525
|
+
enter(domNode, element) {
|
|
2526
|
+
super.enter(domNode, element);
|
|
2527
|
+
}
|
|
2528
|
+
update(domNode, element) {
|
|
2529
|
+
super.update(domNode, element);
|
|
2530
|
+
const context = this;
|
|
2531
|
+
element.attr("title", context.title()).style("background-color", this.backgroundColor());
|
|
2532
|
+
const title = element.selectAll("div.toolbar-title").data(this.title() ? [this.title()] : []);
|
|
2533
|
+
title.enter().append("div").classed("toolbar-title", !0).append("span"), title.selectAll("div.toolbar-title > span").style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null).style("color", this.fontColor_exists() ? this.fontColor() : null).style("font-family", this.fontFamily_exists() ? this.fontFamily() : null).style("font-weight", this.fontBold_exists() ? this.fontBold() ? "bold" : "normal" : null).style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null).text(context.title()), title.exit().remove();
|
|
2534
|
+
const childWidgets = element.selectAll("div.toolbar-child").data(this.widgets() !== null ? this.widgets() : [], function(d) {
|
|
2535
|
+
return d.id();
|
|
2536
|
+
});
|
|
2537
|
+
childWidgets.enter().insert("div", "div.toolbar-title").each(function(d, i) {
|
|
2538
|
+
const widgetClass = context.widgetClasses()[i] ? context.widgetClasses()[i] + " toolbar-child" : "toolbar-child";
|
|
2539
|
+
select(this).classed(widgetClass, !0), d.target(this);
|
|
2540
|
+
}), childWidgets.exit().each(function(d) {
|
|
2541
|
+
d.target(null);
|
|
2542
|
+
}).remove(), childWidgets.order();
|
|
2543
|
+
}
|
|
2544
|
+
render(callback) {
|
|
2545
|
+
const context = this;
|
|
2546
|
+
return super.render(function(w) {
|
|
2547
|
+
const toolbarBBox = context.element().node().getBoundingClientRect();
|
|
2548
|
+
let minX = toolbarBBox.left + toolbarBBox.width;
|
|
2549
|
+
context.element().selectAll("div.toolbar-child").each(function(d, i) {
|
|
2550
|
+
const childBBox = this.getBoundingClientRect();
|
|
2551
|
+
minX > childBBox.left && (minX = childBBox.left);
|
|
2552
|
+
}), context.element().select(".toolbar-title").style("width", minX - toolbarBBox.left - 4 + "px"), callback && callback(w);
|
|
2553
|
+
});
|
|
2554
|
+
}
|
|
2555
|
+
exit(domNode, element) {
|
|
2556
|
+
this.widgets().forEach(function(w) {
|
|
2557
|
+
w.target(null);
|
|
2558
|
+
}), super.exit(domNode, element);
|
|
2559
|
+
}
|
|
2560
|
+
}
|
|
2561
|
+
Toolbar.prototype._class += " layout_Toolbar";
|
|
2562
|
+
Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
|
|
2563
|
+
Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: !0 });
|
|
2564
|
+
Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: !0 });
|
|
2565
|
+
Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: !0 });
|
|
2566
|
+
Toolbar.prototype.publish("fontBold", !0, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: !0 });
|
|
2567
|
+
Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: !0 });
|
|
2568
|
+
Toolbar.prototype.publish("responsive", !0, "boolean", "Adapts to pixel width", null, { tags: ["Basic"] });
|
|
2569
|
+
Toolbar.prototype.publish("widgets", [], "widgetArray", "Child widgets of the toolbar", null, { tags: ["Basic"] });
|
|
2570
|
+
Toolbar.prototype.publish("widgetClasses", [], "array", "Array of Html Element classes to be assigned to the child widgets (shares index with widgets param)", null, { tags: ["Basic"] });
|
|
2571
|
+
class VerticalList extends FlexGrid {
|
|
2572
|
+
constructor() {
|
|
2573
|
+
super(), this.orientation_default("vertical"), this.flexWrap_default("nowrap");
|
|
2574
|
+
}
|
|
2575
|
+
}
|
|
2576
|
+
VerticalList.prototype._class += " layout_VerticalList";
|
|
2577
|
+
export {
|
|
2578
|
+
AbsoluteSurface,
|
|
2579
|
+
Accordion,
|
|
2580
|
+
BUILD_VERSION,
|
|
2581
|
+
Border,
|
|
2582
|
+
Border2,
|
|
2583
|
+
Carousel,
|
|
2584
|
+
Cell,
|
|
2585
|
+
ChartPanel,
|
|
2586
|
+
FlexGrid,
|
|
2587
|
+
Grid,
|
|
2588
|
+
HorizontalList,
|
|
2589
|
+
Layered,
|
|
2590
|
+
Legend,
|
|
2591
|
+
Modal,
|
|
2592
|
+
PKG_NAME,
|
|
2593
|
+
PKG_VERSION,
|
|
2594
|
+
Popup,
|
|
2595
|
+
Surface,
|
|
2596
|
+
Tabbed,
|
|
2597
|
+
Toolbar,
|
|
2598
|
+
VerticalList,
|
|
2599
|
+
WidgetDiv
|
|
2600
|
+
};
|
|
582
2601
|
//# sourceMappingURL=index.js.map
|