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

refactor legend layout

Browse Source
This commit is contained in:
Fine 2022-11-09 17:19:48 +08:00
parent cc4af1077f
commit 1d42a0143f
1 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,27 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div <div
class="legend"
:style="`width: ${ :style="`width: ${
config.width || (isRight ? '150px' : '100%') config.width || (isRight ? '150px' : '100%')
}; maxHeight:${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 flex-h"> <table>
<span class="empty"></span> <tr class="col-item">
<span v-for="h in headerRow" :key="h.value">{{ h.label }}</span> <td class="empty"></td>
</div> <td v-for="h in headerRow" :key="h.value">
<div <div class="cell">{{ h.label }}</div>
class="col-item flex-h" </td>
v-for="(item, index) in tableData" </tr>
:key="index" <tr class="col-item" v-for="(item, index) in tableData" :key="index">
> <td>
<span> <div class="cell">
<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>
</span>
<span v-for="h in headerRow" :key="h.value">{{ item[h.value] }}</span>
</div> </div>
</td>
<td v-for="h in headerRow" :key="h.value">
<div class="cell">{{ item[h.value] }}</div>
</td>
</tr>
</table>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -73,18 +77,34 @@ const colors = computed(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
table {
table-layout: fixed;
width: 100%;
}
.legend { .legend {
overflow: auto; overflow: auto;
} }
.col-item { .col-item {
td {
font-size: 12px; font-size: 12px;
height: 30px; font-weight: normal;
padding: 3px 0;
span { box-sizing: border-box;
display: inline-block; text-overflow: ellipsis;
padding: 5px; vertical-align: middle;
min-width: 60px; width: 60px;
} }
} }
.cell {
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-all;
line-height: 23px;
padding: 0 5px;
}
</style> </style>