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 06faa2d feat: add chart options for components (#319)
06faa2d is described below
commit 06faa2d46a370ee2c747756e1a4518179015e5f3
Author: Qiuxia Fan <[email protected]>
AuthorDate: Wed Jun 17 14:16:38 2020 +0800
feat: add chart options for components (#319)
---
src/assets/lang/en.ts | 1 +
src/assets/lang/zh.ts | 1 +
.../components/dashboard/charts/chart-area.vue | 31 ++++++++++++++++++++++
.../components/dashboard/charts/chart-bar.vue | 9 +++----
.../components/dashboard/charts/chart-edit.vue | 17 ++++++++++++
.../components/dashboard/charts/chart-line.vue | 8 +++---
src/views/components/dashboard/charts/constant.ts | 6 +++++
src/views/components/dashboard/charts/index.ts | 2 ++
8 files changed, 66 insertions(+), 9 deletions(-)
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 3494489..66d52ab 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -147,6 +147,7 @@ const m = {
sortOrder: 'Sort Order',
descendOrder: 'Descend Order',
increaseOrder: 'Increase Order',
+ chartType: 'Chart Type',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 6d539db..6ca18a8 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -147,6 +147,7 @@ const m = {
sortOrder: '排序方式',
descendOrder: '递减顺序',
increaseOrder: '递增顺序',
+ chartType: '图表类型',
};
export default m;
diff --git a/src/views/components/dashboard/charts/chart-area.vue
b/src/views/components/dashboard/charts/chart-area.vue
new file mode 100644
index 0000000..3e6d6b5
--- /dev/null
+++ b/src/views/components/dashboard/charts/chart-area.vue
@@ -0,0 +1,31 @@
+<!-- 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>
+ <ChartLine ref="chart" :data="data" :intervalTime="intervalTime"
:type="'areaChart'" />
+</template>
+<script lang="ts">
+ import { Vue, Component, Prop } from 'vue-property-decorator';
+
+ import ChartLine from './chart-line.vue';
+
+ @Component({
+ components: { ChartLine },
+ })
+ export default class ChartArea extends Vue {
+ @Prop() private data!: any;
+ @Prop() private intervalTime!: any;
+ }
+</script>
diff --git a/src/views/components/dashboard/charts/chart-bar.vue
b/src/views/components/dashboard/charts/chart-bar.vue
index ffbe47a..1c86edf 100644
--- a/src/views/components/dashboard/charts/chart-bar.vue
+++ b/src/views/components/dashboard/charts/chart-bar.vue
@@ -28,10 +28,9 @@ limitations under the License. -->
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) => {
- temp.push({
+ const temp = keys.map((i: string, index: number) => {
+ return {
data: this.data[i].map((item: any, itemIndex: number) =>
[this.intervalTime[itemIndex], item]),
name: i,
type: 'bar',
@@ -42,10 +41,10 @@ limitations under the License. -->
width: 1.5,
type: 'dotted',
},
- });
+ };
});
return {
- color: ['#3f96e3', '#3f96e3', '#3fa9e1', '#3fbcde', '#3fcfdc',
'#3fe1da'],
+ color: ['#30A4EB', '#45BFC0', '#FFCC55', '#FF6A84', '#a0a7e6'],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgb(50,50,50)',
diff --git a/src/views/components/dashboard/charts/chart-edit.vue
b/src/views/components/dashboard/charts/chart-edit.vue
index ac82c43..351059e 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -43,6 +43,18 @@ limitations under the License. -->
}}</option>
</select>
</div>
+ <div class="flex-h mb-5" v-show="isChartType">
+ <div class="title grey sm">{{ $t('chartType') }}:</div>
+ <select
+ class="long"
+ v-model="itemConfig.chartType"
+ @change="setItemConfig({ type: 'chartType', value:
$event.target.value })"
+ >
+ <option v-for="chart in ChartTypeOptions" :value="chart.value"
:key="chart.value">
+ {{ chart.label }}
+ </option>
+ </select>
+ </div>
<div class="flex-h mb-5" v-show="isLabel">
<div class="title grey sm">{{ $t('labels') }}:</div>
<input
@@ -241,6 +253,7 @@ limitations under the License. -->
QueryMetricTypes,
MetricChartType,
CalculationType,
+ ChartTypeOptions,
} from './constant';
import { DASHBOARDTYPE } from '../constant';
@@ -264,6 +277,7 @@ limitations under the License. -->
private EntityType = EntityType;
private IndependentType = IndependentType;
private CalculationType = CalculationType;
+ private ChartTypeOptions = ChartTypeOptions;
private services: any = [];
private endpoints: any = [];
private instances: any = [];
@@ -273,6 +287,7 @@ limitations under the License. -->
private isIndependentSelector = false;
private nameMetrics = ['sortMetrics', 'readSampledRecords'];
private pageTypes = [TopologyType.TOPOLOGY_ENDPOINT,
TopologyType.TOPOLOGY_INSTANCE] as any[];
+ private isChartType = false;
private created() {
this.itemConfig = this.item;
@@ -285,6 +300,7 @@ limitations under the License. -->
this.isLabel = this.itemConfig.metricType === MetricsType.LABELED_VALUE
? true : false;
this.isIndependentSelector =
this.rocketComps.tree[this.rocketComps.group].type === 'metric' ||
this.pageTypes.includes(this.type);
+ this.isChartType = ['readMetricsValues',
'readLabeledMetricsValues'].includes(this.itemConfig.queryMetricType);
if (!this.itemConfig.independentSelector ||
this.pageTypes.includes(this.type)) {
return;
}
@@ -381,6 +397,7 @@ limitations under the License. -->
...this.itemConfig,
...values,
};
+ this.isChartType = ['readMetricsValues',
'readLabeledMetricsValues'].includes(this.itemConfig.queryMetricType);
return;
}
if (params.type === 'independentSelector' || params.type ===
'parentService') {
diff --git a/src/views/components/dashboard/charts/chart-line.vue
b/src/views/components/dashboard/charts/chart-line.vue
index b250c37..3527efe 100644
--- a/src/views/components/dashboard/charts/chart-line.vue
+++ b/src/views/components/dashboard/charts/chart-line.vue
@@ -22,15 +22,15 @@ limitations under the License. -->
@Component
export default class ChartLine extends Vue {
@Prop() private data!: any;
+ @Prop() private type!: 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 temp = keys.map((i: any, index: number) => {
const serie: any = {
data: this.data[i].map((item: any, itemIndex: number) =>
[this.intervalTime[itemIndex], item]),
name: i,
@@ -42,10 +42,10 @@ limitations under the License. -->
type: 'solid',
},
};
- if (keys.length === 2) {
+ if (this.type === 'areaChart') {
serie.areaStyle = {};
}
- temp.push(serie);
+ return serie;
});
let color: string[] = [];
switch (keys.length) {
diff --git a/src/views/components/dashboard/charts/constant.ts
b/src/views/components/dashboard/charts/constant.ts
index 00b00ba..91c79e3 100644
--- a/src/views/components/dashboard/charts/constant.ts
+++ b/src/views/components/dashboard/charts/constant.ts
@@ -61,3 +61,9 @@ export const CalculationType = [
{ label: 'Multiplication', value: '*' },
{ label: 'Division', value: '/' },
];
+
+export const ChartTypeOptions = [
+ { value: 'ChartLine', label: 'Line Chart' },
+ { value: 'ChartArea', label: 'Area Chart' },
+ { value: 'ChartBar', label: 'Bar Chart' },
+];
diff --git a/src/views/components/dashboard/charts/index.ts
b/src/views/components/dashboard/charts/index.ts
index 5b952ae..28cedc1 100644
--- a/src/views/components/dashboard/charts/index.ts
+++ b/src/views/components/dashboard/charts/index.ts
@@ -18,6 +18,7 @@
import ChartBrief from './chart-brief.vue';
import ChartNum from './chart-num.vue';
import ChartLine from './chart-line.vue';
+import ChartArea from './chart-area.vue';
import ChartBar from './chart-bar.vue';
import ChartHeatmap from './chart-heatmap.vue';
import ChartSlow from './chart-slow.vue';
@@ -38,5 +39,6 @@ export default {
ChartSlow,
ChartTrace,
ChartSankey,
+ ChartArea,
ChartEdit,
};
