@hpcc-js/composite 3.5.5 → 3.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +43 -43
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +14 -12
- package/src/ChartPanel.css +26 -26
- package/src/ChartPanel.ts +80 -80
- package/src/Dermatology.css +37 -37
- package/src/Dermatology.ts +101 -101
- package/src/MegaChart.css +5 -5
- package/src/MegaChart.ts +504 -504
- package/src/MultiChart.ts +376 -376
- package/src/MultiChartSurface.ts +68 -68
- package/src/Persist.ts +131 -131
- package/src/Utility.ts +21 -21
- package/src/__package__.ts +3 -3
- package/src/index.ts +9 -9
package/src/MegaChart.ts
CHANGED
|
@@ -1,504 +1,504 @@
|
|
|
1
|
-
import { Database, Text, Utility } from "@hpcc-js/common";
|
|
2
|
-
import { Button, Input, Select } from "@hpcc-js/form";
|
|
3
|
-
import { Border, Grid, Toolbar } from "@hpcc-js/layout";
|
|
4
|
-
import { Html, Legend } from "@hpcc-js/other";
|
|
5
|
-
import { select as d3Select } from "d3-selection";
|
|
6
|
-
import "d3-transition";
|
|
7
|
-
import { MultiChart } from "./MultiChart.ts";
|
|
8
|
-
|
|
9
|
-
import "../src/MegaChart.css";
|
|
10
|
-
|
|
11
|
-
export class MegaChart extends Border {
|
|
12
|
-
_chart = new MultiChart();
|
|
13
|
-
_toolbar = new Toolbar();
|
|
14
|
-
_valueTitle = new Text();
|
|
15
|
-
_domainTitle = new Text();
|
|
16
|
-
_legend: Legend = new Legend();
|
|
17
|
-
_csvButton;
|
|
18
|
-
_infoButton;
|
|
19
|
-
_maximizeButton;
|
|
20
|
-
_legendButton;
|
|
21
|
-
_chartTypeSelect;
|
|
22
|
-
_prevLegendPosition;
|
|
23
|
-
_prevShowToolbar;
|
|
24
|
-
_1DChartTypes;
|
|
25
|
-
_2DChartTypes;
|
|
26
|
-
_NDChartTypes;
|
|
27
|
-
_anyChartTypes;
|
|
28
|
-
_allChartTypes;
|
|
29
|
-
_contentClasses;
|
|
30
|
-
_dataCount;
|
|
31
|
-
|
|
32
|
-
constructor() {
|
|
33
|
-
super();
|
|
34
|
-
this._tag = "div";
|
|
35
|
-
const context = this;
|
|
36
|
-
this._chart.click = function () {
|
|
37
|
-
context.click.apply(context, arguments);
|
|
38
|
-
};
|
|
39
|
-
this._chart.dblclick = function () {
|
|
40
|
-
context.dblclick.apply(context, arguments);
|
|
41
|
-
};
|
|
42
|
-
this._chart.vertex_click = function () {
|
|
43
|
-
context.vertex_click.apply(context, arguments);
|
|
44
|
-
};
|
|
45
|
-
this._chart.vertex_dblclick = function () {
|
|
46
|
-
context.vertex_dblclick.apply(context, arguments);
|
|
47
|
-
};
|
|
48
|
-
this._chart.edge_click = function () {
|
|
49
|
-
context.edge_click.apply(context, arguments);
|
|
50
|
-
};
|
|
51
|
-
this._chart.edge_dblclick = function () {
|
|
52
|
-
context.edge_dblclick.apply(context, arguments);
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
toolbarWidgets(_?) {
|
|
57
|
-
if (!arguments.length) return this._toolbar.widgets();
|
|
58
|
-
this._toolbar.widgets(_);
|
|
59
|
-
return this;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
chartTypeDefaults(_?) {
|
|
63
|
-
if (!arguments.length) return this._chart.chartTypeDefaults();
|
|
64
|
-
this._chart.chartTypeDefaults(_);
|
|
65
|
-
return this;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
chartTypeProperties(_?) {
|
|
69
|
-
if (!arguments.length) return this._chart.chartTypeProperties();
|
|
70
|
-
this._chart.chartTypeProperties(_);
|
|
71
|
-
return this;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
fields(): Database.Field[];
|
|
75
|
-
fields(_: Database.Field[]): this;
|
|
76
|
-
fields(_?: Database.Field[]): Database.Field[] | this {
|
|
77
|
-
if (!arguments.length) return this._chart.fields();
|
|
78
|
-
this._chart.fields(_);
|
|
79
|
-
return this;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
columns(): string[];
|
|
83
|
-
columns(_: string[], asDefault?: boolean): this;
|
|
84
|
-
columns(_?: string[], asDefault?: boolean): string[] | this {
|
|
85
|
-
if (!arguments.length) return this._chart.columns();
|
|
86
|
-
this._chart.columns(_, asDefault);
|
|
87
|
-
return this;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
data(_?) {
|
|
91
|
-
if (!arguments.length) return this._chart.data();
|
|
92
|
-
this._chart.data(_);
|
|
93
|
-
return this;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
downloadCSV() {
|
|
97
|
-
Utility.downloadString("CSV", this._chart.export("CSV"));
|
|
98
|
-
return this;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
enter(domNode, element) {
|
|
102
|
-
super.enter(domNode, element);
|
|
103
|
-
const context = this;
|
|
104
|
-
|
|
105
|
-
this.topShrinkWrap(false).topPercentage(0).topSize(30);
|
|
106
|
-
this._dataCount = new Html()
|
|
107
|
-
.classed({ "composite_MegaChart-dataCount": true })
|
|
108
|
-
.id(this.id() + "_dataCount")
|
|
109
|
-
.html('<span class="MegaChart-dataCount-label">Count:</span> <span class="MegaChart-dataCount-value">' + (this.data() ? this.data().length : "0") + "</span>")
|
|
110
|
-
.overflowX("visible")
|
|
111
|
-
.overflowY("visible")
|
|
112
|
-
;
|
|
113
|
-
|
|
114
|
-
this._csvButton = new Button()
|
|
115
|
-
.classed({ "composite_MegaChart-CSV": true })
|
|
116
|
-
.id(this.id() + "_csv")
|
|
117
|
-
.value("CSV")
|
|
118
|
-
;
|
|
119
|
-
this._csvButton.click = function (a) {
|
|
120
|
-
context.downloadCSV();
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
this._infoButton = new Button()
|
|
124
|
-
.classed({ "composite_MegaChart-Info": true })
|
|
125
|
-
.id(this.id() + "_info")
|
|
126
|
-
.value(this.infoIcon())
|
|
127
|
-
;
|
|
128
|
-
|
|
129
|
-
this._maximizeButton = new Button()
|
|
130
|
-
.classed({ "composite_MegaChart-Maximize": true })
|
|
131
|
-
.id(this.id() + "_maximize")
|
|
132
|
-
.value("\uf2d0")
|
|
133
|
-
;
|
|
134
|
-
this._maximizeButton.click = function (buttonWidget) {
|
|
135
|
-
const target = context.target() as any;
|
|
136
|
-
let node
|
|
137
|
-
const isMaximized = d3Select(target).classed("__hpccisMaximized");
|
|
138
|
-
|
|
139
|
-
// Find the layout_Grid ancestor
|
|
140
|
-
const parentGrid = context.locateAncestor("layout_Grid");
|
|
141
|
-
if (parentGrid) {
|
|
142
|
-
node = parentGrid.element().node();
|
|
143
|
-
} else {
|
|
144
|
-
node = document.body;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
const targetElement = d3Select(context.target()) as any;
|
|
148
|
-
if (isMaximized) {
|
|
149
|
-
// Restore from maximized to natural size/position
|
|
150
|
-
const targetParentBox = target.parentElement.getBoundingClientRect();
|
|
151
|
-
const targetPaddingTop = parseInt(getComputedStyle(target, null).getPropertyValue("padding-top").replace("px", ""));
|
|
152
|
-
const targetPaddingLeft = parseInt(getComputedStyle(target, null).getPropertyValue("padding-left").replace("px", ""));
|
|
153
|
-
const targetPaddingRight = parseInt(getComputedStyle(target, null).getPropertyValue("padding-right").replace("px", ""));
|
|
154
|
-
const targetPaddingBottom = parseInt(getComputedStyle(target, null).getPropertyValue("padding-bottom").replace("px", ""));
|
|
155
|
-
context.contentDiv.style("opacity", 0).transition(100);
|
|
156
|
-
targetElement.transition()// .duration(3000)
|
|
157
|
-
.style("top", targetParentBox.top + "px")
|
|
158
|
-
.style("left", targetParentBox.left + "px")
|
|
159
|
-
.style("width", (targetParentBox.width - targetPaddingLeft - targetPaddingRight) + "px")
|
|
160
|
-
.style("height", (targetParentBox.height - targetPaddingTop - targetPaddingBottom) + "px")
|
|
161
|
-
.each("end", function () {
|
|
162
|
-
targetElement.style("position", target.__old_position);
|
|
163
|
-
targetElement.style("z-index", target.__old_zindex);
|
|
164
|
-
targetElement.style("background-color", target.__old_backgroundColor);
|
|
165
|
-
targetElement.style("box-shadow", target.__old_boxshadow);
|
|
166
|
-
context
|
|
167
|
-
.resize({
|
|
168
|
-
width: targetParentBox.width - targetPaddingLeft - targetPaddingRight,
|
|
169
|
-
height: targetParentBox.height - targetPaddingTop - targetPaddingBottom
|
|
170
|
-
})
|
|
171
|
-
.render(function () {
|
|
172
|
-
context.contentDiv.transition()
|
|
173
|
-
.style("opacity", 1);
|
|
174
|
-
});
|
|
175
|
-
buttonWidget.value("\uf2d0").render();
|
|
176
|
-
});
|
|
177
|
-
} else {
|
|
178
|
-
// Maximize this MegaChart
|
|
179
|
-
target.__old_position = target.style.position;
|
|
180
|
-
target.__old_zindex = target.style.zIndex;
|
|
181
|
-
target.__old_boxshadow = target.style.boxShadow;
|
|
182
|
-
target.__old_backgroundColor = context.element().style("background-color");
|
|
183
|
-
const grid = d3Select(node).datum() as Grid;
|
|
184
|
-
const gridTarget = grid.target();
|
|
185
|
-
const gridBox = grid ? gridTarget.getBoundingClientRect() : node.getBoundingClientRect();
|
|
186
|
-
const gridPaddingTop = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-top").replace("px", ""));
|
|
187
|
-
const gridPaddingLeft = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-left").replace("px", ""));
|
|
188
|
-
const gridPaddingRight = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-right").replace("px", ""));
|
|
189
|
-
const gridPaddingBottom = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-bottom").replace("px", ""));
|
|
190
|
-
context.contentDiv.style("opacity", 0).transition(100);
|
|
191
|
-
targetElement
|
|
192
|
-
.style("position", "fixed")
|
|
193
|
-
.style("z-index", 999999)
|
|
194
|
-
.style("box-shadow", "0 8px 8px 0 rgba(0,0,0,.14),0 12px 4px -8px rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.12)")
|
|
195
|
-
.style("background-color", target.__old_backgroundColor)
|
|
196
|
-
.transition()// .duration(3000)
|
|
197
|
-
.style("top", (gridBox.top + gridPaddingTop) + "px")
|
|
198
|
-
.style("left", (gridBox.left + gridPaddingLeft) + "px")
|
|
199
|
-
.style("width", (gridBox.width - gridPaddingLeft - gridPaddingRight) + "px")
|
|
200
|
-
.style("height", (gridBox.height - gridPaddingTop - gridPaddingBottom) + "px")
|
|
201
|
-
.each("end", function () {
|
|
202
|
-
targetElement.style("background-color", context.maximizedBackgroundColor());
|
|
203
|
-
context
|
|
204
|
-
.resize({
|
|
205
|
-
width: (gridBox.width - gridPaddingLeft - gridPaddingRight),
|
|
206
|
-
height: (gridBox.height - gridPaddingTop - gridPaddingBottom)
|
|
207
|
-
})
|
|
208
|
-
.render(function () {
|
|
209
|
-
context.contentDiv.transition()
|
|
210
|
-
.style("opacity", 1);
|
|
211
|
-
});
|
|
212
|
-
buttonWidget.value("\uf2d1").render();
|
|
213
|
-
});
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
d3Select(target).classed("__hpccisMaximized", !isMaximized);
|
|
217
|
-
};
|
|
218
|
-
|
|
219
|
-
this._legendButton = new Input()
|
|
220
|
-
.classed({ "composite_MegaChart-legend": true })
|
|
221
|
-
.id(this.id() + "_legend")
|
|
222
|
-
.type("checkbox")
|
|
223
|
-
.inlineLabel("Legend: ")
|
|
224
|
-
;
|
|
225
|
-
this._legendButton.click = function (a) {
|
|
226
|
-
context.render();
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
this._chartTypeSelect = new Select()
|
|
230
|
-
.classed({ "composite_MegaChart-chartType": true })
|
|
231
|
-
.id(this.id() + "_chartType")
|
|
232
|
-
.selectOptions(this._allChartTypes.map(function (a) { return [a.id, a.display]; }))
|
|
233
|
-
.value(this.chartType())
|
|
234
|
-
;
|
|
235
|
-
this._chartTypeSelect.change = function (a) {
|
|
236
|
-
context.chartType(a.value()).render();
|
|
237
|
-
};
|
|
238
|
-
|
|
239
|
-
this.setContent("center", this._chart);
|
|
240
|
-
|
|
241
|
-
this._legend
|
|
242
|
-
.targetWidget(this._chart)
|
|
243
|
-
.orientation(["top", "bottom"].indexOf(this.legendPosition()) !== -1 ? "horizontal" : "vertical")
|
|
244
|
-
.fixedSize(true)
|
|
245
|
-
;
|
|
246
|
-
|
|
247
|
-
this._prevLegendPosition = this.legendPosition();
|
|
248
|
-
|
|
249
|
-
if (this.valueAxisTitle()) {
|
|
250
|
-
this.setContent("left", this._valueTitle.rotation(-90)).leftShrinkWrap(true);
|
|
251
|
-
}
|
|
252
|
-
if (this.domainAxisTitle()) {
|
|
253
|
-
this.setContent("bottom", this._domainTitle).bottomShrinkWrap(true);
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
if (this.legendPosition() !== "none") {
|
|
257
|
-
this.setContent(this.legendPosition(), this._legend)[this.legendPosition() + "ShrinkWrap"](true);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
update(domNode, element) {
|
|
262
|
-
function showHideButton(twArr2, button, show) {
|
|
263
|
-
if (show && twArr2.indexOf(button) === -1) {
|
|
264
|
-
twArr2.push(button);
|
|
265
|
-
} else if (!show) {
|
|
266
|
-
const idx = twArr2.indexOf(button);
|
|
267
|
-
if (idx >= 0) {
|
|
268
|
-
twArr2.splice(idx, 1);
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
if (this._chart && typeof this._chart.hideRowOnLegendClick === "function") {
|
|
274
|
-
this._chart.hideRowOnLegendClick(this.hideRowOnLegendClick());
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
this._dataCount.html('<span class="MegaChart-dataCount-label">Count:</span> <span class="MegaChart-dataCount-value">' + (this.data() ? this.data().length : "0") + "</span>");
|
|
278
|
-
|
|
279
|
-
this._chartTypeSelect.value(this.chartType());
|
|
280
|
-
const twArr = this.toolbarWidgets();
|
|
281
|
-
showHideButton(twArr, this._csvButton, this.showCSV());
|
|
282
|
-
showHideButton(twArr, this._maximizeButton, this.showMaximize());
|
|
283
|
-
showHideButton(twArr, this._legendButton, this.toolbarShowLegend());
|
|
284
|
-
showHideButton(twArr, this._chartTypeSelect, this.showChartSelect());
|
|
285
|
-
showHideButton(twArr, this._infoButton, this.showInfoButton());
|
|
286
|
-
showHideButton(twArr, this._dataCount, this.showCount());
|
|
287
|
-
this.toolbarWidgets(twArr);
|
|
288
|
-
|
|
289
|
-
if (this._prevShowToolbar !== this.showToolbar()) {
|
|
290
|
-
this.setContent("top", this.showToolbar() ? this._toolbar : null);
|
|
291
|
-
this._prevShowToolbar = this.showToolbar();
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
// TODO: Proxy + themes not working...
|
|
295
|
-
this._toolbar
|
|
296
|
-
.fontSize(this.titleFontSize())
|
|
297
|
-
.fontColor(this.titleFontColor())
|
|
298
|
-
.fontFamily(this.titleFontFamily())
|
|
299
|
-
.fontBold(this.titleFontBold())
|
|
300
|
-
.backgroundColor(this.titleBackgroundColor())
|
|
301
|
-
;
|
|
302
|
-
|
|
303
|
-
this._chart
|
|
304
|
-
.data(this.data());
|
|
305
|
-
|
|
306
|
-
if (this._chart.chartType() !== this.chartType()) {
|
|
307
|
-
this._chart.chartType(this.chartType());
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
let legendPosition = this.legendPosition();
|
|
311
|
-
if (this.toolbarShowLegend() && !this._legendButton.checked()) {
|
|
312
|
-
legendPosition = "none";
|
|
313
|
-
}
|
|
314
|
-
if (this._prevLegendPosition !== legendPosition) {
|
|
315
|
-
if (this._prevLegendPosition !== "none") {
|
|
316
|
-
this.clearContent(this._prevLegendPosition);
|
|
317
|
-
}
|
|
318
|
-
this._prevLegendPosition = legendPosition;
|
|
319
|
-
if (legendPosition !== "none") {
|
|
320
|
-
this._legend = new Legend().targetWidget(this.getContent("center").fixedSize(true));
|
|
321
|
-
this.setContent(legendPosition, this._legend);
|
|
322
|
-
this._legend.orientation(["top", "bottom"].indexOf(legendPosition) !== -1 ? "horizontal" : "vertical");
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
this._contentClasses = this.getContentClasses();
|
|
326
|
-
|
|
327
|
-
if (this.valueAxisTitle() && this._contentClasses.left !== "common_Text") {
|
|
328
|
-
if (legendPosition !== "left") {
|
|
329
|
-
this.setContent("left", this._valueTitle.rotation(-90));
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
if (this.domainAxisTitle() && this._contentClasses.bottom !== "common_Text") {
|
|
333
|
-
if (legendPosition !== "bottom") {
|
|
334
|
-
this.setContent("bottom", this._domainTitle).bottomShrinkWrap(true);
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
this._legend.dataFamily(this._chart.getChartDataFamily());
|
|
339
|
-
|
|
340
|
-
super.update(domNode, element);
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
exit(domNode, element) {
|
|
344
|
-
super.exit(domNode, element);
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
getContentClasses() {
|
|
348
|
-
const obj: any = {};
|
|
349
|
-
const t = this.getContent("top");
|
|
350
|
-
const r = this.getContent("right");
|
|
351
|
-
const b = this.getContent("bottom");
|
|
352
|
-
const l = this.getContent("left");
|
|
353
|
-
obj.top = t !== null ? t.classID() : undefined;
|
|
354
|
-
obj.right = r !== null ? r.classID() : undefined;
|
|
355
|
-
obj.bottom = b !== null ? b.classID() : undefined;
|
|
356
|
-
obj.left = l !== null ? l.classID() : undefined;
|
|
357
|
-
return obj;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
serializeState() {
|
|
361
|
-
const state: any = {
|
|
362
|
-
title: this.title(),
|
|
363
|
-
data: this.data()
|
|
364
|
-
};
|
|
365
|
-
const chart = this.chart();
|
|
366
|
-
if (chart) {
|
|
367
|
-
if (chart.serializeState) {
|
|
368
|
-
state.chart = chart.serializeState();
|
|
369
|
-
delete state.chart.data;
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
return state;
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
deserializeState(state) {
|
|
376
|
-
if (state) {
|
|
377
|
-
this
|
|
378
|
-
.title(state.title)
|
|
379
|
-
.data(state.data)
|
|
380
|
-
;
|
|
381
|
-
const chart = this.chart();
|
|
382
|
-
if (chart && state.chart) {
|
|
383
|
-
if (chart.serializeState) {
|
|
384
|
-
chart.deserializeState(state.chart);
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
return this;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
// Events ---
|
|
392
|
-
click(row, column, selected) {
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
dblclick(row, column, selected) {
|
|
396
|
-
}
|
|
397
|
-
vertex_click(row, col, sel, more) {
|
|
398
|
-
if (more && more.vertex) {
|
|
399
|
-
// console.log("Vertex click: " + more.vertex.id());
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
vertex_dblclick(row, col, sel, more) {
|
|
404
|
-
if (more && more.vertex) {
|
|
405
|
-
// console.log("Vertex double click: " + more.vertex.id());
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
edge_click(row, col, sel, more) {
|
|
410
|
-
if (more && more.edge) {
|
|
411
|
-
// console.log("Edge click: " + more.edge.id());
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
edge_dblclick(row, col, sel, more) {
|
|
416
|
-
if (more && more.edge) {
|
|
417
|
-
// console.log("Edge double click: " + more.edge.id());
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
hideRowOnLegendClick: { (): boolean; (_: boolean): MegaChart };
|
|
422
|
-
hideRowOnLegendClick_exists: () => boolean;
|
|
423
|
-
showToolbar: { (): boolean; (_: boolean): MegaChart };
|
|
424
|
-
showToolbar_exists: () => boolean;
|
|
425
|
-
titleFontSize: { (): number; (_: number): MegaChart };
|
|
426
|
-
titleFontSize_exists: () => boolean;
|
|
427
|
-
titleFontColor: { (): string; (_: string): MegaChart };
|
|
428
|
-
titleFontColor_exists: () => boolean;
|
|
429
|
-
titleFontFamily: { (): string; (_: string): MegaChart };
|
|
430
|
-
titleFontFamily_exists: () => boolean;
|
|
431
|
-
titleFontBold: { (): boolean; (_: boolean): MegaChart };
|
|
432
|
-
titleFontBold_exists: () => boolean;
|
|
433
|
-
titleBackgroundColor: { (): string; (_: string): MegaChart };
|
|
434
|
-
titleBackgroundColor_exists: () => boolean;
|
|
435
|
-
maximizedBackgroundColor: { (): string; (_: string): MegaChart };
|
|
436
|
-
maximizedBackgroundColor_exists: () => boolean;
|
|
437
|
-
showChartSelect: { (): boolean; (_: boolean): MegaChart };
|
|
438
|
-
showChartSelect_exists: () => boolean;
|
|
439
|
-
showCSV: { (): boolean; (_: boolean): MegaChart };
|
|
440
|
-
showCSV_exists: () => boolean;
|
|
441
|
-
showCount: { (): boolean; (_: boolean): MegaChart };
|
|
442
|
-
showCount_exists: () => boolean;
|
|
443
|
-
showMaximize: { (): boolean; (_: boolean): MegaChart };
|
|
444
|
-
showMaximize_exists: () => boolean;
|
|
445
|
-
toolbarShowLegend: { (): boolean; (_: boolean): MegaChart };
|
|
446
|
-
toolbarShowLegend_exists: () => boolean;
|
|
447
|
-
showInfoButton: { (): boolean; (_: boolean): MegaChart };
|
|
448
|
-
showInfoButton_exists: () => boolean;
|
|
449
|
-
infoIcon: { (): string; (_: string): MegaChart };
|
|
450
|
-
infoIcon_exists: () => boolean;
|
|
451
|
-
legendPosition: { (): string; (_: string): MegaChart };
|
|
452
|
-
legendPosition_exists: () => boolean;
|
|
453
|
-
|
|
454
|
-
title: { (): string; (_: string): MegaChart };
|
|
455
|
-
title_exists: () => boolean;
|
|
456
|
-
|
|
457
|
-
domainAxisTitle: { (): string; (_: string): MegaChart };
|
|
458
|
-
domainAxisTitle_exists: () => boolean;
|
|
459
|
-
valueAxisTitle: { (): string; (_: string): MegaChart };
|
|
460
|
-
valueAxisTitle_exists: () => boolean;
|
|
461
|
-
|
|
462
|
-
chartType: { (): string; (_: string): MegaChart };
|
|
463
|
-
chartType_exists: () => boolean;
|
|
464
|
-
chart: { (): any; (_: any): MegaChart };
|
|
465
|
-
chart_exists: () => boolean;
|
|
466
|
-
}
|
|
467
|
-
MegaChart.prototype._class += " composite_MegaChart";
|
|
468
|
-
|
|
469
|
-
MegaChart.prototype._1DChartTypes = MultiChart.prototype._1DChartTypes;
|
|
470
|
-
MegaChart.prototype._2DChartTypes = MultiChart.prototype._2DChartTypes;
|
|
471
|
-
MegaChart.prototype._NDChartTypes = MultiChart.prototype._NDChartTypes;
|
|
472
|
-
MegaChart.prototype._anyChartTypes = MultiChart.prototype._anyChartTypes;
|
|
473
|
-
MegaChart.prototype._allChartTypes = MultiChart.prototype._allChartTypes;
|
|
474
|
-
|
|
475
|
-
MegaChart.prototype.publishReset();
|
|
476
|
-
|
|
477
|
-
MegaChart.prototype.publish("hideRowOnLegendClick", false, "boolean", "Enable/Disable hiding row on legend clicks", null, { tags: ["Basic"] });
|
|
478
|
-
MegaChart.prototype.publish("showToolbar", true, "boolean", "Enable/Disable Toolbar widget", null, { tags: ["Basic"] });
|
|
479
|
-
MegaChart.prototype.publishProxy("title", "_toolbar", "title");
|
|
480
|
-
MegaChart.prototype.publish("ddlParamsFormat", "", "string", "DDL Param Format '{fname}, {lname}'", null, { tags: ["Advanced"], optional: true });
|
|
481
|
-
MegaChart.prototype.publish("titleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
|
|
482
|
-
MegaChart.prototype.publish("titleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
|
|
483
|
-
MegaChart.prototype.publish("titleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
|
|
484
|
-
MegaChart.prototype.publish("titleFontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
|
|
485
|
-
MegaChart.prototype.publish("titleBackgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
|
|
486
|
-
MegaChart.prototype.publish("maximizedBackgroundColor", "#FFFFFF", "html-color", "Background Color while maximized", null, { tags: ["Intermediate"], optional: true });
|
|
487
|
-
|
|
488
|
-
MegaChart.prototype.publish("showChartSelect", true, "boolean", "Show/Hide the chartType dropdown in the toolbar", null, { tags: ["Basic"] });
|
|
489
|
-
MegaChart.prototype.publish("showCSV", true, "boolean", "Show/Hide CSV button", null, { tags: ["Basic"] });
|
|
490
|
-
MegaChart.prototype.publish("showCount", false, "boolean", "Show/Hide Data Count", null, { tags: ["Basic"] });
|
|
491
|
-
MegaChart.prototype.publish("showMaximize", false, "boolean", "Show/Hide Maximize button", null, { tags: ["Basic"] });
|
|
492
|
-
MegaChart.prototype.publish("toolbarShowLegend", false, "boolean", "Show/Hide Legend button", null, { tags: ["Basic"] });
|
|
493
|
-
MegaChart.prototype.publish("showInfoButton", false, "boolean", "Show/Hide Info button in toolbar", null, { tags: ["Basic"] });
|
|
494
|
-
MegaChart.prototype.publish("infoIcon", "\uf05a", "string", "Help Icon", null, { tags: ["Basic"] });
|
|
495
|
-
|
|
496
|
-
MegaChart.prototype.publish("legendPosition", "none", "set", "Position of the Legend widget", ["none", "top", "right", "bottom", "left"], { tags: ["Basic"] });
|
|
497
|
-
MegaChart.prototype.publishProxy("legendFormat", "_legend", "rainbowFormat");
|
|
498
|
-
MegaChart.prototype.publishProxy("legendBins", "_legend", "rainbowBins");
|
|
499
|
-
|
|
500
|
-
MegaChart.prototype.publishProxy("domainAxisTitle", "_domainTitle", "text");
|
|
501
|
-
MegaChart.prototype.publishProxy("valueAxisTitle", "_valueTitle", "text");
|
|
502
|
-
|
|
503
|
-
MegaChart.prototype.publishProxy("chartType", "_chart", "chartType");
|
|
504
|
-
MegaChart.prototype.publishProxy("chart", "_chart", "chart");
|
|
1
|
+
import { Database, Text, Utility } from "@hpcc-js/common";
|
|
2
|
+
import { Button, Input, Select } from "@hpcc-js/form";
|
|
3
|
+
import { Border, Grid, Toolbar } from "@hpcc-js/layout";
|
|
4
|
+
import { Html, Legend } from "@hpcc-js/other";
|
|
5
|
+
import { select as d3Select } from "d3-selection";
|
|
6
|
+
import "d3-transition";
|
|
7
|
+
import { MultiChart } from "./MultiChart.ts";
|
|
8
|
+
|
|
9
|
+
import "../src/MegaChart.css";
|
|
10
|
+
|
|
11
|
+
export class MegaChart extends Border {
|
|
12
|
+
_chart = new MultiChart();
|
|
13
|
+
_toolbar = new Toolbar();
|
|
14
|
+
_valueTitle = new Text();
|
|
15
|
+
_domainTitle = new Text();
|
|
16
|
+
_legend: Legend = new Legend();
|
|
17
|
+
_csvButton;
|
|
18
|
+
_infoButton;
|
|
19
|
+
_maximizeButton;
|
|
20
|
+
_legendButton;
|
|
21
|
+
_chartTypeSelect;
|
|
22
|
+
_prevLegendPosition;
|
|
23
|
+
_prevShowToolbar;
|
|
24
|
+
_1DChartTypes;
|
|
25
|
+
_2DChartTypes;
|
|
26
|
+
_NDChartTypes;
|
|
27
|
+
_anyChartTypes;
|
|
28
|
+
_allChartTypes;
|
|
29
|
+
_contentClasses;
|
|
30
|
+
_dataCount;
|
|
31
|
+
|
|
32
|
+
constructor() {
|
|
33
|
+
super();
|
|
34
|
+
this._tag = "div";
|
|
35
|
+
const context = this;
|
|
36
|
+
this._chart.click = function () {
|
|
37
|
+
context.click.apply(context, arguments);
|
|
38
|
+
};
|
|
39
|
+
this._chart.dblclick = function () {
|
|
40
|
+
context.dblclick.apply(context, arguments);
|
|
41
|
+
};
|
|
42
|
+
this._chart.vertex_click = function () {
|
|
43
|
+
context.vertex_click.apply(context, arguments);
|
|
44
|
+
};
|
|
45
|
+
this._chart.vertex_dblclick = function () {
|
|
46
|
+
context.vertex_dblclick.apply(context, arguments);
|
|
47
|
+
};
|
|
48
|
+
this._chart.edge_click = function () {
|
|
49
|
+
context.edge_click.apply(context, arguments);
|
|
50
|
+
};
|
|
51
|
+
this._chart.edge_dblclick = function () {
|
|
52
|
+
context.edge_dblclick.apply(context, arguments);
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
toolbarWidgets(_?) {
|
|
57
|
+
if (!arguments.length) return this._toolbar.widgets();
|
|
58
|
+
this._toolbar.widgets(_);
|
|
59
|
+
return this;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
chartTypeDefaults(_?) {
|
|
63
|
+
if (!arguments.length) return this._chart.chartTypeDefaults();
|
|
64
|
+
this._chart.chartTypeDefaults(_);
|
|
65
|
+
return this;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
chartTypeProperties(_?) {
|
|
69
|
+
if (!arguments.length) return this._chart.chartTypeProperties();
|
|
70
|
+
this._chart.chartTypeProperties(_);
|
|
71
|
+
return this;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
fields(): Database.Field[];
|
|
75
|
+
fields(_: Database.Field[]): this;
|
|
76
|
+
fields(_?: Database.Field[]): Database.Field[] | this {
|
|
77
|
+
if (!arguments.length) return this._chart.fields();
|
|
78
|
+
this._chart.fields(_);
|
|
79
|
+
return this;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
columns(): string[];
|
|
83
|
+
columns(_: string[], asDefault?: boolean): this;
|
|
84
|
+
columns(_?: string[], asDefault?: boolean): string[] | this {
|
|
85
|
+
if (!arguments.length) return this._chart.columns();
|
|
86
|
+
this._chart.columns(_, asDefault);
|
|
87
|
+
return this;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
data(_?) {
|
|
91
|
+
if (!arguments.length) return this._chart.data();
|
|
92
|
+
this._chart.data(_);
|
|
93
|
+
return this;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
downloadCSV() {
|
|
97
|
+
Utility.downloadString("CSV", this._chart.export("CSV"));
|
|
98
|
+
return this;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
enter(domNode, element) {
|
|
102
|
+
super.enter(domNode, element);
|
|
103
|
+
const context = this;
|
|
104
|
+
|
|
105
|
+
this.topShrinkWrap(false).topPercentage(0).topSize(30);
|
|
106
|
+
this._dataCount = new Html()
|
|
107
|
+
.classed({ "composite_MegaChart-dataCount": true })
|
|
108
|
+
.id(this.id() + "_dataCount")
|
|
109
|
+
.html('<span class="MegaChart-dataCount-label">Count:</span> <span class="MegaChart-dataCount-value">' + (this.data() ? this.data().length : "0") + "</span>")
|
|
110
|
+
.overflowX("visible")
|
|
111
|
+
.overflowY("visible")
|
|
112
|
+
;
|
|
113
|
+
|
|
114
|
+
this._csvButton = new Button()
|
|
115
|
+
.classed({ "composite_MegaChart-CSV": true })
|
|
116
|
+
.id(this.id() + "_csv")
|
|
117
|
+
.value("CSV")
|
|
118
|
+
;
|
|
119
|
+
this._csvButton.click = function (a) {
|
|
120
|
+
context.downloadCSV();
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
this._infoButton = new Button()
|
|
124
|
+
.classed({ "composite_MegaChart-Info": true })
|
|
125
|
+
.id(this.id() + "_info")
|
|
126
|
+
.value(this.infoIcon())
|
|
127
|
+
;
|
|
128
|
+
|
|
129
|
+
this._maximizeButton = new Button()
|
|
130
|
+
.classed({ "composite_MegaChart-Maximize": true })
|
|
131
|
+
.id(this.id() + "_maximize")
|
|
132
|
+
.value("\uf2d0")
|
|
133
|
+
;
|
|
134
|
+
this._maximizeButton.click = function (buttonWidget) {
|
|
135
|
+
const target = context.target() as any;
|
|
136
|
+
let node;
|
|
137
|
+
const isMaximized = d3Select(target).classed("__hpccisMaximized");
|
|
138
|
+
|
|
139
|
+
// Find the layout_Grid ancestor
|
|
140
|
+
const parentGrid = context.locateAncestor("layout_Grid");
|
|
141
|
+
if (parentGrid) {
|
|
142
|
+
node = parentGrid.element().node();
|
|
143
|
+
} else {
|
|
144
|
+
node = document.body;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
const targetElement = d3Select(context.target()) as any;
|
|
148
|
+
if (isMaximized) {
|
|
149
|
+
// Restore from maximized to natural size/position
|
|
150
|
+
const targetParentBox = target.parentElement.getBoundingClientRect();
|
|
151
|
+
const targetPaddingTop = parseInt(getComputedStyle(target, null).getPropertyValue("padding-top").replace("px", ""));
|
|
152
|
+
const targetPaddingLeft = parseInt(getComputedStyle(target, null).getPropertyValue("padding-left").replace("px", ""));
|
|
153
|
+
const targetPaddingRight = parseInt(getComputedStyle(target, null).getPropertyValue("padding-right").replace("px", ""));
|
|
154
|
+
const targetPaddingBottom = parseInt(getComputedStyle(target, null).getPropertyValue("padding-bottom").replace("px", ""));
|
|
155
|
+
context.contentDiv.style("opacity", 0).transition(100);
|
|
156
|
+
targetElement.transition()// .duration(3000)
|
|
157
|
+
.style("top", targetParentBox.top + "px")
|
|
158
|
+
.style("left", targetParentBox.left + "px")
|
|
159
|
+
.style("width", (targetParentBox.width - targetPaddingLeft - targetPaddingRight) + "px")
|
|
160
|
+
.style("height", (targetParentBox.height - targetPaddingTop - targetPaddingBottom) + "px")
|
|
161
|
+
.each("end", function () {
|
|
162
|
+
targetElement.style("position", target.__old_position);
|
|
163
|
+
targetElement.style("z-index", target.__old_zindex);
|
|
164
|
+
targetElement.style("background-color", target.__old_backgroundColor);
|
|
165
|
+
targetElement.style("box-shadow", target.__old_boxshadow);
|
|
166
|
+
context
|
|
167
|
+
.resize({
|
|
168
|
+
width: targetParentBox.width - targetPaddingLeft - targetPaddingRight,
|
|
169
|
+
height: targetParentBox.height - targetPaddingTop - targetPaddingBottom
|
|
170
|
+
})
|
|
171
|
+
.render(function () {
|
|
172
|
+
context.contentDiv.transition()
|
|
173
|
+
.style("opacity", 1);
|
|
174
|
+
});
|
|
175
|
+
buttonWidget.value("\uf2d0").render();
|
|
176
|
+
});
|
|
177
|
+
} else {
|
|
178
|
+
// Maximize this MegaChart
|
|
179
|
+
target.__old_position = target.style.position;
|
|
180
|
+
target.__old_zindex = target.style.zIndex;
|
|
181
|
+
target.__old_boxshadow = target.style.boxShadow;
|
|
182
|
+
target.__old_backgroundColor = context.element().style("background-color");
|
|
183
|
+
const grid = d3Select(node).datum() as Grid;
|
|
184
|
+
const gridTarget = grid.target();
|
|
185
|
+
const gridBox = grid ? gridTarget.getBoundingClientRect() : node.getBoundingClientRect();
|
|
186
|
+
const gridPaddingTop = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-top").replace("px", ""));
|
|
187
|
+
const gridPaddingLeft = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-left").replace("px", ""));
|
|
188
|
+
const gridPaddingRight = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-right").replace("px", ""));
|
|
189
|
+
const gridPaddingBottom = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-bottom").replace("px", ""));
|
|
190
|
+
context.contentDiv.style("opacity", 0).transition(100);
|
|
191
|
+
targetElement
|
|
192
|
+
.style("position", "fixed")
|
|
193
|
+
.style("z-index", 999999)
|
|
194
|
+
.style("box-shadow", "0 8px 8px 0 rgba(0,0,0,.14),0 12px 4px -8px rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.12)")
|
|
195
|
+
.style("background-color", target.__old_backgroundColor)
|
|
196
|
+
.transition()// .duration(3000)
|
|
197
|
+
.style("top", (gridBox.top + gridPaddingTop) + "px")
|
|
198
|
+
.style("left", (gridBox.left + gridPaddingLeft) + "px")
|
|
199
|
+
.style("width", (gridBox.width - gridPaddingLeft - gridPaddingRight) + "px")
|
|
200
|
+
.style("height", (gridBox.height - gridPaddingTop - gridPaddingBottom) + "px")
|
|
201
|
+
.each("end", function () {
|
|
202
|
+
targetElement.style("background-color", context.maximizedBackgroundColor());
|
|
203
|
+
context
|
|
204
|
+
.resize({
|
|
205
|
+
width: (gridBox.width - gridPaddingLeft - gridPaddingRight),
|
|
206
|
+
height: (gridBox.height - gridPaddingTop - gridPaddingBottom)
|
|
207
|
+
})
|
|
208
|
+
.render(function () {
|
|
209
|
+
context.contentDiv.transition()
|
|
210
|
+
.style("opacity", 1);
|
|
211
|
+
});
|
|
212
|
+
buttonWidget.value("\uf2d1").render();
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
d3Select(target).classed("__hpccisMaximized", !isMaximized);
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
this._legendButton = new Input()
|
|
220
|
+
.classed({ "composite_MegaChart-legend": true })
|
|
221
|
+
.id(this.id() + "_legend")
|
|
222
|
+
.type("checkbox")
|
|
223
|
+
.inlineLabel("Legend: ")
|
|
224
|
+
;
|
|
225
|
+
this._legendButton.click = function (a) {
|
|
226
|
+
context.render();
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
this._chartTypeSelect = new Select()
|
|
230
|
+
.classed({ "composite_MegaChart-chartType": true })
|
|
231
|
+
.id(this.id() + "_chartType")
|
|
232
|
+
.selectOptions(this._allChartTypes.map(function (a) { return [a.id, a.display]; }))
|
|
233
|
+
.value(this.chartType())
|
|
234
|
+
;
|
|
235
|
+
this._chartTypeSelect.change = function (a) {
|
|
236
|
+
context.chartType(a.value()).render();
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
this.setContent("center", this._chart);
|
|
240
|
+
|
|
241
|
+
this._legend
|
|
242
|
+
.targetWidget(this._chart)
|
|
243
|
+
.orientation(["top", "bottom"].indexOf(this.legendPosition()) !== -1 ? "horizontal" : "vertical")
|
|
244
|
+
.fixedSize(true)
|
|
245
|
+
;
|
|
246
|
+
|
|
247
|
+
this._prevLegendPosition = this.legendPosition();
|
|
248
|
+
|
|
249
|
+
if (this.valueAxisTitle()) {
|
|
250
|
+
this.setContent("left", this._valueTitle.rotation(-90)).leftShrinkWrap(true);
|
|
251
|
+
}
|
|
252
|
+
if (this.domainAxisTitle()) {
|
|
253
|
+
this.setContent("bottom", this._domainTitle).bottomShrinkWrap(true);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
if (this.legendPosition() !== "none") {
|
|
257
|
+
this.setContent(this.legendPosition(), this._legend)[this.legendPosition() + "ShrinkWrap"](true);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
update(domNode, element) {
|
|
262
|
+
function showHideButton(twArr2, button, show) {
|
|
263
|
+
if (show && twArr2.indexOf(button) === -1) {
|
|
264
|
+
twArr2.push(button);
|
|
265
|
+
} else if (!show) {
|
|
266
|
+
const idx = twArr2.indexOf(button);
|
|
267
|
+
if (idx >= 0) {
|
|
268
|
+
twArr2.splice(idx, 1);
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
if (this._chart && typeof this._chart.hideRowOnLegendClick === "function") {
|
|
274
|
+
this._chart.hideRowOnLegendClick(this.hideRowOnLegendClick());
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
this._dataCount.html('<span class="MegaChart-dataCount-label">Count:</span> <span class="MegaChart-dataCount-value">' + (this.data() ? this.data().length : "0") + "</span>");
|
|
278
|
+
|
|
279
|
+
this._chartTypeSelect.value(this.chartType());
|
|
280
|
+
const twArr = this.toolbarWidgets();
|
|
281
|
+
showHideButton(twArr, this._csvButton, this.showCSV());
|
|
282
|
+
showHideButton(twArr, this._maximizeButton, this.showMaximize());
|
|
283
|
+
showHideButton(twArr, this._legendButton, this.toolbarShowLegend());
|
|
284
|
+
showHideButton(twArr, this._chartTypeSelect, this.showChartSelect());
|
|
285
|
+
showHideButton(twArr, this._infoButton, this.showInfoButton());
|
|
286
|
+
showHideButton(twArr, this._dataCount, this.showCount());
|
|
287
|
+
this.toolbarWidgets(twArr);
|
|
288
|
+
|
|
289
|
+
if (this._prevShowToolbar !== this.showToolbar()) {
|
|
290
|
+
this.setContent("top", this.showToolbar() ? this._toolbar : null);
|
|
291
|
+
this._prevShowToolbar = this.showToolbar();
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
// TODO: Proxy + themes not working...
|
|
295
|
+
this._toolbar
|
|
296
|
+
.fontSize(this.titleFontSize())
|
|
297
|
+
.fontColor(this.titleFontColor())
|
|
298
|
+
.fontFamily(this.titleFontFamily())
|
|
299
|
+
.fontBold(this.titleFontBold())
|
|
300
|
+
.backgroundColor(this.titleBackgroundColor())
|
|
301
|
+
;
|
|
302
|
+
|
|
303
|
+
this._chart
|
|
304
|
+
.data(this.data());
|
|
305
|
+
|
|
306
|
+
if (this._chart.chartType() !== this.chartType()) {
|
|
307
|
+
this._chart.chartType(this.chartType());
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
let legendPosition = this.legendPosition();
|
|
311
|
+
if (this.toolbarShowLegend() && !this._legendButton.checked()) {
|
|
312
|
+
legendPosition = "none";
|
|
313
|
+
}
|
|
314
|
+
if (this._prevLegendPosition !== legendPosition) {
|
|
315
|
+
if (this._prevLegendPosition !== "none") {
|
|
316
|
+
this.clearContent(this._prevLegendPosition);
|
|
317
|
+
}
|
|
318
|
+
this._prevLegendPosition = legendPosition;
|
|
319
|
+
if (legendPosition !== "none") {
|
|
320
|
+
this._legend = new Legend().targetWidget(this.getContent("center").fixedSize(true));
|
|
321
|
+
this.setContent(legendPosition, this._legend);
|
|
322
|
+
this._legend.orientation(["top", "bottom"].indexOf(legendPosition) !== -1 ? "horizontal" : "vertical");
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
this._contentClasses = this.getContentClasses();
|
|
326
|
+
|
|
327
|
+
if (this.valueAxisTitle() && this._contentClasses.left !== "common_Text") {
|
|
328
|
+
if (legendPosition !== "left") {
|
|
329
|
+
this.setContent("left", this._valueTitle.rotation(-90));
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
if (this.domainAxisTitle() && this._contentClasses.bottom !== "common_Text") {
|
|
333
|
+
if (legendPosition !== "bottom") {
|
|
334
|
+
this.setContent("bottom", this._domainTitle).bottomShrinkWrap(true);
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
this._legend.dataFamily(this._chart.getChartDataFamily());
|
|
339
|
+
|
|
340
|
+
super.update(domNode, element);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
exit(domNode, element) {
|
|
344
|
+
super.exit(domNode, element);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
getContentClasses() {
|
|
348
|
+
const obj: any = {};
|
|
349
|
+
const t = this.getContent("top");
|
|
350
|
+
const r = this.getContent("right");
|
|
351
|
+
const b = this.getContent("bottom");
|
|
352
|
+
const l = this.getContent("left");
|
|
353
|
+
obj.top = t !== null ? t.classID() : undefined;
|
|
354
|
+
obj.right = r !== null ? r.classID() : undefined;
|
|
355
|
+
obj.bottom = b !== null ? b.classID() : undefined;
|
|
356
|
+
obj.left = l !== null ? l.classID() : undefined;
|
|
357
|
+
return obj;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
serializeState() {
|
|
361
|
+
const state: any = {
|
|
362
|
+
title: this.title(),
|
|
363
|
+
data: this.data()
|
|
364
|
+
};
|
|
365
|
+
const chart = this.chart();
|
|
366
|
+
if (chart) {
|
|
367
|
+
if (chart.serializeState) {
|
|
368
|
+
state.chart = chart.serializeState();
|
|
369
|
+
delete state.chart.data;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
return state;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
deserializeState(state) {
|
|
376
|
+
if (state) {
|
|
377
|
+
this
|
|
378
|
+
.title(state.title)
|
|
379
|
+
.data(state.data)
|
|
380
|
+
;
|
|
381
|
+
const chart = this.chart();
|
|
382
|
+
if (chart && state.chart) {
|
|
383
|
+
if (chart.serializeState) {
|
|
384
|
+
chart.deserializeState(state.chart);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
return this;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
// Events ---
|
|
392
|
+
click(row, column, selected) {
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
dblclick(row, column, selected) {
|
|
396
|
+
}
|
|
397
|
+
vertex_click(row, col, sel, more) {
|
|
398
|
+
if (more && more.vertex) {
|
|
399
|
+
// console.log("Vertex click: " + more.vertex.id());
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
vertex_dblclick(row, col, sel, more) {
|
|
404
|
+
if (more && more.vertex) {
|
|
405
|
+
// console.log("Vertex double click: " + more.vertex.id());
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
edge_click(row, col, sel, more) {
|
|
410
|
+
if (more && more.edge) {
|
|
411
|
+
// console.log("Edge click: " + more.edge.id());
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
edge_dblclick(row, col, sel, more) {
|
|
416
|
+
if (more && more.edge) {
|
|
417
|
+
// console.log("Edge double click: " + more.edge.id());
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
hideRowOnLegendClick: { (): boolean; (_: boolean): MegaChart };
|
|
422
|
+
hideRowOnLegendClick_exists: () => boolean;
|
|
423
|
+
showToolbar: { (): boolean; (_: boolean): MegaChart };
|
|
424
|
+
showToolbar_exists: () => boolean;
|
|
425
|
+
titleFontSize: { (): number; (_: number): MegaChart };
|
|
426
|
+
titleFontSize_exists: () => boolean;
|
|
427
|
+
titleFontColor: { (): string; (_: string): MegaChart };
|
|
428
|
+
titleFontColor_exists: () => boolean;
|
|
429
|
+
titleFontFamily: { (): string; (_: string): MegaChart };
|
|
430
|
+
titleFontFamily_exists: () => boolean;
|
|
431
|
+
titleFontBold: { (): boolean; (_: boolean): MegaChart };
|
|
432
|
+
titleFontBold_exists: () => boolean;
|
|
433
|
+
titleBackgroundColor: { (): string; (_: string): MegaChart };
|
|
434
|
+
titleBackgroundColor_exists: () => boolean;
|
|
435
|
+
maximizedBackgroundColor: { (): string; (_: string): MegaChart };
|
|
436
|
+
maximizedBackgroundColor_exists: () => boolean;
|
|
437
|
+
showChartSelect: { (): boolean; (_: boolean): MegaChart };
|
|
438
|
+
showChartSelect_exists: () => boolean;
|
|
439
|
+
showCSV: { (): boolean; (_: boolean): MegaChart };
|
|
440
|
+
showCSV_exists: () => boolean;
|
|
441
|
+
showCount: { (): boolean; (_: boolean): MegaChart };
|
|
442
|
+
showCount_exists: () => boolean;
|
|
443
|
+
showMaximize: { (): boolean; (_: boolean): MegaChart };
|
|
444
|
+
showMaximize_exists: () => boolean;
|
|
445
|
+
toolbarShowLegend: { (): boolean; (_: boolean): MegaChart };
|
|
446
|
+
toolbarShowLegend_exists: () => boolean;
|
|
447
|
+
showInfoButton: { (): boolean; (_: boolean): MegaChart };
|
|
448
|
+
showInfoButton_exists: () => boolean;
|
|
449
|
+
infoIcon: { (): string; (_: string): MegaChart };
|
|
450
|
+
infoIcon_exists: () => boolean;
|
|
451
|
+
legendPosition: { (): string; (_: string): MegaChart };
|
|
452
|
+
legendPosition_exists: () => boolean;
|
|
453
|
+
|
|
454
|
+
title: { (): string; (_: string): MegaChart };
|
|
455
|
+
title_exists: () => boolean;
|
|
456
|
+
|
|
457
|
+
domainAxisTitle: { (): string; (_: string): MegaChart };
|
|
458
|
+
domainAxisTitle_exists: () => boolean;
|
|
459
|
+
valueAxisTitle: { (): string; (_: string): MegaChart };
|
|
460
|
+
valueAxisTitle_exists: () => boolean;
|
|
461
|
+
|
|
462
|
+
chartType: { (): string; (_: string): MegaChart };
|
|
463
|
+
chartType_exists: () => boolean;
|
|
464
|
+
chart: { (): any; (_: any): MegaChart };
|
|
465
|
+
chart_exists: () => boolean;
|
|
466
|
+
}
|
|
467
|
+
MegaChart.prototype._class += " composite_MegaChart";
|
|
468
|
+
|
|
469
|
+
MegaChart.prototype._1DChartTypes = MultiChart.prototype._1DChartTypes;
|
|
470
|
+
MegaChart.prototype._2DChartTypes = MultiChart.prototype._2DChartTypes;
|
|
471
|
+
MegaChart.prototype._NDChartTypes = MultiChart.prototype._NDChartTypes;
|
|
472
|
+
MegaChart.prototype._anyChartTypes = MultiChart.prototype._anyChartTypes;
|
|
473
|
+
MegaChart.prototype._allChartTypes = MultiChart.prototype._allChartTypes;
|
|
474
|
+
|
|
475
|
+
MegaChart.prototype.publishReset();
|
|
476
|
+
|
|
477
|
+
MegaChart.prototype.publish("hideRowOnLegendClick", false, "boolean", "Enable/Disable hiding row on legend clicks", null, { tags: ["Basic"] });
|
|
478
|
+
MegaChart.prototype.publish("showToolbar", true, "boolean", "Enable/Disable Toolbar widget", null, { tags: ["Basic"] });
|
|
479
|
+
MegaChart.prototype.publishProxy("title", "_toolbar", "title");
|
|
480
|
+
MegaChart.prototype.publish("ddlParamsFormat", "", "string", "DDL Param Format '{fname}, {lname}'", null, { tags: ["Advanced"], optional: true });
|
|
481
|
+
MegaChart.prototype.publish("titleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
|
|
482
|
+
MegaChart.prototype.publish("titleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
|
|
483
|
+
MegaChart.prototype.publish("titleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
|
|
484
|
+
MegaChart.prototype.publish("titleFontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
|
|
485
|
+
MegaChart.prototype.publish("titleBackgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
|
|
486
|
+
MegaChart.prototype.publish("maximizedBackgroundColor", "#FFFFFF", "html-color", "Background Color while maximized", null, { tags: ["Intermediate"], optional: true });
|
|
487
|
+
|
|
488
|
+
MegaChart.prototype.publish("showChartSelect", true, "boolean", "Show/Hide the chartType dropdown in the toolbar", null, { tags: ["Basic"] });
|
|
489
|
+
MegaChart.prototype.publish("showCSV", true, "boolean", "Show/Hide CSV button", null, { tags: ["Basic"] });
|
|
490
|
+
MegaChart.prototype.publish("showCount", false, "boolean", "Show/Hide Data Count", null, { tags: ["Basic"] });
|
|
491
|
+
MegaChart.prototype.publish("showMaximize", false, "boolean", "Show/Hide Maximize button", null, { tags: ["Basic"] });
|
|
492
|
+
MegaChart.prototype.publish("toolbarShowLegend", false, "boolean", "Show/Hide Legend button", null, { tags: ["Basic"] });
|
|
493
|
+
MegaChart.prototype.publish("showInfoButton", false, "boolean", "Show/Hide Info button in toolbar", null, { tags: ["Basic"] });
|
|
494
|
+
MegaChart.prototype.publish("infoIcon", "\uf05a", "string", "Help Icon", null, { tags: ["Basic"] });
|
|
495
|
+
|
|
496
|
+
MegaChart.prototype.publish("legendPosition", "none", "set", "Position of the Legend widget", ["none", "top", "right", "bottom", "left"], { tags: ["Basic"] });
|
|
497
|
+
MegaChart.prototype.publishProxy("legendFormat", "_legend", "rainbowFormat");
|
|
498
|
+
MegaChart.prototype.publishProxy("legendBins", "_legend", "rainbowBins");
|
|
499
|
+
|
|
500
|
+
MegaChart.prototype.publishProxy("domainAxisTitle", "_domainTitle", "text");
|
|
501
|
+
MegaChart.prototype.publishProxy("valueAxisTitle", "_valueTitle", "text");
|
|
502
|
+
|
|
503
|
+
MegaChart.prototype.publishProxy("chartType", "_chart", "chartType");
|
|
504
|
+
MegaChart.prototype.publishProxy("chart", "_chart", "chart");
|