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

refactor function

Browse Source
This commit is contained in:
Qiuxia Fan 2022-07-28 17:54:25 +08:00
parent 1f98d2bfa1
commit 7818a11aa5
1 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/Graph.vue
View File

@ -94,6 +94,63 @@ onMounted(async () => {
}, 1000); }, 1000);
}); });
function updateOptions() {
const instance = getInstance();
if (!instance) {
return;
}
if (props.filters) {
if (props.filters.isRange) {
if (!props.filters.duration.startTime) {
setOptions(props.option);
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,
};
if (JSON.stringify(options) === JSON.stringify(props.option)) {
return;
}
setOptions(options);
return;
}
instance.dispatchAction({
type: "showTip",
dataIndex: props.filters.dataIndex,
seriesIndex: 0,
});
}
}
watch( watch(
() => props.option, () => props.option,
(newVal, oldVal) => { (newVal, oldVal) => {
@ -109,60 +166,7 @@ watch(
watch( watch(
() => props.filters, () => props.filters,
() => { () => {
const instance = getInstance(); updateOptions();
if (!instance) {
return;
}
if (props.filters) {
if (props.filters.isRange) {
if (!props.filters.duration.startTime) {
setOptions(props.option);
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,
};
if (JSON.stringify(options) === JSON.stringify(props.option)) {
return;
}
setOptions(options);
return;
}
instance.dispatchAction({
type: "showTip",
dataIndex: props.filters.dataIndex,
seriesIndex: 0,
});
}
} }
); );