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

verify data

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-30 15:41:34 +08:00
parent 9f64086d51
commit 85c667396c
3 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Graph.vue
View File

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div <div
v-if="isRight" v-if="available"
ref="chartRef" ref="chartRef"
:style="`height:${height};width:${width};`" :style="`height:${height};width:${width};`"
></div> ></div>
<div v-else>No Data</div> <div v-else class="no-data">No Data</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import {
@ -48,12 +48,11 @@ const props = defineProps({
default: () => ({}), default: () => ({}),
}, },
}); });
const isRight = computed( const available = computed(
() => () =>
props.option.series && props.option.series[0] && props.option.series[0].data props.option.series && props.option.series[0] && props.option.series[0].data
); );
onMounted(async () => { onMounted(async () => {
console.log(props.option);
await setOptions(props.option); await setOptions(props.option);
chartRef.value && addResizeListener(unref(chartRef), resize); chartRef.value && addResizeListener(unref(chartRef), resize);
setTimeout(() => { setTimeout(() => {
@ -82,3 +81,14 @@ onBeforeUnmount(() => {
removeResizeListener(unref(chartRef), resize); removeResizeListener(unref(chartRef), resize);
}); });
</script> </script>
<style lang="scss" scoped>
.no-data {
font-size: 12px;
height: 100%;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
</style>

7
src/views/dashboard/graphs/Card.vue
View File

@ -25,7 +25,7 @@ limitations under the License. -->
{{ metricConfig[0]?.unit }} {{ metricConfig[0]?.unit }}
</span> </span>
</div> </div>
<div class="center chart-card" v-else>No Data</div> <div class="center no-data" v-else>No Data</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, PropType } from "vue"; import { computed, PropType } from "vue";
@ -64,4 +64,9 @@ const singleVal = computed(() => Number(props.data[key.value]));
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-box-align: center; -webkit-box-align: center;
} }
.no-data {
height: 100%;
color: #666;
}
</style> </style>

16
src/views/dashboard/graphs/TopList.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="top-list"> <div class="top-list" v-if="available">
<div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index"> <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
<div class="ell tools flex-h"> <div class="ell tools flex-h">
<div> <div>
@ -40,6 +40,7 @@ limitations under the License. -->
/> />
</div> </div>
</div> </div>
<div class="center no-data" v-else>No Data</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";
@ -61,6 +62,9 @@ const props = defineProps({
intervalTime: { type: Array as PropType<string[]>, default: () => [] }, intervalTime: { type: Array as PropType<string[]>, default: () => [] },
}); });
const key = computed(() => Object.keys(props.data)[0] || ""); const key = computed(() => Object.keys(props.data)[0] || "");
const available = computed(
() => Array.isArray(props.data[key.value]) && props.data[key.value][0].value
);
const maxValue = computed(() => { const maxValue = computed(() => {
if (!(props.data[key.value] && props.data[key.value].length)) { if (!(props.data[key.value] && props.data[key.value].length)) {
return 0; return 0;
@ -114,4 +118,14 @@ function handleClick(i: string) {
will-change: opacity, background-color; will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s; transition: opacity 0.3s, background-color 0.3s;
} }
.no-data {
height: 100%;
color: #666;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
</style> </style>