NEW

frontend/src/components/dashboardCardAnimalesPerGroup.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-card class="mx-auto" max-width="400">
+    <v-img class="align-end text-white" height="200" :src="image" cover>
+      <v-card-title
+        ><v-chip size="x-large">{{ t("Groups") }}</v-chip></v-card-title
+      >
+    </v-img>
+
+    <v-card-text>
+      <v-list>
+        <v-list-item
+          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
+        >
+          {{t("Group")}}
+          <template v-slot:append> {{t("Count")}} </template>
+        </v-list-item>
+
+        <v-divider></v-divider>
+
+        <v-list-item
+          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
+          v-for="item in inputData"
+          :key="item.selectedGroups"
+        >
+          {{ getGroupObject(item.selectedGroups).label }}
+          <template v-slot:append> {{ item.count }} </template>
+        </v-list-item>
+        <v-list-item>
+          {{ t("Sum")}}
+          <template v-slot:append> {{ sum }} </template>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { getLabel, t,getGroupObject } from "@/services/service";
+
+export default {
+  name: "dashboardCardNumbers",
+  props: {
+    inputData: {},
+    caption: String,
+    image: String,
+  },
+  methods: {
+    getLabel(id) {
+      return getLabel("group", id);
+    },
+  },
+
+  computed: {
+    sum() {
+      var r = 0;
+      for (const c in this.inputData) {
+        r = r + this.inputData[c].count * 1;
+      }
+      return r;
+    },
+  },
+  setup(props) {
+    return {t,getGroupObject};
+  },
+};
+</script>