You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/09/18 14:57:31 UTC
[incubator-skywalking-ui] branch 6.0.0/dev updated: Refactor
topoloy node style
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 6.0.0/dev
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/6.0.0/dev by this push:
new dec04d1 Refactor topoloy node style
dec04d1 is described below
commit dec04d13290de0393c05b621f4db4d3bbfb5e4d4
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Tue Sep 18 22:56:51 2018 +0800
Refactor topoloy node style
---
package-lock.json | 71 ++++++++++++++++++----------------
package.json | 1 +
src/components/Topology/AppTopology.js | 57 +++++++++++++++++++++++----
src/components/Topology/Base.js | 2 +
4 files changed, 90 insertions(+), 41 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 3219e08..047caed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3422,7 +3422,7 @@
},
"acorn-dynamic-import": {
"version": "2.0.2",
- "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz",
+ "resolved": "http://registry.npm.taobao.org/acorn-dynamic-import/download/acorn-dynamic-import-2.0.2.tgz",
"integrity": "sha1-x1K9IQvvZ5UBtsbLf8hPj0cVjMQ=",
"dev": true,
"requires": {
@@ -3431,7 +3431,7 @@
"dependencies": {
"acorn": {
"version": "4.0.13",
- "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+ "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz",
"integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
"dev": true
}
@@ -3578,7 +3578,7 @@
},
"ansi-regex": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
@@ -3818,7 +3818,7 @@
"dependencies": {
"strip-ansi": {
"version": "4.0.0",
- "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@@ -3965,7 +3965,7 @@
},
"ansi-styles": {
"version": "2.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+ "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
},
"ant-design-palettes": {
@@ -4689,13 +4689,13 @@
},
"babel-plugin-syntax-decorators": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
"integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
"dev": true
},
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
"integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
"dev": true
},
@@ -5402,7 +5402,7 @@
},
"buffer": {
"version": "4.9.1",
- "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
@@ -5638,7 +5638,7 @@
},
"chalk": {
"version": "1.1.3",
- "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+ "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"requires": {
"ansi-styles": "^2.2.1",
@@ -5925,7 +5925,7 @@
"dependencies": {
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@@ -5940,7 +5940,7 @@
},
"string-width": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+ "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
@@ -6796,6 +6796,11 @@
"lodash.debounce": "^4.0.8"
}
},
+ "cytoscape-canvas": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/cytoscape-canvas/-/cytoscape-canvas-3.0.1.tgz",
+ "integrity": "sha512-R1nCLnJHGTR5fWEpNQQBPyoigdnfhnk1lOHegzmzz1Kg6yxzVf0hfdRAMa0wPAhtC4kkgyoViiIfZ/zyCqMhEQ=="
+ },
"cytoscape-cose-bilkent": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.0.0.tgz",
@@ -10404,7 +10409,7 @@
"dependencies": {
"minimist": {
"version": "1.1.3",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
"integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
"dev": true
}
@@ -10412,7 +10417,7 @@
},
"got": {
"version": "6.7.1",
- "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
+ "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
"integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
"dev": true,
"requires": {
@@ -11437,7 +11442,7 @@
},
"is-fullwidth-code-point": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
@@ -14783,7 +14788,7 @@
},
"minimist": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
},
"minimist-options": {
@@ -14837,7 +14842,7 @@
},
"mkdirp": {
"version": "0.5.1",
- "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"requires": {
"minimist": "0.0.8"
@@ -14845,7 +14850,7 @@
"dependencies": {
"minimist": {
"version": "0.0.8",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
}
}
@@ -15417,7 +15422,7 @@
"dependencies": {
"minimist": {
"version": "0.0.10",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true
}
@@ -18694,7 +18699,7 @@
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
@@ -18780,7 +18785,7 @@
},
"strip-ansi": {
"version": "4.0.0",
- "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@@ -20841,13 +20846,13 @@
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"strip-ansi": {
"version": "4.0.0",
- "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@@ -21527,7 +21532,7 @@
},
"supports-color": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
},
"svg-tags": {
@@ -22387,7 +22392,7 @@
},
"uglifyjs-webpack-plugin": {
"version": "0.4.6",
- "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
+ "resolved": "http://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-0.4.6.tgz",
"integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
"dev": true,
"requires": {
@@ -23175,7 +23180,7 @@
},
"enhanced-resolve": {
"version": "3.4.1",
- "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz",
+ "resolved": "http://registry.npm.taobao.org/enhanced-resolve/download/enhanced-resolve-3.4.1.tgz",
"integrity": "sha1-BCHjOf1xQZs9oT0Smzl5BAIwR24=",
"dev": true,
"requires": {
@@ -23187,7 +23192,7 @@
},
"has-flag": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/has-flag/download/has-flag-2.0.0.tgz",
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
"dev": true
},
@@ -23208,7 +23213,7 @@
},
"supports-color": {
"version": "4.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-4.5.0.tgz",
"integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
"dev": true,
"requires": {
@@ -23583,7 +23588,7 @@
},
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@@ -23671,7 +23676,7 @@
},
"os-locale": {
"version": "1.4.0",
- "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+ "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
@@ -23760,7 +23765,7 @@
},
"string-width": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+ "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
@@ -23988,7 +23993,7 @@
},
"wrap-ansi": {
"version": "2.1.0",
- "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
"dev": true,
"requires": {
@@ -23998,7 +24003,7 @@
"dependencies": {
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+ "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@@ -24007,7 +24012,7 @@
},
"string-width": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+ "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
diff --git a/package.json b/package.json
index 43a00f0..0353afe 100755
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"bizcharts-plugin-slider": "^2.0.1",
"classnames": "^2.2.5",
"cytoscape": "^3.2.7",
+ "cytoscape-canvas": "^3.0.1",
"cytoscape-cose-bilkent": "^4.0.0",
"cytoscape-dagre": "^2.2.1",
"d3": "^4.12.2",
diff --git a/src/components/Topology/AppTopology.js b/src/components/Topology/AppTopology.js
index 4f51d64..05fbb04 100644
--- a/src/components/Topology/AppTopology.js
+++ b/src/components/Topology/AppTopology.js
@@ -17,6 +17,7 @@
import cytoscape from 'cytoscape';
+import * as d3 from 'd3';
import Base from './Base';
const conf = {
@@ -76,6 +77,43 @@ export default class AppTopology extends Base {
onSelectedApplication();
});
}
+ const layer = cy.cyCanvas();
+ const canvas = layer.getCanvas();
+
+
+ cy.on('render cyCanvas.resize', (evt) => {
+ const ctx = canvas.getContext('2d');
+ layer.resetTransform(ctx);
+ layer.clear(ctx);
+
+ layer.setTransform(ctx);
+
+ // Draw model elements
+ cy.nodes('node[type != "USER"]').forEach( (node) => {
+ const pos = node.position();
+ layer.setTransform(ctx);
+ const colors = ["#f5222d", "#1890ff"];
+
+ const arc = d3.arc()
+ .outerRadius(33)
+ .innerRadius(27)
+ .context(ctx);
+
+ const pie = d3.pie()
+ .sort(null);
+
+ ctx.translate(pos.x, pos.y);
+
+ const arcs = pie([30, 70]);
+
+ arcs.forEach((d, i) => {
+ ctx.beginPath();
+ arc(d);
+ ctx.fillStyle = colors[i];
+ ctx.fill();
+ });
+ });
+ });
}
getStyle = () => {
@@ -89,12 +127,12 @@ export default class AppTopology extends Base {
'font-family': 'Microsoft YaHei',
content: 'data(name)',
'text-margin-y': 10,
- 'border-width': 0,
- 'border-color': '#A8071A',
+ 'border-width': 6,
+ 'border-color': '#40a9ff',
'background-image': ele => `img/node/${ele.data('type') ? ele.data('type').toUpperCase() : 'UNDEFINED'}.png`,
'background-width': '60%',
'background-height': '60%',
- 'background-color': '#fff',
+ 'background-color': '#e6f7ff',
})
.selector(':selected')
.css({
@@ -111,13 +149,15 @@ export default class AppTopology extends Base {
height: 60,
'text-valign': 'bottom',
'text-halign': 'center',
- 'background-color': '#fff',
+ 'background-color': '#e6f7ff',
'background-image': ele => `img/node/${ele.data('type') ? ele.data('type').toUpperCase() : 'UNDEFINED'}.png`,
'background-width': '60%',
'background-height': '60%',
- 'border-width': 0,
+ 'border-width': 6,
+ 'border-color': '#40a9ff',
'font-family': 'Microsoft YaHei',
label: 'data(name)',
+ 'text-margin-y': 10,
// 'text-margin-y': 5,
})
.selector('edge')
@@ -126,10 +166,11 @@ export default class AppTopology extends Base {
'control-point-step-size': 100,
'target-arrow-shape': 'triangle',
'arrow-scale': 1.7,
- 'target-arrow-color': 'rgb(147, 198, 174)',
- 'line-color': 'rgb(147, 198, 174)',
+ 'target-arrow-color': '#40a9ff',
+ 'line-color': 'mapData(101, 0, 100, #40a9ff, #ffa39e)',
+ 'opacity': 0.666,
width: 3,
- label: ele => `${ele.data('callType')} \n ${ele.data('cpm')} cpm`,
+ label: ele => `${ele.data('callType')}`,
'text-wrap': 'wrap',
color: 'rgb(110, 112, 116)',
'text-rotation': 'autorotate',
diff --git a/src/components/Topology/Base.js b/src/components/Topology/Base.js
index c9a015d..07143f1 100644
--- a/src/components/Topology/Base.js
+++ b/src/components/Topology/Base.js
@@ -20,9 +20,11 @@ import React, { Component } from 'react';
import cytoscape from 'cytoscape';
import coseBilkent from 'cytoscape-cose-bilkent';
import dagre from 'cytoscape-dagre';
+import cyCanvas from 'cytoscape-canvas';
cytoscape.use(coseBilkent);
cytoscape.use(dagre);
+cytoscape.use(cyCanvas);
const config = {
layout: {