update legend

src/hooks/useLegendProcessor.ts

@@ -51,13 +51,13 @@ export default function useLegendProcess(legend?: LegendOptions) {
       };
       if (legend) {
         if (legend.min) {
-          item.min = Math.min(...data[value]);
+          item.min = Math.min(...data[value]).toFixed(2);
           if (key === 0) {
             headers.push({ value: "min", label: "Min" });
           }
         }
         if (legend.max) {
-          item.max = Math.max(...data[value]);
+          item.max = Math.max(...data[value]).toFixed(2);
           if (key === 0) {
             headers.push({ value: "max", label: "Max" });
           }
@@ -67,16 +67,18 @@ export default function useLegendProcess(legend?: LegendOptions) {
             prev += next;
             return prev;
           }, 0);
-          item.mean = total / data[value].length;
+          item.mean = (total / data[value].length).toFixed(2);
           if (key === 0) {
             headers.push({ value: "mean", label: "Mean" });
           }
         }
         if (legend.total) {
-          item.total = data[value].reduce((prev: number, next: number) => {
+          item.total = data[value]
+            .reduce((prev: number, next: number) => {
               prev += next;
               return prev;
-          }, 0);
+            }, 0)
+            .toFixed(2);
           if (key === 0) {
             headers.push({ value: "total", label: "Total" });
           }

src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue

@@ -96,7 +96,7 @@ const legend = reactive<LegendOptions>({
   mean: false,
   asTable: false,
   toTheRight: false,
-  width: 120,
+  width: 130,
   ...graph.value.legend,
 });
 

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

@@ -14,26 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div
-    :style="`width: ${config.width || '100%'}; max-height:${
-      isRight ? '100%' : 130
-    }`"
-    v-if="source.length"
-    class="legend"
+    :style="`width: ${
+      config.width || (isRight ? '150px' : '100%')
+    }; max-height:${isRight ? '100%' : 130}`"
+    v-if="tableData.length && config.asTable"
   >
     <div class="col-item">
-      <span></span>
-      <span v-for="h in headers" :key="h.value">{{ h.label }}</span>
+      <span class="empty"></span>
+      <span v-for="h in headerRow" :key="h.value">{{ h.label }}</span>
     </div>
-    <div class="col-item" v-for="(item, index) in source" :key="index">
+    <div class="col-item" v-for="(item, index) in tableData" :key="index">
       <span>
         <Icon iconName="circle" :style="`color: ${colors[index]};`" />
         <i style="font-style: normal">{{ item.name }}</i>
       </span>
-      <span v-for="h in headers" :key="h.value">{{ item[h.value] }}</span>
+      <span v-for="h in headerRow" :key="h.value">{{ item[h.value] }}</span>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { computed } from "vue";
 import type { PropType } from "vue";
 import { LegendOptions } from "@/types/dashboard";
 import useLegendProcess from "@/hooks/useLegendProcessor";
@@ -49,10 +49,33 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const { aggregations, chartColors, isRight } = useLegendProcess(props.config);
-const { source, headers } = aggregations(props.data);
-const keys = Object.keys(props.data || {}).filter(
+
+const tableData = computed(() => {
+  const { aggregations } = useLegendProcess(props.config);
+  return aggregations(props.data).source;
+});
+const headerRow = computed(() => {
+  const { aggregations } = useLegendProcess(props.config);
+  return aggregations(props.data).headers;
+});
+const isRight = computed(() => useLegendProcess(props.config).isRight);
+const colors = computed(() => {
+  const keys = Object.keys(props.data || {}).filter(
     (i: any) => Array.isArray(props.data[i]) && props.data[i].length
-);
-const colors = chartColors(keys);
+  );
+  const { chartColors } = useLegendProcess(props.config);
+  return chartColors(keys);
+});
 </script>
+<style lang="scss" scoped>
+.col-item {
+  font-size: 12px;
+  width: 100%;
+  overflow: auto;
+
+  span {
+    display: inline-block;
+    padding: 5px;
+  }
+}
+</style>