fix: add chart line (#238)
diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index 2c9e25d..28de796 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -179,11 +179,12 @@
data.getSLATrend.values.map((i: any) => i.value) : [];
state.instanceDependencyMetrics.getThroughputTrend = data.getThroughputTrend ?
data.getThroughputTrend.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.p50 = data.p50 ? data.p50.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.p75 = data.p75 ? data.p75.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.p90 = data.p90 ? data.p90.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.p95 = data.p95 ? data.p95.values.map((i: any) => i.value) : [];
- state.instanceDependencyMetrics.p99 = data.p99 ? data.p99.values.map((i: any) => i.value) : [];
+ state.instanceDependencyMetrics.percentResponse = {};
+ state.instanceDependencyMetrics.percentResponse.p50 = data.p50 ? data.p50.values.map((i: any) => i.value) : [];
+ state.instanceDependencyMetrics.percentResponse.p75 = data.p75 ? data.p75.values.map((i: any) => i.value) : [];
+ state.instanceDependencyMetrics.percentResponse.p90 = data.p90 ? data.p90.values.map((i: any) => i.value) : [];
+ state.instanceDependencyMetrics.percentResponse.p95 = data.p95 ? data.p95.values.map((i: any) => i.value) : [];
+ state.instanceDependencyMetrics.percentResponse.p99 = data.p99 ? data.p99.values.map((i: any) => i.value) : [];
},
[types.SET_INSTANCE_DEPEDENCE_TYPE](state: State, data: string) {
state.queryInstanceMetricsType = data;
diff --git a/src/views/components/topology/chart-line.vue b/src/views/components/topology/chart-line.vue
new file mode 100644
index 0000000..4e6abdd
--- /dev/null
+++ b/src/views/components/topology/chart-line.vue
@@ -0,0 +1,108 @@
+/**
+ * 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>
+ <div class="grey sm mb-5">{{title}}</div>
+ <RkEcharts height="120px" :option="option"/>
+ </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class ChartLine extends Vue {
+ @Prop() private data!: any;
+ @Prop() private title!: string;
+ @Prop() private intervalTime!: any;
+ public resize() {
+ const chart: any = this.$refs.chart;
+ chart.myChart.resize();
+ }
+ get option() {
+ const temp: any = [];
+ const keys = Object.keys(this.data || {}).filter((i: any) => Array.isArray(this.data[i]) && this.data[i].length);
+ keys.forEach((i: any, index: number) => {
+ const serie: any = {
+ data: this.data[i].map((item: any, itemIndex: number) => [
+ this.intervalTime[itemIndex],
+ item,
+ ]),
+ name: i,
+ type: 'line',
+ symbol: 'none',
+ barMaxWidth: 10,
+ lineStyle: {
+ width: 1.5,
+ type: 'solid',
+ },
+ };
+ temp.push(serie);
+ });
+ const color: string[] = [
+ '#30A4EB',
+ '#45BFC0',
+ '#FFCC55',
+ '#FF6A84',
+ '#a0a7e6',
+ '#6be6c1',
+ '#626c91',
+ '#96dee8',
+ '#3f96e3',
+ ];
+
+ return {
+ color,
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgb(50,50,50)',
+ textStyle: {
+ fontSize: 13,
+ },
+ },
+ legend: {
+ show: false,
+ },
+ grid: {
+ top: 5,
+ left: 0,
+ right: 18,
+ bottom: 5,
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ axisTick: {
+ lineStyle: { color: '#c1c5ca41' },
+ alignWithLabel: true,
+ },
+ splitLine: { show: false },
+ axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: { show: false },
+ axisTick: { show: false },
+ splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ },
+ series: temp,
+ };
+ }
+}
+</script>
diff --git a/src/views/components/topology/topo-instance-dependency.vue b/src/views/components/topology/topo-instance-dependency.vue
index d61e0aa..c32d8f5 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -26,46 +26,46 @@
<div class="mb-5 clear">
<span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
<span
- v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
- class="link-topo-aside-box-btn tc r sm cp b"
- :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
- @click="setMode('CLIENT')"
+ v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
+ @click="setMode('CLIENT')"
>{{ this.$t('client') }}</span>
<span
- v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
- class="link-topo-aside-box-btn tc r sm cp b"
- :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER' }"
- @click="setMode('SERVER')"
+ v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER' }"
+ @click="setMode('SERVER')"
>{{ this.$t('server') }}</span>
</div>
<div v-if="stateTopo.selectedInstanceCall">
<TopoChart
- v-if="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
- :data="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
- :intervalTime="intervalTime"
- :title="$t('avgResponseTime')"
- unit="ms"
+ v-if="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
+ :data="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgResponseTime')"
+ unit="ms"
/>
<TopoChart
- v-if="stateTopo.instanceDependencyMetrics.getThroughputTrend"
- :data="stateTopo.instanceDependencyMetrics.getThroughputTrend"
- :intervalTime="intervalTime"
- :title="$t('avgThroughput')"
- unit="cpm"
+ v-if="stateTopo.instanceDependencyMetrics.getThroughputTrend"
+ :data="stateTopo.instanceDependencyMetrics.getThroughputTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgThroughput')"
+ unit="cpm"
/>
<TopoChart
- v-if="stateTopo.instanceDependencyMetrics.getSLATrend"
- :data="stateTopo.instanceDependencyMetrics.getSLATrend"
- :intervalTime="intervalTime"
- :precent="true"
- :title="$t('avgSLA')"
- unit="%"
+ v-if="stateTopo.instanceDependencyMetrics.getSLATrend"
+ :data="stateTopo.instanceDependencyMetrics.getSLATrend"
+ :intervalTime="intervalTime"
+ :precent="true"
+ :title="$t('avgSLA')"
+ unit="%"
/>
- <ChartResponse
- v-if="stateTopo.instanceDependencyMetrics.p50"
- :data="stateTopo.instanceDependencyMetrics"
- :intervalTime="intervalTime"
- :title="$t('percentResponse')"
+ <ChartLine
+ v-if="stateTopo.instanceDependencyMetrics.percentResponse"
+ :data="stateTopo.instanceDependencyMetrics.percentResponse"
+ :intervalTime="intervalTime"
+ :title="$t('percentResponse')"
/>
</div>
</div>
@@ -79,12 +79,12 @@
import { State as topoState} from '@/store/modules/topology';
import Topo from './topo.vue';
import TopoChart from './topo-chart.vue';
-import ChartResponse from './topo-response.vue';
import DependencySankey from './dependency-sankey.vue';
+import ChartLine from './chart-line.vue';
@Component({
components: {
- Topo, ChartResponse, TopoChart, DependencySankey,
+ Topo, ChartLine, TopoChart, DependencySankey,
},
})
export default class TopoInstanceDependency extends Vue {
