|
1
|
(function () {
|
1
|
(function () {
|
|
2
|
- // Adds Atlassian shapes
|
|
|
|
3
|
- // 图表
|
|
|
|
4
|
- Sidebar.prototype.addChartsPalette = function () {
|
|
|
|
5
|
- var s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
|
|
|
|
6
|
- var s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
|
|
|
|
7
|
- var s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
|
|
|
|
8
|
- var gn = 'mxgraph.charts';
|
|
|
|
9
|
- var dt = 'charts ';
|
|
|
|
10
|
- var sb = this;
|
|
|
|
11
|
- this.setCurrentSearchEntryLibrary('charts');
|
|
|
|
12
|
-
|
|
|
|
13
|
- const now = () => Date.now
|
|
|
|
14
|
- var fns = [
|
|
|
|
15
|
- this.addEntry('charts', mxUtils.bind(this, function () {
|
|
|
|
16
|
- const nodeId = `echarts__${ now() }`
|
|
|
|
17
|
- var cell = new mxCell(`<div style="color: red" id="${ nodeId }">${ now() }</div>`, new mxGeometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
|
|
|
|
18
|
- cell.setVertex(true)
|
|
|
|
19
|
- return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'charts');
|
|
|
|
20
|
- })),
|
|
|
|
21
|
- ];
|
|
|
|
22
|
-
|
|
|
|
23
|
- this.addPalette('charts', '图表', false, mxUtils.bind(this, function (content) {
|
|
|
|
24
|
- for (var i = 0; i < fns.length; i++) {
|
|
|
|
25
|
- content.appendChild(fns[i](content));
|
|
|
|
26
|
- }
|
|
|
|
27
|
- }));
|
|
|
|
28
|
-
|
|
|
|
29
|
- this.setCurrentSearchEntryLibrary();
|
|
|
|
30
|
- };
|
2
|
+ // Adds Atlassian shapes
|
|
|
|
3
|
+ // 图表
|
|
|
|
4
|
+ Sidebar.prototype.addChartsPalette = function () {
|
|
|
|
5
|
+
|
|
|
|
6
|
+ const generatorId = () => `echarts__instance__${ Date.now() }`
|
|
|
|
7
|
+
|
|
|
|
8
|
+ const addClickHandler = Sidebar.prototype.addClickHandler
|
|
|
|
9
|
+ Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
|
|
|
|
10
|
+ var graph = this.editorUi.editor.graph;
|
|
|
|
11
|
+ var tol = graph.tolerance;
|
|
|
|
12
|
+ const cell = cells[0]
|
|
|
|
13
|
+ const cellValue = cell.value
|
|
|
|
14
|
+ const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'
|
|
|
|
15
|
+ const mouseDown = ds.mouseDown
|
|
|
|
16
|
+
|
|
|
|
17
|
+ ds.mouseDown = function (evt) {
|
|
|
|
18
|
+ if (validate) {
|
|
|
|
19
|
+ cell.value.setAttribute('id', generatorId())
|
|
|
|
20
|
+ graph.setAttributeForCell(cell, 'label', `<div class="echarts__instance" id="${ generatorId() }">${ generatorId() }</div>`)
|
|
|
|
21
|
+ }
|
|
|
|
22
|
+ mouseDown.apply(this, arguments)
|
|
|
|
23
|
+ };
|
|
|
|
24
|
+
|
|
|
|
25
|
+ const mouseUp = ds.mouseUp
|
|
|
|
26
|
+ ds.mouseUp = function () {
|
|
|
|
27
|
+ try {
|
|
|
|
28
|
+ mouseUp.apply(this, arguments)
|
|
|
|
29
|
+ } finally {
|
|
|
|
30
|
+ if (validate) {
|
|
|
|
31
|
+ const id = cell.value.id
|
|
|
|
32
|
+ const chartDom = document.getElementById(id);
|
|
|
|
33
|
+ chartDom.style.width = '400px'
|
|
|
|
34
|
+ chartDom.style.height = '400px'
|
|
|
|
35
|
+ const myChart = echarts.init(chartDom);
|
|
|
|
36
|
+ const option = {
|
|
|
|
37
|
+ xAxis: {
|
|
|
|
38
|
+ type: 'category',
|
|
|
|
39
|
+ data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
|
|
|
|
40
|
+ },
|
|
|
|
41
|
+ yAxis: {
|
|
|
|
42
|
+ type: 'value',
|
|
|
|
43
|
+ },
|
|
|
|
44
|
+ series: [
|
|
|
|
45
|
+ {
|
|
|
|
46
|
+ data: [ 150, 230, 224, 218, 135, 147, 260 ],
|
|
|
|
47
|
+ type: 'line',
|
|
|
|
48
|
+ },
|
|
|
|
49
|
+ ],
|
|
|
|
50
|
+ };
|
|
|
|
51
|
+
|
|
|
|
52
|
+ option && myChart.setOption(option);
|
|
|
|
53
|
+ }
|
|
|
|
54
|
+ }
|
|
|
|
55
|
+ // const dom = document.getElementById()
|
|
|
|
56
|
+ }
|
|
|
|
57
|
+ addClickHandler.apply(this, arguments)
|
|
|
|
58
|
+ }
|
|
|
|
59
|
+
|
|
|
|
60
|
+ const convertValueToString = this.graph.convertValueToString
|
|
|
|
61
|
+ this.graph.convertValueToString = function (cell) {
|
|
|
|
62
|
+ const cellValue = cell.value
|
|
|
|
63
|
+ const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'
|
|
|
|
64
|
+ if (validate) {
|
|
|
|
65
|
+ setTimeout(() => {
|
|
|
|
66
|
+ const id = cell.value.id
|
|
|
|
67
|
+ console.log(id)
|
|
|
|
68
|
+ const chartDom = document.getElementById(id);
|
|
|
|
69
|
+ chartDom.style.width = '400px'
|
|
|
|
70
|
+ chartDom.style.height = '400px'
|
|
|
|
71
|
+ const myChart = echarts.init(chartDom);
|
|
|
|
72
|
+ const option = {
|
|
|
|
73
|
+ xAxis: {
|
|
|
|
74
|
+ type: 'category',
|
|
|
|
75
|
+ data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
|
|
|
|
76
|
+ },
|
|
|
|
77
|
+ yAxis: {
|
|
|
|
78
|
+ type: 'value',
|
|
|
|
79
|
+ },
|
|
|
|
80
|
+ series: [
|
|
|
|
81
|
+ {
|
|
|
|
82
|
+ data: [ 150, 230, 224, 218, 135, 147, 260 ],
|
|
|
|
83
|
+ type: 'line',
|
|
|
|
84
|
+ },
|
|
|
|
85
|
+ ],
|
|
|
|
86
|
+ };
|
|
|
|
87
|
+
|
|
|
|
88
|
+ option && myChart.setOption(option);
|
|
|
|
89
|
+ })
|
|
|
|
90
|
+ }
|
|
|
|
91
|
+
|
|
|
|
92
|
+ return convertValueToString.apply(this, arguments)
|
|
|
|
93
|
+ }
|
|
|
|
94
|
+
|
|
|
|
95
|
+ var s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
|
|
|
|
96
|
+ var s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
|
|
|
|
97
|
+ var s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
|
|
|
|
98
|
+ var gn = 'mxgraph.charts';
|
|
|
|
99
|
+ var dt = 'charts ';
|
|
|
|
100
|
+ var sb = this;
|
|
|
|
101
|
+ this.setCurrentSearchEntryLibrary('charts');
|
|
|
|
102
|
+
|
|
|
|
103
|
+ const now = Date.now
|
|
|
|
104
|
+ var fns = [
|
|
|
|
105
|
+ this.addEntry('charts', mxUtils.bind(this, function () {
|
|
|
|
106
|
+ const id = generatorId()
|
|
|
|
107
|
+ var cell = new mxCell(`<div id="${ id }" class="echarts__instance"></div>`, new mxGeometry(0, 0, 400, 400), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
|
|
|
|
108
|
+ cell.setVertex(true)
|
|
|
|
109
|
+ this.graph.setAttributeForCell(cell, 'placeholders', '1');
|
|
|
|
110
|
+ this.graph.setAttributeForCell(cell, 'componentsType', 'charts');
|
|
|
|
111
|
+ cell.value.setAttribute('id', id)
|
|
|
|
112
|
+ return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, 'charts');
|
|
|
|
113
|
+ })),
|
|
|
|
114
|
+ ];
|
|
|
|
115
|
+
|
|
|
|
116
|
+ this.addPaletteFunctions('charts', '图表', false, fns);
|
|
|
|
117
|
+
|
|
|
|
118
|
+ this.setCurrentSearchEntryLibrary();
|
|
|
|
119
|
+ };
|
|
31
|
})();
|
120
|
})();
|
|
|
|
121
|
+
|
|
|
|
122
|
+function testChartImg() {
|
|
|
|
123
|
+ return 'data:image/png;base64,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'
|
|
|
|
124
|
+} |
