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

update legend layout

Browse Source
This commit is contained in:
Fine 2022-11-09 15:56:09 +08:00
parent da177950c8
commit 07dcee129d
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/dashboard/graphs/components/Legend.vue
View File

@ -16,14 +16,19 @@ limitations under the License. -->
<div <div
:style="`width: ${ :style="`width: ${
config.width || (isRight ? '150px' : '100%') config.width || (isRight ? '150px' : '100%')
}; max-height:${isRight ? '100%' : 130}`" }; maxHeight:${isRight ? '100%' : 130}`"
v-if="tableData.length && config.asTable" v-if="tableData.length && config.asTable"
class="flex-v legend"
> >
<div class="col-item"> <div class="col-item flex-h">
<span class="empty"></span> <span class="empty"></span>
<span v-for="h in headerRow" :key="h.value">{{ h.label }}</span> <span v-for="h in headerRow" :key="h.value">{{ h.label }}</span>
</div> </div>
<div class="col-item" v-for="(item, index) in tableData" :key="index"> <div
class="col-item flex-h"
v-for="(item, index) in tableData"
:key="index"
>
<span> <span>
<Icon iconName="circle" :style="`color: ${colors[index]};`" /> <Icon iconName="circle" :style="`color: ${colors[index]};`" />
<i style="font-style: normal">{{ item.name }}</i> <i style="font-style: normal">{{ item.name }}</i>
@ -68,14 +73,18 @@ const colors = computed(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.legend {
overflow: auto;
}
.col-item { .col-item {
font-size: 12px; font-size: 12px;
width: 100%; height: 30px;
overflow: auto;
span { span {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
min-width: 60px;
} }
} }
</style> </style>