animated transitions

Recidiviz · Feb 4, 2021 · cb13a05 · cb13a05
1 parent c7606a6
commit cb13a05
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 18 deletions.
diff --git a/...light-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.test.tsx b/...light-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.test.tsx
@@ -118,7 +118,7 @@ test("demographic charts", async () => {
   fireEvent.click(screen.getByRole("option", { name: "Race or Ethnicity" }));
 
   // pause for animated transition
-  // await waitForElementToBeRemoved(totalChart);
+  await waitForElementToBeRemoved(totalChart);
 
   const raceCharts = screen.getAllByRole("group", {
     name: "8 bars in a bar chart",
@@ -129,7 +129,7 @@ test("demographic charts", async () => {
   fireEvent.click(screen.getByRole("option", { name: "Gender" }));
 
   // pause for animated transition
-  // await waitForElementToBeRemoved(raceCharts[0]);
+  await waitForElementToBeRemoved(raceCharts[0]);
 
   const genderCharts = screen.getAllByRole("group", {
     name: "8 bars in a bar chart",
@@ -140,7 +140,7 @@ test("demographic charts", async () => {
   fireEvent.click(screen.getByRole("option", { name: "Age Group" }));
 
   // pause for animated transition
-  // await waitForElementToBeRemoved(genderCharts[0]);
+  await waitForElementToBeRemoved(genderCharts[0]);
 
   expect(
     screen.getAllByRole("group", { name: "8 bars in a bar chart" }).length

diff --git a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx b/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx
@@ -17,10 +17,13 @@
 
 import { observer } from "mobx-react-lite";
 import React from "react";
+import Measure from "react-measure";
+import { animated, useSpring, useTransition } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
 import {
   BarChartTrellis,
   CommonDataPoint,
+  singleChartHeight,
   TooltipContentFunction,
 } from "../charts";
 import RecidivismRateMetric from "../contentModels/RecidivismRateMetric";
@@ -29,6 +32,10 @@ import FiltersWrapper from "../FiltersWrapper";
 import NoMetricData from "../NoMetricData";
 import FollowupPeriodFilterSelect from "./FollowupPeriodFilterSelect";
 
+const ChartsWrapper = styled.div`
+  position: relative;
+`;
+
 const getTooltipProps: TooltipContentFunction = (columnData) => {
   const {
     summary: [
@@ -61,23 +68,69 @@ type VizRecidivismRateSingleFollowupProps = {
 const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupProps> = ({
   metric,
 }) => {
-  const { singleFollowupDemographics } = metric;
+  const { singleFollowupDemographics, demographicView } = metric;
+
+  const [chartContainerStyles, setChartContainerStyles] = useSpring(() => ({
+    from: { height: singleChartHeight },
+    height: singleChartHeight,
+    config: { friction: 40, tension: 220, clamp: true },
+  }));
+
+  const chartTransitions = useTransition(
+    { demographicView, singleFollowupDemographics },
+    (item) => item.demographicView,
+    {
+      initial: { opacity: 1 },
+      from: { opacity: 0 },
+      enter: { opacity: 1 },
+      leave: { opacity: 0, position: "absolute" },
+      config: { friction: 40, tension: 280 },
+    }
+  );
+
+  if (demographicView === "nofilter")
+    throw new Error(
+      "Unable to display this metric without demographic filter."
+    );
 
   if (singleFollowupDemographics) {
     return (
-      <>
-        <FiltersWrapper
-          filters={[
-            <FollowupPeriodFilterSelect metric={metric} />,
-            <DemographicFilterSelect metric={metric} />,
-          ]}
-        />
-        <BarChartTrellis
-          barAxisLabel="Release Cohort"
-          data={singleFollowupDemographics}
-          getTooltipProps={getTooltipProps}
-        />
-      </>
+      <Measure
+        bounds
+        onResize={({ bounds }) => {
+          if (bounds) setChartContainerStyles({ height: bounds.height });
+        }}
+      >
+        {({ measureRef }) => (
+          <>
+            <FiltersWrapper
+              filters={[
+                <FollowupPeriodFilterSelect metric={metric} />,
+                <DemographicFilterSelect metric={metric} />,
+              ]}
+            />
+            <animated.div style={chartContainerStyles}>
+              {chartTransitions.map(({ item, key, props }) => (
+                <ChartsWrapper key={key} ref={measureRef}>
+                  <animated.div style={{ ...props, top: 0 }}>
+                    {
+                      // for type safety we have to check this again
+                      // but it should always be defined if we've gotten this far
+                      item.singleFollowupDemographics && (
+                        <BarChartTrellis
+                          barAxisLabel="Release Cohort"
+                          data={item.singleFollowupDemographics}
+                          getTooltipProps={getTooltipProps}
+                        />
+                      )
+                    }
+                  </animated.div>
+                </ChartsWrapper>
+              ))}
+            </animated.div>
+          </>
+        )}
+      </Measure>
     );
   }
 

diff --git a/spotlight-client/src/charts/WindowedTimeSeries.tsx b/spotlight-client/src/charts/WindowedTimeSeries.tsx
@@ -154,7 +154,6 @@ const WindowedTimeSeries: React.FC<{
                   getTooltipProps: (d) => {
                     // d.date is present because it's in our record format
                     const dateHovered = d.date as Date;
-                    // TODO: calc % on the fly or in model?
                     return {
                       title: getDateLabel(dateHovered),
                       records: getDataForDate({