add table in legend

src/hooks/useLegendProcessor.ts

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

src/views/dashboard/graphs/components/Legend.vue

@@ -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
 limitations under the License. -->
 <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>
 <script lang="ts" setup>
 import type { PropType } from "vue";
@@ -32,6 +42,5 @@ const props = defineProps({
   },
 });
 const { aggregations } = useLegendProcess(props.config);
-const source = aggregations(props.data);
-console.log(source);
+const { source, headers } = aggregations(props.data);
 </script>