Allow multi hover on metric graphs (v2) (#1077)

* rework multi-hover, use external state based on nearest date * cleanup * address feedback, cleanup, add smoothing to northstar * tsc fix
growthbook · Mar 15, 2023 · cb8e007 · cb8e007
1 parent 56f957a
commit cb8e007
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 142 deletions.
diff --git a/packages/front-end/components/HomePage/NorthStar.tsx b/packages/front-end/components/HomePage/NorthStar.tsx
@@ -5,6 +5,8 @@ import { ExperimentInterfaceStringDates } from "back-end/types/experiment";
 import { useAuth } from "@/services/auth";
 import { useUser } from "@/services/UserContext";
 import useOrgSettings from "@/hooks/useOrgSettings";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import Toggle from "@/components/Forms/Toggle";
 import Modal from "../Modal";
 import MetricsSelector from "../Experiment/MetricsSelector";
 import Field from "../Forms/Field";
@@ -18,12 +20,17 @@ const NorthStar: FC<{
   const { permissions, refreshOrganization } = useUser();
   const settings = useOrgSettings();
 
+  const smoothByStorageKey = `northstar_metrics_smoothBy`;
+  const [smoothBy, setSmoothBy] = useLocalStorage<"day" | "week">(
+    smoothByStorageKey,
+    "week"
+  );
+
   const form = useForm<{
     title: string;
     window: string | number;
     metrics: string[];
-    resolution: string;
-  }>({ defaultValues: { resolution: "week" } });
+  }>();
 
   useEffect(() => {
     if (settings.northStar?.metricIds) {
@@ -38,6 +45,13 @@ const NorthStar: FC<{
 
   const [openNorthStarModal, setOpenNorthStarModal] = useState(false);
 
+  const [northstarHoverDate, setNorthstarHoverDate] = useState<number | null>(
+    null
+  );
+  const onNorthstarHoverCallback = (ret: { d: number | null }) => {
+    setNorthstarHoverDate(ret.d);
+  };
+
   const nameMap = new Map<string, string>();
   experiments.forEach((e) => {
     nameMap.set(e.id, e.name);
@@ -65,19 +79,50 @@ const NorthStar: FC<{
               <BsGear />
             </a>
           )}
-          <h2>
-            {northStar?.title
-              ? northStar.title
-              : `North Star Metric${
-                  northStar?.metricIds.length > 1 ? "s" : ""
-                }`}
-          </h2>
+          <div className="row">
+            <div className="col">
+              <h2>
+                {northStar?.title
+                  ? northStar.title
+                  : `North Star Metric${
+                      northStar?.metricIds.length > 1 ? "s" : ""
+                    }`}
+              </h2>
+            </div>
+            <div className="col" style={{ position: "relative" }}>
+              {northStar?.metricIds.length > 0 && (
+                <div
+                  className="float-right mr-3"
+                  style={{ position: "relative", top: 40 }}
+                >
+                  <label
+                    className="small my-0 mr-2 text-right align-middle"
+                    htmlFor="toggle-group-smooth-by"
+                  >
+                    Smoothing
+                    <br />
+                    (7 day trailing)
+                  </label>
+                  <Toggle
+                    value={smoothBy === "week"}
+                    setValue={() =>
+                      setSmoothBy(smoothBy === "week" ? "day" : "week")
+                    }
+                    id="toggle-group-smooth-by"
+                    className="align-middle"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
           {northStar?.metricIds.map((mid) => (
             <div key={mid}>
               <NorthStarMetricDisplay
                 metricId={mid}
                 window={northStar?.window}
-                resolution={northStar?.resolution ?? "week"}
+                smoothBy={smoothBy}
+                hoverDate={northstarHoverDate}
+                onHoverCallback={onNorthstarHoverCallback}
               />
             </div>
           ))}

diff --git a/packages/front-end/components/HomePage/NorthStarMetricDisplay.tsx b/packages/front-end/components/HomePage/NorthStarMetricDisplay.tsx
@@ -15,11 +15,15 @@ const NorthStarMetricDisplay = ({
   metricId,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   window,
-  resolution,
+  smoothBy,
+  hoverDate,
+  onHoverCallback,
 }: {
   metricId: string;
   window?: number | string;
-  resolution?: string;
+  smoothBy?: string;
+  hoverDate?: number | null;
+  onHoverCallback?: (ret: { d: number | null }) => void;
 }): React.ReactElement => {
   const { project } = useDefinitions();
   const permissions = usePermissions();
@@ -66,9 +70,11 @@ const NorthStarMetricDisplay = ({
               dates={analysis.dates}
               experiments={experiments}
               showStdDev={false}
-              smoothBy={resolution === "week" ? "week" : "day"}
+              smoothBy={smoothBy === "week" ? "week" : "day"}
               height={300}
               method={metric.type !== "binomial" ? "avg" : "sum"}
+              onHover={onHoverCallback}
+              hoverDate={hoverDate}
             />
           </div>
         ) : (