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

feat: event widget associates with trace and log widget (#130)

Browse Source
This commit is contained in:
Fine0830
2022-07-29 16:34:36 +08:00
committed by GitHub
parent dc8e4bf273
commit 3b3e790dd9
8 changed files with 260 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/Graph.vue
View File

@@ -94,6 +94,71 @@ onMounted(async () => {
}, 1000);
});
function updateOptions() {
const instance = getInstance();
if (!instance) {
return;
}
if (!props.filters) {
return;
}
if (props.filters.isRange) {
const options = eventAssociate();
setOptions(options || props.option);
} else {
instance.dispatchAction({
type: "showTip",
dataIndex: props.filters.dataIndex,
seriesIndex: 0,
});
}
}
function eventAssociate() {
if (!props.filters) {
return;
}
if (!props.filters.duration) {
return props.option;
}
if (!props.option.series[0]) {
return;
}
const list = props.option.series[0].data.map(
(d: (number | string)[]) => d[0]
);
if (!list.includes(props.filters.duration.endTime)) {
return;
}
const markArea = {
silent: true,
itemStyle: {
opacity: 0.3,
},
data: [
[
{
xAxis: props.filters.duration.startTime,
},
{
xAxis: props.filters.duration.endTime,
},
],
],
};
const series = (window as any).structuredClone(props.option.series);
for (const [key, temp] of series.entries()) {
if (key === 0) {
temp.markArea = markArea;
}
}
const options = {
...props.option,
series,
};
return options;
}
watch(
() => props.option,
(newVal, oldVal) => {
@@ -103,62 +168,17 @@ watch(
if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
return;
}
setOptions(newVal);
let options;
if (props.filters && props.filters.isRange) {
options = eventAssociate();
}
setOptions(options || props.option);
}
);
watch(
() => props.filters,
() => {
const instance = getInstance();
if (!instance) {
return;
}
if (props.filters) {
if (props.filters.isRange) {
const list = props.option.series[0].data.map(
(d: (number | string)[]) => d[0]
);
if (!list.includes(props.filters.duration.endTime)) {
return;
}
const markArea = {
silent: true,
itemStyle: {
opacity: 0.3,
},
data: [
[
{
xAxis: props.filters.duration.startTime,
},
{
xAxis: props.filters.duration.endTime,
},
],
],
};
const series = (window as any).structuredClone(props.option.series);
for (const [key, temp] of series.entries()) {
if (key === 0) {
temp.markArea = markArea;
}
}
const options = {
...props.option,
series,
};
if (JSON.stringify(options) === JSON.stringify(props.option)) {
return;
}
setOptions(options);
return;
}
instance.dispatchAction({
type: "showTip",
dataIndex: props.filters.dataIndex,
seriesIndex: 0,
});
}
updateOptions();
}
);