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 60ca1cd Feat: implement scrolling legends and tooltips in graphics
(#342)
60ca1cd is described below
commit 60ca1cd698ba058850779717535b2b7119e95141
Author: Qiuxia Fan <[email protected]>
AuthorDate: Tue Aug 18 14:38:06 2020 +0800
Feat: implement scrolling legends and tooltips in graphics (#342)
---
src/components/rk-echarts.vue | 1 +
src/store/modules/topology/index.ts | 7 +++++
.../components/dashboard/charts/chart-bar.vue | 34 +++++++++++++++++++++-
.../components/dashboard/charts/chart-line.vue | 22 +++++++++++++-
.../dashboard/tool-bar-endpoint-select.vue | 1 -
.../topology/endpoint-dependency/index.vue | 2 +-
6 files changed, 63 insertions(+), 4 deletions(-)
diff --git a/src/components/rk-echarts.vue b/src/components/rk-echarts.vue
index 2b35a9d..86061c7 100644
--- a/src/components/rk-echarts.vue
+++ b/src/components/rk-echarts.vue
@@ -20,6 +20,7 @@ limitations under the License. -->
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import echarts from 'echarts/lib/echarts';
+ import 'echarts/lib/component/legendScroll';
import { Action } from 'vuex-class';
@Component
export default class RkEcharts extends Vue {
diff --git a/src/store/modules/topology/index.ts
b/src/store/modules/topology/index.ts
index 28d4ecb..850cd31 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -484,6 +484,9 @@ const actions: ActionTree<State, any> = {
params: { endpointIds: string[]; duration: Duration },
) {
context.dispatch('GET_ENDPOINT_TOPO', params).then((res) => {
+ if (!res) {
+ return;
+ }
if (context.state.currentEndpointDepth.key > 1) {
const endpointIds = res.nodes.map((item: Node) => item.id);
@@ -555,6 +558,10 @@ const actions: ActionTree<State, any> = {
calls.push(...topo[key].calls);
nodes.push(...topo[key].nodes);
}
+ if (!nodes.length) {
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { calls: [], nodes: []
});
+ return;
+ }
const obj = {} as any;
nodes = nodes.reduce((prev: Node[], next: Node) => {
if (!obj[next.id]) {
diff --git a/src/views/components/dashboard/charts/chart-bar.vue
b/src/views/components/dashboard/charts/chart-bar.vue
index 1c86edf..dd193e5 100644
--- a/src/views/components/dashboard/charts/chart-bar.vue
+++ b/src/views/components/dashboard/charts/chart-bar.vue
@@ -43,16 +43,48 @@ limitations under the License. -->
},
};
});
+ let color: string[] = [];
+ switch (keys.length) {
+ case 2:
+ color = ['#FF6A84', '#a0b1e6'];
+ break;
+ case 1:
+ color = ['#3f96e3'];
+ break;
+ default:
+ color = [
+ '#30A4EB',
+ '#45BFC0',
+ '#FFCC55',
+ '#FF6A84',
+ '#a0a7e6',
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3',
+ ];
+ break;
+ }
return {
- color: ['#30A4EB', '#45BFC0', '#FFCC55', '#FF6A84', '#a0a7e6'],
+ color,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgb(50,50,50)',
textStyle: {
fontSize: 13,
},
+ enterable: true,
+ extraCssText: 'max-height: 300px; overflow: scroll;',
},
legend: {
+ type: 'scroll',
show: keys.length === 1 ? false : true,
icon: 'circle',
top: 0,
diff --git a/src/views/components/dashboard/charts/chart-line.vue
b/src/views/components/dashboard/charts/chart-line.vue
index 407dac7..992c670 100644
--- a/src/views/components/dashboard/charts/chart-line.vue
+++ b/src/views/components/dashboard/charts/chart-line.vue
@@ -58,7 +58,24 @@ limitations under the License. -->
color = ['#3f96e3'];
break;
default:
- color = ['#30A4EB', '#45BFC0', '#FFCC55', '#FF6A84', '#a0a7e6'];
+ color = [
+ '#30A4EB',
+ '#45BFC0',
+ '#FFCC55',
+ '#FF6A84',
+ '#a0a7e6',
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3',
+ ];
break;
}
return {
@@ -69,8 +86,11 @@ limitations under the License. -->
textStyle: {
fontSize: 13,
},
+ enterable: true,
+ extraCssText: 'max-height: 300px; overflow: scroll;',
},
legend: {
+ type: 'scroll',
show: keys.length === 1 ? false : true,
icon: 'circle',
top: 0,
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select.vue
b/src/views/components/dashboard/tool-bar-endpoint-select.vue
index 5cfdc38..03a6dba 100644
--- a/src/views/components/dashboard/tool-bar-endpoint-select.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select.vue
@@ -63,7 +63,6 @@ limitations under the License. -->
import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
@Component({ components: { EndpointOpt } })
export default class ToolBarEndpointSelect extends Vue {
- @Action('GET_SERVICE_ENDPOINTS') public GET_SERVICE_ENDPOINTS: any;
@Prop() public data!: any;
@Prop() public current!: any;
@Prop() public title!: string;
diff --git a/src/views/containers/topology/endpoint-dependency/index.vue
b/src/views/containers/topology/endpoint-dependency/index.vue
index 51a5a43..249163a 100644
--- a/src/views/containers/topology/endpoint-dependency/index.vue
+++ b/src/views/containers/topology/endpoint-dependency/index.vue
@@ -70,7 +70,7 @@ limitations under the License. -->
this.SET_CURRENT_SERVICE(this.current);
this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
this.GET_SERVICE_ENDPOINTS({ duration: this.durationTime, serviceId:
this.current.key, keyword: '' }).then(() => {
- this.selectEndpoint(this.stateDashboardOption.endpoints[0]);
+ this.selectEndpoint(this.stateDashboardOption.endpoints[0] || {});
});
this.depths = [1, 2, 3, 4, 5].map((item: number) => ({ key: item, label:
String(item) }));
}
