Development

package.json

@@ -45,6 +45,7 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.38",
     "next": "13.0.2",
+    "next-router-mock": "^0.9.9",
     "papaparse": "^5.4.1",
     "prettier": "^2.8.2",
     "react": "^18.2.0",

src/components/global/SafaryClubScript.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+const SafaryClubScript = () => {
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      const script = document.createElement('script');
+      script.src = 'https://tag.safary.club/stag.js?id=prd_3F8QxipEOt';
+      script.async = true;
+      document.head.appendChild(script);
+
+      // Cleanup on component unmount
+      return () => {
+        document.head.removeChild(script);
+      };
+    }
+  }, []);
+
+  return null;
+};
+
+export default SafaryClubScript;

src/components/pages/communityHealth/Decentralization.tsx

@@ -196,8 +196,8 @@ function Decentralization({ scoreData }: DecentralizationProps) {
           </div>
           <div className="md:w-1/2 space-y-12">
             <p className="text-sm">
-              Shows how much members are divided into informal cliques ranging
-              from:
+              Shows how much conversations depend on one (or very few) key
+              members. Influence exists in a continuum between:
             </p>
             <div className="flex items-start md:items-center space-x-3 md:space-x-6">
               <Image src={centralized} alt="centralized" />

src/components/pages/statistics/ActiveMembersComposition.tsx

@@ -8,6 +8,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';
 import { communityActiveDates } from '../../../lib/data/dateRangeValues';
 import ActiveMemberBreakdown from './memberBreakdowns/activeMembers/ActiveMemberBreakdown';
 import Loading from '../../global/Loading';
+import { useRouter } from 'next/router';
 
 export interface ActiveMembersComposition {
   activePeriod: number;
@@ -60,6 +61,8 @@ export default function ActiveMembersComposition({
   activePeriod,
   handleDateRange,
 }: ActiveMembersComposition) {
+  const router = useRouter();
+
   const { activeMembers, activeMembersLoading } = useAppStore();
 
   const [options, setOptions] = useState(defaultOptions);
@@ -130,7 +133,7 @@ export default function ActiveMembersComposition({
         value: activeMembers.totActiveMembers,
         colorBadge: 'bg-green',
         hasTooltip: true,
-        customBackground: true,
+        customBackground: false,
         tooltipText: (
           <>
             <span>Interactions are all messages that:</span>
@@ -195,6 +198,56 @@ export default function ActiveMembersComposition({
     ]);
   }, [activeMembers]);
 
+  const handleSelectedOption = (label: string) => {
+    const currentPath = router.pathname;
+    const currentQuery = router.query;
+
+    let existingFilters: any[] = [];
+
+    // Check if we already have some filters
+    if (currentQuery.filter && typeof currentQuery.filter === 'string') {
+      try {
+        existingFilters = JSON.parse(currentQuery.filter);
+      } catch (e) {
+        console.error('Error parsing filters:', e);
+      }
+    }
+
+    // Check if the filterType already exists in the array
+    const existingFilterIndex = existingFilters.findIndex(
+      (filter) => filter.filterType === 'activeMemberComposition'
+    );
+
+    const newFilter = {
+      filterType: 'activeMemberComposition',
+      label: label,
+    };
+
+    if (existingFilterIndex !== -1) {
+      // If it exists, replace the existing filter's label with the new label
+      if (existingFilters[existingFilterIndex].label !== label) {
+        existingFilters[existingFilterIndex].label = label;
+      } else {
+        existingFilters.splice(existingFilterIndex, 1); // remove the item
+      }
+    } else {
+      // If it doesn't exist, add the new filter to the array
+      existingFilters.push(newFilter);
+    }
+
+    router.replace(
+      {
+        pathname: currentPath,
+        query: {
+          ...currentQuery,
+          filter: JSON.stringify(existingFilters),
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
   return (
     <>
       <div className="flex flex-row justify-between">
@@ -208,7 +261,12 @@ export default function ActiveMembersComposition({
         </div>
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
-        <StatisticalData statistics={[...statistics]} />
+        <StatisticalData
+          ableToFilter={true}
+          overviewType="activeMemberComposition"
+          statistics={[...statistics]}
+          handleSelectedOption={handleSelectedOption}
+        />
       </div>
 
       <ActiveMemberBreakdown />

src/components/pages/statistics/DisengagedMembersComposition.tsx

@@ -8,6 +8,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';
 import { communityActiveDates } from '../../../lib/data/dateRangeValues';
 import DisengagedMembersCompositionBreakdown from './memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown';
 import Loading from '../../global/Loading';
+import router from 'next/router';
 
 export interface DisengagedMembersComposition {
   activePeriod: number;
@@ -125,7 +126,7 @@ export default function DisengagedMembersComposition({
         value: disengagedMembers.becameDisengaged,
         colorBadge: 'bg-error-500',
         hasTooltip: false,
-        customBackground: true,
+        customBackground: false,
       },
       {
         label: 'Were Newly Active',
@@ -182,6 +183,55 @@ export default function DisengagedMembersComposition({
     ]);
   }, [disengagedMembers]);
 
+  const handleSelectedOption = (label: string) => {
+    const currentPath = router.pathname;
+    const currentQuery = router.query;
+
+    let existingFilters: any[] = [];
+
+    // Check if we already have some filters
+    if (currentQuery.filter && typeof currentQuery.filter === 'string') {
+      try {
+        existingFilters = JSON.parse(currentQuery.filter);
+      } catch (e) {
+        console.error('Error parsing filters:', e);
+      }
+    }
+
+    // Check if the filterType already exists in the array
+    const existingFilterIndex = existingFilters.findIndex(
+      (filter) => filter.filterType === 'disengagedMemberComposition'
+    );
+
+    const newFilter = {
+      filterType: 'disengagedMemberComposition',
+      label: label,
+    };
+
+    if (existingFilterIndex !== -1) {
+      // If it exists, replace the existing filter's label with the new label
+      if (existingFilters[existingFilterIndex].label !== label) {
+        existingFilters[existingFilterIndex].label = label;
+      } else {
+        existingFilters.splice(existingFilterIndex, 1); // remove the item
+      }
+    } else {
+      // If it doesn't exist, add the new filter to the array
+      existingFilters.push(newFilter);
+    }
+
+    router.replace(
+      {
+        pathname: currentPath,
+        query: {
+          ...currentQuery,
+          filter: JSON.stringify(existingFilters),
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
   return (
     <>
       <div className="flex flex-row justify-between">
@@ -195,7 +245,12 @@ export default function DisengagedMembersComposition({
         </div>
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
-        <StatisticalData statistics={[...statistics]} />
+        <StatisticalData
+          ableToFilter={true}
+          overviewType="disengagedMemberComposition"
+          statistics={[...statistics]}
+          handleSelectedOption={handleSelectedOption}
+        />
       </div>
 
       <DisengagedMembersCompositionBreakdown />

src/components/pages/statistics/Onboarding.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import Onboarding from './Onboarding';
 import { communityActiveDates } from '../../../lib/data/dateRangeValues';
+jest.mock('next/router', () => require('next-router-mock'));
 
 describe('Onboarding component', () => {
   const mockActivePeriod = 1;

src/components/pages/statistics/Onboarding.tsx

@@ -8,6 +8,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';
 import RangeSelect from '../../global/RangeSelect';
 import OnboardingMembersBreakdown from './memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown';
 import Loading from '../../global/Loading';
+import router from 'next/router';
 
 export interface OnboardingProps {
   activePeriod: number;
@@ -127,7 +128,7 @@ export default function Onboarding({
         value: onboardingMembers.joined,
         colorBadge: 'bg-info',
         hasTooltip: false,
-        customBackground: true,
+        customBackground: false,
       },
       {
         label: 'Newly Active',
@@ -159,6 +160,56 @@ export default function Onboarding({
     ]);
   }, [onboardingMembers]);
 
+  const handleSelectedOption = (label: string) => {
+    const currentPath = router.pathname;
+    const currentQuery = router.query;
+
+    let existingFilters: any[] = [];
+
+    // Check if we already have some filters
+    if (currentQuery.filter && typeof currentQuery.filter === 'string') {
+      try {
+        existingFilters = JSON.parse(currentQuery.filter);
+      } catch (e) {
+        console.error('Error parsing filters:', e);
+      }
+    }
+
+    // Check if the filterType already exists in the array
+    const existingFilterIndex = existingFilters.findIndex(
+      (filter) => filter.filterType === 'onboardingMemberComposition'
+    );
+
+    const newFilter = {
+      filterType: 'onboardingMemberComposition',
+      label: label,
+    };
+
+    if (existingFilterIndex !== -1) {
+      // If it exists, replace the existing filter's label with the new label
+      if (existingFilters[existingFilterIndex].label !== label) {
+        existingFilters[existingFilterIndex].label = label;
+      } else {
+        existingFilters.splice(existingFilterIndex, 1); // remove the item
+      }
+    } else {
+      // If it doesn't exist, add the new filter to the array
+      existingFilters.push(newFilter);
+    }
+
+    router.replace(
+      {
+        pathname: currentPath,
+        query: {
+          ...currentQuery,
+          filter: JSON.stringify(existingFilters),
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
   return (
     <>
       <div className="flex flex-row justify-between">
@@ -172,7 +223,12 @@ export default function Onboarding({
         </div>
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
-        <StatisticalData statistics={[...statistics]} />
+        <StatisticalData
+          ableToFilter={true}
+          overviewType="onboardingMemberComposition"
+          statistics={[...statistics]}
+          handleSelectedOption={handleSelectedOption}
+        />
       </div>
 
       <OnboardingMembersBreakdown />