diff --git a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.test.tsx b/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.test.tsx index 687e5f76..520cf217 100644 --- a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.test.tsx +++ b/spotlight-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 index 0492dca8..155546a2 100644 --- 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 = ({ 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 ( - <> - , - , - ]} - /> - - + { + if (bounds) setChartContainerStyles({ height: bounds.height }); + }} + > + {({ measureRef }) => ( + <> + , + , + ]} + /> + + {chartTransitions.map(({ item, key, props }) => ( + + + { + // for type safety we have to check this again + // but it should always be defined if we've gotten this far + item.singleFollowupDemographics && ( + + ) + } + + + ))} + + + )} + ); } diff --git a/spotlight-client/src/charts/WindowedTimeSeries.tsx b/spotlight-client/src/charts/WindowedTimeSeries.tsx index 0982f095..be49b519 100644 --- 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({