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 table

Browse Source
This commit is contained in:
Fine 2022-11-08 17:01:40 +08:00
parent 979c3c7a8d
commit b8dc9e743c
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/hooks/useLegendProcessor.ts
View File

@ -47,13 +47,13 @@ export default function useLegendProcess(legend?: LegendOptions) {
if (legend.min) { if (legend.min) {
item.min = Math.min(...data[value]); item.min = Math.min(...data[value]);
if (key === 0) { if (key === 0) {
headers.push("min"); headers.push({ value: "min", label: "Min" });
} }
} }
if (legend.max) { if (legend.max) {
item.max = Math.max(...data[value]); item.max = Math.max(...data[value]);
if (key === 0) { if (key === 0) {
headers.push("max"); headers.push({ value: "max", label: "Max" });
} }
} }
if (legend.mean) { if (legend.mean) {
@ -63,7 +63,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
}, 0); }, 0);
item.mean = total / data[value].length; item.mean = total / data[value].length;
if (key === 0) { if (key === 0) {
headers.push("mean"); headers.push({ value: "mean", label: "Mean" });
} }
} }
if (legend.total) { if (legend.total) {
@ -72,7 +72,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
return prev; return prev;
}, 0); }, 0);
if (key === 0) { if (key === 0) {
headers.push("total"); headers.push({ value: "total", label: "Total" });
} }
} }
} }

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

@ -13,16 +13,21 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div :style="`width: ${config.width || '100%'}`" v-if="source.length"> <div
<el-table :data="source" style="width: 100%"> :style="`width: ${config.width || '100%'}, max-height:${
<el-table-column prop="name" label="Name" width="180" /> isRight ? '100%' : 130
<el-table-column }`"
v-for="item in headers" v-if="source.length"
:prop="item" class="legend"
label="Address" >
:key="item" <div class="col-item">
/> <span></span>
</el-table> <span v-for="h in headers" :key="h.value">{{ h.label }}</span>
</div>
<div class="col-item" v-for="(item, index) in source" :key="index">
<span>{{ item.name }}</span>
<span v-for="h in headers" :key="h.value">{{ item[h.value] }}</span>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -41,6 +46,11 @@ const props = defineProps({
default: () => ({}), default: () => ({}),
}, },
}); });
const { aggregations } = useLegendProcess(props.config); const { aggregations, isRight } = useLegendProcess(props.config);
const { source, headers } = aggregations(props.data); const { source, headers } = aggregations(props.data);
</script> </script>
<style lang="scss" scoped>
.legend {
overflow: auto;
}
</style>