From 290813a3907d89aa86dd54b3b7e592c30550ea3b Mon Sep 17 00:00:00 2001
From: Frank DeFalco <fdefalco@ohdsi.org>
Date: Tue, 27 Aug 2024 13:15:07 -0400
Subject: [PATCH 1/2] Update SourceOverview.vue

moved release listing to top row
---
 src/pages/reports/source/SourceOverview/SourceOverview.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/reports/source/SourceOverview/SourceOverview.vue b/src/pages/reports/source/SourceOverview/SourceOverview.vue
index eb7c0b1..d3af6c2 100644
--- a/src/pages/reports/source/SourceOverview/SourceOverview.vue
+++ b/src/pages/reports/source/SourceOverview/SourceOverview.vue
@@ -4,13 +4,16 @@
     id="network-data-quality-overview"
     class="flex flex-col gap-10"
   >
-    <OverviewDisplay />
+    <div class="flex flex-row gap-5">
+      <OverviewDisplay class="basis-full"/>
+      <ReleaseListing class="basis-full"/>
+    </div>
+ 
     <div class="flex flex-row gap-5">
       <PopulationHistory class="basis-full" />
       <DataQualityIssuesHistory class="basis-full" />
     </div>
     <SourceDataStrand />
-    <ReleaseListing />
   </div>
 </template>
 

From 3f601df6760368afb85e20a38035cbdeb7fb5890 Mon Sep 17 00:00:00 2001
From: Mikhail-iontsev <mikhail_iontsev@icloud.com>
Date: Thu, 29 Aug 2024 20:35:07 +0700
Subject: [PATCH 2/2] feat: refactored source overview page fix: free space
 between panel footer and container bottom

---
 src/app/plugins/tailwind/components/panel.ts  |  7 ++-
 src/entities/toggleIcon/ToggleIcon.vue        |  2 +-
 .../source/SourceOverview/SourceOverview.vue  | 11 ++--
 .../overviewDisplay/OverviewDisplay.vue       | 61 -------------------
 .../charts/releaseListing/ReleaseListing.vue  | 36 ++++++++++-
 5 files changed, 46 insertions(+), 71 deletions(-)
 delete mode 100644 src/pages/reports/source/SourceOverview/charts/overviewDisplay/OverviewDisplay.vue

diff --git a/src/app/plugins/tailwind/components/panel.ts b/src/app/plugins/tailwind/components/panel.ts
index 8e64d61..9556446 100644
--- a/src/app/plugins/tailwind/components/panel.ts
+++ b/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",
     ],
   },
 };
diff --git a/src/entities/toggleIcon/ToggleIcon.vue b/src/entities/toggleIcon/ToggleIcon.vue
index 6773e46..676b25d 100644
--- a/src/entities/toggleIcon/ToggleIcon.vue
+++ b/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>
diff --git a/src/pages/reports/source/SourceOverview/SourceOverview.vue b/src/pages/reports/source/SourceOverview/SourceOverview.vue
index d3af6c2..42631ba 100644
--- a/src/pages/reports/source/SourceOverview/SourceOverview.vue
+++ b/src/pages/reports/source/SourceOverview/SourceOverview.vue
@@ -5,13 +5,11 @@
     class="flex flex-col gap-10"
   >
     <div class="flex flex-row gap-5">
-      <OverviewDisplay class="basis-full"/>
-      <ReleaseListing class="basis-full"/>
+      <ReleaseListing class="basis-full" />
     </div>
- 
-    <div class="flex flex-row gap-5">
-      <PopulationHistory class="basis-full" />
-      <DataQualityIssuesHistory class="basis-full" />
+    <div class="flex flex-row gap-5 items-stretch">
+      <PopulationHistory class="basis-full h-full" />
+      <DataQualityIssuesHistory class="basis-full h-full" />
     </div>
     <SourceDataStrand />
   </div>
@@ -19,7 +17,6 @@
 
 <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";
diff --git a/src/pages/reports/source/SourceOverview/charts/overviewDisplay/OverviewDisplay.vue b/src/pages/reports/source/SourceOverview/charts/overviewDisplay/OverviewDisplay.vue
deleted file mode 100644
index 6c85ce3..0000000
--- a/src/pages/reports/source/SourceOverview/charts/overviewDisplay/OverviewDisplay.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <Panel header="Source Overview">
-    <div class="flex flex-row justify-evenly">
-      <div class="flex flex-col gap-3 items-center content-center">
-        <h3>Releases</h3>
-        <div class="flex flex-row items-center gap-3">
-          <h1 class="text-xl">{{ getReleasesCount }}</h1>
-          <svg-icon :size="46" type="mdi" :path="mdiHistory"></svg-icon>
-        </div>
-      </div>
-      <div class="flex flex-col gap-3 items-center content-center">
-        <h3>Average days between releases</h3>
-        <div class="flex flex-row items-center gap-3">
-          <h1 class="text-xl">{{ getDaysBetweenReleases.toFixed(0) }}</h1>
-          <svg-icon :size="46" type="mdi" :path="mdiClockOutline"></svg-icon>
-        </div>
-      </div>
-    </div>
-  </Panel>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useStore } from "vuex";
-import SvgIcon from "@jamescoyle/vue-icon";
-import Panel from "primevue/panel";
-import { mdiClockOutline, mdiHistory } from "@mdi/js";
-
-const store = useStore();
-
-const getReleasesCount = computed(function () {
-  if (store.getters.explorerLoaded) {
-    return store.getters.getSelectedSource.count_releases;
-  } else {
-    return [];
-  }
-});
-
-const getDaysBetweenReleases = computed(function () {
-  if (store.getters.explorerLoaded) {
-    const dates = store.getters.getSelectedSource.releases.map(
-      (value) => new Date(value.release_name)
-    );
-    //todo rewrite using array functional methods
-    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
-      : 0;
-  } else {
-    return [];
-  }
-});
-</script>
-
-<style scoped></style>
diff --git a/src/pages/reports/source/SourceOverview/charts/releaseListing/ReleaseListing.vue b/src/pages/reports/source/SourceOverview/charts/releaseListing/ReleaseListing.vue
index a7a2ed4..975b867 100644
--- a/src/pages/reports/source/SourceOverview/charts/releaseListing/ReleaseListing.vue
+++ b/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>