Merge pull request #447 from OHDSI/source-overview-consolidation

Source overview consolidation

src/app/plugins/tailwind/components/panel.ts

@@ -1,6 +1,11 @@
 export default {
   root: {
     class: [
+      //positioning
+
+      "flex",
+      "flex-col",
+      "justify-between",
       //Shape
       "rounded-lg",
       "shadow-md",
@@ -36,7 +41,7 @@ export default {
   },
   footer: {
     class: [
-      "rounded-bl-lg rounded-br-lg bg-gray-100 dark:text-white text-black dark:border-surface-700 dark:bg-surface-700 p-2",
+      "rounded-bl-lg rounded-br-lg bg-gray-100 dark:text-white text-black dark:border-surface-700 dark:bg-surface-700 p-2 relative bottom-0",
     ],
   },
 };

src/entities/toggleIcon/ToggleIcon.vue

@@ -32,7 +32,7 @@
             ? 'dark:bg-primary-50 dark:text-black bg-black text-white '
             : 'bg-primary-500 dark:bg-primary-400 text-white'
         } px-2 py-1 rounded-full z-10 top-0 right-0 absolute indent-0 text-xs`"
-        :style="{ right: '-3px' }"
+        :style="{ right: '-5px', top: '-5px' }"
       >
         {{ props.count }}
       </span>

src/pages/reports/source/SourceOverview/SourceOverview.vue

@@ -4,19 +4,19 @@
     id="network-data-quality-overview"
     class="flex flex-col gap-10"
   >
-    <OverviewDisplay />
     <div class="flex flex-row gap-5">
-      <PopulationHistory class="basis-full" />
-      <DataQualityIssuesHistory class="basis-full" />
+      <ReleaseListing class="basis-full" />
+    </div>
+    <div class="flex flex-row gap-5 items-stretch">
+      <PopulationHistory class="basis-full h-full" />
+      <DataQualityIssuesHistory class="basis-full h-full" />
     </div>
     <SourceDataStrand />
-    <ReleaseListing />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useStore } from "vuex";
-import OverviewDisplay from "@/pages/reports/source/SourceOverview/charts/overviewDisplay/OverviewDisplay.vue";
 import PopulationHistory from "@/pages/reports/source/SourceOverview/charts/populationHistory/PopulationHistory.vue";
 import DataQualityIssuesHistory from "@/pages/reports/source/SourceOverview/charts/dataQualityIssuesHistory/DataQualityIssuesHistory.vue";
 import ReleaseListing from "@/pages/reports/source/SourceOverview/charts/releaseListing/ReleaseListing.vue";

src/pages/reports/source/SourceOverview/charts/releaseListing/ReleaseListing.vue

@@ -51,16 +51,28 @@
         </template>
       </Column>
     </DataTable>
+    <template #footer>
+      <div class="flex flex-row gap-2">
+        <ChartActionIcon
+          v-if="store.getters.getQueryIndex"
+          :icon="mdiClockOutline"
+          tooltip="Average days between releases"
+          :count="getDaysBetweenReleases"
+        />
+      </div>
+    </template>
   </Panel>
 </template>
 
 <script setup lang="ts">
 import Panel from "primevue/panel";
 import { helpers } from "@/shared/lib/mixins";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useStore } from "vuex";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
+import { mdiClockOutline } from "@mdi/js";
+import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue";
 
 const store = useStore();
 
@@ -91,6 +103,28 @@ const getPersonLink = function (item) {
     },
   };
 };
+
+const getDaysBetweenReleases = computed(function () {
+  if (store.getters.explorerLoaded) {
+    const dates = store.getters.getSelectedSource.releases.map(
+      (value) => new Date(value.release_name)
+    );
+    const numbers = [];
+
+    for (let i = 0; i < dates.length - 1; i++) {
+      numbers.push((dates[i] - dates[i + 1]) / (1000 * 60 * 60 * 24));
+    }
+
+    return numbers.length
+      ? (
+          numbers.reduce((prevValue, current) => prevValue + current, 0) /
+          numbers.length
+        ).toFixed(0)
+      : 0;
+  } else {
+    return [];
+  }
+});
 </script>
 
 <style scoped></style>