#373 create v-card component to display each diagram

app/src/components/shared/sharedFilter/FilterHistoryDiagramCard.ts

+import {Component, Prop, Vue} from "vue-property-decorator";
+import VegaLite from "vue-vega";
+
+@Component({
+    components: {
+        VegaLite,
+    },
+})
+
+/** this component to put inspections & Observations diagrams in a card */
+export default class FilterHistoryDiagramCard extends Vue {
+    @Prop({default: () => ""}) private title!: string;
+    @Prop({default: () => ""}) private errorMessage!: string;
+    @Prop({default: () =>  false }) private showFailAlert!: boolean;
+    @Prop({
+        default: () => {
+            return {};
+        },
+    }) private spec!: any;
+}

app/src/components/shared/sharedFilter/FilterHistoryDiagramCard.vue

+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card>
+                <v-card-title>
+                    {{ title }}
+                </v-card-title>
+
+                <v-divider></v-divider>
+
+                <v-card-text v-if="spec">
+                    <vega-lite :spec="spec"/>
+                    <div class="black--text text-center ml-4">
+                        {{ $t("sharedTable.selectedAreaDiagram") }}
+                    </div>
+                    <v-container class="justify-center" fluid>
+                        <v-alert v-show="showFailAlert" dismissible transition="fade-transition" type="error">
+                            {{ errorMessage }}
+                        </v-alert>
+                    </v-container>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts" src="./FilterHistoryDiagramCard.ts">
+</script>