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

refactor: update Graph component

Browse Source
This commit is contained in:
Qiuxia Fan 2022-01-10 19:51:14 +08:00
parent a496b6d24c
commit 2fb39ca82f
2 changed files with 25 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Graph.vue
View File

@ -13,24 +13,16 @@ 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>
<div ref="chart" :style="`height:${height};width:${width};`"></div>
<div ref="chartRef" :style="`height:${height};width:${width};`"></div>
</template>
<script lang="ts" setup>
import {
onMounted,
watch,
reactive,
ref,
defineProps,
onBeforeUnmount,
} from "vue";
import { watch, ref, defineProps, Ref } from "vue";
import type { PropType } from "vue";
import * as echarts from "echarts";
import { useECharts } from "@/hooks/useECharts";
/*global Nullable*/
const chart = ref<Nullable<HTMLElement>>(null);
const state = reactive<{ instanceChart: any }>({
instanceChart: null,
});
const chartRef = ref<Nullable<HTMLDivElement>>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const props = defineProps({
clickEvent: { type: Function as PropType<(param: unknown) => void> },
height: { type: String, default: "100%" },
@ -41,46 +33,10 @@ const props = defineProps({
},
});
onMounted(() => {
setTimeout(() => {
drawEcharts();
window.addEventListener("resize", state.instanceChart.resize);
}, 50);
});
function drawEcharts(): void {
if (!chart.value) {
return;
}
if (state.instanceChart) {
return;
}
state.instanceChart = echarts.init(chart.value, "");
unWarp(state.instanceChart).setOption(props.option);
state.instanceChart.on("click", (params: any) => {
if (!props.clickEvent) {
return;
}
props.clickEvent(params);
});
}
function unWarp(obj: any) {
return obj && (obj.__v_raw || obj.valueOf() || obj);
}
watch(
() => props.option,
(opt) => {
if (state.instanceChart) {
state.instanceChart.setOption(opt, true);
} else {
drawEcharts();
}
setOptions(opt);
}
);
onBeforeUnmount(() => {
if (state.instanceChart.dispose) {
state.instanceChart.dispose();
}
window.removeEventListener("resize", state.instanceChart.resize);
});
</script>

36
src/views/dashboard/Edit.vue
View File

@ -29,30 +29,30 @@ limitations under the License. -->
<script lang="ts" setup>
import { ElDialog } from "element-plus";
import GridLayout from "./panel/Layout.vue";
import { LayoutConfig } from "@/types/dashboard";
// import { LayoutConfig } from "@/types/dashboard";
import Tool from "./panel/Tool.vue";
import WidgetConfig from "./configuration/ConfigEdit.vue";
import { useDashboardStore } from "@/store/modules/dashboard";
const dashboardStore = useDashboardStore();
// fetch layout data from serve side
const layout: any[] = [
{ x: 0, y: 0, w: 4, h: 12, i: "0" },
{ x: 4, y: 0, w: 4, h: 12, i: "1" },
{ x: 8, y: 0, w: 4, h: 15, i: "2" },
{ x: 12, y: 0, w: 4, h: 9, i: "3" },
{ x: 16, y: 0, w: 4, h: 9, i: "4" },
{ x: 20, y: 0, w: 4, h: 9, i: "5" },
{ x: 0, y: 12, w: 4, h: 15, i: "7" },
{ x: 4, y: 12, w: 4, h: 15, i: "8" },
{ x: 8, y: 15, w: 4, h: 12, i: "9" },
{ x: 12, y: 9, w: 4, h: 12, i: "10" },
{ x: 16, y: 9, w: 4, h: 12, i: "11" },
{ x: 20, y: 9, w: 4, h: 15, i: "12" },
{ x: 0, y: 27, w: 4, h: 12, i: "14" },
{ x: 4, y: 27, w: 4, h: 12, i: "15" },
{ x: 8, y: 27, w: 4, h: 15, i: "16" },
];
// const layout: any[] = [
// { x: 0, y: 0, w: 4, h: 12, i: "0" },
// { x: 4, y: 0, w: 4, h: 12, i: "1" },
// { x: 8, y: 0, w: 4, h: 15, i: "2" },
// { x: 12, y: 0, w: 4, h: 9, i: "3" },
// { x: 16, y: 0, w: 4, h: 9, i: "4" },
// { x: 20, y: 0, w: 4, h: 9, i: "5" },
// { x: 0, y: 12, w: 4, h: 15, i: "7" },
// { x: 4, y: 12, w: 4, h: 15, i: "8" },
// { x: 8, y: 15, w: 4, h: 12, i: "9" },
// { x: 12, y: 9, w: 4, h: 12, i: "10" },
// { x: 16, y: 9, w: 4, h: 12, i: "11" },
// { x: 20, y: 9, w: 4, h: 15, i: "12" },
// { x: 0, y: 27, w: 4, h: 12, i: "14" },
// { x: 4, y: 27, w: 4, h: 12, i: "15" },
// { x: 8, y: 27, w: 4, h: 15, i: "16" },
// ];
// dashboardStore.setLayout(layout);
function handleClick(e: any) {
e.stopPropagation();