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

add table in legend

Browse Source
This commit is contained in:
Fine 2022-11-08 15:58:47 +08:00
parent 19324ab92d
commit 979c3c7a8d
2 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/hooks/useLegendProcessor.ts
View File

@ -34,35 +34,52 @@ export default function useLegendProcess(legend?: LegendOptions) {
return true; return true;
} }
function aggregations(data: { [key: string]: number[] }) { function aggregations(data: { [key: string]: number[] }) {
const source: any = {}; const source: { [key: string]: unknown }[] = [];
const keys = Object.keys(data); const keys = Object.keys(data);
const headers = [];
for (const k of keys) { for (const [key, value] of keys.entries()) {
source[k].linear = data[k]; const item: { [key: string]: unknown } = {
name: value,
linear: data[value],
};
if (legend) { if (legend) {
if (legend.min) { if (legend.min) {
source[k].min = Math.min(...data[k]); item.min = Math.min(...data[value]);
if (key === 0) {
headers.push("min");
}
} }
if (legend.max) { if (legend.max) {
source[k].max = Math.max(...data[k]); item.max = Math.max(...data[value]);
if (key === 0) {
headers.push("max");
}
} }
if (legend.mean) { if (legend.mean) {
const total = data[k].reduce((prev: number, next: number) => { const total = data[value].reduce((prev: number, next: number) => {
prev += next; prev += next;
return prev; return prev;
}, 0); }, 0);
source[k].mean = total / data[k].length; item.mean = total / data[value].length;
if (key === 0) {
headers.push("mean");
}
} }
if (legend.total) { if (legend.total) {
source[k].total = data[k].reduce((prev: number, next: number) => { item.total = data[value].reduce((prev: number, next: number) => {
prev += next; prev += next;
return prev; return prev;
}, 0); }, 0);
if (key === 0) {
headers.push("total");
} }
} }
} }
source.push(item);
}
return source; return { source, headers };
} }
return { showEchartsLegend, isRight, aggregations }; return { showEchartsLegend, isRight, aggregations };
} }

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

@ -13,7 +13,17 @@ 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%'}`">legend</div> <div :style="`width: ${config.width || '100%'}`" v-if="source.length">
<el-table :data="source" style="width: 100%">
<el-table-column prop="name" label="Name" width="180" />
<el-table-column
v-for="item in headers"
:prop="item"
label="Address"
:key="item"
/>
</el-table>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";
@ -32,6 +42,5 @@ const props = defineProps({
}, },
}); });
const { aggregations } = useLegendProcess(props.config); const { aggregations } = useLegendProcess(props.config);
const source = aggregations(props.data); const { source, headers } = aggregations(props.data);
console.log(source);
</script> </script>