github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-14 09:00:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove marker

Browse Source
This commit is contained in:
Qiuxia Fan 2022-07-15 14:51:34 +08:00
parent ed13de38be
commit 09ab2e4c99
2 changed files with 2 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,6 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { Event } from "@/types/events";
import { BarConfig, EventParams } from "@/types/dashboard"; import { BarConfig, EventParams } from "@/types/dashboard";
/*global defineProps, defineEmits */ /*global defineProps, defineEmits */
@ -30,7 +29,6 @@ const props = defineProps({
}, },
intervalTime: { type: Array as PropType<string[]>, default: () => [] }, intervalTime: { type: Array as PropType<string[]>, default: () => [] },
theme: { type: String, default: "light" }, theme: { type: String, default: "light" },
itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
config: { config: {
type: Object as PropType< type: Object as PropType<
BarConfig & { BarConfig & {
@ -50,30 +48,7 @@ function getOption() {
const keys = Object.keys(props.data || {}).filter( const keys = Object.keys(props.data || {}).filter(
(i: any) => Array.isArray(props.data[i]) && props.data[i].length (i: any) => Array.isArray(props.data[i]) && props.data[i].length
); );
const startP = keys.length > 1 ? 50 : 15; const temp = keys.map((i: string) => {
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) => {
if (!props.intervalTime) { if (!props.intervalTime) {
return; return;
} }
@ -94,23 +69,6 @@ function getOption() {
backgroundStyle: { backgroundStyle: {
color: "rgba(180, 180, 180, 0.1)", 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[] = []; let color: string[] = [];

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

@ -18,7 +18,6 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { Event } from "@/types/events";
import { LineConfig, EventParams } from "@/types/dashboard"; import { LineConfig, EventParams } from "@/types/dashboard";
/*global defineProps, defineEmits */ /*global defineProps, defineEmits */
@ -30,7 +29,6 @@ const props = defineProps({
}, },
intervalTime: { type: Array as PropType<string[]>, default: () => [] }, intervalTime: { type: Array as PropType<string[]>, default: () => [] },
theme: { type: String, default: "light" }, theme: { type: String, default: "light" },
itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
config: { config: {
type: Object as PropType< type: Object as PropType<
LineConfig & { LineConfig & {
@ -58,30 +56,7 @@ function getOption() {
const keys = Object.keys(props.data || {}).filter( const keys = Object.keys(props.data || {}).filter(
(i: any) => Array.isArray(props.data[i]) && props.data[i].length (i: any) => Array.isArray(props.data[i]) && props.data[i].length
); );
const startP = keys.length > 1 ? 50 : 15; const temp = keys.map((i: any) => {
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 serie: any = { const serie: any = {
data: props.data[i].map((item: any, itemIndex: number) => [ data: props.data[i].map((item: any, itemIndex: number) => [
props.intervalTime[itemIndex], props.intervalTime[itemIndex],
@ -98,23 +73,6 @@ function getOption() {
width: 1.5, width: 1.5,
type: "solid", 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") { if (props.config.type === "Area") {
serie.areaStyle = { serie.areaStyle = {