@hpcc-js/html 3.3.0 → 3.3.2

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 CHANGED
@@ -1,1061 +1,5 @@
1
- import { HTMLWidget, format, select } from "@hpcc-js/common";
2
- import { scopedLogger } from "@hpcc-js/util";
3
- import { React } from "@hpcc-js/react";
4
-
5
- //#region src/__package__.ts
6
- const PKG_NAME = "@hpcc-js/html";
7
- const PKG_VERSION = "3.3.0";
8
- const BUILD_VERSION = "3.15.0";
9
-
10
- //#endregion
11
- //#region src/HTMLTooltip.ts
12
- var HTMLTooltip = class extends HTMLWidget {
13
- _triggerElement;
14
- _contentNode;
15
- _prevContentNode;
16
- _tooltipElement;
17
- _arrowElement;
18
- _tooltipHTMLCallback = (data) => "<b>_tooltipHTMLCallback is undefined</b>";
19
- _logger = scopedLogger("html/HTMLTooltip");
20
- constructor() {
21
- super();
22
- this.visible(false);
23
- }
24
- tooltipHTML(_) {
25
- this._tooltipHTMLCallback = _;
26
- return this;
27
- }
28
- tooltipContent(_) {
29
- if (!arguments.length) return this._contentNode;
30
- this._contentNode = _;
31
- return this;
32
- }
33
- triggerElement(_) {
34
- this._triggerElement = _;
35
- return this;
36
- }
37
- enter(domNode, element) {
38
- super.enter(domNode, element);
39
- const body = select("body");
40
- this._tooltipElement = body.append("div").attr("class", "tooltip-div").style("z-index", "2147483638").style("position", "fixed");
41
- this._arrowElement = body.append("div").attr("class", "arrow-div").style("z-index", "2147483638").style("position", "fixed");
42
- }
43
- update(domNode, element) {
44
- super.update(domNode, element);
45
- if (this._contentNode !== this._prevContentNode) {
46
- const node = this._tooltipElement.node();
47
- [...node.querySelectorAll("*")].map((n$1) => n$1.__data__).filter((n$1) => n$1).forEach((w$1) => {
48
- if (typeof w$1.target === "function") w$1.target(null);
49
- if (typeof w$1.exit === "function") w$1.exit();
50
- });
51
- node.innerHTML = "";
52
- node.appendChild(this._contentNode);
53
- this._prevContentNode = this._contentNode;
54
- }
55
- if (this._contentNode) this.onShowContent(this._contentNode);
56
- else this._tooltipElement.html(() => {
57
- return this._tooltipHTMLCallback(this.data());
58
- });
59
- if (this.fitContent()) {
60
- this._tooltipElement.style("width", "auto").style("height", "auto").style("padding", "0px").style("box-sizing", "content-box");
61
- const rect = this._tooltipElement.node().getBoundingClientRect();
62
- this.tooltipWidth_default(rect.width);
63
- this.tooltipHeight_default(rect.height);
64
- }
65
- this._closing = false;
66
- this._tooltipElement.style("background-color", this.tooltipColor()).style("color", this.fontColor()).style("width", this.tooltipWidth() + "px").style("height", this.tooltipHeight() + "px").style("opacity", 1).style("padding", this.padding() + "px").style("pointer-events", this.enablePointerEvents() ? "all" : "none").style("box-sizing", "content-box");
67
- this._arrowElement.style("opacity", 1).style("pointer-events", "none");
68
- this.updateTooltipPosition();
69
- }
70
- onShowContent(node) {}
71
- updateTooltipPosition() {
72
- const bbox = this.calcReferenceBBox();
73
- const direction = this.calcTooltipDirection(bbox);
74
- const box = bbox[direction];
75
- this._tooltipElement.style("top", box.y + "px").style("left", box.x + "px");
76
- this.setArrowPosition(box, direction);
77
- return box;
78
- }
79
- calcTooltipDirection(bbox) {
80
- const directions = Object.keys(bbox);
81
- const defaultDirection = this.direction();
82
- directions.sort((a$1, b) => a$1 === defaultDirection ? -1 : 1);
83
- const windowRect = {
84
- top: 0,
85
- left: 0,
86
- width: window.innerWidth,
87
- height: window.innerHeight
88
- };
89
- for (let i$2 = 0; i$2 < directions.length; i$2++) {
90
- const tooltipRect = {
91
- top: bbox[directions[i$2]].y,
92
- left: bbox[directions[i$2]].x,
93
- width: this.tooltipWidth(),
94
- height: this.tooltipHeight()
95
- };
96
- if (this.rectFits(tooltipRect, windowRect)) return directions[i$2];
97
- }
98
- this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${defaultDirection}'`);
99
- this._logger.debug(windowRect);
100
- this._logger.debug({
101
- top: bbox[defaultDirection].y,
102
- left: bbox[defaultDirection].x,
103
- width: this.tooltipWidth(),
104
- height: this.tooltipHeight()
105
- });
106
- return defaultDirection;
107
- }
108
- rectFits(innerRect, outerRect) {
109
- return innerRect.top >= outerRect.top && innerRect.left >= outerRect.left && innerRect.width + innerRect.left <= outerRect.width + outerRect.left && innerRect.height + innerRect.top <= outerRect.height + outerRect.top;
110
- }
111
- setArrowPosition(point, direction) {
112
- let top;
113
- let left;
114
- let visibleBorderStyle = "border-top-color";
115
- this._arrowElement.style("border", `${this.arrowHeight()}px solid ${this.tooltipColor()}`).style("border-top-color", "transparent").style("border-right-color", "transparent").style("border-bottom-color", "transparent").style("border-left-color", "transparent");
116
- switch (direction) {
117
- case "n":
118
- top = point.y + this.tooltipHeight() + this.padding() * 2;
119
- left = point.x + this.tooltipWidth() / 2 - this.arrowWidth() / 2 + this.padding();
120
- visibleBorderStyle = "border-top-color";
121
- this._arrowElement.style("border-top-width", `${this.arrowHeight()}px`).style("border-bottom-width", "0px").style("border-left-width", `${this.arrowWidth() / 2}px`).style("border-right-width", `${this.arrowWidth() / 2}px`);
122
- break;
123
- case "s":
124
- top = point.y - this.arrowHeight();
125
- left = point.x + this.padding() + this.tooltipWidth() / 2 - this.arrowWidth() / 2;
126
- visibleBorderStyle = "border-bottom-color";
127
- this._arrowElement.style("border-top-width", "0px").style("border-bottom-width", `${this.arrowHeight()}px`).style("border-left-width", `${this.arrowWidth() / 2}px`).style("border-right-width", `${this.arrowWidth() / 2}px`);
128
- break;
129
- case "e":
130
- top = point.y + this.tooltipHeight() / 2 + this.padding() - this.arrowWidth() / 2;
131
- left = point.x - this.arrowHeight();
132
- visibleBorderStyle = "border-right-color";
133
- this._arrowElement.style("border-top-width", `${this.arrowWidth() / 2}px`).style("border-bottom-width", `${this.arrowWidth() / 2}px`).style("border-left-width", "0px").style("border-right-width", `${this.arrowHeight()}px`);
134
- break;
135
- case "w":
136
- top = point.y + this.tooltipHeight() / 2 - this.arrowWidth() / 2 + this.padding();
137
- left = point.x + this.tooltipWidth() + this.padding() * 2;
138
- visibleBorderStyle = "border-left-color";
139
- this._arrowElement.style("border-top-width", `${this.arrowWidth() / 2}px`).style("border-bottom-width", `${this.arrowWidth() / 2}px`).style("border-left-width", `${this.arrowHeight()}px`).style("border-right-width", "0px");
140
- break;
141
- }
142
- if (typeof top !== "undefined" && typeof left !== "undefined") this._arrowElement.style("top", top + "px").style("left", left + "px").style(visibleBorderStyle, this.tooltipColor()).style("opacity", 1);
143
- else this._arrowElement.style("opacity", 0);
144
- return point;
145
- }
146
- getReferenceNode() {
147
- if (!this._triggerElement) return this.element().node().parentNode.parentNode;
148
- return this._triggerElement.node();
149
- }
150
- _cursorLoc;
151
- calcReferenceBBox() {
152
- let { top, left, width, height } = this.getReferenceNode().getBoundingClientRect();
153
- const wholeW = this.tooltipWidth();
154
- const wholeH = this.tooltipHeight();
155
- const halfW = wholeW / 2;
156
- const halfH = wholeH / 2;
157
- const arrowH = this.arrowHeight();
158
- const p$1 = this.padding();
159
- const p2 = p$1 * 2;
160
- if (this.followCursor() && this._cursorLoc) {
161
- left = this._cursorLoc[0];
162
- top = this._cursorLoc[1];
163
- width = 1;
164
- height = 1;
165
- }
166
- return {
167
- n: {
168
- x: left + width / 2 - halfW - p$1,
169
- y: top - wholeH - arrowH - p2
170
- },
171
- e: {
172
- x: left + width + arrowH,
173
- y: top + height / 2 - halfH - p$1
174
- },
175
- s: {
176
- x: left + width / 2 - halfW - p$1,
177
- y: top + height + arrowH
178
- },
179
- w: {
180
- x: left - wholeW - arrowH - p2,
181
- y: top + height / 2 - halfH - p$1
182
- },
183
- nw: {
184
- x: left - wholeW - p2,
185
- y: top - wholeH - p2
186
- },
187
- ne: {
188
- x: left + width,
189
- y: top - wholeH - p2
190
- },
191
- se: {
192
- x: left + width,
193
- y: top + height
194
- },
195
- sw: {
196
- x: left - wholeW - p2,
197
- y: top + height
198
- }
199
- };
200
- }
201
- _closing = false;
202
- mouseout() {
203
- this._closing = true;
204
- this._tooltipElement.on("mouseover", () => {
205
- this._closing = false;
206
- });
207
- this._tooltipElement.on("mouseout", () => {
208
- this.mouseout();
209
- });
210
- setTimeout(() => {
211
- if (this._closing) this.visible(false);
212
- }, this.closeDelay());
213
- }
214
- visible(_) {
215
- if (!arguments.length) return super.visible();
216
- if (this._arrowElement) {
217
- this._arrowElement.style("visibility", _ ? "visible" : "hidden");
218
- this._tooltipElement.style("visibility", _ ? "visible" : "hidden");
219
- }
220
- super.visible(_);
221
- return this;
222
- }
223
- exit(domNode, element) {
224
- if (this._arrowElement) {
225
- this._arrowElement.remove();
226
- this._tooltipElement.remove();
227
- }
228
- super.exit(domNode, element);
229
- }
230
- };
231
- HTMLTooltip.prototype._class += " html_HTMLTooltip";
232
- HTMLTooltip.prototype.publish("fitContent", false, "boolean", "If true, tooltip will grow to fit its html content");
233
- HTMLTooltip.prototype.publish("followCursor", false, "boolean", "If true, tooltip will display relative to cursor location");
234
- HTMLTooltip.prototype.publish("closeDelay", 400, "number", "Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");
235
- HTMLTooltip.prototype.publish("direction", "n", "set", "Direction in which to display the tooltip", [
236
- "n",
237
- "s",
238
- "e",
239
- "w",
240
- "ne",
241
- "nw",
242
- "se",
243
- "sw"
244
- ]);
245
- HTMLTooltip.prototype.publish("padding", 8, "number", "Padding (pixels)");
246
- HTMLTooltip.prototype.publish("arrowWidth", 16, "number", "Width (or height depending on direction) of the tooltip arrow (pixels)");
247
- HTMLTooltip.prototype.publish("arrowHeight", 8, "number", "Height (or width depending on direction) of the tooltip arrow (pixels)");
248
- HTMLTooltip.prototype.publish("fontColor", "#FFF", "html-color", "The default font color for text in the tooltip");
249
- HTMLTooltip.prototype.publish("tooltipColor", "#000000EE", "html-color", "Background color of the tooltip");
250
- HTMLTooltip.prototype.publish("tooltipWidth", 200, "number", "Width of the tooltip (not including arrow) (pixels)");
251
- HTMLTooltip.prototype.publish("tooltipHeight", 200, "number", "Height of the tooltip (not including arrow) (pixels)");
252
- HTMLTooltip.prototype.publish("enablePointerEvents", false, "boolean", "If true, the 'pointer-events: all' style will be used");
253
-
254
- //#endregion
255
- //#region src/SimpleTable.ts
256
- var SimpleTable = class extends HTMLWidget {
257
- _table;
258
- _tbody;
259
- _thead;
260
- _theadRow;
261
- constructor() {
262
- super();
263
- }
264
- transformData() {
265
- return this.data();
266
- }
267
- enter(domNode, element) {
268
- super.enter(domNode, element);
269
- this._table = element.append("table");
270
- this._thead = this._table.append("thead");
271
- this._theadRow = this._thead.append("tr");
272
- this._tbody = this._table.append("tbody");
273
- }
274
- update(domNode, element) {
275
- super.update(domNode, element);
276
- this._table.style("width", this.autoWidth() ? "auto" : "100%");
277
- const theadTrSelection = this._theadRow.selectAll("th").data(this.columns());
278
- theadTrSelection.enter().append("th").attr("class", (n$1, i$2) => `th-${i$2}`).merge(theadTrSelection).text((_d) => _d.toString());
279
- theadTrSelection.exit().remove();
280
- const trSelection = this._tbody.selectAll("tr").data(this.transformData());
281
- trSelection.enter().append("tr").merge(trSelection).each(function(d$1) {
282
- const tdSelection = select(this).selectAll("td").data(d$1);
283
- tdSelection.enter().append("td").attr("class", (n$1, i$2) => `col-${i$2}`).merge(tdSelection).text((_d) => _d.toString());
284
- tdSelection.exit().remove();
285
- });
286
- trSelection.exit().remove();
287
- }
288
- };
289
- SimpleTable.prototype._class += " html_SimpleTable";
290
- SimpleTable.prototype.publish("autoWidth", false, "boolean", "If true, table width will be set to 'auto'. If false, the width is set to '100%'");
291
-
292
- //#endregion
293
- //#region src/StyledTable.ts
294
- var StyledTable = class extends SimpleTable {
295
- constructor() {
296
- super();
297
- }
298
- applyStyleObject(selection, styleObject) {
299
- Object.keys(styleObject).forEach((styleName) => {
300
- selection.style(styleName, styleObject[styleName]);
301
- });
302
- }
303
- update(domNode, element) {
304
- super.update(domNode, element);
305
- element.selectAll("tr,th,td").attr("style", "").style("font-family", this.fontFamily()).style("color", this.fontColor());
306
- this.theadColumnStyles().forEach((styleObj, i$2) => {
307
- this.applyStyleObject(element.select(`.th-${i$2}`), styleObj);
308
- });
309
- this.tbodyColumnStyles().forEach((styleObj, i$2) => {
310
- this.applyStyleObject(element.selectAll(`.col-${i$2}`), styleObj);
311
- });
312
- const evenRowStylesExist = Object.keys(this.evenRowStyles()).length > 0;
313
- const lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0;
314
- const tbodyRows = element.selectAll("tbody > tr");
315
- if (evenRowStylesExist) {
316
- const tbodyEvenRows = tbodyRows.select(function(d$1, i$2) {
317
- return i$2 % 2 ? this : null;
318
- });
319
- this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
320
- }
321
- if (lastRowStylesExist) {
322
- const tbodyLastRow = tbodyRows.select(function(d$1, i$2, arr) {
323
- return i$2 === arr.length - 1 ? this : null;
324
- });
325
- this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
326
- }
327
- }
328
- };
329
- StyledTable.prototype._class += " html_StyledTable";
330
- StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");
331
- StyledTable.prototype.publish("fontColor", "#333", "string", "Base font color used within the table");
332
- StyledTable.prototype.publish("theadColumnStyles", [], "array", "Array of objects containing styles for the thead columns (ex: [{\"color\":\"red\"},{\"color\":\"blue\"}])");
333
- StyledTable.prototype.publish("tbodyColumnStyles", [], "array", "Array of objects containing styles for the tbody columns (ex: [{\"color\":\"red\"},{\"color\":\"blue\"}])");
334
- StyledTable.prototype.publish("lastRowStyles", {}, "object", "Object containing styles for the last row (ex: {\"color\":\"red\"})");
335
- StyledTable.prototype.publish("evenRowStyles", {}, "object", "Object containing styles for even rows (ex: {\"background-color\":\"#AAA\"})");
336
-
337
- //#endregion
338
- //#region src/BreakdownTable.ts
339
- var BreakdownTable = class extends StyledTable {
340
- _tooltip;
341
- constructor() {
342
- super();
343
- }
344
- transformData() {
345
- const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
346
- return this.breakdownData(rowCount);
347
- }
348
- breakdownData(limit) {
349
- const len = this.data().length;
350
- const sum = this.data().reduce((acc, row) => acc + row[1], 0);
351
- const data = [];
352
- let percSum = 0;
353
- this.data().sort((a$1, b) => a$1[1] > b[1] ? -1 : 1);
354
- const showOther = len - limit > 0;
355
- this.data().filter((_, i$2) => showOther ? i$2 < limit - 1 : true).forEach((row) => {
356
- const perc = Math.round(row[1] / sum * 100);
357
- percSum += perc;
358
- data.push([row[0], perc + "%"]);
359
- });
360
- if (showOther) {
361
- const otherLabel = `${this.otherLabel()} (${len - limit + 1})`;
362
- const otherPercentage = "~" + (100 - percSum) + "%";
363
- data.push([otherLabel, otherPercentage]);
364
- }
365
- return data;
366
- }
367
- calculateRowCount() {
368
- const theadRowHeight = this.columns().length > 0 ? this.thFontSize() + 5 : 0;
369
- const tbodyRowHeight = this.fontSize() + 5;
370
- const tbodyAvailableHeight = this.height() - theadRowHeight;
371
- return Math.floor(tbodyAvailableHeight / tbodyRowHeight);
372
- }
373
- enter(domNode, element) {
374
- super.enter(domNode, element);
375
- this._tooltip = new HTMLTooltip().target(domNode);
376
- this._tooltip.tooltipHTML((data) => {
377
- const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
378
- const rowHeight = Math.max(...data.map((row) => this.textSize(row[0], this.fontFamily(), this.fontSize()).height)) ?? this.fontSize();
379
- const widestLabel = Math.max(...data.map((row) => this.textSize(row[0], this.fontFamily(), this.fontSize()).width));
380
- const widestPerc = 30;
381
- const colCount = 2;
382
- const w$1 = colCount * (widestLabel + widestPerc) + this._tooltip.padding() * 2;
383
- const h$1 = rowHeight * Math.ceil((data.length - rowCount) / colCount) + this._tooltip.padding() * 2;
384
- this._tooltip.tooltipWidth(w$1);
385
- this._tooltip.tooltipHeight(h$1);
386
- const otherData = this.breakdownData(this.data().length).slice(rowCount - 1);
387
- return `<div style="
388
- width: 100%;
389
- height: 100%;
390
- font-size: ${this.fontSize()}px;
391
- ">${otherData.map((row) => `<div style="
392
- float:left;
393
- width:${Math.floor(99 / colCount)}%;
394
- ">${row[0]}: ${row[1]}</div>`).join("")}</div>`;
395
- });
396
- }
397
- update(domNode, element) {
398
- this.theadColumnStyles_default([{
399
- "color": this.thFirstColor(),
400
- "font-size": this.thFontSize() + "px",
401
- "font-weight": this.thFontWeight(),
402
- "text-align": this.labelAlignment(),
403
- "width": "auto",
404
- "padding": "0px"
405
- }, {
406
- "width": "1%",
407
- "font-size": this.thFontSize() + "px",
408
- "font-weight": this.thFontWeight(),
409
- "text-align": this.percentageAlignment(),
410
- "padding": "0px"
411
- }]);
412
- this.tbodyColumnStyles_default([{
413
- "color": this.topLabelColor(),
414
- "font-size": this.fontSize() + "px",
415
- "font-weight": "normal",
416
- "text-align": this.labelAlignment(),
417
- "width": "auto",
418
- "padding": "0px"
419
- }, {
420
- "color": this.topPercentageColor(),
421
- "font-size": this.fontSize() + "px",
422
- "font-weight": "normal",
423
- "text-align": this.percentageAlignment(),
424
- "width": "1%",
425
- "padding": "0px"
426
- }]);
427
- this.lastRowStyles_default([{
428
- "color": this.otherLabelColor(),
429
- "font-size": this.fontSize() + "px",
430
- "font-weight": this.otherLabelBold() ? "bold" : "normal",
431
- "text-align": this.labelAlignment(),
432
- "width": "auto",
433
- "padding": "0px"
434
- }, {
435
- "color": this.otherLabelColor(),
436
- "font-size": this.fontSize() + "px",
437
- "font-weight": this.otherPercentageBold() ? "bold" : "normal",
438
- "text-align": this.percentageAlignment(),
439
- "width": "1%",
440
- "padding": "0px"
441
- }]);
442
- super.update(domNode, element);
443
- if ((this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount()) < this.data().length) {
444
- const lastRow = element.select("tbody > tr:last-child");
445
- const context = this;
446
- lastRow.on("mouseout.tooltip", (d$1) => {
447
- context._tooltip._triggerElement = lastRow;
448
- context._tooltip.visible(false).render();
449
- }).on("mouseenter.tooltip", (d$1) => {
450
- context._tooltip._triggerElement = lastRow;
451
- context._tooltip.direction("n").data(context.data()).visible(true).render();
452
- });
453
- }
454
- }
455
- };
456
- BreakdownTable.prototype._class += " html_BreakdownTable";
457
- BreakdownTable.prototype.publish("useCalculatedRowCount", true, "boolean", "If true, rowCount will be calculated and its default will be overwritten");
458
- BreakdownTable.prototype.publish("rowCount", 5, "number", "Number of total rows to display (including the 'other' row)", void 0, { disable: (w$1) => w$1.useCalculatedRowCount() });
459
- BreakdownTable.prototype.publish("fontSize", 14, "number", "Font size (pixels)");
460
- BreakdownTable.prototype.publish("labelAlignment", "left", "set", "Alignment of the label column text", [
461
- "left",
462
- "center",
463
- "right"
464
- ]);
465
- BreakdownTable.prototype.publish("percentageAlignment", "center", "set", "Alignment of the percentage column text", [
466
- "left",
467
- "center",
468
- "right"
469
- ]);
470
- BreakdownTable.prototype.publish("topLabelColor", "#333", "html-color", "Color of displayed 'top' labels");
471
- BreakdownTable.prototype.publish("topPercentageColor", "#1A99D5", "html-color", "Color of displayed 'top' percentages");
472
- BreakdownTable.prototype.publish("topPercentageBold", true, "html-color", "If true, the 'top' percentages will be bold");
473
- BreakdownTable.prototype.publish("otherLabel", "Other", "string", "Label text for the 'other' row");
474
- BreakdownTable.prototype.publish("otherLabelColor", "#AAA", "html-color", "Color of the 'other' label");
475
- BreakdownTable.prototype.publish("otherLabelBold", false, "html-color", "If true, the 'other' label will be bold");
476
- BreakdownTable.prototype.publish("otherPercentageColor", "#AAA", "html-color", "Color of the 'other' percentage");
477
- BreakdownTable.prototype.publish("otherPercentageBold", false, "html-color", "If true, the 'other' percentage will be bold");
478
- BreakdownTable.prototype.publish("thFontWeight", "bold", "string", "Font weight for th elements");
479
- BreakdownTable.prototype.publish("thFontSize", 26, "number", "Font size for th elements");
480
- BreakdownTable.prototype.publish("thFirstColor", "#333", "html-color", "Text color of the first th element");
481
- BreakdownTable.prototype.publish("thLastColor", "#333", "html-color", "Text color of the last th element");
482
-
483
- //#endregion
484
- //#region src/JSXWidget.ts
485
- var JSXWidget = class extends HTMLWidget {
486
- static Component = React.Component;
487
- static createElement = React.createElement;
488
- rootNode;
489
- jsxRender(jsx, domNode) {
490
- this.rootNode = React.render(jsx, domNode, this.rootNode);
491
- }
492
- };
493
- JSXWidget.prototype._class += " html_JSXWidget";
494
-
495
- //#endregion
496
- //#region src/reactD3.ts
497
- var VNode = class {
498
- _attrs;
499
- _children;
500
- constructor(attrs, children) {
501
- this._attrs = attrs;
502
- this._children = children;
503
- }
504
- type() {
505
- return "div";
506
- }
507
- attrs() {
508
- return this._attrs;
509
- }
510
- attr(key) {
511
- return this._attrs[key];
512
- }
513
- children() {
514
- return this._children;
515
- }
516
- update(targetElement) {
517
- for (const key in this._attrs) targetElement.attr(key, this._attrs[key]);
518
- }
519
- render(targetElement) {
520
- const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data([this]);
521
- thisElement.exit().remove();
522
- return thisElement.enter().append(this.type()).attr("reactd3", 0).merge(thisElement).each(function(d$1) {
523
- const element = select(this);
524
- d$1.update(element);
525
- d$1.renderChildren(element);
526
- });
527
- }
528
- renderChildren(targetElement) {
529
- const thisElement = targetElement.selectAll(`${targetElement.node().tagName} > *`).data(this._children);
530
- thisElement.exit().remove();
531
- return thisElement.enter().append((d$1) => document.createElement(d$1.type())).attr("reactd3", (_d, i$2) => i$2).merge(thisElement).each(function(d$1) {
532
- const element = select(this);
533
- d$1.update(element);
534
- d$1.renderChildren(element);
535
- });
536
- }
537
- };
538
- var ConstVNode = class extends VNode {
539
- _type;
540
- constructor(type, attrs, children) {
541
- super(attrs, children);
542
- this._type = type;
543
- }
544
- type() {
545
- return this._type;
546
- }
547
- };
548
- var TextVNode = class extends VNode {
549
- _text;
550
- constructor(text) {
551
- super({}, []);
552
- this._text = text;
553
- }
554
- type() {
555
- return "span";
556
- }
557
- update(targetElement) {
558
- super.update(targetElement);
559
- targetElement.text(this._text);
560
- }
561
- };
562
- function isReactFn(_) {
563
- return typeof _ === "function";
564
- }
565
- function isIVNode(_) {
566
- return _.prototype && _.prototype instanceof VNode;
567
- }
568
- var ReactD3 = class {
569
- static createElement(type, attrs, ...children) {
570
- if (isIVNode(type)) return new type(attrs);
571
- else if (isReactFn(type)) return type(attrs);
572
- return new ConstVNode(type, attrs, children.map((child) => {
573
- if (typeof child === "string") return new TextVNode(child);
574
- return child;
575
- }));
576
- }
577
- static render(vdom, targetElement) {
578
- vdom.render(targetElement);
579
- }
580
- };
581
-
582
- //#endregion
583
- //#region ../../node_modules/preact/dist/preact.module.js
584
- var n, l, u$1, t, i$1, r, o$1, e, f$1, c, s, a, h, p = {}, v = [], y = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, w = Array.isArray;
585
- function d(n$1, l$1) {
586
- for (var u$2 in l$1) n$1[u$2] = l$1[u$2];
587
- return n$1;
588
- }
589
- function g(n$1) {
590
- n$1 && n$1.parentNode && n$1.parentNode.removeChild(n$1);
591
- }
592
- function m(n$1, t$1, i$2, r$1, o$2) {
593
- var e$1 = {
594
- type: n$1,
595
- props: t$1,
596
- key: i$2,
597
- ref: r$1,
598
- __k: null,
599
- __: null,
600
- __b: 0,
601
- __e: null,
602
- __c: null,
603
- constructor: void 0,
604
- __v: null == o$2 ? ++u$1 : o$2,
605
- __i: -1,
606
- __u: 0
607
- };
608
- return null == o$2 && null != l.vnode && l.vnode(e$1), e$1;
609
- }
610
- function k(n$1) {
611
- return n$1.children;
612
- }
613
- function x(n$1, l$1) {
614
- this.props = n$1, this.context = l$1;
615
- }
616
- function S(n$1, l$1) {
617
- if (null == l$1) return n$1.__ ? S(n$1.__, n$1.__i + 1) : null;
618
- for (var u$2; l$1 < n$1.__k.length; l$1++) if (null != (u$2 = n$1.__k[l$1]) && null != u$2.__e) return u$2.__e;
619
- return "function" == typeof n$1.type ? S(n$1) : null;
620
- }
621
- function C(n$1) {
622
- var l$1, u$2;
623
- if (null != (n$1 = n$1.__) && null != n$1.__c) {
624
- for (n$1.__e = n$1.__c.base = null, l$1 = 0; l$1 < n$1.__k.length; l$1++) if (null != (u$2 = n$1.__k[l$1]) && null != u$2.__e) {
625
- n$1.__e = n$1.__c.base = u$2.__e;
626
- break;
627
- }
628
- return C(n$1);
629
- }
630
- }
631
- function M(n$1) {
632
- (!n$1.__d && (n$1.__d = !0) && i$1.push(n$1) && !$.__r++ || r != l.debounceRendering) && ((r = l.debounceRendering) || o$1)($);
633
- }
634
- function $() {
635
- for (var n$1, u$2, t$1, r$1, o$2, f$2, c$1, s$1 = 1; i$1.length;) i$1.length > s$1 && i$1.sort(e), n$1 = i$1.shift(), s$1 = i$1.length, n$1.__d && (t$1 = void 0, r$1 = void 0, o$2 = (r$1 = (u$2 = n$1).__v).__e, f$2 = [], c$1 = [], u$2.__P && ((t$1 = d({}, r$1)).__v = r$1.__v + 1, l.vnode && l.vnode(t$1), O(u$2.__P, t$1, r$1, u$2.__n, u$2.__P.namespaceURI, 32 & r$1.__u ? [o$2] : null, f$2, null == o$2 ? S(r$1) : o$2, !!(32 & r$1.__u), c$1), t$1.__v = r$1.__v, t$1.__.__k[t$1.__i] = t$1, N(f$2, t$1, c$1), r$1.__e = r$1.__ = null, t$1.__e != o$2 && C(t$1)));
636
- $.__r = 0;
637
- }
638
- function I(n$1, l$1, u$2, t$1, i$2, r$1, o$2, e$1, f$2, c$1, s$1) {
639
- var a$1, h$1, y$1, w$1, d$1, g$1, _, m$1 = t$1 && t$1.__k || v, b = l$1.length;
640
- for (f$2 = P(u$2, l$1, m$1, f$2, b), a$1 = 0; a$1 < b; a$1++) null != (y$1 = u$2.__k[a$1]) && (h$1 = -1 == y$1.__i ? p : m$1[y$1.__i] || p, y$1.__i = a$1, g$1 = O(n$1, y$1, h$1, i$2, r$1, o$2, e$1, f$2, c$1, s$1), w$1 = y$1.__e, y$1.ref && h$1.ref != y$1.ref && (h$1.ref && B(h$1.ref, null, y$1), s$1.push(y$1.ref, y$1.__c || w$1, y$1)), null == d$1 && null != w$1 && (d$1 = w$1), (_ = !!(4 & y$1.__u)) || h$1.__k === y$1.__k ? f$2 = A(y$1, f$2, n$1, _) : "function" == typeof y$1.type && void 0 !== g$1 ? f$2 = g$1 : w$1 && (f$2 = w$1.nextSibling), y$1.__u &= -7);
641
- return u$2.__e = d$1, f$2;
642
- }
643
- function P(n$1, l$1, u$2, t$1, i$2) {
644
- var r$1, o$2, e$1, f$2, c$1, s$1 = u$2.length, a$1 = s$1, h$1 = 0;
645
- for (n$1.__k = new Array(i$2), r$1 = 0; r$1 < i$2; r$1++) null != (o$2 = l$1[r$1]) && "boolean" != typeof o$2 && "function" != typeof o$2 ? (f$2 = r$1 + h$1, (o$2 = n$1.__k[r$1] = "string" == typeof o$2 || "number" == typeof o$2 || "bigint" == typeof o$2 || o$2.constructor == String ? m(null, o$2, null, null, null) : w(o$2) ? m(k, { children: o$2 }, null, null, null) : null == o$2.constructor && o$2.__b > 0 ? m(o$2.type, o$2.props, o$2.key, o$2.ref ? o$2.ref : null, o$2.__v) : o$2).__ = n$1, o$2.__b = n$1.__b + 1, e$1 = null, -1 != (c$1 = o$2.__i = L(o$2, u$2, f$2, a$1)) && (a$1--, (e$1 = u$2[c$1]) && (e$1.__u |= 2)), null == e$1 || null == e$1.__v ? (-1 == c$1 && (i$2 > s$1 ? h$1-- : i$2 < s$1 && h$1++), "function" != typeof o$2.type && (o$2.__u |= 4)) : c$1 != f$2 && (c$1 == f$2 - 1 ? h$1-- : c$1 == f$2 + 1 ? h$1++ : (c$1 > f$2 ? h$1-- : h$1++, o$2.__u |= 4))) : n$1.__k[r$1] = null;
646
- if (a$1) for (r$1 = 0; r$1 < s$1; r$1++) null != (e$1 = u$2[r$1]) && 0 == (2 & e$1.__u) && (e$1.__e == t$1 && (t$1 = S(e$1)), D(e$1, e$1));
647
- return t$1;
648
- }
649
- function A(n$1, l$1, u$2, t$1) {
650
- var i$2, r$1;
651
- if ("function" == typeof n$1.type) {
652
- for (i$2 = n$1.__k, r$1 = 0; i$2 && r$1 < i$2.length; r$1++) i$2[r$1] && (i$2[r$1].__ = n$1, l$1 = A(i$2[r$1], l$1, u$2, t$1));
653
- return l$1;
654
- }
655
- n$1.__e != l$1 && (t$1 && (l$1 && n$1.type && !l$1.parentNode && (l$1 = S(n$1)), u$2.insertBefore(n$1.__e, l$1 || null)), l$1 = n$1.__e);
656
- do
657
- l$1 = l$1 && l$1.nextSibling;
658
- while (null != l$1 && 8 == l$1.nodeType);
659
- return l$1;
660
- }
661
- function L(n$1, l$1, u$2, t$1) {
662
- var i$2, r$1, o$2, e$1 = n$1.key, f$2 = n$1.type, c$1 = l$1[u$2], s$1 = null != c$1 && 0 == (2 & c$1.__u);
663
- if (null === c$1 && null == n$1.key || s$1 && e$1 == c$1.key && f$2 == c$1.type) return u$2;
664
- if (t$1 > (s$1 ? 1 : 0)) {
665
- for (i$2 = u$2 - 1, r$1 = u$2 + 1; i$2 >= 0 || r$1 < l$1.length;) if (null != (c$1 = l$1[o$2 = i$2 >= 0 ? i$2-- : r$1++]) && 0 == (2 & c$1.__u) && e$1 == c$1.key && f$2 == c$1.type) return o$2;
666
- }
667
- return -1;
668
- }
669
- function T(n$1, l$1, u$2) {
670
- "-" == l$1[0] ? n$1.setProperty(l$1, null == u$2 ? "" : u$2) : n$1[l$1] = null == u$2 ? "" : "number" != typeof u$2 || y.test(l$1) ? u$2 : u$2 + "px";
671
- }
672
- function j(n$1, l$1, u$2, t$1, i$2) {
673
- var r$1, o$2;
674
- n: if ("style" == l$1) if ("string" == typeof u$2) n$1.style.cssText = u$2;
675
- else {
676
- if ("string" == typeof t$1 && (n$1.style.cssText = t$1 = ""), t$1) for (l$1 in t$1) u$2 && l$1 in u$2 || T(n$1.style, l$1, "");
677
- if (u$2) for (l$1 in u$2) t$1 && u$2[l$1] == t$1[l$1] || T(n$1.style, l$1, u$2[l$1]);
678
- }
679
- else if ("o" == l$1[0] && "n" == l$1[1]) r$1 = l$1 != (l$1 = l$1.replace(f$1, "$1")), o$2 = l$1.toLowerCase(), l$1 = o$2 in n$1 || "onFocusOut" == l$1 || "onFocusIn" == l$1 ? o$2.slice(2) : l$1.slice(2), n$1.l || (n$1.l = {}), n$1.l[l$1 + r$1] = u$2, u$2 ? t$1 ? u$2.u = t$1.u : (u$2.u = c, n$1.addEventListener(l$1, r$1 ? a : s, r$1)) : n$1.removeEventListener(l$1, r$1 ? a : s, r$1);
680
- else {
681
- if ("http://www.w3.org/2000/svg" == i$2) l$1 = l$1.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
682
- else if ("width" != l$1 && "height" != l$1 && "href" != l$1 && "list" != l$1 && "form" != l$1 && "tabIndex" != l$1 && "download" != l$1 && "rowSpan" != l$1 && "colSpan" != l$1 && "role" != l$1 && "popover" != l$1 && l$1 in n$1) try {
683
- n$1[l$1] = null == u$2 ? "" : u$2;
684
- break n;
685
- } catch (n$2) {}
686
- "function" == typeof u$2 || (null == u$2 || !1 === u$2 && "-" != l$1[4] ? n$1.removeAttribute(l$1) : n$1.setAttribute(l$1, "popover" == l$1 && 1 == u$2 ? "" : u$2));
687
- }
688
- }
689
- function F(n$1) {
690
- return function(u$2) {
691
- if (this.l) {
692
- var t$1 = this.l[u$2.type + n$1];
693
- if (null == u$2.t) u$2.t = c++;
694
- else if (u$2.t < t$1.u) return;
695
- return t$1(l.event ? l.event(u$2) : u$2);
696
- }
697
- };
698
- }
699
- function O(n$1, u$2, t$1, i$2, r$1, o$2, e$1, f$2, c$1, s$1) {
700
- var a$1, h$1, p$1, v$1, y$1, _, m$1, b, S$1, C$1, M$1, $$1, P$1, A$1, H, L$1, T$1, j$1 = u$2.type;
701
- if (null != u$2.constructor) return null;
702
- 128 & t$1.__u && (c$1 = !!(32 & t$1.__u), o$2 = [f$2 = u$2.__e = t$1.__e]), (a$1 = l.__b) && a$1(u$2);
703
- n: if ("function" == typeof j$1) try {
704
- if (b = u$2.props, S$1 = "prototype" in j$1 && j$1.prototype.render, C$1 = (a$1 = j$1.contextType) && i$2[a$1.__c], M$1 = a$1 ? C$1 ? C$1.props.value : a$1.__ : i$2, t$1.__c ? m$1 = (h$1 = u$2.__c = t$1.__c).__ = h$1.__E : (S$1 ? u$2.__c = h$1 = new j$1(b, M$1) : (u$2.__c = h$1 = new x(b, M$1), h$1.constructor = j$1, h$1.render = E), C$1 && C$1.sub(h$1), h$1.props = b, h$1.state || (h$1.state = {}), h$1.context = M$1, h$1.__n = i$2, p$1 = h$1.__d = !0, h$1.__h = [], h$1._sb = []), S$1 && null == h$1.__s && (h$1.__s = h$1.state), S$1 && null != j$1.getDerivedStateFromProps && (h$1.__s == h$1.state && (h$1.__s = d({}, h$1.__s)), d(h$1.__s, j$1.getDerivedStateFromProps(b, h$1.__s))), v$1 = h$1.props, y$1 = h$1.state, h$1.__v = u$2, p$1) S$1 && null == j$1.getDerivedStateFromProps && null != h$1.componentWillMount && h$1.componentWillMount(), S$1 && null != h$1.componentDidMount && h$1.__h.push(h$1.componentDidMount);
705
- else {
706
- if (S$1 && null == j$1.getDerivedStateFromProps && b !== v$1 && null != h$1.componentWillReceiveProps && h$1.componentWillReceiveProps(b, M$1), !h$1.__e && null != h$1.shouldComponentUpdate && !1 === h$1.shouldComponentUpdate(b, h$1.__s, M$1) || u$2.__v == t$1.__v) {
707
- for (u$2.__v != t$1.__v && (h$1.props = b, h$1.state = h$1.__s, h$1.__d = !1), u$2.__e = t$1.__e, u$2.__k = t$1.__k, u$2.__k.some(function(n$2) {
708
- n$2 && (n$2.__ = u$2);
709
- }), $$1 = 0; $$1 < h$1._sb.length; $$1++) h$1.__h.push(h$1._sb[$$1]);
710
- h$1._sb = [], h$1.__h.length && e$1.push(h$1);
711
- break n;
712
- }
713
- null != h$1.componentWillUpdate && h$1.componentWillUpdate(b, h$1.__s, M$1), S$1 && null != h$1.componentDidUpdate && h$1.__h.push(function() {
714
- h$1.componentDidUpdate(v$1, y$1, _);
715
- });
716
- }
717
- if (h$1.context = M$1, h$1.props = b, h$1.__P = n$1, h$1.__e = !1, P$1 = l.__r, A$1 = 0, S$1) {
718
- for (h$1.state = h$1.__s, h$1.__d = !1, P$1 && P$1(u$2), a$1 = h$1.render(h$1.props, h$1.state, h$1.context), H = 0; H < h$1._sb.length; H++) h$1.__h.push(h$1._sb[H]);
719
- h$1._sb = [];
720
- } else do
721
- h$1.__d = !1, P$1 && P$1(u$2), a$1 = h$1.render(h$1.props, h$1.state, h$1.context), h$1.state = h$1.__s;
722
- while (h$1.__d && ++A$1 < 25);
723
- h$1.state = h$1.__s, null != h$1.getChildContext && (i$2 = d(d({}, i$2), h$1.getChildContext())), S$1 && !p$1 && null != h$1.getSnapshotBeforeUpdate && (_ = h$1.getSnapshotBeforeUpdate(v$1, y$1)), L$1 = a$1, null != a$1 && a$1.type === k && null == a$1.key && (L$1 = V(a$1.props.children)), f$2 = I(n$1, w(L$1) ? L$1 : [L$1], u$2, t$1, i$2, r$1, o$2, e$1, f$2, c$1, s$1), h$1.base = u$2.__e, u$2.__u &= -161, h$1.__h.length && e$1.push(h$1), m$1 && (h$1.__E = h$1.__ = null);
724
- } catch (n$2) {
725
- if (u$2.__v = null, c$1 || null != o$2) if (n$2.then) {
726
- for (u$2.__u |= c$1 ? 160 : 128; f$2 && 8 == f$2.nodeType && f$2.nextSibling;) f$2 = f$2.nextSibling;
727
- o$2[o$2.indexOf(f$2)] = null, u$2.__e = f$2;
728
- } else {
729
- for (T$1 = o$2.length; T$1--;) g(o$2[T$1]);
730
- z(u$2);
731
- }
732
- else u$2.__e = t$1.__e, u$2.__k = t$1.__k, n$2.then || z(u$2);
733
- l.__e(n$2, u$2, t$1);
734
- }
735
- else null == o$2 && u$2.__v == t$1.__v ? (u$2.__k = t$1.__k, u$2.__e = t$1.__e) : f$2 = u$2.__e = q(t$1.__e, u$2, t$1, i$2, r$1, o$2, e$1, c$1, s$1);
736
- return (a$1 = l.diffed) && a$1(u$2), 128 & u$2.__u ? void 0 : f$2;
737
- }
738
- function z(n$1) {
739
- n$1 && n$1.__c && (n$1.__c.__e = !0), n$1 && n$1.__k && n$1.__k.forEach(z);
740
- }
741
- function N(n$1, u$2, t$1) {
742
- for (var i$2 = 0; i$2 < t$1.length; i$2++) B(t$1[i$2], t$1[++i$2], t$1[++i$2]);
743
- l.__c && l.__c(u$2, n$1), n$1.some(function(u$3) {
744
- try {
745
- n$1 = u$3.__h, u$3.__h = [], n$1.some(function(n$2) {
746
- n$2.call(u$3);
747
- });
748
- } catch (n$2) {
749
- l.__e(n$2, u$3.__v);
750
- }
751
- });
752
- }
753
- function V(n$1) {
754
- return "object" != typeof n$1 || null == n$1 || n$1.__b && n$1.__b > 0 ? n$1 : w(n$1) ? n$1.map(V) : d({}, n$1);
755
- }
756
- function q(u$2, t$1, i$2, r$1, o$2, e$1, f$2, c$1, s$1) {
757
- var a$1, h$1, v$1, y$1, d$1, _, m$1, b = i$2.props, k$1 = t$1.props, x$1 = t$1.type;
758
- if ("svg" == x$1 ? o$2 = "http://www.w3.org/2000/svg" : "math" == x$1 ? o$2 = "http://www.w3.org/1998/Math/MathML" : o$2 || (o$2 = "http://www.w3.org/1999/xhtml"), null != e$1) {
759
- for (a$1 = 0; a$1 < e$1.length; a$1++) if ((d$1 = e$1[a$1]) && "setAttribute" in d$1 == !!x$1 && (x$1 ? d$1.localName == x$1 : 3 == d$1.nodeType)) {
760
- u$2 = d$1, e$1[a$1] = null;
761
- break;
762
- }
763
- }
764
- if (null == u$2) {
765
- if (null == x$1) return document.createTextNode(k$1);
766
- u$2 = document.createElementNS(o$2, x$1, k$1.is && k$1), c$1 && (l.__m && l.__m(t$1, e$1), c$1 = !1), e$1 = null;
767
- }
768
- if (null == x$1) b === k$1 || c$1 && u$2.data == k$1 || (u$2.data = k$1);
769
- else {
770
- if (e$1 = e$1 && n.call(u$2.childNodes), b = i$2.props || p, !c$1 && null != e$1) for (b = {}, a$1 = 0; a$1 < u$2.attributes.length; a$1++) b[(d$1 = u$2.attributes[a$1]).name] = d$1.value;
771
- for (a$1 in b) if (d$1 = b[a$1], "children" == a$1);
772
- else if ("dangerouslySetInnerHTML" == a$1) v$1 = d$1;
773
- else if (!(a$1 in k$1)) {
774
- if ("value" == a$1 && "defaultValue" in k$1 || "checked" == a$1 && "defaultChecked" in k$1) continue;
775
- j(u$2, a$1, null, d$1, o$2);
776
- }
777
- for (a$1 in k$1) d$1 = k$1[a$1], "children" == a$1 ? y$1 = d$1 : "dangerouslySetInnerHTML" == a$1 ? h$1 = d$1 : "value" == a$1 ? _ = d$1 : "checked" == a$1 ? m$1 = d$1 : c$1 && "function" != typeof d$1 || b[a$1] === d$1 || j(u$2, a$1, d$1, b[a$1], o$2);
778
- if (h$1) c$1 || v$1 && (h$1.__html == v$1.__html || h$1.__html == u$2.innerHTML) || (u$2.innerHTML = h$1.__html), t$1.__k = [];
779
- else if (v$1 && (u$2.innerHTML = ""), I("template" == t$1.type ? u$2.content : u$2, w(y$1) ? y$1 : [y$1], t$1, i$2, r$1, "foreignObject" == x$1 ? "http://www.w3.org/1999/xhtml" : o$2, e$1, f$2, e$1 ? e$1[0] : i$2.__k && S(i$2, 0), c$1, s$1), null != e$1) for (a$1 = e$1.length; a$1--;) g(e$1[a$1]);
780
- c$1 || (a$1 = "value", "progress" == x$1 && null == _ ? u$2.removeAttribute("value") : null != _ && (_ !== u$2[a$1] || "progress" == x$1 && !_ || "option" == x$1 && _ != b[a$1]) && j(u$2, a$1, _, b[a$1], o$2), a$1 = "checked", null != m$1 && m$1 != u$2[a$1] && j(u$2, a$1, m$1, b[a$1], o$2));
781
- }
782
- return u$2;
783
- }
784
- function B(n$1, u$2, t$1) {
785
- try {
786
- if ("function" == typeof n$1) {
787
- var i$2 = "function" == typeof n$1.__u;
788
- i$2 && n$1.__u(), i$2 && null == u$2 || (n$1.__u = n$1(u$2));
789
- } else n$1.current = u$2;
790
- } catch (n$2) {
791
- l.__e(n$2, t$1);
792
- }
793
- }
794
- function D(n$1, u$2, t$1) {
795
- var i$2, r$1;
796
- if (l.unmount && l.unmount(n$1), (i$2 = n$1.ref) && (i$2.current && i$2.current != n$1.__e || B(i$2, null, u$2)), null != (i$2 = n$1.__c)) {
797
- if (i$2.componentWillUnmount) try {
798
- i$2.componentWillUnmount();
799
- } catch (n$2) {
800
- l.__e(n$2, u$2);
801
- }
802
- i$2.base = i$2.__P = null;
803
- }
804
- if (i$2 = n$1.__k) for (r$1 = 0; r$1 < i$2.length; r$1++) i$2[r$1] && D(i$2[r$1], u$2, t$1 || "function" != typeof n$1.type);
805
- t$1 || g(n$1.__e), n$1.__c = n$1.__ = n$1.__e = void 0;
806
- }
807
- function E(n$1, l$1, u$2) {
808
- return this.constructor(n$1, u$2);
809
- }
810
- n = v.slice, l = { __e: function(n$1, l$1, u$2, t$1) {
811
- for (var i$2, r$1, o$2; l$1 = l$1.__;) if ((i$2 = l$1.__c) && !i$2.__) try {
812
- if ((r$1 = i$2.constructor) && null != r$1.getDerivedStateFromError && (i$2.setState(r$1.getDerivedStateFromError(n$1)), o$2 = i$2.__d), null != i$2.componentDidCatch && (i$2.componentDidCatch(n$1, t$1 || {}), o$2 = i$2.__d), o$2) return i$2.__E = i$2;
813
- } catch (l$2) {
814
- n$1 = l$2;
815
- }
816
- throw n$1;
817
- } }, u$1 = 0, t = function(n$1) {
818
- return null != n$1 && null == n$1.constructor;
819
- }, x.prototype.setState = function(n$1, l$1) {
820
- var u$2 = null != this.__s && this.__s != this.state ? this.__s : this.__s = d({}, this.state);
821
- "function" == typeof n$1 && (n$1 = n$1(d({}, u$2), this.props)), n$1 && d(u$2, n$1), null != n$1 && this.__v && (l$1 && this._sb.push(l$1), M(this));
822
- }, x.prototype.forceUpdate = function(n$1) {
823
- this.__v && (this.__e = !0, n$1 && this.__h.push(n$1), M(this));
824
- }, x.prototype.render = k, i$1 = [], o$1 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, e = function(n$1, l$1) {
825
- return n$1.__v.__b - l$1.__v.__b;
826
- }, $.__r = 0, f$1 = /(PointerCapture)$|Capture$/i, c = 0, s = F(!1), a = F(!0), h = 0;
827
-
828
- //#endregion
829
- //#region ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
830
- var o = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, f = 0, i = Array.isArray;
831
- function u(e$1, t$1, n$1, o$2, i$2, u$2) {
832
- t$1 || (t$1 = {});
833
- var a$1, c$1, p$1 = t$1;
834
- if ("ref" in p$1) for (c$1 in p$1 = {}, t$1) "ref" == c$1 ? a$1 = t$1[c$1] : p$1[c$1] = t$1[c$1];
835
- var l$1 = {
836
- type: e$1,
837
- props: p$1,
838
- key: n$1,
839
- ref: a$1,
840
- __k: null,
841
- __: null,
842
- __b: 0,
843
- __e: null,
844
- __c: null,
845
- constructor: void 0,
846
- __v: --f,
847
- __i: -1,
848
- __u: 0,
849
- __source: i$2,
850
- __self: u$2
851
- };
852
- if ("function" == typeof e$1 && (a$1 = e$1.defaultProps)) for (c$1 in a$1) void 0 === p$1[c$1] && (p$1[c$1] = a$1[c$1]);
853
- return l.vnode && l.vnode(l$1), l$1;
854
- }
855
-
856
- //#endregion
857
- //#region src/VizComponent.tsx
858
- var VizComponent = class extends JSXWidget.Component {
859
- widget;
860
- refreshProps() {
861
- for (const key in this.props) if (this.widget[key] && typeof this.widget[key] === "function") this.widget[key](this.props[key]);
862
- }
863
- componentDidMount() {
864
- this.widget = new this.props.type().target(this.base);
865
- this.refreshProps();
866
- this.widget.render();
867
- }
868
- componentWillUnmount() {
869
- this.widget.target(null).render();
870
- }
871
- render() {
872
- return /* @__PURE__ */ u("div", { style: this.props.style });
873
- }
874
- componentDidUpdate() {
875
- this.refreshProps();
876
- this.widget.render();
877
- }
878
- };
879
-
880
- //#endregion
881
- //#region src/VizInstance.tsx
882
- var VizInstance = class extends JSXWidget.Component {
883
- widget;
884
- refreshProps() {
885
- for (const key in this.props) if (this.widget[key] && typeof this.widget[key] === "function") this.widget[key](this.props[key]);
886
- }
887
- componentDidMount() {
888
- this.widget = this.props.instance.target(this.base);
889
- this.refreshProps();
890
- this.widget.render();
891
- }
892
- componentWillUnmount() {
893
- this.widget.target(null).render();
894
- }
895
- render() {
896
- return /* @__PURE__ */ u("div", { style: this.props.style });
897
- }
898
- componentDidUpdate() {
899
- this.refreshProps();
900
- this.widget.render();
901
- }
902
- };
903
-
904
- //#endregion
905
- //#region src/StatsTable.ts
906
- var StatsTable = class extends StyledTable {
907
- transformData() {
908
- const totalRow = [[
909
- "Total",
910
- 0,
911
- 0
912
- ]];
913
- const data = this.data();
914
- data.forEach((row) => {
915
- totalRow[0][1] += row[1];
916
- totalRow[0][2] += row[2];
917
- });
918
- return data.concat(totalRow).map((row) => {
919
- return [
920
- row[0],
921
- this.secondColumnFormat_exists() ? format(this.secondColumnFormat())(row[1]) : row[1],
922
- this.thirdColumnFormat_exists() ? format(this.thirdColumnFormat())(row[2]) : row[2]
923
- ];
924
- });
925
- }
926
- update(domNode, element) {
927
- this.tbodyColumnStyles_default([
928
- {
929
- "font-weight": "bold",
930
- "width": this.firstColumnWidth(),
931
- "text-align": "left"
932
- },
933
- {
934
- "width": this.secondColumnWidth(),
935
- "text-align": "right"
936
- },
937
- {
938
- "width": this.thirdColumnWidth(),
939
- "text-align": "right"
940
- }
941
- ]);
942
- this.evenRowStyles_default([
943
- {
944
- "font-weight": "bold",
945
- "width": this.firstColumnWidth(),
946
- "text-align": "left",
947
- "font-color": this.evenRowFontColor(),
948
- "background-color": this.evenRowBackgroundColor()
949
- },
950
- {
951
- "width": this.secondColumnWidth(),
952
- "text-align": "right",
953
- "font-color": this.evenRowFontColor(),
954
- "background-color": this.evenRowBackgroundColor()
955
- },
956
- {
957
- "width": this.thirdColumnWidth(),
958
- "text-align": "right",
959
- "font-color": this.evenRowFontColor(),
960
- "background-color": this.evenRowBackgroundColor()
961
- }
962
- ]);
963
- this.lastRowStyles_default({ "font-weight": "bold" });
964
- super.update(domNode, element);
965
- }
966
- };
967
- StatsTable.prototype._class += " html_StatsTable";
968
- StatsTable.prototype.publish("labelColor", "#333", "html-color", "Color of the text in the first column");
969
- StatsTable.prototype.publish("primaryValueColor", "#333", "html-color", "Color of the text in the second column");
970
- StatsTable.prototype.publish("secondaryValueColor", "#333", "html-color", "Color of the text in the third column");
971
- StatsTable.prototype.publish("evenRowBackgroundColor", "#333", "html-color", "Background color of the even rows");
972
- StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font color of the even rows");
973
- StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
974
- StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
975
- StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
976
- StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", void 0, { optional: true });
977
- StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", void 0, { optional: true });
978
-
979
- //#endregion
980
- //#region src/TitleBar.ts
981
- var Item = class extends HTMLWidget {
982
- _owner;
983
- constructor(owner) {
984
- super();
985
- this._owner = owner;
986
- this._tag = "a";
987
- }
988
- };
989
- Item.prototype._class += " html_Item";
990
- var Button = class extends Item {
991
- _icon;
992
- constructor(owner, icon) {
993
- super(owner);
994
- this._icon = icon;
995
- }
996
- icon() {
997
- return this._icon;
998
- }
999
- enter(domNode, element) {
1000
- super.enter(domNode, element);
1001
- element.attr("href", "#").on("click", (d$1, idx, groups) => this._owner.titleBarClick(this, d$1, idx, groups)).append("i").attr("class", `fa ${this._icon} fa-lg fa-fw`);
1002
- }
1003
- };
1004
- Button.prototype._class += " html_Button";
1005
- var ToggleButton = class extends Button {
1006
- enter(domNode, element) {
1007
- element.on("click.sel", (d$1, idx, groups) => {
1008
- this.selected(!this.selected());
1009
- this.render();
1010
- });
1011
- super.enter(domNode, element);
1012
- }
1013
- update(domNode, element) {
1014
- super.update(domNode, element);
1015
- this._element.classed("selected", this.selected());
1016
- }
1017
- };
1018
- ToggleButton.prototype._class += " html_ToggleButton";
1019
- ToggleButton.prototype.publish("selected", false, "boolean");
1020
- var Spacer = class extends Item {
1021
- enter(domNode, element) {
1022
- super.enter(domNode, element);
1023
- element.attr("class", "spacer").attr("href", "#").append("i");
1024
- }
1025
- };
1026
- Spacer.prototype._class += " html_Spacer";
1027
- var TitleBar = class extends JSXWidget {
1028
- _divMain;
1029
- _divIconBar;
1030
- _divTitle;
1031
- constructor() {
1032
- super();
1033
- }
1034
- enter(domNode, element) {
1035
- super.enter(domNode, element);
1036
- this._divMain = element.append("div").attr("class", "main");
1037
- this._divIconBar = this._divMain.append("div").attr("class", "icon-bar");
1038
- this._divTitle = this._divMain.append("div").attr("class", "title");
1039
- }
1040
- update(domNode, element) {
1041
- super.update(domNode, element);
1042
- this._divTitle.text(this.title());
1043
- const icons = this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());
1044
- icons.enter().append("div").attr("class", "icon-bar-item").each(function(d$1) {
1045
- d$1.target(this);
1046
- }).merge(icons).each(function(d$1) {
1047
- d$1.render();
1048
- });
1049
- icons.exit().each(function(d$1) {
1050
- d$1.target(null);
1051
- }).remove();
1052
- icons.order();
1053
- }
1054
- };
1055
- TitleBar.prototype._class += " html_TitleBar";
1056
- TitleBar.prototype.publish("title", "", "string");
1057
- TitleBar.prototype.publish("buttons", [], "widgetArray");
1058
-
1059
- //#endregion
1060
- export { BUILD_VERSION, BreakdownTable, Button, HTMLTooltip, Item, JSXWidget, PKG_NAME, PKG_VERSION, ReactD3, SimpleTable, Spacer, StatsTable, StyledTable, TitleBar, ToggleButton, VNode, VizComponent, VizInstance };
1061
- //# sourceMappingURL=index.js.map!function(){try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode("#wrap{width:100%}#left,#right{padding:5px}#left{text-align:left;text-overflow:ellipsis;white-space:nowrap;background-color:red;display:block;overflow:hidden}#right{float:right;text-align:right;white-space:nowrap;background-color:orange}.html_TitleBar>.main{width:100%;display:block}.html_TitleBar .title{text-align:left;text-overflow:ellipsis;white-space:nowrap;padding:4px;font-size:20px;font-weight:700;display:block;overflow:hidden}.html_TitleBar .icon-bar{float:right;text-align:right;white-space:nowrap;padding:4px;line-height:28px}.html_TitleBar .icon-bar-item,.html_TitleBar .icon-bar-item>div{display:inline}.html_TitleBar .icon-bar a{text-align:center;color:#a9a9a9;padding-top:4px;padding-bottom:4px;transition:all .3s}.html_TitleBar .icon-bar a:hover{background-color:#f5f5f5}.html_TitleBar .icon-bar a.selected{background-color:#efe5e5}.html_TitleBar .icon-bar a.spacer{text-align:center;color:none;padding-top:2px;padding-bottom:0;padding-left:8px}.html_TitleBar .icon-bar a.spacer:hover{background-color:#0000}.html_TitleBar .icon-bar .active{background-color:#4caf50}\n/*$vite$:1*/")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
1
+ var t=Object.defineProperty,e=(e,o)=>t(e,"name",{value:o,configurable:!0}),o=(e,o,i)=>((e,o,i)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[o]=i)(e,"symbol"!=typeof o?o+"":o,i);import{HTMLWidget as i,select as r,format as s}from"@hpcc-js/common";import{scopedLogger as l}from"@hpcc-js/util";import{React as n}from"@hpcc-js/react";const h="@hpcc-js/html",a="3.3.2",p="3.16.0",d=class _HTMLTooltip extends i{_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=/* @__PURE__ */e(t=>"<b>_tooltipHTMLCallback is undefined</b>","_tooltipHTMLCallback");_logger=l("html/HTMLTooltip");constructor(){super(),this.visible(!1)}tooltipHTML(t){return this._tooltipHTMLCallback=t,this}tooltipContent(t){return arguments.length?(this._contentNode=t,this):this._contentNode}triggerElement(t){return this._triggerElement=t,this}enter(t,e){super.enter(t,e);const o=r("body");this._tooltipElement=o.append("div").attr("class","tooltip-div").style("z-index","2147483638").style("position","fixed"),this._arrowElement=o.append("div").attr("class","arrow-div").style("z-index","2147483638").style("position","fixed")}update(t,e){if(super.update(t,e),this._contentNode!==this._prevContentNode){const t=this._tooltipElement.node();[...t.querySelectorAll("*")].map(t=>t.__data__).filter(t=>t).forEach(t=>{"function"==typeof t.target&&t.target(null),"function"==typeof t.exit&&t.exit()}),t.innerHTML="",t.appendChild(this._contentNode),this._prevContentNode=this._contentNode}if(this._contentNode?this.onShowContent(this._contentNode):this._tooltipElement.html(()=>this._tooltipHTMLCallback(this.data())),this.fitContent()){this._tooltipElement.style("width","auto").style("height","auto").style("padding","0px").style("box-sizing","content-box");const t=this._tooltipElement.node().getBoundingClientRect();this.tooltipWidth_default(t.width),this.tooltipHeight_default(t.height)}this._closing=!1,this._tooltipElement.style("background-color",this.tooltipColor()).style("color",this.fontColor()).style("width",this.tooltipWidth()+"px").style("height",this.tooltipHeight()+"px").style("opacity",1).style("padding",this.padding()+"px").style("pointer-events",this.enablePointerEvents()?"all":"none").style("box-sizing","content-box"),this._arrowElement.style("opacity",1).style("pointer-events","none"),this.updateTooltipPosition()}onShowContent(t){}updateTooltipPosition(){const t=this.calcReferenceBBox(),e=this.calcTooltipDirection(t),o=t[e];return this._tooltipElement.style("top",o.y+"px").style("left",o.x+"px"),this.setArrowPosition(o,e),o}calcTooltipDirection(t){const e=Object.keys(t),o=this.direction();e.sort((t,e)=>t===o?-1:1);const i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let r=0;r<e.length;r++){const o={top:t[e[r]].y,left:t[e[r]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(o,i))return e[r]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${o}'`),this._logger.debug(i),this._logger.debug({top:t[o].y,left:t[o].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),o}rectFits(t,e){return t.top>=e.top&&t.left>=e.left&&t.width+t.left<=e.width+e.left&&t.height+t.top<=e.height+e.top}setArrowPosition(t,e){let o,i,r="border-top-color";switch(this._arrowElement.style("border",`${this.arrowHeight()}px solid ${this.tooltipColor()}`).style("border-top-color","transparent").style("border-right-color","transparent").style("border-bottom-color","transparent").style("border-left-color","transparent"),e){case"n":o=t.y+this.tooltipHeight()+2*this.padding(),i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),r="border-top-color",this._arrowElement.style("border-top-width",`${this.arrowHeight()}px`).style("border-bottom-width","0px").style("border-left-width",this.arrowWidth()/2+"px").style("border-right-width",this.arrowWidth()/2+"px");break;case"s":o=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,r="border-bottom-color",this._arrowElement.style("border-top-width","0px").style("border-bottom-width",`${this.arrowHeight()}px`).style("border-left-width",this.arrowWidth()/2+"px").style("border-right-width",this.arrowWidth()/2+"px");break;case"e":o=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),r="border-right-color",this._arrowElement.style("border-top-width",this.arrowWidth()/2+"px").style("border-bottom-width",this.arrowWidth()/2+"px").style("border-left-width","0px").style("border-right-width",`${this.arrowHeight()}px`);break;case"w":o=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+2*this.padding(),r="border-left-color",this._arrowElement.style("border-top-width",this.arrowWidth()/2+"px").style("border-bottom-width",this.arrowWidth()/2+"px").style("border-left-width",`${this.arrowHeight()}px`).style("border-right-width","0px")}return void 0!==o&&void 0!==i?this._arrowElement.style("top",o+"px").style("left",i+"px").style(r,this.tooltipColor()).style("opacity",1):this._arrowElement.style("opacity",0),t}getReferenceNode(){return this._triggerElement?this._triggerElement.node():this.element().node().parentNode.parentNode}_cursorLoc;calcReferenceBBox(){const t=this.getReferenceNode();let{top:e,left:o,width:i,height:r}=t.getBoundingClientRect();const s=this.tooltipWidth(),l=this.tooltipHeight(),n=s/2,h=l/2,a=this.arrowHeight(),p=this.padding(),d=2*p;this.followCursor()&&this._cursorLoc&&(o=this._cursorLoc[0],e=this._cursorLoc[1],i=1,r=1);return{n:{x:o+i/2-n-p,y:e-l-a-d},e:{x:o+i+a,y:e+r/2-h-p},s:{x:o+i/2-n-p,y:e+r+a},w:{x:o-s-a-d,y:e+r/2-h-p},nw:{x:o-s-d,y:e-l-d},ne:{x:o+i,y:e-l-d},se:{x:o+i,y:e+r},sw:{x:o-s-d,y:e+r}}}_closing=!1;mouseout(){this._closing=!0,this._tooltipElement.on("mouseover",()=>{this._closing=!1}),this._tooltipElement.on("mouseout",()=>{this.mouseout()}),setTimeout(()=>{this._closing&&this.visible(!1)},this.closeDelay())}visible(t){return arguments.length?(this._arrowElement&&(this._arrowElement.style("visibility",t?"visible":"hidden"),this._tooltipElement.style("visibility",t?"visible":"hidden")),super.visible(t),this):super.visible()}exit(t,e){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,e)}};e(d,"HTMLTooltip");let c=d;c.prototype._class+=" html_HTMLTooltip",c.prototype.publish("fitContent",!1,"boolean","If true, tooltip will grow to fit its html content"),c.prototype.publish("followCursor",!1,"boolean","If true, tooltip will display relative to cursor location"),c.prototype.publish("closeDelay",400,"number","Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)"),c.prototype.publish("direction","n","set","Direction in which to display the tooltip",["n","s","e","w","ne","nw","se","sw"]),c.prototype.publish("padding",8,"number","Padding (pixels)"),c.prototype.publish("arrowWidth",16,"number","Width (or height depending on direction) of the tooltip arrow (pixels)"),c.prototype.publish("arrowHeight",8,"number","Height (or width depending on direction) of the tooltip arrow (pixels)"),c.prototype.publish("fontColor","#FFF","html-color","The default font color for text in the tooltip"),c.prototype.publish("tooltipColor","#000000EE","html-color","Background color of the tooltip"),c.prototype.publish("tooltipWidth",200,"number","Width of the tooltip (not including arrow) (pixels)"),c.prototype.publish("tooltipHeight",200,"number","Height of the tooltip (not including arrow) (pixels)"),c.prototype.publish("enablePointerEvents",!1,"boolean","If true, the 'pointer-events: all' style will be used");const u=class _SimpleTable extends i{_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,e){super.enter(t,e),this._table=e.append("table"),this._thead=this._table.append("thead"),this._theadRow=this._thead.append("tr"),this._tbody=this._table.append("tbody")}update(t,e){super.update(t,e),this._table.style("width",this.autoWidth()?"auto":"100%");const o=this._theadRow.selectAll("th").data(this.columns());o.enter().append("th").attr("class",(t,e)=>`th-${e}`).merge(o).text(t=>t.toString()),o.exit().remove();const i=this._tbody.selectAll("tr").data(this.transformData());i.enter().append("tr").merge(i).each(function(t){const e=r(this).selectAll("td").data(t);e.enter().append("td").attr("class",(t,e)=>`col-${e}`).merge(e).text(t=>t.toString()),e.exit().remove()}),i.exit().remove()}};e(u,"SimpleTable");let g=u;g.prototype._class+=" html_SimpleTable",g.prototype.publish("autoWidth",!1,"boolean","If true, table width will be set to 'auto'. If false, the width is set to '100%'");const y=class _StyledTable extends g{constructor(){super()}applyStyleObject(t,e){Object.keys(e).forEach(o=>{t.style(o,e[o])})}update(t,e){super.update(t,e),e.selectAll("tr,th,td").attr("style","").style("font-family",this.fontFamily()).style("color",this.fontColor()),this.theadColumnStyles().forEach((t,o)=>{this.applyStyleObject(e.select(`.th-${o}`),t)}),this.tbodyColumnStyles().forEach((t,o)=>{this.applyStyleObject(e.selectAll(`.col-${o}`),t)});const o=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,r=e.selectAll("tbody > tr");if(o){const t=r.select(function(t,e){return e%2?this:null});this.applyStyleObject(t,this.evenRowStyles())}if(i){const t=r.select(function(t,e,o){return e===o.length-1?this:null});this.applyStyleObject(t,this.lastRowStyles())}}};e(y,"StyledTable");let b=y;b.prototype._class+=" html_StyledTable",b.prototype.publish("fontFamily","Verdana","string","Base font-family used within the table"),b.prototype.publish("fontColor","#333","string","Base font color used within the table"),b.prototype.publish("theadColumnStyles",[],"array",'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])'),b.prototype.publish("tbodyColumnStyles",[],"array",'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])'),b.prototype.publish("lastRowStyles",{},"object",'Object containing styles for the last row (ex: {"color":"red"})'),b.prototype.publish("evenRowStyles",{},"object",'Object containing styles for even rows (ex: {"background-color":"#AAA"})');const m=class _BreakdownTable extends b{_tooltip;constructor(){super()}transformData(){const t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){const e=this.data().length,o=this.data().reduce((t,e)=>t+e[1],0),i=[];let r=0;this.data().sort((t,e)=>t[1]>e[1]?-1:1);const s=e-t>0;if(this.data().filter((e,o)=>!s||o<t-1).forEach(t=>{const e=Math.round(t[1]/o*100);r+=e,i.push([t[0],e+"%"])}),s){const o=`${this.otherLabel()} (${e-t+1})`,s="~"+(100-r)+"%";i.push([o,s])}return i}calculateRowCount(){const t=this.columns().length>0?this.thFontSize()+5:0,e=this.fontSize()+5,o=this.height()-t;return Math.floor(o/e)}enter(t,e){super.enter(t,e),this._tooltip=(new c).target(t),this._tooltip.tooltipHTML(t=>{const e=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),o=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),i=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).width)),r=2*(i+30)+2*this._tooltip.padding(),s=o*Math.ceil((t.length-e)/2)+2*this._tooltip.padding();this._tooltip.tooltipWidth(r),this._tooltip.tooltipHeight(s);const l=this.breakdownData(this.data().length).slice(e-1);return`<div style="\n width: 100%;\n height: 100%;\n font-size: ${this.fontSize()}px;\n ">${l.map(t=>`<div style="\n float:left;\n width:${Math.floor(49.5)}%;\n ">${t[0]}: ${t[1]}</div>`).join("")}</div>`})}update(t,e){this.theadColumnStyles_default([{color:this.thFirstColor(),"font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.labelAlignment(),width:"auto",padding:"0px"},{width:"1%","font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.percentageAlignment(),padding:"0px"}]),this.tbodyColumnStyles_default([{color:this.topLabelColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.topPercentageColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),this.lastRowStyles_default([{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherLabelBold()?"bold":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherPercentageBold()?"bold":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),super.update(t,e);if((this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount())<this.data().length){const t=e.select("tbody > tr:last-child"),o=this;t.on("mouseout.tooltip",e=>{o._tooltip._triggerElement=t,o._tooltip.visible(!1).render()}).on("mouseenter.tooltip",e=>{o._tooltip._triggerElement=t,o._tooltip.direction("n").data(o.data()).visible(!0).render()})}}};e(m,"BreakdownTable");let f=m;f.prototype._class+=" html_BreakdownTable",f.prototype.publish("useCalculatedRowCount",!0,"boolean","If true, rowCount will be calculated and its default will be overwritten"),f.prototype.publish("rowCount",5,"number","Number of total rows to display (including the 'other' row)",void 0,{disable:/* @__PURE__ */e(t=>t.useCalculatedRowCount(),"disable")}),f.prototype.publish("fontSize",14,"number","Font size (pixels)"),f.prototype.publish("labelAlignment","left","set","Alignment of the label column text",["left","center","right"]),f.prototype.publish("percentageAlignment","center","set","Alignment of the percentage column text",["left","center","right"]),f.prototype.publish("topLabelColor","#333","html-color","Color of displayed 'top' labels"),f.prototype.publish("topPercentageColor","#1A99D5","html-color","Color of displayed 'top' percentages"),f.prototype.publish("topPercentageBold",!0,"html-color","If true, the 'top' percentages will be bold"),f.prototype.publish("otherLabel","Other","string","Label text for the 'other' row"),f.prototype.publish("otherLabelColor","#AAA","html-color","Color of the 'other' label"),f.prototype.publish("otherLabelBold",!1,"html-color","If true, the 'other' label will be bold"),f.prototype.publish("otherPercentageColor","#AAA","html-color","Color of the 'other' percentage"),f.prototype.publish("otherPercentageBold",!1,"html-color","If true, the 'other' percentage will be bold"),f.prototype.publish("thFontWeight","bold","string","Font weight for th elements"),f.prototype.publish("thFontSize",26,"number","Font size for th elements"),f.prototype.publish("thFirstColor","#333","html-color","Text color of the first th element"),f.prototype.publish("thLastColor","#333","html-color","Text color of the last th element");const _=class _JSXWidget extends i{rootNode;jsxRender(t,e){this.rootNode=n.render(t,e,this.rootNode)}};e(_,"JSXWidget"),o(_,"Component",n.Component),o(_,"createElement",n.createElement);let w=_;w.prototype._class+=" html_JSXWidget";const x=class _VNode{_attrs;_children;constructor(t,e){this._attrs=t,this._children=e}type(){return"div"}attrs(){return this._attrs}attr(t){return this._attrs[t]}children(){return this._children}update(t){for(const e in this._attrs)t.attr(e,this._attrs[e])}render(t){const e=t.selectAll(`${t.node().tagName} > *`).data([this]);return e.exit().remove(),e.enter().append(this.type()).attr("reactd3",0).merge(e).each(function(t){const e=r(this);t.update(e),t.renderChildren(e)})}renderChildren(t){const e=t.selectAll(`${t.node().tagName} > *`).data(this._children);return e.exit().remove(),e.enter().append(t=>document.createElement(t.type())).attr("reactd3",(t,e)=>e).merge(e).each(function(t){const e=r(this);t.update(e),t.renderChildren(e)})}};e(x,"VNode");let C=x;const v=class _ConstVNode extends C{_type;constructor(t,e,o){super(e,o),this._type=t}type(){return this._type}};e(v,"ConstVNode");let S=v;const E=class _TextVNode extends C{_text;constructor(t){super({},[]),this._text=t}type(){return"span"}update(t){super.update(t),t.text(this._text)}};e(E,"TextVNode");let T=E;function W(t){return"function"==typeof t}function R(t){return t.prototype&&t.prototype instanceof C}e(W,"isReactFn"),e(R,"isIVNode");const A=class _ReactD3{static createElement(t,e,...o){return R(t)?new t(e):W(t)?t(e):new S(t,e,o.map(t=>"string"==typeof t?new T(t):t))}static render(t,e){t.render(e)}};e(A,"ReactD3");let B=A;var F;F={__e:/* @__PURE__ */e(function(t,e,o,i){for(var r,s,l;e=e.__;)if((r=e.__c)&&!r.__)try{if((s=r.constructor)&&null!=s.getDerivedStateFromError&&(r.setState(s.getDerivedStateFromError(t)),l=r.__d),null!=r.componentDidCatch&&(r.componentDidCatch(t,i||{}),l=r.__d),l)return r.__E=r}catch(n){t=n}throw t},"__e")},"function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout;var k=0;function H(t,e,o,i,r,s){e||(e={});var l,n,h=e;if("ref"in h)for(n in h={},e)"ref"==n?l=e[n]:h[n]=e[n];var a={type:t,props:h,key:o,ref:l,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--k,__i:-1,__u:0,__source:r,__self:s};return F.vnode&&F.vnode(a),a}e(H,"u");const z=class _VizComponent extends w.Component{widget;refreshProps(){for(const t in this.props)this.widget[t]&&"function"==typeof this.widget[t]&&this.widget[t](this.props[t])}componentDidMount(){this.widget=(new this.props.type).target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){/* @__PURE__ */
2
+ return H("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};e(z,"VizComponent");let N=z;const L=class _VizInstance extends w.Component{widget;refreshProps(){for(const t in this.props)this.widget[t]&&"function"==typeof this.widget[t]&&this.widget[t](this.props[t])}componentDidMount(){this.widget=this.props.instance.target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){/* @__PURE__ */
3
+ return H("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};e(L,"VizInstance");let D=L;const M=class _StatsTable extends b{transformData(){const t=[["Total",0,0]],e=this.data();return e.forEach(e=>{t[0][1]+=e[1],t[0][2]+=e[2]}),e.concat(t).map(t=>[t[0],this.secondColumnFormat_exists()?s(this.secondColumnFormat())(t[1]):t[1],this.thirdColumnFormat_exists()?s(this.thirdColumnFormat())(t[2]):t[2]])}update(t,e){this.tbodyColumnStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left"},{width:this.secondColumnWidth(),"text-align":"right"},{width:this.thirdColumnWidth(),"text-align":"right"}]),this.evenRowStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.secondColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.thirdColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()}]),this.lastRowStyles_default({"font-weight":"bold"}),super.update(t,e)}};e(M,"StatsTable");let P=M;P.prototype._class+=" html_StatsTable",P.prototype.publish("labelColor","#333","html-color","Color of the text in the first column"),P.prototype.publish("primaryValueColor","#333","html-color","Color of the text in the second column"),P.prototype.publish("secondaryValueColor","#333","html-color","Color of the text in the third column"),P.prototype.publish("evenRowBackgroundColor","#333","html-color","Background color of the even rows"),P.prototype.publish("evenRowFontColor","#333","html-color","Font color of the even rows"),P.prototype.publish("firstColumnWidth","auto","string","CSS style applied as the 'width' for the first column (ex: 40px)"),P.prototype.publish("secondColumnWidth","1%","string","CSS style applied as the 'width' for the second column (ex: 40px)"),P.prototype.publish("thirdColumnWidth","1%","string","CSS style applied as the 'width' for the third column (ex: 40px)"),P.prototype.publish("secondColumnFormat","$,.0f","string","d3-format specifier applied to the second column's values",void 0,{optional:!0}),P.prototype.publish("thirdColumnFormat",null,"string","d3-format specifier applied to the third column's values",void 0,{optional:!0});const j=class _Item extends i{_owner;constructor(t){super(),this._owner=t,this._tag="a"}};e(j,"Item");let $=j;$.prototype._class+=" html_Item";const I=class _Button extends ${_icon;constructor(t,e){super(t),this._icon=e}icon(){return this._icon}enter(t,e){super.enter(t,e),e.attr("href","#").on("click",(t,e,o)=>this._owner.titleBarClick(this,t,e,o)).append("i").attr("class",`fa ${this._icon} fa-lg fa-fw`)}};e(I,"Button");let V=I;V.prototype._class+=" html_Button";const O=class _ToggleButton extends V{enter(t,e){e.on("click.sel",(t,e,o)=>{this.selected(!this.selected()),this.render()}),super.enter(t,e)}update(t,e){super.update(t,e),this._element.classed("selected",this.selected())}};e(O,"ToggleButton");let U=O;U.prototype._class+=" html_ToggleButton",U.prototype.publish("selected",!1,"boolean");const J=class _Spacer extends ${enter(t,e){super.enter(t,e),e.attr("class","spacer").attr("href","#").append("i")}};e(J,"Spacer");let X=J;X.prototype._class+=" html_Spacer";const q=class _TitleBar extends w{_divMain;_divIconBar;_divTitle;constructor(){super()}enter(t,e){super.enter(t,e),this._divMain=e.append("div").attr("class","main"),this._divIconBar=this._divMain.append("div").attr("class","icon-bar"),this._divTitle=this._divMain.append("div").attr("class","title")}update(t,e){super.update(t,e),this._divTitle.text(this.title());const o=this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());o.enter().append("div").attr("class","icon-bar-item").each(function(t){t.target(this)}).merge(o).each(function(t){t.render()}),o.exit().each(function(t){t.target(null)}).remove(),o.order()}};e(q,"TitleBar");let G=q;G.prototype._class+=" html_TitleBar",G.prototype.publish("title","","string"),G.prototype.publish("buttons",[],"widgetArray");export{p as BUILD_VERSION,f as BreakdownTable,V as Button,c as HTMLTooltip,$ as Item,w as JSXWidget,h as PKG_NAME,a as PKG_VERSION,B as ReactD3,g as SimpleTable,X as Spacer,P as StatsTable,b as StyledTable,G as TitleBar,U as ToggleButton,C as VNode,N as VizComponent,D as VizInstance};
4
+ //# sourceMappingURL=index.js.map
5
+ !function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode("#wrap{width:100%}#left,#right{padding:5px}#left{background-color:red;text-align:left;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#right{background-color:orange;float:right;text-align:right;white-space:nowrap}.html_TitleBar>.main{width:100%;display:block}.html_TitleBar .title{padding:4px;text-align:left;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:20px;font-weight:700}.html_TitleBar .icon-bar{padding:4px;float:right;text-align:right;white-space:nowrap;line-height:28px}.html_TitleBar .icon-bar-item{display:inline}.html_TitleBar .icon-bar-item>div{display:inline}.html_TitleBar .icon-bar a{text-align:center;padding-top:4px;padding-bottom:4px;transition:all .3s ease;color:#a9a9a9}.html_TitleBar .icon-bar a:hover{background-color:#f5f5f5}.html_TitleBar .icon-bar a.selected{background-color:#efe5e5}.html_TitleBar .icon-bar a.spacer{text-align:center;padding-top:2px;padding-left:8px;padding-bottom:0;color:none}.html_TitleBar .icon-bar a.spacer:hover{background-color:transparent}.html_TitleBar .icon-bar .active{background-color:#4caf50}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();