feat: persist metric filter preference (#849)

* feat: persist metric filter preference

* fix: display even if 0 conversions

src/graphql/analytics-overview.graphql

@@ -33,6 +33,11 @@ fragment CampaignWithEngagements on Campaign {
   currency
   pacingIndex
   format
+  adSets {
+    conversions {
+      type
+    }
+  }
   engagements {
     ...Engagement
   }

src/user/analytics/analyticsOverview/hooks/usePersistMetricFilter.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Metrics, StatsMetric } from "user/analytics/analyticsOverview/types";
+import _ from "lodash";
+
+export function usePersistMetricFilter(
+  opts: { campaignId?: string; hasConversions?: boolean } = {},
+) {
+  const baseFilter: Metrics = {
+    metric1: { key: "views", active: true },
+    metric2: { key: "clicks", active: false },
+    metric3: {
+      key: opts.hasConversions ? "conversions" : "dismissals",
+      active: false,
+    },
+    metric4: { key: "landings", active: false },
+  };
+
+  const [metrics, setMetrics] = useState<Metrics>();
+
+  useEffect(() => {
+    const rawFilter = window.localStorage.getItem("metricFilter");
+    if (rawFilter) {
+      setMetrics(JSON.parse(rawFilter));
+    } else {
+      setMetrics(baseFilter);
+    }
+  }, [opts.hasConversions]);
+
+  const setMetric = useCallback(
+    (metric: keyof Metrics, value: keyof StatsMetric, active: boolean) => {
+      if (!metrics) {
+        return;
+      }
+
+      const metricsCopy = _.cloneDeep(metrics);
+      const selectedMetric = metricsCopy[metric];
+
+      if (selectedMetric) {
+        selectedMetric.key = value;
+        selectedMetric.active = active;
+      }
+
+      setMetrics({ ...metricsCopy });
+      window.localStorage.setItem("metricFilter", JSON.stringify(metricsCopy));
+    },
+    [metrics],
+  );
+
+  return { metrics: metrics!, setMetric };
+}

src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx

@@ -19,6 +19,7 @@ import { CampaignFormat } from "graphql/types";
 import { ErrorDetail } from "components/Error/ErrorDetail";
 import { ApolloError } from "@apollo/client";
 import _ from "lodash";
+import { usePersistMetricFilter } from "user/analytics/analyticsOverview/hooks/usePersistMetricFilter";
 
 interface Props {
   loading: boolean;
@@ -33,6 +34,14 @@ export function EngagementsOverview({
   error,
   loading,
 }: Props) {
+  const [grouping, setGrouping] = useState("daily");
+  const { metrics, setMetric } = usePersistMetricFilter({
+    campaignId: campaign?.id,
+    hasConversions: campaign?.adSets.some(
+      (a) => a.conversions && a.conversions.length,
+    ),
+  });
+
   if (error) {
     return (
       <ErrorDetail
@@ -70,30 +79,6 @@ export function EngagementsOverview({
     );
   }
 
-  const [grouping, setGrouping] = useState("daily");
-
-  const [metrics, setMetrics] = useState<Metrics>({
-    metric1: { key: "views", active: true },
-    metric2: { key: "clicks", active: false },
-    metric3: { key: "dismissals", active: false },
-    metric4: { key: "landings", active: false },
-  });
-
-  const setActiveMetric = (
-    metric: keyof Metrics,
-    value: keyof StatsMetric,
-    active: boolean,
-  ) => {
-    const metricsCopy = _.cloneDeep(metrics);
-    const selectedMetric = metricsCopy[metric];
-
-    if (selectedMetric) {
-      selectedMetric.key = value;
-      selectedMetric.active = active;
-    }
-    setMetrics({ ...metricsCopy });
-  };
-
   const processedData = processData(engagements, metrics, grouping);
   const processedStats = processStats(engagements);
   const options = prepareChart(metrics, processedData);
@@ -103,7 +88,7 @@ export function EngagementsOverview({
       <MetricFilter
         processedStats={processedStats}
         metrics={metrics}
-        onSetMetric={setActiveMetric}
+        onSetMetric={setMetric}
       />
       <Box flexGrow={1} bgcolor="#fff" sx={{ borderRadius: "12px" }}>
         <EngagementHeader