Merge pull request #528 from CivicDataLab/analytics-map-view

feat(analytics): Enhance module configuration and view management

Author: saqibmanan

app/sitemap.ts

@@ -1,7 +1,7 @@
 import type { MetadataRoute } from 'next';
 
 import { features, locales, siteUrl, states } from '@/config/site';
-import { getActiveModules } from '@/lib/analytics/module-config';
+import { getActiveModules, isModuleViewEnabled } from '@/lib/analytics/module-config';
 import { fetchDatasets } from '@/lib/api';
 import { ANALYTICS_VIEWS, routes } from '@/lib/routes';
 import { type JsonScalar } from '@/lib/types';
@@ -30,6 +30,11 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       const modules = getActiveModules(state.slug);
       for (const analyticsModule of modules) {
         for (const view of ANALYTICS_VIEWS) {
+          if (
+            !isModuleViewEnabled(state.slug, analyticsModule.slug, view)
+          ) {
+            continue;
+          }
           entries.push({
             url: `${siteUrl}/${locale}${routes.analytics(state.slug, analyticsModule.slug, { view })}`,
             lastModified,

components/analytics/analytics-layout.tsx

@@ -23,12 +23,15 @@ import {
   type IndicatorCategory,
   type State,
 } from '@/config/graphql/analaytics-queries';
-import { features } from '@/config/site';
 import { getFactorRole } from '@/lib/analytics/factor-role';
 import { getRootIndicatorSlug } from '@/lib/analytics/root-indicator';
 import { getFactorNameBySlug, getLatestDate } from '@/lib/analytics/utils';
+import {
+  hasSubDistrictSupport,
+  isModuleViewEnabled,
+} from '@/lib/analytics/module-config';
 import { GraphQL } from '@/lib/api';
-import { hasSubDistrictSupport } from '@/lib/state-map-config';
+import { ANALYTICS_VIEWS } from '@/lib/routes';
 import { type JsonScalar } from '@/lib/types';
 import { cn } from '@/lib/utils';
 import Icons from '@/components/icons';
@@ -194,6 +197,22 @@ export function AnalyticsMainLayout() {
     return new Set(cumulative);
   }, [indicatorsByCategoryData?.data?.indicatorsByCategory, rootIndicatorSlug]);
 
+  const isChartViewEnabled = isModuleViewEnabled(
+    stateSlug,
+    analyticsModule,
+    'chart'
+  );
+
+  useEffect(() => {
+    if (!view || view === 'map') return;
+    if (
+      isModuleViewEnabled(stateSlug, analyticsModule, view as 'chart' | 'table')
+    ) {
+      return;
+    }
+    setView('map', { shallow: true });
+  }, [view, stateSlug, analyticsModule, setView]);
+
   // Keep govt-response subindicator compatible with selected view:
   // - map/table view => cumulative (*-fy-cumsum)
   // - chart view => monthly (without -fy-cumsum)
@@ -575,8 +594,7 @@ export function AnalyticsMainLayout() {
   useEffect(() => {
     if (!isMapView) return;
     const hasDistrictOrSubDistrict =
-      Boolean(districtCode) ||
-      (withSubDistrictSupport && Boolean(revenueCode));
+      Boolean(districtCode) || (withSubDistrictSupport && Boolean(revenueCode));
     if (hasDistrictOrSubDistrict) {
       setIsOutputPaneOpen(true);
     }
@@ -594,27 +612,26 @@ export function AnalyticsMainLayout() {
     indicator
   );
 
-  const viewTabs = [
-    {
-      value: 'map',
-      icon: Icons.IconMap,
-      label: t('views.long.map'),
-    },
-    ...(features.chart
-      ? [
-          {
-            value: 'chart',
-            icon: Icons.IconChartBar,
-            label: t('views.long.chart'),
-          },
-        ]
-      : []),
-    {
-      value: 'table',
-      icon: Icons.IconTableAlias,
-      label: t('views.long.table'),
-    },
-  ];
+  const viewTabs = ANALYTICS_VIEWS.filter((tabValue) =>
+    isModuleViewEnabled(stateSlug, analyticsModule, tabValue)
+  ).map((tabValue) => {
+    const icons = {
+      map: Icons.IconMap,
+      chart: Icons.IconChartBar,
+      table: Icons.IconTableAlias,
+    } as const;
+    const labels = {
+      map: t('views.long.map'),
+      chart: t('views.long.chart'),
+      table: t('views.long.table'),
+    } as const;
+
+    return {
+      value: tabValue,
+      icon: icons[tabValue],
+      label: labels[tabValue],
+    };
+  });
 
   if (!currentSelectedState) {
     return (
@@ -811,7 +828,7 @@ export function AnalyticsMainLayout() {
                 )}
               </div>
             </TabPanel>
-            {features.chart && (
+            {isChartViewEnabled && (
               <TabPanel value="chart">
                 {/* <div className=" mt-2 h-[calc(100dvh_-_140px)]"> */}
                 <div className="mt-2 h-full overflow-hidden">

components/analytics/analytics-mobile-layout.tsx

@@ -16,9 +16,13 @@ import {
   type State,
 } from '@/config/graphql/analaytics-queries';
 import { features } from '@/config/site';
+import {
+  hasSubDistrictSupport,
+  isModuleReportDownloadable,
+  isModuleViewEnabled,
+} from '@/lib/analytics/module-config';
 import { getLatestDate } from '@/lib/analytics/utils';
-import { routes } from '@/lib/routes';
-import { hasSubDistrictSupport } from '@/lib/state-map-config';
+import { ANALYTICS_VIEWS, routes } from '@/lib/routes';
 import { type JsonScalar } from '@/lib/types';
 import { cn, downloadStateReport } from '@/lib/utils';
 import Icons from '@/components/icons';
@@ -74,6 +78,10 @@ export function AnalyticsMobileLayout({
     currentSelectedState?.slug,
     analyticsModule
   );
+  const downloadReportEnabled = isModuleReportDownloadable(
+    currentSelectedState.slug,
+    analyticsModule
+  );
   const copyURL = useCopyURL();
   //Remove default page scroll to make only the content scrollable
   useLockBody();
@@ -88,41 +96,45 @@ export function AnalyticsMobileLayout({
     parseAsString.withDefault(timePeriod)
   );
 
+  const viewButtonConfig = {
+    map: { icon: Icons.IconMap, title: t('views.map') },
+    chart: { icon: Icons.IconChartBar, title: t('views.chart') },
+    table: { icon: Icons.IconTableAlias, title: t('views.table') },
+  } as const;
+
   const buttons = [
-    {
-      icon: Icons.IconMap,
-      title: t('views.map'),
-      value: 'map',
-      disabled: false,
-    },
-    ...(features.chart
-      ? [
-          {
-            icon: Icons.IconChartBar,
-            title: t('views.chart'),
-            value: 'chart',
-            disabled: false,
-          },
-        ]
-      : []),
-    {
-      icon: Icons.IconTableAlias,
-      title: t('views.table'),
-      value: 'table',
-      disabled: false,
-    },
+    ...ANALYTICS_VIEWS.filter((tabValue) =>
+      isModuleViewEnabled(currentSelectedState.slug, analyticsModule, tabValue)
+    ).map((tabValue) => ({
+      ...viewButtonConfig[tabValue],
+      value: tabValue,
+    })),
     {
       icon: Icons.IconDots,
       title: t('views.more'),
       value: 'more',
-      disabled: false,
     },
   ];
 
   const [view, setView] = useQueryState(
     'view',
     parseAsString.withDefault('map')
   );
+
+  React.useEffect(() => {
+    if (!view || view === 'map' || view === 'more') return;
+    if (
+      isModuleViewEnabled(
+        currentSelectedState.slug,
+        analyticsModule,
+        view as 'chart' | 'table'
+      )
+    ) {
+      return;
+    }
+    setView('map', { shallow: true });
+  }, [view, currentSelectedState.slug, analyticsModule, setView]);
+
   const searchParams = useSearchParams();
   const isMapView = !view || view === 'map';
   const districtCode = searchParams.get('district-code');
@@ -244,6 +256,15 @@ export function AnalyticsMobileLayout({
         );
 
       case 'chart':
+        if (
+          !isModuleViewEnabled(
+            currentSelectedState.slug,
+            analyticsModule,
+            'chart'
+          )
+        ) {
+          return null;
+        }
         return (
           <div className="pt-[84px]">
             <ChartView
@@ -353,28 +374,21 @@ export function AnalyticsMobileLayout({
               trigger={
                 <Button
                   size="slim"
-                  className={cn(
-                    'basis-1/3 border-t-1 py-4',
-                    button.disabled && 'cursor-not-allowed opacity-50'
-                  )}
+                  className="basis-1/3 border-t-1 py-4"
                   kind="tertiary"
-                  disabled={button.disabled}
                 >
                   <div className="flex flex-col items-center justify-center gap-1 bg-baseIndigoSolid1 ">
                     <Icon
                       source={button.icon}
                       size={24}
                       stroke={activeButton === button.value ? 3 : 2}
-                      className={button.disabled ? 'opacity-50' : ''}
                     />
                     <Text
                       variant="headingMd"
                       fontWeight={
                         activeButton === button.value ? 'bold' : 'medium'
                       }
-                      className={
-                        button.disabled ? 'opacity-50' : 'text-textSubdued'
-                      }
+                      className="text-textSubdued"
                     >
                       {button.title}
                     </Text>
@@ -393,6 +407,7 @@ export function AnalyticsMobileLayout({
                       {
                         content: t('actions.download.label'),
                         icon: Icons.download,
+                        disabled: !downloadReportEnabled,
                         onAction: () => {
                           const confirmation = window.confirm(
                             t('actions.download.confirm', {
@@ -422,32 +437,23 @@ export function AnalyticsMobileLayout({
             <Button
               key={index}
               size="slim"
-              className={cn(
-                'basis-1/3 border-t-1 py-4',
-                button.disabled && 'cursor-not-allowed opacity-50'
-              )}
+              className="basis-1/3 border-t-1 py-4"
               kind="tertiary"
               onClick={() => {
-                if (!button.disabled) {
-                  setActiveButton(button.value);
-                  setView(button.value, { shallow: false });
-                }
+                setActiveButton(button.value);
+                setView(button.value, { shallow: false });
               }}
-              disabled={button.disabled}
             >
               <div className="flex flex-col items-center justify-center gap-1 bg-baseIndigoSolid1 ">
                 <Icon
                   source={button.icon}
                   size={24}
                   stroke={activeButton === button.value ? 3 : 2}
-                  className={button.disabled ? 'opacity-50' : ''}
                 />
                 <Text
                   variant="headingMd"
                   fontWeight={activeButton === button.value ? 'bold' : 'medium'}
-                  className={
-                    button.disabled ? 'opacity-50' : 'text-textSubdued'
-                  }
+                  className="text-textSubdued"
                 >
                   {button.title}
                 </Text>

components/analytics/factor-list.tsx

@@ -16,18 +16,19 @@ import {
   type State,
 } from '@/config/graphql/analaytics-queries';
 import { features } from '@/config/site';
+import { getFactorIcon } from '@/lib/analytics/factor-icon';
 import {
   areAllIndicatorLeaves,
   collectBranchSlugs,
   groupIndicatorsByCategory,
   shouldShowIndicatorCategories,
 } from '@/lib/analytics/indicator-tree';
+import { isModuleReportDownloadable } from '@/lib/analytics/module-config';
+import { isRootRiskIndicator } from '@/lib/analytics/root-indicator';
 import { getLatestDate } from '@/lib/analytics/utils';
 import { GraphQL } from '@/lib/api';
 import { routes } from '@/lib/routes';
 import { cn, downloadStateReport } from '@/lib/utils';
-import { getFactorIcon } from '@/lib/analytics/factor-icon';
-import { isRootRiskIndicator } from '@/lib/analytics/root-indicator';
 import Icons from '@/components/icons';
 import { MediaRendering } from '@/components/media-rendering';
 import RadioButton from './RadioButton';
@@ -53,7 +54,6 @@ function isDescendantSelected(
   );
 }
 
-
 export function FactorList({ currentState }: { currentState: State }) {
   const t = useTranslations('analytics');
   const tCommon = useTranslations('common');
@@ -163,6 +163,11 @@ export function FactorList({ currentState }: { currentState: State }) {
     return options;
   };
 
+  const downloadButtonDisabled = !isModuleReportDownloadable(
+    currentState.slug,
+    analyticsModule
+  );
+
   return (
     <>
       <MediaRendering minWidth={null} maxWidth="1023">
@@ -263,6 +268,7 @@ export function FactorList({ currentState }: { currentState: State }) {
                 <Button
                   className="self-start"
                   onClick={async () => {
+                    if (downloadButtonDisabled) return;
                     const confirmation = window.confirm(
                       t('actions.download.confirm', {
                         name: stateName(currentState.slug, currentState.name),
@@ -304,13 +310,24 @@ export function FactorList({ currentState }: { currentState: State }) {
                   }}
                   monochrome={true}
                   kind="tertiary"
-
-                  // disabled={downloadReportLoading}
+                  disabled={downloadButtonDisabled}
                 >
-                  <div className="flex items-center gap-2">
-                    <Icon source={Icons.download} />
-
-                    <Text variant="bodyMd">{t('actions.download.label')}</Text>
+                  <div className="relative flex w-full items-center gap-2">
+                    <Icon
+                      source={Icons.download}
+                      color={downloadButtonDisabled ? 'disabled' : 'default'}
+                    />
+                    <Text
+                      variant="bodyMd"
+                      color={downloadButtonDisabled ? 'disabled' : 'default'}
+                    >
+                      {t('actions.download.label')}
+                    </Text>
+                    {downloadButtonDisabled && (
+                      <span className="font-medium py-0.2 absolute -right-24 top-0 inline-flex items-center gap-x-1.5 rounded-full bg-surfaceDefault px-1 text-[12px] text-textDefault">
+                        {t('views.comingSoon')}
+                      </span>
+                    )}
                   </div>
                 </Button>
               ))}