github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance associations for the Event widget (#120)

Browse Source
This commit is contained in:
Fine0830
2022-07-19 11:57:26 +08:00
committed by GitHub
parent e144b43267
commit 42ead4a572
18 changed files with 247 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/dashboard/graphs/Area.vue
View File

@@ -38,9 +38,13 @@ defineProps({
type: Object as PropType<
AreaConfig & {
filters: {
value: number | string;
dataIndex: number;
sourceId: string;
duration: {
startTime: string;
endTime: string;
};
isRange: boolean;
dataIndex?: number;
};
} & { id: string }
>,

52
src/views/dashboard/graphs/Bar.vue
View File

@@ -18,7 +18,6 @@ limitations under the License. -->
<script lang="ts" setup>
import { computed } from "vue";
import type { PropType } from "vue";
import { Event } from "@/types/events";
import { BarConfig, EventParams } from "@/types/dashboard";
/*global defineProps, defineEmits */
@@ -30,14 +29,17 @@ const props = defineProps({
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
theme: { type: String, default: "light" },
itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
config: {
type: Object as PropType<
BarConfig & {
filters: {
value: number | string;
dataIndex: number;
sourceId: string;
duration: {
startTime: string;
endTime: string;
};
isRange: boolean;
dataIndex?: number;
};
} & { id: string }
>,
@@ -50,30 +52,7 @@ function getOption() {
const keys = Object.keys(props.data || {}).filter(
(i: any) => Array.isArray(props.data[i]) && props.data[i].length
);
const startP = keys.length > 1 ? 50 : 15;
const diff = 15;
const markAreas = (props.itemEvents || []).map(
(event: Event, index: number) => {
return [
{
name: `${event.name}:${event.type}`,
xAxis: event.startTime,
y: startP + diff * index,
itemStyle: {
borderWidth: 2,
borderColor: event.type === "Normal" ? "#5dc859" : "#FF0087",
color: event.type === "Normal" ? "#5dc859" : "#FF0087",
},
},
{
name: event.message,
xAxis: event.endTime,
y: startP + diff * (index + 1),
},
];
}
);
const temp = keys.map((i: string, index: number) => {
const temp = keys.map((i: string) => {
if (!props.intervalTime) {
return;
}
@@ -94,23 +73,6 @@ function getOption() {
backgroundStyle: {
color: "rgba(180, 180, 180, 0.1)",
},
markArea:
index === 0
? {
silent: false,
data: markAreas,
label: {
show: false,
width: 60,
},
emphasis: {
label: {
position: "bottom",
show: true,
},
},
}
: undefined,
};
});
let color: string[] = [];

52
src/views/dashboard/graphs/Line.vue
View File

@@ -18,7 +18,6 @@ limitations under the License. -->
<script lang="ts" setup>
import { computed } from "vue";
import type { PropType } from "vue";
import { Event } from "@/types/events";
import { LineConfig, EventParams } from "@/types/dashboard";
/*global defineProps, defineEmits */
@@ -30,14 +29,17 @@ const props = defineProps({
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
theme: { type: String, default: "light" },
itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
config: {
type: Object as PropType<
LineConfig & {
filters: {
value: number | string;
dataIndex: number;
sourceId: string;
duration: {
startTime: string;
endTime: string;
};
isRange: boolean;
dataIndex?: number;
};
} & { id: string }
>,
@@ -58,30 +60,7 @@ function getOption() {
const keys = Object.keys(props.data || {}).filter(
(i: any) => Array.isArray(props.data[i]) && props.data[i].length
);
const startP = keys.length > 1 ? 50 : 15;
const diff = 10;
const markAreas = (props.itemEvents || []).map(
(event: Event, index: number) => {
return [
{
name: `${event.name}:${event.type}`,
xAxis: event.startTime,
y: startP + diff * index,
itemStyle: {
borderWidth: 2,
borderColor: event.type === "Normal" ? "#5dc859" : "#FF0087",
color: event.type === "Normal" ? "#5dc859" : "#FF0087",
},
},
{
name: event.message,
xAxis: event.endTime,
y: startP + diff * (index + 1),
},
];
}
);
const temp = keys.map((i: any, index: number) => {
const temp = keys.map((i: any) => {
const serie: any = {
data: props.data[i].map((item: any, itemIndex: number) => [
props.intervalTime[itemIndex],
@@ -98,23 +77,6 @@ function getOption() {
width: 1.5,
type: "solid",
},
markArea:
index === 0
? {
silent: false,
data: markAreas,
label: {
show: false,
width: 60,
},
emphasis: {
label: {
position: "bottom",
show: true,
},
},
}
: undefined,
};
if (props.config.type === "Area") {
serie.areaStyle = {