From 5ce9ef7922977870b3ddb07bda18764f061a5e50 Mon Sep 17 00:00:00 2001
From: Pradumn <pradumn@tealfeed.com>
Date: Sat, 9 Sep 2023 18:14:00 +0530
Subject: [PATCH 1/4] feat: added time frame granularity to urls for reports

---
 .../templates/report-template-filters.vue     | 115 ++++--
 .../widget-activities-leaderboard.vue         |  30 +-
 .../activity/widget-activities-platform.vue   |  44 ++-
 .../activity/widget-new-activities.vue        |  94 +++--
 .../activity/widget-total-activities.vue      |  97 ++---
 .../widget-active-leaderboard-members.vue     |  78 ++--
 .../member/widget-active-members.vue          |  77 ++--
 .../member/widget-total-members.vue           |  71 ++--
 .../widget-benchmark.vue                      | 348 ++++++++++--------
 .../widget-monthly-active-contributors.vue    | 192 +++++-----
 frontend/src/modules/widget/widget-utility.js |  93 +++++
 11 files changed, 771 insertions(+), 468 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..c7e1d7b175 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,17 +10,14 @@
       >
         <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>
+                  }}</span></span
+                >
               </div>
             </el-button>
             <div
@@ -33,7 +28,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 +41,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 +51,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,9 +65,10 @@
 </template>
 
 <script setup>
-import { computed, defineEmits, defineProps } from 'vue';
+import { computed, defineEmits, defineProps, reactive } from 'vue';
 import AppFilterListItem from '@/shared/filter/components/filter-list-item.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { useRoute, useRouter } from 'vue-router';
 
 const emit = defineEmits([
   'update:platform',
@@ -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,84 @@ 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(' '),
+    },
+  });
+  console.log({ newPlatform });
   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 +201,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..40fb32d515 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..4d9d878fdb 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,14 +31,18 @@
 
 <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 AppWidgetActivitiesPlatformContent from './widget-activities-platform-content.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps({
   filters: {
@@ -55,18 +53,32 @@ 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,
-  selectedPlatforms: props.filters.platform.value,
-  selectedHasTeamActivities: props.filters.teamActivities,
-}));
+const query = computed(() =>
+  LEADERBOARD_ACTIVITIES_TYPES_QUERY({
+    period: selectedPeriod.value,
+    selectedPlatforms: props.filters.platform.value,
+    selectedHasTeamActivities: props.filters.teamActivities,
+  })
+);
 
 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..c74ffef347 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');
@@ -100,12 +114,34 @@ const datasets = computed(() => [
   },
 ]);
 
-const query = computed(() => ACTIVITIES_QUERY({
-  period: period.value,
-  granularity: granularity.value,
-  selectedPlatforms: props.filters.platform.value,
-  selectedHasTeamActivities: props.filters.teamActivities,
-}));
+const query = computed(() =>
+  ACTIVITIES_QUERY({
+    period: period.value,
+    granularity: granularity.value,
+    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..398e49ef49 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(() => [
@@ -116,18 +115,28 @@ const datasets = computed(() => [
 
 const { cubejsApi } = mapGetters('widget');
 
-const query = computed(() => TOTAL_ACTIVITIES_QUERY({
-  period: period.value,
-  granularity,
-  selectedPlatforms: props.filters.platform.value,
-  selectedHasTeamActivities: props.filters.teamActivities,
-}));
+const query = computed(() =>
+  TOTAL_ACTIVITIES_QUERY({
+    period: period.value,
+    granularity,
+    selectedPlatforms: props.filters.platform.value,
+    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) => {
@@ -135,27 +144,25 @@ const kpiPreviousValue = (resultSet) => {
   return Number(data[0]['Activities.cumulativeCount']) || 0;
 };
 
-const spliceFirstValue = (data) => cloneDeep(data).reduce((acc, item, index) => {
-  if (index !== 0) {
-    acc.push({
-      ...item,
-    });
-  }
-  return acc;
-}, []);
+const spliceFirstValue = (data) =>
+  cloneDeep(data).reduce((acc, item, index) => {
+    if (index !== 0) {
+      acc.push({
+        ...item,
+      });
+    }
+    return acc;
+  }, []);
 
 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..2f5f27f3cd 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
@@ -52,7 +52,7 @@
           `We recommend speaking with these members, as they went above and beyond in the last ${pluralize(
             selectedPeriod.granularity,
             selectedPeriod.value,
-            true,
+            true
           )}. They are probably eager to share their experiences and enthusiasm for your community.`
         }}</span>
       </template>
@@ -78,13 +78,7 @@
 </template>
 
 <script setup>
-import {
-  ref,
-  onMounted,
-  computed,
-  defineProps,
-  watch,
-} from 'vue';
+import { ref, onMounted, computed, defineProps, watch } from 'vue';
 import pluralize from 'pluralize';
 import moment from 'moment';
 import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
@@ -92,13 +86,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 +105,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,15 +123,13 @@ 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 (
   period = selectedPeriod.value,
   platforms = props.filters.platform.value,
-  teamMembers = props.filters.teamMembers,
+  teamMembers = props.filters.teamMembers
 ) => {
   loading.value = true;
   error.value = false;
@@ -160,29 +163,34 @@ 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
 const getDetailedActiveMembers = ({
   pagination,
   period = selectedPeriod.value,
-}) => MemberService.listActive({
-  platform: props.filters.platform.value,
-  isTeamMember: props.filters.teamMembers,
-  activityIsContribution: null,
-  activityTimestampFrom: moment()
-    .utc()
-    .subtract(period.value, period.granularity)
-    .toISOString(),
-  activityTimestampTo: moment().utc(),
-  orderBy: 'activeDaysCount_DESC',
-  offset: !pagination.count
-    ? (pagination.currentPage - 1) * pagination.pageSize
-    : 0,
-  limit: !pagination.count
-    ? pagination.pageSize
-    : pagination.count,
-});
+}) =>
+  MemberService.listActive({
+    platform: props.filters.platform.value,
+    isTeamMember: props.filters.teamMembers,
+    activityIsContribution: null,
+    activityTimestampFrom: moment()
+      .utc()
+      .subtract(period.value, period.granularity)
+      .toISOString(),
+    activityTimestampTo: moment().utc(),
+    orderBy: 'activeDaysCount_DESC',
+    offset: !pagination.count
+      ? (pagination.currentPage - 1) * pagination.pageSize
+      : 0,
+    limit: !pagination.count ? pagination.pageSize : pagination.count,
+  });
 
 const onRowClick = () => {
   window.analytics.track('Click table widget row', {
@@ -216,9 +224,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
@@ -228,9 +234,9 @@ watch(
     activeMembers.value = await getActiveMembers(
       selectedPeriod.value,
       platforms,
-      teamMembers,
+      teamMembers
     );
-  },
+  }
 );
 </script>
 
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..8a233918c9 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..59aa492c67 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(() => [
@@ -144,18 +145,18 @@ const datasets = computed(() => [
 const { doExport } = mapActions('member');
 const { cubejsApi } = mapGetters('widget');
 
-const query = computed(() => TOTAL_MEMBERS_QUERY({
-  period: period.value,
-  granularity,
-  selectedPlatforms: props.filters.platform.value,
-  selectedHasTeamMembers: props.filters.teamMembers,
-}));
+const query = computed(() =>
+  TOTAL_MEMBERS_QUERY({
+    period: period.value,
+    granularity,
+    selectedPlatforms: props.filters.platform.value,
+    selectedHasTeamMembers: props.filters.teamMembers,
+  })
+);
 
 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 +203,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..6462c4bb31 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,18 +52,27 @@
         </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(
-                    period.granularity,
-                    period.value,
-                    true,
-                  )}.`
-              }}</span>
+                      period.granularity,
+                      period.value,
+                      true
+                    )}.`
+              }}</span
+            >
           </template>
         </app-widget-insight>
       </template>
@@ -93,10 +96,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,173 +120,190 @@ 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';
   }
 
   return 'Scale beyond Product-Community Fit';
 });
 
-const benchmarkChartOptions = computed(() => chartOptions('bar', {
-  clip: true,
-  xTicks: false,
-  xLines: false,
-  xType: 'category',
-  yLines: false,
-  yLinesDrawOnChartArea: false,
-  yTicksAutoSkip: false,
-  yMin: 0,
-  yMax: 250,
-  yAfterBuildTicks: (axis) => {
-    Object.assign(axis, {
-      ticks: [0, 20, 50, 100, 200].map((v) => ({
-        value: v,
-      })),
-    });
-  },
-  y1Scale: {
-    type: 'linear',
-    position: 'right',
-    min: 0,
-    max: 250,
-    grid: {
-      display: true,
-      drawBorder: false,
-      color: '#9CA3AF',
-      borderDash: [4, 6],
-      drawOnChartArea: true,
-      drawTicks: false,
-    },
-    ticks: {
-      display: false,
-      padding: 8,
-      font: {
-        family: 'Inter',
-        size: 12,
-      },
-    },
-    afterBuildTicks: (axis) => {
+const benchmarkChartOptions = computed(() =>
+  chartOptions('bar', {
+    clip: true,
+    xTicks: false,
+    xLines: false,
+    xType: 'category',
+    yLines: false,
+    yLinesDrawOnChartArea: false,
+    yTicksAutoSkip: false,
+    yMin: 0,
+    yMax: 250,
+    yAfterBuildTicks: (axis) => {
       Object.assign(axis, {
         ticks: [0, 20, 50, 100, 200].map((v) => ({
           value: v,
         })),
       });
     },
-    afterTickToLabelConversion: (axis) => {
-      const match = {
-        color: '#111827',
-        fontWeight: 500,
-      };
-      const unmatch = {
+    y1Scale: {
+      type: 'linear',
+      position: 'right',
+      min: 0,
+      max: 250,
+      grid: {
+        display: true,
+        drawBorder: false,
         color: '#9CA3AF',
-        fontWeight: 400,
-      };
+        borderDash: [4, 6],
+        drawOnChartArea: true,
+        drawTicks: false,
+      },
+      ticks: {
+        display: false,
+        padding: 8,
+        font: {
+          family: 'Inter',
+          size: 12,
+        },
+      },
+      afterBuildTicks: (axis) => {
+        Object.assign(axis, {
+          ticks: [0, 20, 50, 100, 200].map((v) => ({
+            value: v,
+          })),
+        });
+      },
+      afterTickToLabelConversion: (axis) => {
+        const match = {
+          color: '#111827',
+          fontWeight: 500,
+        };
+        const unmatch = {
+          color: '#9CA3AF',
+          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: '' },
-        {
-          text: 'Early signals of Product-Community Fit (20-50)',
-          color: getMatch(20, 50).color,
-          fontWeight: getMatch(20, 50).fontWeight,
-        },
-        {
-          text: 'Strong emerging signals of Product-Community Fit (51-100)',
-          color: getMatch(51, 100).color,
-          fontWeight: getMatch(51, 100).fontWeight,
-        },
-        {
-          text: 'Great Product-Community Fit (101-200)',
-          color: getMatch(101, 200).color,
-          fontWeight: getMatch(101, 200).fontWeight,
-        },
-        {
-          text: 'Scale beyond Product-Community Fit (200+)',
-          color: getMatch(201).color,
-          fontWeight: getMatch(201).fontWeight,
-        },
-      ];
+        const labels = [
+          { text: '' },
+          {
+            text: 'Early signals of Product-Community Fit (20-50)',
+            color: getMatch(20, 50).color,
+            fontWeight: getMatch(20, 50).fontWeight,
+          },
+          {
+            text: 'Strong emerging signals of Product-Community Fit (51-100)',
+            color: getMatch(51, 100).color,
+            fontWeight: getMatch(51, 100).fontWeight,
+          },
+          {
+            text: 'Great Product-Community Fit (101-200)',
+            color: getMatch(101, 200).color,
+            fontWeight: getMatch(101, 200).fontWeight,
+          },
+          {
+            text: 'Scale beyond Product-Community Fit (200+)',
+            color: getMatch(201).color,
+            fontWeight: getMatch(201).fontWeight,
+          },
+        ];
 
-      Object.assign(axis, {
-        ticks: axis.ticks.map(({ value }, i) => ({
-          value,
-          ...labels[i],
-        })),
-      });
+        Object.assign(axis, {
+          ticks: axis.ticks.map(({ value }, i) => ({
+            value,
+            ...labels[i],
+          })),
+        });
+      },
+      afterFit: (scaleInstance) => {
+        Object.assign(scaleInstance, {
+          width: 400,
+          maxWidth: 410,
+        });
+      },
     },
-    afterFit: (scaleInstance) => {
-      Object.assign(scaleInstance, {
-        width: 400,
-        maxWidth: 410,
-      });
+    legendPlugin: false,
+    tooltipPlugin: { enabled: false },
+    verticalHoverLinePlugin: false,
+    backgroundChartPlugin: {
+      backgroundColor: '#F9FAFB',
     },
-  },
-  legendPlugin: false,
-  tooltipPlugin: { enabled: false },
-  verticalHoverLinePlugin: false,
-  backgroundChartPlugin: {
-    backgroundColor: '#F9FAFB',
-  },
-  updateTicksLabelsPositionPlugin: {
-    scale: 'y1',
-    ranges: [0, 35, 75, 160, 235],
-    labelsHeight: 14,
-    labelsWidth: 380,
-  },
-  annotationPlugin: {
-    annotations: {
-      idealRange: () => {
-        const getIdealRange = () => {
-          if (average.value < 20) {
-            return {
-              min: 0,
-              max: 20,
-            };
-          } if (average.value >= 20 && average.value <= 50) {
-            return {
-              min: 20,
-              max: 50,
-            };
-          } if (average.value > 50 && average.value <= 100) {
-            return {
-              min: 51,
-              max: 100,
-            };
-          } if (average.value > 100 && average.value <= 200) {
+    updateTicksLabelsPositionPlugin: {
+      scale: 'y1',
+      ranges: [0, 35, 75, 160, 235],
+      labelsHeight: 14,
+      labelsWidth: 380,
+    },
+    annotationPlugin: {
+      annotations: {
+        idealRange: () => {
+          const getIdealRange = () => {
+            if (average.value < 20) {
+              return {
+                min: 0,
+                max: 20,
+              };
+            }
+            if (average.value >= 20 && average.value <= 50) {
+              return {
+                min: 20,
+                max: 50,
+              };
+            }
+            if (average.value > 50 && average.value <= 100) {
+              return {
+                min: 51,
+                max: 100,
+              };
+            }
+            if (average.value > 100 && average.value <= 200) {
+              return {
+                min: 101,
+                max: 200,
+              };
+            }
+
             return {
-              min: 101,
-              max: 200,
+              min: 200,
+              max: 250,
             };
-          }
+          };
 
           return {
-            min: 200,
-            max: 250,
+            backgroundColor: 'rgb(250, 237, 234)',
+            yMin: getIdealRange().min,
+            yMax: getIdealRange().max,
+            borderColor: 'transparent',
+            type: 'box',
+            drawTime: 'beforeDraw',
           };
-        };
-
-        return {
-          backgroundColor: 'rgb(250, 237, 234)',
-          yMin: getIdealRange().min,
-          yMax: getIdealRange().max,
-          borderColor: 'transparent',
-          type: 'box',
-          drawTime: 'beforeDraw',
-        };
+        },
       },
     },
-  },
-}));
+  })
+);
 
 const { cubejsApi } = mapGetters('widget');
 
@@ -297,15 +321,23 @@ const datasets = computed(() => [
   },
 ]);
 
-const query = computed(() => TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
-  period: period.value,
-  granularity: granularity.value,
-  selectedHasTeamMembers: props.filters.teamMembers,
-}));
+const query = computed(() =>
+  TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
+    period: period.value,
+    granularity: granularity.value,
+    selectedHasTeamMembers: props.filters.teamMembers,
+  })
+);
 
 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..db3c5bc16c 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();
@@ -116,87 +118,87 @@ const ySuggestedMax = ref(200);
 const highestNumber = ref(0);
 const shouldUseLogarithmicScale = computed(() => highestNumber.value >= 800);
 
-const widgetChartOptions = computed(() => chartOptions('area', {
-  ySuggestedMax: ySuggestedMax.value,
-  yMaxTicksLimit: yMaxTicksLimit.value,
-  yType: yType.value,
-  yMin: 0,
-  yStepSize: 50,
-  yAfterBuildTicks: (axis) => {
-    // Default ticks that need to be rendered regardless of axis type
-    const ticks = [
-      { label: '0', value: 0 },
-      { label: '50', value: 50 },
-      { label: '100', value: 100 },
-    ];
-
-    const defaultLinearTick = { label: '150', value: 150 };
-    const defaultLogarithmicTicks = { label: '10', value: 10 };
-
-    // Depending on the scale, push new ticks
-    // For scale, we will be adding hundreths until the maximum value
-    // For logarithmic, we will be calculating base 10 powers
-    // until the maximum order of magniture was reached
-    if (!shouldUseLogarithmicScale.value) {
-      ticks.push(defaultLinearTick);
-      yType.value = 'linear';
-
-      const magnitude = Math.ceil(highestNumber.value / 100);
-
-      for (let i = 2; i <= magnitude; i += 1) {
-        const newTickValue = 100 * i;
-
-        ticks.push({
-          label: `${newTickValue}`,
-          value: newTickValue,
-        });
-      }
-    } else {
-      ticks.splice(1, 0, defaultLogarithmicTicks);
-      yType.value = 'customLogarithmic';
-
-      const magnitude = Math.floor(Math.log10(highestNumber.value));
-
-      for (let i = 0; i <= magnitude + 1; i += 1) {
-        const newTickValue = 10 ** i;
-
-        if ((newTickValue) >= 1000) {
-          ticks.push({
-            label: `${newTickValue / 2}`,
-            value: newTickValue / 2,
-          });
+const widgetChartOptions = computed(() =>
+  chartOptions('area', {
+    ySuggestedMax: ySuggestedMax.value,
+    yMaxTicksLimit: yMaxTicksLimit.value,
+    yType: yType.value,
+    yMin: 0,
+    yStepSize: 50,
+    yAfterBuildTicks: (axis) => {
+      // Default ticks that need to be rendered regardless of axis type
+      const ticks = [
+        { label: '0', value: 0 },
+        { label: '50', value: 50 },
+        { label: '100', value: 100 },
+      ];
+
+      const defaultLinearTick = { label: '150', value: 150 };
+      const defaultLogarithmicTicks = { label: '10', value: 10 };
+
+      // Depending on the scale, push new ticks
+      // For scale, we will be adding hundreths until the maximum value
+      // For logarithmic, we will be calculating base 10 powers
+      // until the maximum order of magniture was reached
+      if (!shouldUseLogarithmicScale.value) {
+        ticks.push(defaultLinearTick);
+        yType.value = 'linear';
+
+        const magnitude = Math.ceil(highestNumber.value / 100);
+
+        for (let i = 2; i <= magnitude; i += 1) {
+          const newTickValue = 100 * i;
 
           ticks.push({
             label: `${newTickValue}`,
             value: newTickValue,
           });
         }
+      } else {
+        ticks.splice(1, 0, defaultLogarithmicTicks);
+        yType.value = 'customLogarithmic';
+
+        const magnitude = Math.floor(Math.log10(highestNumber.value));
+
+        for (let i = 0; i <= magnitude + 1; i += 1) {
+          const newTickValue = 10 ** i;
+
+          if (newTickValue >= 1000) {
+            ticks.push({
+              label: `${newTickValue / 2}`,
+              value: newTickValue / 2,
+            });
+
+            ticks.push({
+              label: `${newTickValue}`,
+              value: newTickValue,
+            });
+          }
+        }
       }
-    }
 
-    yMaxTicksLimit.value = ticks.length;
-    ySuggestedMax.value = ticks[ticks.length - 1].value;
+      yMaxTicksLimit.value = ticks.length;
+      ySuggestedMax.value = ticks[ticks.length - 1].value;
 
-    Object.assign(axis, {
-      ticks,
-    });
-  },
-  xTicksCallback: (
-    value,
-  ) => parseAxisLabel(value, granularity.value.value),
-  annotationPlugin: {
-    annotations: {
-      idealRange: {
-        backgroundColor: 'rgb(253, 246, 245)',
-        yMin: 50,
-        yMax: 100,
-        borderColor: 'transparent',
-        type: 'box',
-        drawTime: 'beforeDraw',
+      Object.assign(axis, {
+        ticks,
+      });
+    },
+    xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
+    annotationPlugin: {
+      annotations: {
+        idealRange: {
+          backgroundColor: 'rgb(253, 246, 245)',
+          yMin: 50,
+          yMax: 100,
+          borderColor: 'transparent',
+          type: 'box',
+          drawTime: 'beforeDraw',
+        },
       },
     },
-  },
-}));
+  })
+);
 
 const { cubejsApi } = mapGetters('widget');
 const { doExport } = mapActions('member');
@@ -222,15 +224,23 @@ const datasets = computed(() => [
   },
 ]);
 
-const query = computed(() => TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
-  period: period.value,
-  granularity: granularity.value,
-  selectedHasTeamMembers: props.filters.teamMembers,
-}));
+const query = computed(() =>
+  TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
+    period: period.value,
+    granularity: granularity.value,
+    selectedHasTeamMembers: props.filters.teamMembers,
+  })
+);
 
 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 +266,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..2be8e9265d
--- /dev/null
+++ b/frontend/src/modules/widget/widget-utility.js
@@ -0,0 +1,93 @@
+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';
+
+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 (granularity) {
+    selectedPeriod = getGranularityBasedPeriod(granularity, selectedPeriod);
+  }
+
+  if (selectedPeriod && comparePeriods(selectedPeriod, defaultMinimumPeriod)) {
+    return selectedPeriod;
+  }
+
+  return defaultMinimumPeriod;
+};
+
+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 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;
+};
+
+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;
+};

From fbc9de31b23b2d74a02ae887f95e05d6d899e5b7 Mon Sep 17 00:00:00 2001
From: Pradumn <pradumn@tealfeed.com>
Date: Thu, 21 Sep 2023 23:46:10 +0530
Subject: [PATCH 2/4] fix: lint errors and added comments

---
 .../templates/report-template-filters.vue     |  20 +-
 .../widget-activities-leaderboard.vue         |   4 +-
 .../activity/widget-activities-platform.vue   |  18 +-
 .../activity/widget-new-activities.vue        |  24 +-
 .../activity/widget-total-activities.vue      |  37 +--
 .../widget-active-leaderboard-members.vue     |  49 +--
 .../member/widget-active-members.vue          |  10 +-
 .../member/widget-total-members.vue           |  18 +-
 .../widget-benchmark.vue                      | 310 +++++++++---------
 .../widget-monthly-active-contributors.vue    | 154 +++++----
 frontend/src/modules/widget/widget-utility.js |  86 ++---
 11 files changed, 358 insertions(+), 372 deletions(-)

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 c7e1d7b175..32b26d9367 100644
--- a/frontend/src/modules/report/components/templates/report-template-filters.vue
+++ b/frontend/src/modules/report/components/templates/report-template-filters.vue
@@ -12,12 +12,10 @@
           <div class="relative">
             <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
-                >
+                  }}</span></span>
               </div>
             </el-button>
             <div
@@ -29,9 +27,9 @@
         <template #optionPrefix="{ item }">
           <img
             v-if="
-              item.value &&
-              platformOptions(item.value) &&
-              platformOptions(item.value).image
+              item.value
+                && platformOptions(item.value)
+                && platformOptions(item.value).image
             "
             :src="platformOptions(item.value).image"
             :alt="platformOptions(item.value).name"
@@ -65,10 +63,12 @@
 </template>
 
 <script setup>
-import { computed, defineEmits, defineProps, reactive } from 'vue';
+import {
+  computed, defineEmits, defineProps, reactive,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import AppFilterListItem from '@/shared/filter/components/filter-list-item.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
-import { useRoute, useRouter } from 'vue-router';
 
 const emit = defineEmits([
   'update:platform',
@@ -117,7 +117,7 @@ const platformLabel = computed(() => {
 });
 
 const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
-if (!!route.query.selectedPlatforms) {
+if (route.query.selectedPlatforms) {
   const platformsValues = route.query.selectedPlatforms.split(' ');
   const platforms = platformsValues
     .map((value) => {
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 40fb32d515..4c8a073d58 100644
--- a/frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue
+++ b/frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue
@@ -82,8 +82,8 @@ const drawerTitle = ref('Leaderboard: Activities by type');
 const selectedPeriod = ref(
   getSelectedPeriodFromLabel(
     route.query.leaderboardActivitiesByTypePeriod,
-    SEVEN_DAYS_PERIOD_FILTER
-  )
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
 );
 const drawerSelectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
 
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 4d9d878fdb..cc4427ce4e 100644
--- a/frontend/src/modules/widget/components/activity/widget-activities-platform.vue
+++ b/frontend/src/modules/widget/components/activity/widget-activities-platform.vue
@@ -41,8 +41,8 @@ import { LEADERBOARD_ACTIVITIES_TYPES_QUERY } from '@/modules/widget/widget-quer
 import ACTIVITIES_REPORT, {
   ACTIVITIES_PLATFORM_WIDGET,
 } from '@/modules/report/templates/config/activities';
-import AppWidgetActivitiesPlatformContent from './widget-activities-platform-content.vue';
 import { useRoute, useRouter } from 'vue-router';
+import AppWidgetActivitiesPlatformContent from './widget-activities-platform-content.vue';
 
 const props = defineProps({
   filters: {
@@ -58,17 +58,15 @@ const router = useRouter();
 const selectedPeriod = ref(
   getSelectedPeriodFromLabel(
     route.query.activitiesByPlatformPeriod,
-    SEVEN_DAYS_PERIOD_FILTER
-  )
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
 );
 
-const query = computed(() =>
-  LEADERBOARD_ACTIVITIES_TYPES_QUERY({
-    period: selectedPeriod.value,
-    selectedPlatforms: props.filters.platform.value,
-    selectedHasTeamActivities: props.filters.teamActivities,
-  })
-);
+const query = computed(() => LEADERBOARD_ACTIVITIES_TYPES_QUERY({
+  period: selectedPeriod.value,
+  selectedPlatforms: props.filters.platform.value,
+  selectedHasTeamActivities: props.filters.teamActivities,
+}));
 
 const onUpdatePeriod = (updatedPeriod) => {
   selectedPeriod.value = updatedPeriod;
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 c74ffef347..446652f67b 100644
--- a/frontend/src/modules/widget/components/activity/widget-new-activities.vue
+++ b/frontend/src/modules/widget/components/activity/widget-new-activities.vue
@@ -83,8 +83,8 @@ const router = useRouter();
 const granularity = ref(
   getSelectedGranularityFromLabel(
     route.query.newActivitiesGranularity,
-    DAILY_GRANULARITY_FILTER
-  )
+    DAILY_GRANULARITY_FILTER,
+  ),
 );
 const period = ref(
   getSelectedPeriodFromLabel(
@@ -92,9 +92,9 @@ const period = ref(
     SEVEN_DAYS_PERIOD_FILTER,
     getSelectedGranularityFromLabel(
       route.query.newActivitiesGranularity,
-      DAILY_GRANULARITY_FILTER
-    )
-  )
+      DAILY_GRANULARITY_FILTER,
+    ),
+  ),
 );
 
 const widgetChartOptions = chartOptions('area', {
@@ -114,14 +114,12 @@ const datasets = computed(() => [
   },
 ]);
 
-const query = computed(() =>
-  ACTIVITIES_QUERY({
-    period: period.value,
-    granularity: granularity.value,
-    selectedPlatforms: props.filters.platform.value,
-    selectedHasTeamActivities: props.filters.teamActivities,
-  })
-);
+const query = computed(() => ACTIVITIES_QUERY({
+  period: period.value,
+  granularity: granularity.value,
+  selectedPlatforms: props.filters.platform.value,
+  selectedHasTeamActivities: props.filters.teamActivities,
+}));
 
 const onUpdatePeriod = (updatedPeriod) => {
   period.value = updatedPeriod;
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 398e49ef49..5bb07acae3 100644
--- a/frontend/src/modules/widget/components/activity/widget-total-activities.vue
+++ b/frontend/src/modules/widget/components/activity/widget-total-activities.vue
@@ -94,8 +94,8 @@ const router = useRouter();
 const period = ref(
   getSelectedPeriodFromLabel(
     route.query.totalActivitiesPeriod,
-    SEVEN_DAYS_PERIOD_FILTER
-  )
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
 );
 const granularity = computed(() => getTimeGranularityFromPeriod(period.value));
 
@@ -115,14 +115,12 @@ const datasets = computed(() => [
 
 const { cubejsApi } = mapGetters('widget');
 
-const query = computed(() =>
-  TOTAL_ACTIVITIES_QUERY({
-    period: period.value,
-    granularity,
-    selectedPlatforms: props.filters.platform.value,
-    selectedHasTeamActivities: props.filters.teamActivities,
-  })
-);
+const query = computed(() => TOTAL_ACTIVITIES_QUERY({
+  period: period.value,
+  granularity,
+  selectedPlatforms: props.filters.platform.value,
+  selectedHasTeamActivities: props.filters.teamActivities,
+}));
 
 const onUpdatePeriod = (updatedPeriod) => {
   period.value = updatedPeriod;
@@ -144,15 +142,14 @@ const kpiPreviousValue = (resultSet) => {
   return Number(data[0]['Activities.cumulativeCount']) || 0;
 };
 
-const spliceFirstValue = (data) =>
-  cloneDeep(data).reduce((acc, item, index) => {
-    if (index !== 0) {
-      acc.push({
-        ...item,
-      });
-    }
-    return acc;
-  }, []);
+const spliceFirstValue = (data) => cloneDeep(data).reduce((acc, item, index) => {
+  if (index !== 0) {
+    acc.push({
+      ...item,
+    });
+  }
+  return acc;
+}, []);
 
 const chartResultSet = (resultSet) => {
   const clone = cloneDeep(resultSet);
@@ -162,7 +159,7 @@ const chartResultSet = (resultSet) => {
 
   // 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 2f5f27f3cd..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
@@ -52,7 +52,7 @@
           `We recommend speaking with these members, as they went above and beyond in the last ${pluralize(
             selectedPeriod.granularity,
             selectedPeriod.value,
-            true
+            true,
           )}. They are probably eager to share their experiences and enthusiasm for your community.`
         }}</span>
       </template>
@@ -78,7 +78,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed, defineProps, watch } from 'vue';
+import {
+  ref, onMounted, computed, defineProps, watch,
+} from 'vue';
 import pluralize from 'pluralize';
 import moment from 'moment';
 import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
@@ -113,8 +115,8 @@ const drawerTitle = ref();
 const selectedPeriod = ref(
   getSelectedPeriodFromLabel(
     route.query.activeMembersLeaderBoardPeriod,
-    SEVEN_DAYS_PERIOD_FILTER
-  )
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
 );
 const activeMembers = ref([]);
 const loading = ref(false);
@@ -123,13 +125,13 @@ 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 (
   period = selectedPeriod.value,
   platforms = props.filters.platform.value,
-  teamMembers = props.filters.teamMembers
+  teamMembers = props.filters.teamMembers,
 ) => {
   loading.value = true;
   error.value = false;
@@ -175,22 +177,21 @@ const onUpdatePeriod = async (updatedPeriod) => {
 const getDetailedActiveMembers = ({
   pagination,
   period = selectedPeriod.value,
-}) =>
-  MemberService.listActive({
-    platform: props.filters.platform.value,
-    isTeamMember: props.filters.teamMembers,
-    activityIsContribution: null,
-    activityTimestampFrom: moment()
-      .utc()
-      .subtract(period.value, period.granularity)
-      .toISOString(),
-    activityTimestampTo: moment().utc(),
-    orderBy: 'activeDaysCount_DESC',
-    offset: !pagination.count
-      ? (pagination.currentPage - 1) * pagination.pageSize
-      : 0,
-    limit: !pagination.count ? pagination.pageSize : pagination.count,
-  });
+}) => MemberService.listActive({
+  platform: props.filters.platform.value,
+  isTeamMember: props.filters.teamMembers,
+  activityIsContribution: null,
+  activityTimestampFrom: moment()
+    .utc()
+    .subtract(period.value, period.granularity)
+    .toISOString(),
+  activityTimestampTo: moment().utc(),
+  orderBy: 'activeDaysCount_DESC',
+  offset: !pagination.count
+    ? (pagination.currentPage - 1) * pagination.pageSize
+    : 0,
+  limit: !pagination.count ? pagination.pageSize : pagination.count,
+});
 
 const onRowClick = () => {
   window.analytics.track('Click table widget row', {
@@ -234,9 +235,9 @@ watch(
     activeMembers.value = await getActiveMembers(
       selectedPeriod.value,
       platforms,
-      teamMembers
+      teamMembers,
     );
-  }
+  },
 );
 </script>
 
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 8a233918c9..acccb80f7c 100644
--- a/frontend/src/modules/widget/components/member/widget-active-members.vue
+++ b/frontend/src/modules/widget/components/member/widget-active-members.vue
@@ -115,8 +115,8 @@ const router = useRouter();
 const granularity = ref(
   getSelectedGranularityFromLabel(
     route.query.activeMembersGranularity,
-    DAILY_GRANULARITY_FILTER
-  )
+    DAILY_GRANULARITY_FILTER,
+  ),
 );
 const period = ref(
   getSelectedPeriodFromLabel(
@@ -124,9 +124,9 @@ const period = ref(
     SEVEN_DAYS_PERIOD_FILTER,
     getSelectedGranularityFromLabel(
       route.query.activeMembersGranularity,
-      DAILY_GRANULARITY_FILTER
-    )
-  )
+      DAILY_GRANULARITY_FILTER,
+    ),
+  ),
 );
 const drawerExpanded = ref();
 const drawerDate = ref();
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 59aa492c67..54d8dc94ff 100644
--- a/frontend/src/modules/widget/components/member/widget-total-members.vue
+++ b/frontend/src/modules/widget/components/member/widget-total-members.vue
@@ -116,8 +116,8 @@ const router = useRouter();
 const period = ref(
   getSelectedPeriodFromLabel(
     route.query.totalMembersPeriod,
-    SEVEN_DAYS_PERIOD_FILTER
-  )
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
 );
 
 const drawerExpanded = ref();
@@ -145,14 +145,12 @@ const datasets = computed(() => [
 const { doExport } = mapActions('member');
 const { cubejsApi } = mapGetters('widget');
 
-const query = computed(() =>
-  TOTAL_MEMBERS_QUERY({
-    period: period.value,
-    granularity,
-    selectedPlatforms: props.filters.platform.value,
-    selectedHasTeamMembers: props.filters.teamMembers,
-  })
-);
+const query = computed(() => TOTAL_MEMBERS_QUERY({
+  period: period.value,
+  granularity,
+  selectedPlatforms: props.filters.platform.value,
+  selectedHasTeamMembers: props.filters.teamMembers,
+}));
 
 const kpiCurrentValue = (resultSet) => {
   const data = resultSet.chartPivot();
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 6462c4bb31..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
@@ -52,8 +52,7 @@
         </div>
         <app-widget-insight v-if="!loading">
           <template #description>
-            <span
-              >Considering the contribution history of over 150,000 open-source
+            <span>Considering the contribution history of over 150,000 open-source
               repositories, we come to the conclusion that you
               {{
                 average < 20
@@ -62,17 +61,15 @@
               }}
               <span v-if="average >= 20" class="font-medium">{{
                 getInsightContent
-              }}</span
-              >{{
+              }}</span>{{
                 period.label === 'All time'
                   ? ' since the beginning of your community.'
                   : ` during the past ${pluralize(
-                      period.granularity,
-                      period.value,
-                      true
-                    )}.`
-              }}</span
-            >
+                    period.granularity,
+                    period.value,
+                    true,
+                  )}.`
+              }}</span>
           </template>
         </app-widget-insight>
       </template>
@@ -125,8 +122,8 @@ const router = useRouter();
 const period = ref(
   getSelectedPeriodFromLabel(
     route.query.benchmarkPeriod,
-    SIX_MONTHS_PERIOD_FILTER
-  )
+    SIX_MONTHS_PERIOD_FILTER,
+  ),
 );
 const granularity = ref(MONTHLY_GRANULARITY_FILTER);
 const average = ref(0);
@@ -145,165 +142,162 @@ const getInsightContent = computed(() => {
   return 'Scale beyond Product-Community Fit';
 });
 
-const benchmarkChartOptions = computed(() =>
-  chartOptions('bar', {
-    clip: true,
-    xTicks: false,
-    xLines: false,
-    xType: 'category',
-    yLines: false,
-    yLinesDrawOnChartArea: false,
-    yTicksAutoSkip: false,
-    yMin: 0,
-    yMax: 250,
-    yAfterBuildTicks: (axis) => {
+const benchmarkChartOptions = computed(() => chartOptions('bar', {
+  clip: true,
+  xTicks: false,
+  xLines: false,
+  xType: 'category',
+  yLines: false,
+  yLinesDrawOnChartArea: false,
+  yTicksAutoSkip: false,
+  yMin: 0,
+  yMax: 250,
+  yAfterBuildTicks: (axis) => {
+    Object.assign(axis, {
+      ticks: [0, 20, 50, 100, 200].map((v) => ({
+        value: v,
+      })),
+    });
+  },
+  y1Scale: {
+    type: 'linear',
+    position: 'right',
+    min: 0,
+    max: 250,
+    grid: {
+      display: true,
+      drawBorder: false,
+      color: '#9CA3AF',
+      borderDash: [4, 6],
+      drawOnChartArea: true,
+      drawTicks: false,
+    },
+    ticks: {
+      display: false,
+      padding: 8,
+      font: {
+        family: 'Inter',
+        size: 12,
+      },
+    },
+    afterBuildTicks: (axis) => {
       Object.assign(axis, {
         ticks: [0, 20, 50, 100, 200].map((v) => ({
           value: v,
         })),
       });
     },
-    y1Scale: {
-      type: 'linear',
-      position: 'right',
-      min: 0,
-      max: 250,
-      grid: {
-        display: true,
-        drawBorder: false,
+    afterTickToLabelConversion: (axis) => {
+      const match = {
+        color: '#111827',
+        fontWeight: 500,
+      };
+      const unmatch = {
         color: '#9CA3AF',
-        borderDash: [4, 6],
-        drawOnChartArea: true,
-        drawTicks: false,
-      },
-      ticks: {
-        display: false,
-        padding: 8,
-        font: {
-          family: 'Inter',
-          size: 12,
-        },
-      },
-      afterBuildTicks: (axis) => {
-        Object.assign(axis, {
-          ticks: [0, 20, 50, 100, 200].map((v) => ({
-            value: v,
-          })),
-        });
-      },
-      afterTickToLabelConversion: (axis) => {
-        const match = {
-          color: '#111827',
-          fontWeight: 500,
-        };
-        const unmatch = {
-          color: '#9CA3AF',
-          fontWeight: 400,
-        };
+        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: '' },
-          {
-            text: 'Early signals of Product-Community Fit (20-50)',
-            color: getMatch(20, 50).color,
-            fontWeight: getMatch(20, 50).fontWeight,
-          },
-          {
-            text: 'Strong emerging signals of Product-Community Fit (51-100)',
-            color: getMatch(51, 100).color,
-            fontWeight: getMatch(51, 100).fontWeight,
-          },
-          {
-            text: 'Great Product-Community Fit (101-200)',
-            color: getMatch(101, 200).color,
-            fontWeight: getMatch(101, 200).fontWeight,
-          },
-          {
-            text: 'Scale beyond Product-Community Fit (200+)',
-            color: getMatch(201).color,
-            fontWeight: getMatch(201).fontWeight,
-          },
-        ];
+      const labels = [
+        { text: '' },
+        {
+          text: 'Early signals of Product-Community Fit (20-50)',
+          color: getMatch(20, 50).color,
+          fontWeight: getMatch(20, 50).fontWeight,
+        },
+        {
+          text: 'Strong emerging signals of Product-Community Fit (51-100)',
+          color: getMatch(51, 100).color,
+          fontWeight: getMatch(51, 100).fontWeight,
+        },
+        {
+          text: 'Great Product-Community Fit (101-200)',
+          color: getMatch(101, 200).color,
+          fontWeight: getMatch(101, 200).fontWeight,
+        },
+        {
+          text: 'Scale beyond Product-Community Fit (200+)',
+          color: getMatch(201).color,
+          fontWeight: getMatch(201).fontWeight,
+        },
+      ];
 
-        Object.assign(axis, {
-          ticks: axis.ticks.map(({ value }, i) => ({
-            value,
-            ...labels[i],
-          })),
-        });
-      },
-      afterFit: (scaleInstance) => {
-        Object.assign(scaleInstance, {
-          width: 400,
-          maxWidth: 410,
-        });
-      },
-    },
-    legendPlugin: false,
-    tooltipPlugin: { enabled: false },
-    verticalHoverLinePlugin: false,
-    backgroundChartPlugin: {
-      backgroundColor: '#F9FAFB',
+      Object.assign(axis, {
+        ticks: axis.ticks.map(({ value }, i) => ({
+          value,
+          ...labels[i],
+        })),
+      });
     },
-    updateTicksLabelsPositionPlugin: {
-      scale: 'y1',
-      ranges: [0, 35, 75, 160, 235],
-      labelsHeight: 14,
-      labelsWidth: 380,
+    afterFit: (scaleInstance) => {
+      Object.assign(scaleInstance, {
+        width: 400,
+        maxWidth: 410,
+      });
     },
-    annotationPlugin: {
-      annotations: {
-        idealRange: () => {
-          const getIdealRange = () => {
-            if (average.value < 20) {
-              return {
-                min: 0,
-                max: 20,
-              };
-            }
-            if (average.value >= 20 && average.value <= 50) {
-              return {
-                min: 20,
-                max: 50,
-              };
-            }
-            if (average.value > 50 && average.value <= 100) {
-              return {
-                min: 51,
-                max: 100,
-              };
-            }
-            if (average.value > 100 && average.value <= 200) {
-              return {
-                min: 101,
-                max: 200,
-              };
-            }
-
+  },
+  legendPlugin: false,
+  tooltipPlugin: { enabled: false },
+  verticalHoverLinePlugin: false,
+  backgroundChartPlugin: {
+    backgroundColor: '#F9FAFB',
+  },
+  updateTicksLabelsPositionPlugin: {
+    scale: 'y1',
+    ranges: [0, 35, 75, 160, 235],
+    labelsHeight: 14,
+    labelsWidth: 380,
+  },
+  annotationPlugin: {
+    annotations: {
+      idealRange: () => {
+        const getIdealRange = () => {
+          if (average.value < 20) {
             return {
-              min: 200,
-              max: 250,
+              min: 0,
+              max: 20,
             };
-          };
+          }
+          if (average.value >= 20 && average.value <= 50) {
+            return {
+              min: 20,
+              max: 50,
+            };
+          }
+          if (average.value > 50 && average.value <= 100) {
+            return {
+              min: 51,
+              max: 100,
+            };
+          }
+          if (average.value > 100 && average.value <= 200) {
+            return {
+              min: 101,
+              max: 200,
+            };
+          }
 
           return {
-            backgroundColor: 'rgb(250, 237, 234)',
-            yMin: getIdealRange().min,
-            yMax: getIdealRange().max,
-            borderColor: 'transparent',
-            type: 'box',
-            drawTime: 'beforeDraw',
+            min: 200,
+            max: 250,
           };
-        },
+        };
+
+        return {
+          backgroundColor: 'rgb(250, 237, 234)',
+          yMin: getIdealRange().min,
+          yMax: getIdealRange().max,
+          borderColor: 'transparent',
+          type: 'box',
+          drawTime: 'beforeDraw',
+        };
       },
     },
-  })
-);
+  },
+}));
 
 const { cubejsApi } = mapGetters('widget');
 
@@ -321,13 +315,11 @@ const datasets = computed(() => [
   },
 ]);
 
-const query = computed(() =>
-  TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
-    period: period.value,
-    granularity: granularity.value,
-    selectedHasTeamMembers: props.filters.teamMembers,
-  })
-);
+const query = computed(() => TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
+  period: period.value,
+  granularity: granularity.value,
+  selectedHasTeamMembers: props.filters.teamMembers,
+}));
 
 const onUpdatePeriod = (updatedPeriod) => {
   period.value = updatedPeriod;
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 db3c5bc16c..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
@@ -104,8 +104,8 @@ const router = useRouter();
 const period = ref(
   getSelectedPeriodFromLabel(
     route.query.activeContributorsPeriod,
-    SIX_MONTHS_PERIOD_FILTER
-  )
+    SIX_MONTHS_PERIOD_FILTER,
+  ),
 );
 const granularity = ref(MONTHLY_GRANULARITY_FILTER);
 const drawerExpanded = ref();
@@ -118,87 +118,85 @@ const ySuggestedMax = ref(200);
 const highestNumber = ref(0);
 const shouldUseLogarithmicScale = computed(() => highestNumber.value >= 800);
 
-const widgetChartOptions = computed(() =>
-  chartOptions('area', {
-    ySuggestedMax: ySuggestedMax.value,
-    yMaxTicksLimit: yMaxTicksLimit.value,
-    yType: yType.value,
-    yMin: 0,
-    yStepSize: 50,
-    yAfterBuildTicks: (axis) => {
-      // Default ticks that need to be rendered regardless of axis type
-      const ticks = [
-        { label: '0', value: 0 },
-        { label: '50', value: 50 },
-        { label: '100', value: 100 },
-      ];
-
-      const defaultLinearTick = { label: '150', value: 150 };
-      const defaultLogarithmicTicks = { label: '10', value: 10 };
-
-      // Depending on the scale, push new ticks
-      // For scale, we will be adding hundreths until the maximum value
-      // For logarithmic, we will be calculating base 10 powers
-      // until the maximum order of magniture was reached
-      if (!shouldUseLogarithmicScale.value) {
-        ticks.push(defaultLinearTick);
-        yType.value = 'linear';
-
-        const magnitude = Math.ceil(highestNumber.value / 100);
-
-        for (let i = 2; i <= magnitude; i += 1) {
-          const newTickValue = 100 * i;
+const widgetChartOptions = computed(() => chartOptions('area', {
+  ySuggestedMax: ySuggestedMax.value,
+  yMaxTicksLimit: yMaxTicksLimit.value,
+  yType: yType.value,
+  yMin: 0,
+  yStepSize: 50,
+  yAfterBuildTicks: (axis) => {
+    // Default ticks that need to be rendered regardless of axis type
+    const ticks = [
+      { label: '0', value: 0 },
+      { label: '50', value: 50 },
+      { label: '100', value: 100 },
+    ];
+
+    const defaultLinearTick = { label: '150', value: 150 };
+    const defaultLogarithmicTicks = { label: '10', value: 10 };
+
+    // Depending on the scale, push new ticks
+    // For scale, we will be adding hundreths until the maximum value
+    // For logarithmic, we will be calculating base 10 powers
+    // until the maximum order of magniture was reached
+    if (!shouldUseLogarithmicScale.value) {
+      ticks.push(defaultLinearTick);
+      yType.value = 'linear';
+
+      const magnitude = Math.ceil(highestNumber.value / 100);
+
+      for (let i = 2; i <= magnitude; i += 1) {
+        const newTickValue = 100 * i;
+
+        ticks.push({
+          label: `${newTickValue}`,
+          value: newTickValue,
+        });
+      }
+    } else {
+      ticks.splice(1, 0, defaultLogarithmicTicks);
+      yType.value = 'customLogarithmic';
+
+      const magnitude = Math.floor(Math.log10(highestNumber.value));
+
+      for (let i = 0; i <= magnitude + 1; i += 1) {
+        const newTickValue = 10 ** i;
+
+        if (newTickValue >= 1000) {
+          ticks.push({
+            label: `${newTickValue / 2}`,
+            value: newTickValue / 2,
+          });
 
           ticks.push({
             label: `${newTickValue}`,
             value: newTickValue,
           });
         }
-      } else {
-        ticks.splice(1, 0, defaultLogarithmicTicks);
-        yType.value = 'customLogarithmic';
-
-        const magnitude = Math.floor(Math.log10(highestNumber.value));
-
-        for (let i = 0; i <= magnitude + 1; i += 1) {
-          const newTickValue = 10 ** i;
-
-          if (newTickValue >= 1000) {
-            ticks.push({
-              label: `${newTickValue / 2}`,
-              value: newTickValue / 2,
-            });
-
-            ticks.push({
-              label: `${newTickValue}`,
-              value: newTickValue,
-            });
-          }
-        }
       }
+    }
 
-      yMaxTicksLimit.value = ticks.length;
-      ySuggestedMax.value = ticks[ticks.length - 1].value;
+    yMaxTicksLimit.value = ticks.length;
+    ySuggestedMax.value = ticks[ticks.length - 1].value;
 
-      Object.assign(axis, {
-        ticks,
-      });
-    },
-    xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
-    annotationPlugin: {
-      annotations: {
-        idealRange: {
-          backgroundColor: 'rgb(253, 246, 245)',
-          yMin: 50,
-          yMax: 100,
-          borderColor: 'transparent',
-          type: 'box',
-          drawTime: 'beforeDraw',
-        },
+    Object.assign(axis, {
+      ticks,
+    });
+  },
+  xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
+  annotationPlugin: {
+    annotations: {
+      idealRange: {
+        backgroundColor: 'rgb(253, 246, 245)',
+        yMin: 50,
+        yMax: 100,
+        borderColor: 'transparent',
+        type: 'box',
+        drawTime: 'beforeDraw',
       },
     },
-  })
-);
+  },
+}));
 
 const { cubejsApi } = mapGetters('widget');
 const { doExport } = mapActions('member');
@@ -224,13 +222,11 @@ const datasets = computed(() => [
   },
 ]);
 
-const query = computed(() =>
-  TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
-    period: period.value,
-    granularity: granularity.value,
-    selectedHasTeamMembers: props.filters.teamMembers,
-  })
-);
+const query = computed(() => TOTAL_MONTHLY_ACTIVE_CONTRIBUTORS({
+  period: period.value,
+  granularity: granularity.value,
+  selectedHasTeamMembers: props.filters.teamMembers,
+}));
 
 const onUpdatePeriod = (updatedPeriod) => {
   period.value = updatedPeriod;
diff --git a/frontend/src/modules/widget/widget-utility.js b/frontend/src/modules/widget/widget-utility.js
index 2be8e9265d..867b6a9235 100644
--- a/frontend/src/modules/widget/widget-utility.js
+++ b/frontend/src/modules/widget/widget-utility.js
@@ -9,41 +9,33 @@ import {
   THREE_MONTHS_PERIOD_FILTER,
 } from './widget-constants';
 
-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 (granularity) {
-    selectedPeriod = getGranularityBasedPeriod(granularity, selectedPeriod);
-  }
+const compareGranularityValues = (a, b) => {
+  if (a === 'year' || b === 'day' || a === b) return 1;
 
-  if (selectedPeriod && comparePeriods(selectedPeriod, defaultMinimumPeriod)) {
-    return selectedPeriod;
+  if (
+    a === 'day'
+    || (a === 'month' && b === 'year')
+    || (a === 'week' && ['year', 'month'].includes(b))
+  ) {
+    return -1;
   }
 
-  return defaultMinimumPeriod;
+  return 1;
 };
 
 export const getSelectedGranularityFromLabel = (
   label,
-  defaultMinimumGranularity
+  defaultMinimumGranularity,
 ) => {
   const selectedGranularity = WIDGET_GRANULARITY_OPTIONS.find(
-    (option) => option.label === label
+    (option) => option.label === label,
   );
 
   if (
-    selectedGranularity &&
-    compareGranularityValues(
+    selectedGranularity
+    && compareGranularityValues(
       selectedGranularity.value,
-      defaultMinimumGranularity.value
+      defaultMinimumGranularity.value,
     )
   ) {
     return selectedGranularity;
@@ -52,20 +44,6 @@ export const getSelectedGranularityFromLabel = (
   return defaultMinimumGranularity;
 };
 
-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;
-};
-
 const comparePeriods = (a, b) => {
   if (a.granularity === b.granularity) return a.value > b.value;
 
@@ -76,18 +54,46 @@ const comparePeriods = (a, b) => {
 
 const getGranularityBasedPeriod = (granularity, period) => {
   if (
-    granularity.value === WEEKLY_GRANULARITY_FILTER.value &&
-    period.label === SEVEN_DAYS_PERIOD_FILTER.label
+    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'
+    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 12d96b6d0602a440e75a91ef5e396776493295c8 Mon Sep 17 00:00:00 2001
From: Pradumn <pradumn@tealfeed.com>
Date: Mon, 25 Sep 2023 21:26:01 +0530
Subject: [PATCH 3/4] fix: changes selected platforms to be separated by commas

---
 .../report/components/templates/report-template-filters.vue  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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 32b26d9367..3f57e158b4 100644
--- a/frontend/src/modules/report/components/templates/report-template-filters.vue
+++ b/frontend/src/modules/report/components/templates/report-template-filters.vue
@@ -118,7 +118,7 @@ const platformLabel = computed(() => {
 
 const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
 if (route.query.selectedPlatforms) {
-  const platformsValues = route.query.selectedPlatforms.split(' ');
+  const platformsValues = route.query.selectedPlatforms.split(',');
   const platforms = platformsValues
     .map((value) => {
       const platform = platformOptions(value);
@@ -148,10 +148,9 @@ const onPlatformChange = (newPlatform) => {
   router.replace({
     query: {
       ...route.query,
-      selectedPlatforms: newPlatform.value.map((v) => v.value).join(' '),
+      selectedPlatforms: newPlatform.value.map((v) => v.value).join(','),
     },
   });
-  console.log({ newPlatform });
   emit('update:platform', newPlatform);
   emit('trackFilters');
 };

From 9c0e7d48d4452aa5e940040e13088231521975e2 Mon Sep 17 00:00:00 2001
From: Pradumn <pradumn@tealfeed.com>
Date: Thu, 28 Sep 2023 12:36:16 +0530
Subject: [PATCH 4/4] chore: removed unused reactive

---
 .../report/components/templates/report-template-filters.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3f57e158b4..fa3b8e33a4 100644
--- a/frontend/src/modules/report/components/templates/report-template-filters.vue
+++ b/frontend/src/modules/report/components/templates/report-template-filters.vue
@@ -64,7 +64,7 @@
 
 <script setup>
 import {
-  computed, defineEmits, defineProps, reactive,
+  computed, defineEmits, defineProps,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import AppFilterListItem from '@/shared/filter/components/filter-list-item.vue';