From b140c2c76012a6dcda3ccb886d863d235b6d6541 Mon Sep 17 00:00:00 2001
From: Pradumn Kumar <27pradumn@gmail.com>
Date: Wed, 4 Oct 2023 21:02:22 +0530
Subject: [PATCH 1/2] feat: added time frame granularity to urls for reports
 (#1452)

---
 .../templates/report-template-filters.vue     | 112 +++++++++++++-----
 .../widget-activities-leaderboard.vue         |  30 +++--
 .../activity/widget-activities-platform.vue   |  32 +++--
 .../activity/widget-new-activities.vue        |  80 +++++++++----
 .../activity/widget-total-activities.vue      |  66 ++++++-----
 .../widget-active-leaderboard-members.vue     |  39 +++---
 .../member/widget-active-members.vue          |  77 ++++++++----
 .../member/widget-total-members.vue           |  57 +++++----
 .../widget-benchmark.vue                      |  64 ++++++----
 .../widget-monthly-active-contributors.vue    |  46 +++----
 frontend/src/modules/widget/widget-utility.js |  99 ++++++++++++++++
 11 files changed, 495 insertions(+), 207 deletions(-)
 create mode 100644 frontend/src/modules/widget/widget-utility.js

diff --git a/frontend/src/modules/report/components/templates/report-template-filters.vue b/frontend/src/modules/report/components/templates/report-template-filters.vue
index 6df1ac2e3c..fa3b8e33a4 100644
--- a/frontend/src/modules/report/components/templates/report-template-filters.vue
+++ b/frontend/src/modules/report/components/templates/report-template-filters.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="border-t border-gray-200">
-    <div
-      class="flex items-center gap-6 py-4 max-w-5xl mx-auto px-8"
-    >
+    <div class="flex items-center gap-6 py-4 max-w-5xl mx-auto px-8">
       <app-filter-list-item
         v-if="showPlatform"
         :filter="platform"
@@ -12,14 +10,9 @@
       >
         <template #button>
           <div class="relative">
-            <el-button
-              class="custom-btn"
-              @click="handleOpenPlatform"
-            >
+            <el-button class="custom-btn" @click="handleOpenPlatform">
               <div class="flex items-center gap-2">
-                <i class="ri-apps-2-line" /><span
-                  class="font-medium"
-                >Platforms:
+                <i class="ri-apps-2-line" /><span class="font-medium">Platforms:
                   <span class="font-normal text-gray-600">{{
                     platformLabel
                   }}</span></span>
@@ -33,7 +26,11 @@
         </template>
         <template #optionPrefix="{ item }">
           <img
-            v-if="item.value && platformOptions(item.value) && platformOptions(item.value).image"
+            v-if="
+              item.value
+                && platformOptions(item.value)
+                && platformOptions(item.value).image
+            "
             :src="platformOptions(item.value).image"
             :alt="platformOptions(item.value).name"
             class="w-4 h-4 mr-2"
@@ -42,10 +39,7 @@
         </template>
       </app-filter-list-item>
 
-      <div
-        v-if="showTeamMembers"
-        class="flex gap-2 items-center"
-      >
+      <div v-if="showTeamMembers" class="flex gap-2 items-center">
         <el-switch
           class="switch-filter !ml-0"
           :model-value="teamMembers"
@@ -55,10 +49,7 @@
         />
       </div>
 
-      <div
-        v-if="showTeamActivities"
-        class="flex gap-2 items-center"
-      >
+      <div v-if="showTeamActivities" class="flex gap-2 items-center">
         <el-switch
           class="switch-filter !ml-0"
           :model-value="teamActivities"
@@ -72,7 +63,10 @@
 </template>
 
 <script setup>
-import { computed, defineEmits, defineProps } from 'vue';
+import {
+  computed, defineEmits, defineProps,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import AppFilterListItem from '@/shared/filter/components/filter-list-item.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 
@@ -91,26 +85,28 @@ const props = defineProps({
   },
   teamMembers: {
     type: Boolean,
-    defaul: null,
+    default: null,
   },
   teamActivities: {
     type: Boolean,
-    defaul: null,
+    default: null,
   },
   showPlatform: {
     type: Boolean,
-    defaul: true,
+    default: true,
   },
   showTeamMembers: {
     type: Boolean,
-    defaul: true,
+    default: true,
   },
   showTeamActivities: {
     type: Boolean,
-    defaul: false,
+    default: false,
   },
 });
 
+const route = useRoute();
+const router = useRouter();
 const hasSelectedPlatform = computed(() => !!props.platform.value.length);
 const platformLabel = computed(() => {
   if (!hasSelectedPlatform.value) {
@@ -120,19 +116,83 @@ const platformLabel = computed(() => {
   return props.platform.value.map((v) => v.label).join(', ');
 });
 
+const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
+if (route.query.selectedPlatforms) {
+  const platformsValues = route.query.selectedPlatforms.split(',');
+  const platforms = platformsValues
+    .map((value) => {
+      const platform = platformOptions(value);
+      if (!platform) {
+        return null;
+      }
+
+      return {
+        value,
+        label: platform.name,
+        selected: false,
+      };
+    })
+    .filter((v) => !!v);
+
+  emit('update:platform', {
+    ...props.platform,
+    value: platforms,
+    expanded: false,
+    operator: null,
+    include: true,
+  });
+  emit('trackFilters');
+}
+
 const onPlatformChange = (newPlatform) => {
+  router.replace({
+    query: {
+      ...route.query,
+      selectedPlatforms: newPlatform.value.map((v) => v.value).join(','),
+    },
+  });
   emit('update:platform', newPlatform);
   emit('trackFilters');
 };
 const onPlatformReset = () => {
+  router.replace({
+    query: {
+      ...route.query,
+      selectedPlatforms: '',
+    },
+  });
   emit('reset');
   emit('trackFilters');
 };
+
+if (route.query.showTeamMembers === 'true') {
+  emit('update:teamMembers', true);
+  emit('trackFilters');
+}
+
 const onTeamMembersChange = (value) => {
+  router.replace({
+    query: {
+      ...route.query,
+      showTeamMembers: value,
+    },
+  });
   emit('update:teamMembers', value);
   emit('trackFilters');
 };
+
+if (route.query.showTeamActivities === 'true') {
+  emit('update:teamActivities', true);
+  emit('trackFilters');
+}
+
 const onTeamActivitiesChange = (value) => {
+  router.replace({
+    query: {
+      ...route.query,
+      showTeamActivities: value,
+    },
+  });
   emit('update:teamActivities', value);
   emit('trackFilters');
 };
@@ -140,8 +200,6 @@ const onTeamActivitiesChange = (value) => {
 const handleOpenPlatform = () => {
   emit('open');
 };
-
-const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue b/frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue
index 776e540d36..4c8a073d58 100644
--- a/frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue
+++ b/frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue
@@ -6,9 +6,7 @@
         class="flex grow justify-between items-center pb-5 border-b border-gray-100 mb-8"
       >
         <div class="flex gap-1">
-          <app-widget-title
-            :title="ACTIVITIES_LEADERBOARD_WIDGET.name"
-          />
+          <app-widget-title :title="ACTIVITIES_LEADERBOARD_WIDGET.name" />
         </div>
         <app-widget-period
           :template="ACTIVITIES_REPORT.nameAsId"
@@ -25,10 +23,7 @@
         :limit="10"
       >
         <template #button="{ showButton }">
-          <div
-            v-if="showButton"
-            class="flex justify-end"
-          >
+          <div v-if="showButton" class="flex justify-end">
             <el-button
               class="btn btn-link btn-link--primary mt-4 !h-8"
               @click="handleDrawerOpen"
@@ -61,12 +56,16 @@
 
 <script setup>
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { ref } from 'vue';
 import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
 import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vue';
 import AppWidgetCubeDrawer from '@/modules/widget/components/shared/widget-cube-drawer.vue';
-import ACTIVITIES_REPORT, { ACTIVITIES_LEADERBOARD_WIDGET } from '@/modules/report/templates/config/activities';
+import ACTIVITIES_REPORT, {
+  ACTIVITIES_LEADERBOARD_WIDGET,
+} from '@/modules/report/templates/config/activities';
 import AppWidgetActivitiesTypeList from '@/modules/widget/components/activity/widget-activities-type-list.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 defineProps({
   filters: {
@@ -75,14 +74,27 @@ defineProps({
   },
 });
 
+const route = useRoute();
+const router = useRouter();
 const drawerExpanded = ref();
 const drawerTitle = ref('Leaderboard: Activities by type');
 
-const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
+const selectedPeriod = ref(
+  getSelectedPeriodFromLabel(
+    route.query.leaderboardActivitiesByTypePeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
 const drawerSelectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
 
 const onUpdatePeriod = (updatedPeriod) => {
   selectedPeriod.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      leaderboardActivitiesByTypePeriod: updatedPeriod.label,
+    },
+  });
 };
 
 const onDrawerUpdatePeriod = (updatedPeriod) => {
diff --git a/frontend/src/modules/widget/components/activity/widget-activities-platform.vue b/frontend/src/modules/widget/components/activity/widget-activities-platform.vue
index bb7a044634..cc4427ce4e 100644
--- a/frontend/src/modules/widget/components/activity/widget-activities-platform.vue
+++ b/frontend/src/modules/widget/components/activity/widget-activities-platform.vue
@@ -6,9 +6,7 @@
         class="flex grow justify-between items-center pb-5 border-b border-gray-100 mb-8"
       >
         <div class="flex gap-1">
-          <app-widget-title
-            :title="ACTIVITIES_PLATFORM_WIDGET.name"
-          />
+          <app-widget-title :title="ACTIVITIES_PLATFORM_WIDGET.name" />
         </div>
         <app-widget-period
           :template="ACTIVITIES_REPORT.nameAsId"
@@ -19,11 +17,7 @@
         />
       </div>
 
-      <query-renderer
-        v-if="cubejsApi"
-        :cubejs-api="cubejsApi"
-        :query="query"
-      >
+      <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
         <template #default="{ resultSet, loading }">
           <app-widget-activities-platform-content
             :loading="loading"
@@ -37,13 +31,17 @@
 
 <script setup>
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { computed, ref } from 'vue';
 import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
 import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vue';
 import { QueryRenderer } from '@cubejs-client/vue3';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { LEADERBOARD_ACTIVITIES_TYPES_QUERY } from '@/modules/widget/widget-queries';
-import ACTIVITIES_REPORT, { ACTIVITIES_PLATFORM_WIDGET } from '@/modules/report/templates/config/activities';
+import ACTIVITIES_REPORT, {
+  ACTIVITIES_PLATFORM_WIDGET,
+} from '@/modules/report/templates/config/activities';
+import { useRoute, useRouter } from 'vue-router';
 import AppWidgetActivitiesPlatformContent from './widget-activities-platform-content.vue';
 
 const props = defineProps({
@@ -55,7 +53,14 @@ const props = defineProps({
 
 const { cubejsApi } = mapGetters('widget');
 
-const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
+const route = useRoute();
+const router = useRouter();
+const selectedPeriod = ref(
+  getSelectedPeriodFromLabel(
+    route.query.activitiesByPlatformPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
 
 const query = computed(() => LEADERBOARD_ACTIVITIES_TYPES_QUERY({
   period: selectedPeriod.value,
@@ -65,8 +70,13 @@ const query = computed(() => LEADERBOARD_ACTIVITIES_TYPES_QUERY({
 
 const onUpdatePeriod = (updatedPeriod) => {
   selectedPeriod.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      activitiesByPlatformPeriod: updatedPeriod.label,
+    },
+  });
 };
-
 </script>
 <script>
 export default {
diff --git a/frontend/src/modules/widget/components/activity/widget-new-activities.vue b/frontend/src/modules/widget/components/activity/widget-new-activities.vue
index be9cfb70e8..446652f67b 100644
--- a/frontend/src/modules/widget/components/activity/widget-new-activities.vue
+++ b/frontend/src/modules/widget/components/activity/widget-new-activities.vue
@@ -1,9 +1,5 @@
 <template>
-  <query-renderer
-    v-if="cubejsApi"
-    :cubejs-api="cubejsApi"
-    :query="query"
-  >
+  <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
     <template #default="{ resultSet, loading, error }">
       <div class="bg-white px-6 py-5 rounded-lg shadow">
         <!-- Widget Header -->
@@ -16,14 +12,9 @@
               :template="ACTIVITIES_REPORT.nameAsId"
               :widget="NEW_ACTIVITIES_WIDGET.name"
               :granularity="granularity"
-              @on-update="
-                (updatedGranularity) =>
-                  (granularity = updatedGranularity)
-              "
-            />
-            <app-widget-title
-              :title="NEW_ACTIVITIES_WIDGET.name"
+              @on-update="onUpdateGranularity"
             />
+            <app-widget-title :title="NEW_ACTIVITIES_WIDGET.name" />
           </div>
           <app-widget-period
             :template="ACTIVITIES_REPORT.nameAsId"
@@ -31,9 +22,7 @@
             :period="period"
             :granularity="granularity"
             module="reports"
-            @on-update="
-              (updatedPeriod) => (period = updatedPeriod)
-            "
+            @on-update="onUpdatePeriod"
           />
         </div>
 
@@ -56,9 +45,17 @@
   </query-renderer>
 </template>
 
-<script setup>import { computed, ref } from 'vue';
+<script setup>
+import { computed, ref } from 'vue';
 import { QueryRenderer } from '@cubejs-client/vue3';
-import { DAILY_GRANULARITY_FILTER, SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import {
+  DAILY_GRANULARITY_FILTER,
+  SEVEN_DAYS_PERIOD_FILTER,
+} from '@/modules/widget/widget-constants';
+import {
+  getSelectedPeriodFromLabel,
+  getSelectedGranularityFromLabel,
+} from '@/modules/widget/widget-utility';
 import { chartOptions } from '@/modules/report/templates/template-chart-config';
 import { parseAxisLabel } from '@/utils/reports';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
@@ -69,7 +66,10 @@ import AppWidgetGranularity from '@/modules/widget/components/shared/widget-gran
 import AppWidgetArea from '@/modules/widget/components/shared/widget-area.vue';
 import AppWidgetLoading from '@/modules/widget/components/shared/widget-loading.vue';
 import AppWidgetError from '@/modules/widget/components/shared/widget-error.vue';
-import ACTIVITIES_REPORT, { NEW_ACTIVITIES_WIDGET } from '@/modules/report/templates/config/activities';
+import ACTIVITIES_REPORT, {
+  NEW_ACTIVITIES_WIDGET,
+} from '@/modules/report/templates/config/activities';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -78,13 +78,27 @@ const props = defineProps({
   },
 });
 
-const period = ref(SEVEN_DAYS_PERIOD_FILTER);
-const granularity = ref(DAILY_GRANULARITY_FILTER);
+const route = useRoute();
+const router = useRouter();
+const granularity = ref(
+  getSelectedGranularityFromLabel(
+    route.query.newActivitiesGranularity,
+    DAILY_GRANULARITY_FILTER,
+  ),
+);
+const period = ref(
+  getSelectedPeriodFromLabel(
+    route.query.newActivitiesPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+    getSelectedGranularityFromLabel(
+      route.query.newActivitiesGranularity,
+      DAILY_GRANULARITY_FILTER,
+    ),
+  ),
+);
 
 const widgetChartOptions = chartOptions('area', {
-  xTicksCallback: (
-    value,
-  ) => parseAxisLabel(value, granularity.value.value),
+  xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
 });
 
 const { cubejsApi } = mapGetters('widget');
@@ -106,6 +120,26 @@ const query = computed(() => ACTIVITIES_QUERY({
   selectedPlatforms: props.filters.platform.value,
   selectedHasTeamActivities: props.filters.teamActivities,
 }));
+
+const onUpdatePeriod = (updatedPeriod) => {
+  period.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      newActivitiesPeriod: updatedPeriod.label,
+    },
+  });
+};
+
+const onUpdateGranularity = (updatedGranularity) => {
+  granularity.value = updatedGranularity;
+  router.replace({
+    query: {
+      ...route.query,
+      newActivitiesGranularity: updatedGranularity.label,
+    },
+  });
+};
 </script>
 
 <script>
diff --git a/frontend/src/modules/widget/components/activity/widget-total-activities.vue b/frontend/src/modules/widget/components/activity/widget-total-activities.vue
index 8767481a4d..5bb07acae3 100644
--- a/frontend/src/modules/widget/components/activity/widget-total-activities.vue
+++ b/frontend/src/modules/widget/components/activity/widget-total-activities.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="widget-total-activities">
-    <div class="flex justify-between items-center pb-5 mb-4 border-b border-gray-100">
+    <div
+      class="flex justify-between items-center pb-5 mb-4 border-b border-gray-100"
+    >
       <app-widget-title
         text-size="text-base"
         :title="TOTAL_ACTIVITIES_WIDGET.name"
@@ -10,17 +12,11 @@
         :widget="TOTAL_ACTIVITIES_WIDGET.name"
         :period="period"
         module="report"
-        @on-update="
-          (updatedPeriod) => (period = updatedPeriod)
-        "
+        @on-update="onUpdatePeriod"
       />
     </div>
     <div>
-      <query-renderer
-        v-if="cubejsApi"
-        :cubejs-api="cubejsApi"
-        :query="query"
-      >
+      <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
         <template #default="{ resultSet, loading, error }">
           <!-- Loading -->
           <app-widget-loading
@@ -36,9 +32,7 @@
             <div class="col-span-5">
               <app-widget-kpi
                 :current-value="kpiCurrentValue(resultSet)"
-                :previous-value="
-                  kpiPreviousValue(resultSet)
-                "
+                :previous-value="kpiPreviousValue(resultSet)"
                 :vs-label="`vs. last ${period.extendedLabel}`"
                 class="col-span-5"
               />
@@ -66,6 +60,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { ref, computed, defineProps } from 'vue';
 import { QueryRenderer } from '@cubejs-client/vue3';
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { chartOptions } from '@/modules/report/templates/template-chart-config';
 
 import AppWidgetKpi from '@/modules/widget/components/shared/widget-kpi.vue';
@@ -74,15 +69,14 @@ import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vu
 import AppWidgetArea from '@/modules/widget/components/shared/widget-area.vue';
 import AppWidgetLoading from '@/modules/widget/components/shared/widget-loading.vue';
 import AppWidgetError from '@/modules/widget/components/shared/widget-error.vue';
-import ACTIVITIES_REPORT, { TOTAL_ACTIVITIES_WIDGET } from '@/modules/report/templates/config/activities';
+import ACTIVITIES_REPORT, {
+  TOTAL_ACTIVITIES_WIDGET,
+} from '@/modules/report/templates/config/activities';
 
-import {
-  mapGetters,
-} from '@/shared/vuex/vuex.helpers';
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { getTimeGranularityFromPeriod, parseAxisLabel } from '@/utils/reports';
-import {
-  TOTAL_ACTIVITIES_QUERY,
-} from '@/modules/widget/widget-queries';
+import { TOTAL_ACTIVITIES_QUERY } from '@/modules/widget/widget-queries';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -95,14 +89,19 @@ const props = defineProps({
   },
 });
 
-const period = ref(SEVEN_DAYS_PERIOD_FILTER);
+const route = useRoute();
+const router = useRouter();
+const period = ref(
+  getSelectedPeriodFromLabel(
+    route.query.totalActivitiesPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
 const granularity = computed(() => getTimeGranularityFromPeriod(period.value));
 
 const widgetChartOptions = chartOptions('area', {
   legendPlugin: false,
-  xTicksCallback: (
-    value,
-  ) => parseAxisLabel(value, granularity.value),
+  xTicksCallback: (value) => parseAxisLabel(value, granularity.value),
 });
 
 const datasets = computed(() => [
@@ -123,11 +122,19 @@ const query = computed(() => TOTAL_ACTIVITIES_QUERY({
   selectedHasTeamActivities: props.filters.teamActivities,
 }));
 
+const onUpdatePeriod = (updatedPeriod) => {
+  period.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      totalActivitiesPeriod: updatedPeriod.label,
+    },
+  });
+};
+
 const kpiCurrentValue = (resultSet) => {
   const data = resultSet.chartPivot();
-  return Number(
-    data[data.length - 1]['Activities.cumulativeCount'],
-  ) || 0;
+  return Number(data[data.length - 1]['Activities.cumulativeCount']) || 0;
 };
 
 const kpiPreviousValue = (resultSet) => {
@@ -148,14 +155,11 @@ const chartResultSet = (resultSet) => {
   const clone = cloneDeep(resultSet);
 
   // We'll be excluding the first data point, since it's related to the last period
-  clone.loadResponses[0].data = spliceFirstValue(
-    clone.loadResponses[0].data,
-  );
+  clone.loadResponses[0].data = spliceFirstValue(clone.loadResponses[0].data);
 
   // Then we also fix the first entry of the dateRange
   clone.loadResponses[0].query.timeDimensions[0].dateRange[0] = moment(
-    clone.loadResponses[0].query.timeDimensions[0]
-      .dateRange[0],
+    clone.loadResponses[0].query.timeDimensions[0].dateRange[0],
   )
     .utc()
     .add(1, 'day')
diff --git a/frontend/src/modules/widget/components/member/widget-active-leaderboard-members.vue b/frontend/src/modules/widget/components/member/widget-active-leaderboard-members.vue
index 975336051e..95b2aa13b3 100644
--- a/frontend/src/modules/widget/components/member/widget-active-leaderboard-members.vue
+++ b/frontend/src/modules/widget/components/member/widget-active-leaderboard-members.vue
@@ -79,11 +79,7 @@
 
 <script setup>
 import {
-  ref,
-  onMounted,
-  computed,
-  defineProps,
-  watch,
+  ref, onMounted, computed, defineProps, watch,
 } from 'vue';
 import pluralize from 'pluralize';
 import moment from 'moment';
@@ -92,13 +88,17 @@ import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vu
 import AppWidgetInsight from '@/modules/widget/components/shared/widget-insight.vue';
 import AppWidgetMembersTable from '@/modules/widget/components/shared/widget-members-table.vue';
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { MemberService } from '@/modules/member/member-service';
 import AppWidgetLoading from '@/modules/widget/components/shared/widget-loading.vue';
 import AppWidgetError from '@/modules/widget/components/shared/widget-error.vue';
 import AppWidgetEmpty from '@/modules/widget/components/shared/widget-empty.vue';
 import AppWidgetApiDrawer from '@/modules/widget/components/shared/widget-api-drawer.vue';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
-import MEMBERS_REPORT, { ACTIVE_LEADERBOARD_MEMBERS_WIDGET } from '@/modules/report/templates/config/members';
+import MEMBERS_REPORT, {
+  ACTIVE_LEADERBOARD_MEMBERS_WIDGET,
+} from '@/modules/report/templates/config/members';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -107,10 +107,17 @@ const props = defineProps({
   },
 });
 
+const route = useRoute();
+const router = useRouter();
 const drawerExpanded = ref();
 const drawerTitle = ref();
 
-const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
+const selectedPeriod = ref(
+  getSelectedPeriodFromLabel(
+    route.query.activeMembersLeaderBoardPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
 const activeMembers = ref([]);
 const loading = ref(false);
 const error = ref(false);
@@ -118,9 +125,7 @@ const error = ref(false);
 const { doExport } = mapActions('member');
 
 const empty = computed(
-  () => !loading.value
-    && !error.value
-    && activeMembers.value.length === 0,
+  () => !loading.value && !error.value && activeMembers.value.length === 0,
 );
 
 const getActiveMembers = async (
@@ -160,6 +165,12 @@ const getActiveMembers = async (
 const onUpdatePeriod = async (updatedPeriod) => {
   activeMembers.value = await getActiveMembers(updatedPeriod);
   selectedPeriod.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      activeMembersLeaderBoardPeriod: updatedPeriod.label,
+    },
+  });
 };
 
 // Fetch function to pass to detail drawer
@@ -179,9 +190,7 @@ const getDetailedActiveMembers = ({
   offset: !pagination.count
     ? (pagination.currentPage - 1) * pagination.pageSize
     : 0,
-  limit: !pagination.count
-    ? pagination.pageSize
-    : pagination.count,
+  limit: !pagination.count ? pagination.pageSize : pagination.count,
 });
 
 const onRowClick = () => {
@@ -216,9 +225,7 @@ const onExport = async ({ ids, count }) => {
 };
 
 onMounted(async () => {
-  activeMembers.value = await getActiveMembers(
-    selectedPeriod.value,
-  );
+  activeMembers.value = await getActiveMembers(selectedPeriod.value);
 });
 
 // Each time filter changes, query a new response
diff --git a/frontend/src/modules/widget/components/member/widget-active-members.vue b/frontend/src/modules/widget/components/member/widget-active-members.vue
index c328945af2..acccb80f7c 100644
--- a/frontend/src/modules/widget/components/member/widget-active-members.vue
+++ b/frontend/src/modules/widget/components/member/widget-active-members.vue
@@ -1,9 +1,5 @@
 <template>
-  <query-renderer
-    v-if="cubejsApi"
-    :cubejs-api="cubejsApi"
-    :query="query"
-  >
+  <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
     <template #default="{ resultSet, loading, error }">
       <div class="bg-white px-6 py-5 rounded-lg shadow">
         <!-- Widget Header -->
@@ -16,10 +12,7 @@
               :template="MEMBERS_REPORT.nameAsId"
               :widget="ACTIVE_MEMBERS_KPI_WIDGET.name"
               :granularity="granularity"
-              @on-update="
-                (updatedGranularity) =>
-                  (granularity = updatedGranularity)
-              "
+              @on-update="onUpdateGranularity"
             />
             <app-widget-title
               :title="ACTIVE_MEMBERS_KPI_WIDGET.name"
@@ -32,9 +25,7 @@
             :period="period"
             :granularity="granularity"
             module="reports"
-            @on-update="
-              (updatedPeriod) => (period = updatedPeriod)
-            "
+            @on-update="onUpdatePeriod"
           />
         </div>
 
@@ -84,13 +75,14 @@ import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vu
 import AppWidgetGranularity from '@/modules/widget/components/shared/widget-granularity.vue';
 import AppWidgetArea from '@/modules/widget/components/shared/widget-area.vue';
 import {
-  DAILY_GRANULARITY_FILTER,
   SEVEN_DAYS_PERIOD_FILTER,
+  DAILY_GRANULARITY_FILTER,
 } from '@/modules/widget/widget-constants';
 import {
-  mapGetters,
-  mapActions,
-} from '@/shared/vuex/vuex.helpers';
+  getSelectedPeriodFromLabel,
+  getSelectedGranularityFromLabel,
+} from '@/modules/widget/widget-utility';
+import { mapGetters, mapActions } from '@/shared/vuex/vuex.helpers';
 import { chartOptions } from '@/modules/report/templates/template-chart-config';
 import {
   TOTAL_ACTIVE_MEMBERS_QUERY,
@@ -100,9 +92,12 @@ import AppWidgetLoading from '@/modules/widget/components/shared/widget-loading.
 import AppWidgetError from '@/modules/widget/components/shared/widget-error.vue';
 import AppWidgetApiDrawer from '@/modules/widget/components/shared/widget-api-drawer.vue';
 import { MemberService } from '@/modules/member/member-service';
-import MEMBERS_REPORT, { ACTIVE_MEMBERS_KPI_WIDGET } from '@/modules/report/templates/config/members';
+import MEMBERS_REPORT, {
+  ACTIVE_MEMBERS_KPI_WIDGET,
+} from '@/modules/report/templates/config/members';
 import { parseAxisLabel } from '@/utils/reports';
 import AppWidgetMembersTable from '@/modules/widget/components/shared/widget-members-table.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -115,16 +110,30 @@ const props = defineProps({
   },
 });
 
-const period = ref(SEVEN_DAYS_PERIOD_FILTER);
-const granularity = ref(DAILY_GRANULARITY_FILTER);
+const route = useRoute();
+const router = useRouter();
+const granularity = ref(
+  getSelectedGranularityFromLabel(
+    route.query.activeMembersGranularity,
+    DAILY_GRANULARITY_FILTER,
+  ),
+);
+const period = ref(
+  getSelectedPeriodFromLabel(
+    route.query.activeMembersPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+    getSelectedGranularityFromLabel(
+      route.query.activeMembersGranularity,
+      DAILY_GRANULARITY_FILTER,
+    ),
+  ),
+);
 const drawerExpanded = ref();
 const drawerDate = ref();
 const drawerTitle = ref();
 
 const widgetChartOptions = chartOptions('area', {
-  xTicksCallback: (
-    value,
-  ) => parseAxisLabel(value, granularity.value.value),
+  xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
 });
 
 const { doExport } = mapActions('member');
@@ -190,9 +199,7 @@ const getActiveMembers = async ({ pagination }) => {
     offset: !pagination.count
       ? (pagination.currentPage - 1) * pagination.pageSize
       : 0,
-    limit: !pagination.count
-      ? pagination.pageSize
-      : pagination.count,
+    limit: !pagination.count ? pagination.pageSize : pagination.count,
   });
 
   return res;
@@ -220,6 +227,26 @@ const onViewMoreClick = (date) => {
   }
 };
 
+const onUpdatePeriod = (updatedPeriod) => {
+  period.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      activeMembersPeriod: updatedPeriod.label,
+    },
+  });
+};
+
+const onUpdateGranularity = (updatedGranularity) => {
+  granularity.value = updatedGranularity;
+  router.replace({
+    query: {
+      ...route.query,
+      activeMembersGranularity: updatedGranularity.label,
+    },
+  });
+};
+
 const onExport = async ({ ids, count }) => {
   try {
     await doExport({
diff --git a/frontend/src/modules/widget/components/member/widget-total-members.vue b/frontend/src/modules/widget/components/member/widget-total-members.vue
index 85e915f90d..54d8dc94ff 100644
--- a/frontend/src/modules/widget/components/member/widget-total-members.vue
+++ b/frontend/src/modules/widget/components/member/widget-total-members.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="widget-total-members">
-    <div class="flex justify-between items-center pb-5 mb-4 border-b border-gray-100">
+    <div
+      class="flex justify-between items-center pb-5 mb-4 border-b border-gray-100"
+    >
       <app-widget-title
         text-size="text-base"
         :description="TOTAL_MEMBERS_WIDGET.description"
@@ -11,17 +13,11 @@
         :widget="TOTAL_MEMBERS_WIDGET.name"
         :period="period"
         module="report"
-        @on-update="
-          (updatedPeriod) => (period = updatedPeriod)
-        "
+        @on-update="onUpdatePeriod"
       />
     </div>
     <div>
-      <query-renderer
-        v-if="cubejsApi"
-        :cubejs-api="cubejsApi"
-        :query="query"
-      >
+      <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
         <template #default="{ resultSet, loading, error }">
           <!-- Loading -->
           <app-widget-loading
@@ -37,9 +33,7 @@
             <div class="col-span-5">
               <app-widget-kpi
                 :current-value="kpiCurrentValue(resultSet)"
-                :previous-value="
-                  kpiPreviousValue(resultSet)
-                "
+                :previous-value="kpiPreviousValue(resultSet)"
                 :vs-label="`vs. last ${period.extendedLabel}`"
                 class="col-span-5"
               />
@@ -82,6 +76,7 @@
 import { ref, computed, defineProps } from 'vue';
 import { QueryRenderer } from '@cubejs-client/vue3';
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { chartOptions } from '@/modules/report/templates/template-chart-config';
 
 import AppWidgetKpi from '@/modules/widget/components/shared/widget-kpi.vue';
@@ -91,10 +86,7 @@ import AppWidgetArea from '@/modules/widget/components/shared/widget-area.vue';
 import AppWidgetLoading from '@/modules/widget/components/shared/widget-loading.vue';
 import AppWidgetError from '@/modules/widget/components/shared/widget-error.vue';
 
-import {
-  mapGetters,
-  mapActions,
-} from '@/shared/vuex/vuex.helpers';
+import { mapGetters, mapActions } from '@/shared/vuex/vuex.helpers';
 import { getTimeGranularityFromPeriod, parseAxisLabel } from '@/utils/reports';
 import {
   TOTAL_MEMBERS_QUERY,
@@ -102,8 +94,11 @@ import {
 } from '@/modules/widget/widget-queries';
 import { MemberService } from '@/modules/member/member-service';
 import AppWidgetApiDrawer from '@/modules/widget/components/shared/widget-api-drawer.vue';
-import MEMBERS_REPORT, { TOTAL_MEMBERS_WIDGET } from '@/modules/report/templates/config/members';
+import MEMBERS_REPORT, {
+  TOTAL_MEMBERS_WIDGET,
+} from '@/modules/report/templates/config/members';
 import AppWidgetMembersTable from '@/modules/widget/components/shared/widget-members-table.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -116,7 +111,15 @@ const props = defineProps({
   },
 });
 
-const period = ref(SEVEN_DAYS_PERIOD_FILTER);
+const route = useRoute();
+const router = useRouter();
+const period = ref(
+  getSelectedPeriodFromLabel(
+    route.query.totalMembersPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
+
 const drawerExpanded = ref();
 const drawerDate = ref();
 const drawerTitle = ref();
@@ -124,9 +127,7 @@ const drawerTitle = ref();
 const granularity = computed(() => getTimeGranularityFromPeriod(period.value));
 const widgetChartOptions = chartOptions('area', {
   legendPlugin: false,
-  xTicksCallback: (
-    value,
-  ) => parseAxisLabel(value, granularity.value),
+  xTicksCallback: (value) => parseAxisLabel(value, granularity.value),
 });
 
 const datasets = computed(() => [
@@ -153,9 +154,7 @@ const query = computed(() => TOTAL_MEMBERS_QUERY({
 
 const kpiCurrentValue = (resultSet) => {
   const data = resultSet.chartPivot();
-  return Number(
-    data[data.length - 1]['Members.cumulativeCount'],
-  ) || 0;
+  return Number(data[data.length - 1]['Members.cumulativeCount']) || 0;
 };
 
 const kpiPreviousValue = (resultSet) => {
@@ -202,6 +201,16 @@ const onViewMoreClick = (date) => {
   }
 };
 
+const onUpdatePeriod = (updatedPeriod) => {
+  period.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      totalMembersPeriod: updatedPeriod.label,
+    },
+  });
+};
+
 const onExport = async ({ count }) => {
   try {
     await doExport({
diff --git a/frontend/src/modules/widget/components/product-community-fit/widget-benchmark.vue b/frontend/src/modules/widget/components/product-community-fit/widget-benchmark.vue
index 43b156992f..91b3340686 100644
--- a/frontend/src/modules/widget/components/product-community-fit/widget-benchmark.vue
+++ b/frontend/src/modules/widget/components/product-community-fit/widget-benchmark.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="bg-white pt-5 rounded-lg shadow">
-    <query-renderer
-      v-if="cubejsApi"
-      :cubejs-api="cubejsApi"
-      :query="query"
-    >
+    <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
       <template #default="{ resultSet, loading, error }">
         <div class="px-6">
           <div
@@ -19,9 +15,7 @@
             </div>
 
             <app-widget-period
-              :template="
-                PRODUCT_COMMUNITY_FIT_REPORT.nameAsId
-              "
+              :template="PRODUCT_COMMUNITY_FIT_REPORT.nameAsId"
               :widget="BENCHMARK_WIDGET.name"
               :period="period"
               :granularity="granularity"
@@ -58,10 +52,16 @@
         </div>
         <app-widget-insight v-if="!loading">
           <template #description>
-            <span>Considering the contribution history of over
-              150,000 open-source repositories, we come to the
-              conclusion that you {{ average < 20 ? 'didn\'t achieve Early signals of Product-Community Fit' : 'had' }}
-              <span v-if="average >= 20" class="font-medium">{{ getInsightContent }}</span>{{
+            <span>Considering the contribution history of over 150,000 open-source
+              repositories, we come to the conclusion that you
+              {{
+                average < 20
+                  ? "didn't achieve Early signals of Product-Community Fit"
+                  : 'had'
+              }}
+              <span v-if="average >= 20" class="font-medium">{{
+                getInsightContent
+              }}</span>{{
                 period.label === 'All time'
                   ? ' since the beginning of your community.'
                   : ` during the past ${pluralize(
@@ -93,10 +93,14 @@ import {
   SIX_MONTHS_PERIOD_FILTER,
   MONTHLY_WIDGET_PERIOD_OPTIONS,
 } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS } from '@/modules/widget/widget-queries';
 import { chartOptions } from '@/modules/report/templates/template-chart-config';
-import PRODUCT_COMMUNITY_FIT_REPORT, { BENCHMARK_WIDGET } from '@/modules/report/templates/config/productCommunityFit';
+import PRODUCT_COMMUNITY_FIT_REPORT, {
+  BENCHMARK_WIDGET,
+} from '@/modules/report/templates/config/productCommunityFit';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -113,16 +117,25 @@ const props = defineProps({
   },
 });
 
-const period = ref(SIX_MONTHS_PERIOD_FILTER);
+const route = useRoute();
+const router = useRouter();
+const period = ref(
+  getSelectedPeriodFromLabel(
+    route.query.benchmarkPeriod,
+    SIX_MONTHS_PERIOD_FILTER,
+  ),
+);
 const granularity = ref(MONTHLY_GRANULARITY_FILTER);
 const average = ref(0);
 
 const getInsightContent = computed(() => {
   if (average.value >= 20 && average.value <= 50) {
     return 'Early signals of Product-Community Fit';
-  } if (average.value > 50 && average.value <= 100) {
+  }
+  if (average.value > 50 && average.value <= 100) {
     return 'Strong emerging signals of Product-Community Fit';
-  } if (average.value > 100 && average.value <= 200) {
+  }
+  if (average.value > 100 && average.value <= 200) {
     return 'Great Product-Community Fit';
   }
 
@@ -184,7 +197,9 @@ const benchmarkChartOptions = computed(() => chartOptions('bar', {
         fontWeight: 400,
       };
 
-      const getMatch = (min, max) => (average.value >= min && (!max || average.value <= max) ? match : unmatch);
+      const getMatch = (min, max) => (average.value >= min && (!max || average.value <= max)
+        ? match
+        : unmatch);
 
       const labels = [
         { text: '' },
@@ -245,17 +260,20 @@ const benchmarkChartOptions = computed(() => chartOptions('bar', {
               min: 0,
               max: 20,
             };
-          } if (average.value >= 20 && average.value <= 50) {
+          }
+          if (average.value >= 20 && average.value <= 50) {
             return {
               min: 20,
               max: 50,
             };
-          } if (average.value > 50 && average.value <= 100) {
+          }
+          if (average.value > 50 && average.value <= 100) {
             return {
               min: 51,
               max: 100,
             };
-          } if (average.value > 100 && average.value <= 200) {
+          }
+          if (average.value > 100 && average.value <= 200) {
             return {
               min: 101,
               max: 200,
@@ -306,6 +324,12 @@ const query = computed(() => TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
 const onUpdatePeriod = (updatedPeriod) => {
   period.value = updatedPeriod;
   granularity.value = MONTHLY_GRANULARITY_FILTER;
+  router.replace({
+    query: {
+      ...route.query,
+      benchmarkPeriod: updatedPeriod.label,
+    },
+  });
 };
 
 const onAverageCalculation = (calculatedAverage) => {
diff --git a/frontend/src/modules/widget/components/product-community-fit/widget-monthly-active-contributors.vue b/frontend/src/modules/widget/components/product-community-fit/widget-monthly-active-contributors.vue
index f5a0e48958..eabba7643f 100644
--- a/frontend/src/modules/widget/components/product-community-fit/widget-monthly-active-contributors.vue
+++ b/frontend/src/modules/widget/components/product-community-fit/widget-monthly-active-contributors.vue
@@ -1,9 +1,5 @@
 <template>
-  <query-renderer
-    v-if="cubejsApi"
-    :cubejs-api="cubejsApi"
-    :query="query"
-  >
+  <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
     <template #default="{ resultSet, loading, error }">
       <div class="bg-white px-6 py-5 rounded-lg shadow">
         <!-- Widget Header -->
@@ -17,9 +13,7 @@
             />
           </div>
           <app-widget-period
-            :template="
-              PRODUCT_COMMUNITY_FIT_REPORT.nameAsId
-            "
+            :template="PRODUCT_COMMUNITY_FIT_REPORT.nameAsId"
             :widget="MONTHLY_ACTIVE_CONTRIBUTORS_WIDGET.name"
             :period="period"
             :granularity="granularity"
@@ -79,19 +73,20 @@ import {
   MONTHLY_WIDGET_PERIOD_OPTIONS,
   SIX_MONTHS_PERIOD_FILTER,
 } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { chartOptions } from '@/modules/report/templates/template-chart-config';
 import AppWidgetLoading from '@/modules/widget/components/shared/widget-loading.vue';
 import AppWidgetError from '@/modules/widget/components/shared/widget-error.vue';
 import { TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS } from '@/modules/widget/widget-queries';
-import {
-  mapActions,
-  mapGetters,
-} from '@/shared/vuex/vuex.helpers';
+import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
 import AppWidgetApiDrawer from '@/modules/widget/components/shared/widget-api-drawer.vue';
 import { MemberService } from '@/modules/member/member-service';
-import PRODUCT_COMMUNITY_FIT_REPORT, { MONTHLY_ACTIVE_CONTRIBUTORS_WIDGET } from '@/modules/report/templates/config/productCommunityFit';
+import PRODUCT_COMMUNITY_FIT_REPORT, {
+  MONTHLY_ACTIVE_CONTRIBUTORS_WIDGET,
+} from '@/modules/report/templates/config/productCommunityFit';
 import { parseAxisLabel } from '@/utils/reports';
 import AppWidgetMembersTable from '@/modules/widget/components/shared/widget-members-table.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -104,7 +99,14 @@ const props = defineProps({
   },
 });
 
-const period = ref(SIX_MONTHS_PERIOD_FILTER);
+const route = useRoute();
+const router = useRouter();
+const period = ref(
+  getSelectedPeriodFromLabel(
+    route.query.activeContributorsPeriod,
+    SIX_MONTHS_PERIOD_FILTER,
+  ),
+);
 const granularity = ref(MONTHLY_GRANULARITY_FILTER);
 const drawerExpanded = ref();
 const drawerDate = ref();
@@ -160,7 +162,7 @@ const widgetChartOptions = computed(() => chartOptions('area', {
       for (let i = 0; i <= magnitude + 1; i += 1) {
         const newTickValue = 10 ** i;
 
-        if ((newTickValue) >= 1000) {
+        if (newTickValue >= 1000) {
           ticks.push({
             label: `${newTickValue / 2}`,
             value: newTickValue / 2,
@@ -181,9 +183,7 @@ const widgetChartOptions = computed(() => chartOptions('area', {
       ticks,
     });
   },
-  xTicksCallback: (
-    value,
-  ) => parseAxisLabel(value, granularity.value.value),
+  xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
   annotationPlugin: {
     annotations: {
       idealRange: {
@@ -231,6 +231,12 @@ const query = computed(() => TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
 const onUpdatePeriod = (updatedPeriod) => {
   period.value = updatedPeriod;
   granularity.value = MONTHLY_GRANULARITY_FILTER;
+  router.replace({
+    query: {
+      ...route.query,
+      activeContributorsPeriod: updatedPeriod.label,
+    },
+  });
 };
 
 // Fetch function to pass to detail drawer
@@ -256,9 +262,7 @@ const getActiveMembers = async ({ pagination }) => {
     offset: !pagination.count
       ? (pagination.currentPage - 1) * pagination.pageSize
       : 0,
-    limit: !pagination.count
-      ? pagination.pageSize
-      : pagination.count,
+    limit: !pagination.count ? pagination.pageSize : pagination.count,
   });
 };
 
diff --git a/frontend/src/modules/widget/widget-utility.js b/frontend/src/modules/widget/widget-utility.js
new file mode 100644
index 0000000000..867b6a9235
--- /dev/null
+++ b/frontend/src/modules/widget/widget-utility.js
@@ -0,0 +1,99 @@
+import {
+  ALL_TIME_PERIOD_FILTER,
+  WIDGET_PERIOD_OPTIONS,
+  WIDGET_GRANULARITY_OPTIONS,
+  WEEKLY_GRANULARITY_FILTER,
+  SEVEN_DAYS_PERIOD_FILTER,
+  MONTHLY_GRANULARITY_FILTER,
+  FOURTEEN_DAYS_PERIOD_FILTER,
+  THREE_MONTHS_PERIOD_FILTER,
+} from './widget-constants';
+
+const compareGranularityValues = (a, b) => {
+  if (a === 'year' || b === 'day' || a === b) return 1;
+
+  if (
+    a === 'day'
+    || (a === 'month' && b === 'year')
+    || (a === 'week' && ['year', 'month'].includes(b))
+  ) {
+    return -1;
+  }
+
+  return 1;
+};
+
+export const getSelectedGranularityFromLabel = (
+  label,
+  defaultMinimumGranularity,
+) => {
+  const selectedGranularity = WIDGET_GRANULARITY_OPTIONS.find(
+    (option) => option.label === label,
+  );
+
+  if (
+    selectedGranularity
+    && compareGranularityValues(
+      selectedGranularity.value,
+      defaultMinimumGranularity.value,
+    )
+  ) {
+    return selectedGranularity;
+  }
+
+  return defaultMinimumGranularity;
+};
+
+const comparePeriods = (a, b) => {
+  if (a.granularity === b.granularity) return a.value > b.value;
+
+  if (a.granularity === 'day' || b.granularity === 'year') return -1;
+
+  return 1;
+};
+
+const getGranularityBasedPeriod = (granularity, period) => {
+  if (
+    granularity.value === WEEKLY_GRANULARITY_FILTER.value
+    && period.label === SEVEN_DAYS_PERIOD_FILTER.label
+  ) {
+    return FOURTEEN_DAYS_PERIOD_FILTER;
+  }
+
+  if (
+    granularity.value === MONTHLY_GRANULARITY_FILTER.value
+    && period.granularity === 'day'
+  ) {
+    return THREE_MONTHS_PERIOD_FILTER;
+  }
+
+  return period;
+};
+
+/*
+  * This function is used to get the selected period from the label.
+  * It finds for the period from the provided label.
+  * It then checks for granularity if provided and provides the correct period as per granularity, it is done to avoid sending mismatching period and granularity.
+  * It also checks whether the selected period is greater than the defaultMinimumPeriod.
+*/
+export const getSelectedPeriodFromLabel = (
+  label,
+  defaultMinimumPeriod,
+  granularity,
+) => {
+  if (label === 'All time') return ALL_TIME_PERIOD_FILTER;
+
+  let selectedPeriod = WIDGET_PERIOD_OPTIONS.find(
+    (option) => option.label === label,
+  );
+
+  if (selectedPeriod && granularity) {
+    selectedPeriod = getGranularityBasedPeriod(granularity, selectedPeriod);
+  }
+
+  if (selectedPeriod && comparePeriods(selectedPeriod, defaultMinimumPeriod)) {
+    return selectedPeriod;
+  }
+
+  return defaultMinimumPeriod;
+};

From dca6b0159b3bf0dae85836b795a3bd99cfee548c Mon Sep 17 00:00:00 2001
From: Abdurrahman Rajab <rajab-2@windowslive.com>
Date: Wed, 4 Oct 2023 18:32:44 +0300
Subject: [PATCH 2/2] chore: redirect people to signup (#1561)

---
 frontend/src/middleware/auth/auth-guard.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/middleware/auth/auth-guard.js b/frontend/src/middleware/auth/auth-guard.js
index 0e9dc132c8..d9e1c310cb 100644
--- a/frontend/src/middleware/auth/auth-guard.js
+++ b/frontend/src/middleware/auth/auth-guard.js
@@ -12,7 +12,7 @@ function isGoingToIntegrationsPage(to) {
  * This middleware runs before rendering any route that has meta.auth = true
  *
  * It uses the PermissionChecker to validate if:
- * - User is authenticated, and both currentTenant & currentUser exist within our store (if not, redirects to /auth/signin)
+ * - User is authenticated, and both currentTenant & currentUser exist within our store (if not, redirects to /auth/signup)
  * - Email of that user is verified (if not, redirects to /auth/email-unverified)
  * - User is onboarded (if not, redirects to /onboard)
  * - User has permissions (if not, redirects to /auth/empty-permissions)
@@ -36,7 +36,7 @@ export default async function ({ to, store, router }) {
   );
 
   if (!permissionChecker.isAuthenticated) {
-    router.push({ path: '/auth/signin' });
+    router.push({ path: '/auth/signup' });
     return;
   }