This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 599bf1b Update: add radial chart (#128)
599bf1b is described below
commit 599bf1b9f92cbcad5baaa9db36576992164e1263
Author: Allen Wang <[email protected]>
AuthorDate: Sat Aug 31 16:36:36 2019 +0800
Update: add radial chart (#128)
---
src/main.ts | 1 +
src/views/components/topology/radial.vue | 137 +++++++++++++++++++++++++++
src/views/components/topology/topo-aside.vue | 11 ++-
3 files changed, 148 insertions(+), 1 deletion(-)
diff --git a/src/main.ts b/src/main.ts
index f628c3d..50c4ef4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,6 +27,7 @@ import router from './router';
import store from './store';
import components from './components';
import 'echarts/lib/chart/line';
+import 'echarts/lib/chart/graph';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/chart/heatmap';
diff --git a/src/views/components/topology/radial.vue
b/src/views/components/topology/radial.vue
new file mode 100644
index 0000000..5ddfb31
--- /dev/null
+++ b/src/views/components/topology/radial.vue
@@ -0,0 +1,137 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+<template>
+ <div class="micro-radil-chart">
+ <div class="micro-radil-chart-btn rk-btn ghost cp"
@click="$emit('showRadial', false)">X</div>
+ <RkEcharts height="100%" :option="responseConfig" />
+ </div>
+</template>
+<script lang="js">
+import * as d3 from 'd3';
+import d3tip from 'd3-tip';
+
+export default {
+ props: {
+ datas: {
+ type: Object,
+ default() {
+ return {
+ nodes: [],
+ calls: [],
+ };
+ },
+ },
+ },
+ computed: {
+ responseConfig() {
+ const graph = this.datas;
+ const categories = [...new Set(graph.nodes.map((i) => i.type))].map((i)
=> ({name: i}));
+ const links = [];
+ const nodes = [];
+ graph.calls.forEach((call, index) => {
+ links.push({
+ index,
+ source: call.source.id,
+ target: call.target.id,
+ });
+ });
+ graph.nodes.forEach((node) => {
+ nodes.push({
+ value: 20,
+ id: node.id,
+ name: node.name,
+ label: {
+ normal: {
+ show: true,
+ },
+ },
+ category: node.type,
+ });
+ });
+ return {
+ tooltip: {},
+ color: [
+ '#6be6c1',
+ '#a0a7e6',
+ '#96dee8',
+ '#3f96e3',
+ '#3fb1e3',
+ '#6be6c1',
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8',
+ ],
+ legend: {
+ top: 25,
+ textStyle: {
+ color: '#ddd',
+ },
+ data: categories.map((a) => a.name),
+ },
+ series : [
+ {
+ top: '20%',
+ height: '60%',
+ name: 'Les Miserables',
+ type: 'graph',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true,
+ },
+ data: nodes,
+ links,
+ categories,
+ roam: true,
+ label: {
+ normal: {
+ position: 'right',
+ formatter: '{b}',
+ },
+ },
+ lineStyle: {
+ normal: {
+ color: 'source',
+ curveness: 0.3,
+ },
+ },
+ },
+ ],
+ };
+ },
+ },
+};
+</script>
+<style lang="scss">
+.micro-radil-chart {
+ height: 100%;
+ position: fixed;
+ top: 48px;
+ left: 0;;
+ background-color: #333840;
+ width: 100%;
+ z-index: 100;
+ text-align: center;
+}
+.micro-radil-chart-btn{
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ z-index: 99;
+}
+</style>
diff --git a/src/views/components/topology/topo-aside.vue
b/src/views/components/topology/topo-aside.vue
index 57e2226..5d33810 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -17,9 +17,13 @@
<template>
<aside class="link-topo-aside">
+ <Radial v-if="radioStatus" @showRadial="showRadial"
:datas="{nodes:stateTopo.nodes,calls:stateTopo.calls}"/>
<svg class="link-topo-aside-btn mb-10 icon cp lg" @click="show = !show"
:style="`position:${show?'absolute':'initial'};left:${show?290:0}px;transform:
rotate(${show?0 : 180}deg);`">
<use xlink:href="#chevron-left"></use>
</svg>
+ <svg class="link-topo-aside-btn mb-10 icon cp lg"
@click="showRadial(true)" :style="`position:absolute;left:290px;top:50px;`">
+ <use xlink:href="#issues"></use>
+ </svg>
<TopoService/>
<div class="link-topo-aside-box mb-10" v-if="!stateTopo.currentNode.name
&& show">
<div class="mb-20">
@@ -75,8 +79,9 @@ import { State, Mutation, Getter, Action } from 'vuex-class';
import TopoChart from './topo-chart.vue';
import TopoService from './topo-services.vue';
import ChartResponse from './topo-response.vue';
+import Radial from './radial.vue';
-@Component({components: {TopoChart, TopoService, ChartResponse}})
+@Component({components: {TopoChart, TopoService, ChartResponse, Radial}})
export default class Topology extends Vue {
@State('rocketTopo') public stateTopo!: topoState;
@Getter('intervalTime') public intervalTime: any;
@@ -93,8 +98,12 @@ export default class Topology extends Vue {
});
return result;
}
+ private radioStatus: boolean = false;
private show: boolean = true;
private showInfo: boolean = false;
+ private showRadial(status: boolean) {
+ this.radioStatus = status;
+ }
private setMode(mode: boolean) {
this.SET_MODE_STATUS(mode);
this.stateTopo.callback();
