Visual treatment for small numbers (#532)

* Added visual treatment for small numbers * Test fixes * Fixes * Test fixes * Added visual legend instead of caption
Recidiviz · Jun 10, 2022 · 61fdeb3 · 61fdeb3
1 parent 11b7349
commit 61fdeb3
Show file tree

Hide file tree

Showing 26 changed files with 258 additions and 125 deletions.
diff --git a/spotlight-client/package.json b/spotlight-client/package.json
@@ -43,6 +43,7 @@
     "@types/react-simple-maps": "^1.0.3",
     "@types/styled-components": "^5.1.5",
     "@types/topojson": "^3.2.2",
+    "@vx/pattern": "^0.0.199",
     "@w11r/use-breakpoint": "^1.8.0",
     "assert-never": "^1.2.1",
     "body-scroll-lock": "^3.1.5",

diff --git a/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx b/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx
@@ -20,7 +20,7 @@ import React from "react";
 import createMetricMapping from "../contentModels/createMetricMapping";
 import HistoricalPopulationBreakdownMetric from "../contentModels/HistoricalPopulationBreakdownMetric";
 import contentFixture from "../contentModels/__fixtures__/tenant_content_exhaustive";
-import { renderWithTheme } from "../testUtils";
+import { renderWithStore } from "../testUtils";
 import MetricVizControls from "./MetricVizControls";
 
 const testTenantId = "US_ND";
@@ -42,7 +42,7 @@ test("download button", () => {
   const metric = getTestMetric();
   jest.spyOn(metric, "download").mockImplementation(() => Promise.resolve());
 
-  renderWithTheme(<MetricVizControls filters={[]} metric={metric} />);
+  renderWithStore(<MetricVizControls filters={[]} metric={metric} />);
 
   const download = screen.getByRole("button", { name: "Download Data" });
   expect(download).toBeVisible();
@@ -53,7 +53,7 @@ test("download button", () => {
 
 test("methodology modal", () => {
   const metric = getTestMetric();
-  renderWithTheme(<MetricVizControls filters={[]} metric={metric} />);
+  renderWithStore(<MetricVizControls filters={[]} metric={metric} />);
 
   const methodology = screen.getByRole("button", { name: "Methodology" });
 

diff --git a/spotlight-client/src/MetricVizControls/MetricVizControls.tsx b/spotlight-client/src/MetricVizControls/MetricVizControls.tsx
@@ -23,17 +23,20 @@ import VizControls, { VizControlsProps } from "../VizControls";
 type MetricVizControlsProps = {
   filters: VizControlsProps["filters"];
   metric: Metric<MetricRecord>;
+  smallData?: boolean;
 };
 
 const MetricVizControls = ({
   filters,
   metric,
+  smallData,
 }: MetricVizControlsProps): React.ReactElement => {
   return (
     <VizControls
       filters={filters}
       download={() => metric.download()}
       methodology={metric.methodology}
+      smallData={smallData}
     />
   );
 };

diff --git a/spotlight-client/src/Notes/Notes.tsx b/spotlight-client/src/Notes/Notes.tsx
@@ -25,9 +25,8 @@ const Wrapper = styled.ol`
   font-size: ${rem(13)};
   font-weight: 500;
   line-height: 1.7;
-  list-style: decimal outside;
+  list-style: none;
   margin-top: ${rem(40)};
-  padding-left: 1em;
 `;
 
 const Item = styled.li`

diff --git a/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx b/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx
@@ -22,7 +22,6 @@ import styled from "styled-components/macro";
 import { ItemToHighlight, ProportionalBar } from "../charts";
 import { DemographicCategoryRecords } from "../contentModels/types";
 import VizControls, { VizControlsProps } from "../VizControls";
-import VizNotes from "../VizNotes";
 
 const CHART_HEIGHT = 165;
 const CHART_HEIGHT_MOBILE = 100;
@@ -90,6 +89,7 @@ export default function BarChartPair({
           filters={filters}
           methodology={methodology}
           download={download}
+          smallData={!preview}
         />
       )}
       <ProportionalBar
@@ -106,7 +106,6 @@ export default function BarChartPair({
         highlighted={highlightedCategory}
         setHighlighted={setHighlightedCategory}
       />
-      {!preview && <VizNotes smallData />}
     </Wrapper>
   );
 }
diff --git a/spotlight-client/src/VizControls/VizControls.test.tsx b/spotlight-client/src/VizControls/VizControls.test.tsx
@@ -17,14 +17,14 @@
 
 import { fireEvent, screen, within } from "@testing-library/react";
 import React from "react";
-import { renderWithTheme } from "../testUtils";
+import { renderWithStore } from "../testUtils";
 import VizControls from "./VizControls";
 
 const mockDownload = jest.fn();
 const mockMethodology = "test methodology";
 
 beforeEach(() => {
-  renderWithTheme(
+  renderWithStore(
     <VizControls
       filters={[]}
       download={mockDownload}

diff --git a/spotlight-client/src/VizControls/VizControls.tsx b/spotlight-client/src/VizControls/VizControls.tsx
@@ -15,12 +15,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { TooltipTrigger, Icon, IconSVG } from "@recidiviz/design-system";
 import HTMLReactParser from "html-react-parser";
 import { rem } from "polished";
 import React, { useState } from "react";
 import styled from "styled-components/macro";
 import downloadPath from "../assets/cloud-download.svg";
 import machineLearningPath from "../assets/machine-learning.svg";
+import { useDataStore } from "../StoreProvider";
 import { colors, CopyBlock, Modal, ModalHeading, zIndex } from "../UiLibrary";
 
 const Wrapper = styled.div`
@@ -29,16 +31,16 @@ const Wrapper = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   z-index: ${zIndex.control};
+  margin-bottom: ${rem(32)};
 `;
 
 const ControlsGroup = styled.div`
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: ${rem(16)};
+  align-items: center;
 `;
 
 const FilterWrapper = styled.div`
-  margin-bottom: ${rem(16)};
   margin-right: ${rem(32)};
 
   &:last-child {
@@ -53,7 +55,6 @@ const Button = styled.button`
   cursor: pointer;
   font-size: ${rem(14)};
   font-weight: 500;
-  margin-bottom: ${rem(16)};
   padding: none;
 `;
 
@@ -72,14 +73,17 @@ export interface VizControlsProps {
   filters: React.ReactNode[];
   download: () => void;
   methodology: string;
+  smallData?: boolean;
 }
 
 const VizControls = ({
   download,
   filters,
   methodology,
+  smallData,
 }: VizControlsProps): React.ReactElement => {
   const [showMethodology, setShowMethodology] = useState(false);
+  const { tenant } = useDataStore();
 
   return (
     <Wrapper>
@@ -91,6 +95,11 @@ const VizControls = ({
             // eslint-disable-next-line react/no-array-index-key
             filter && <FilterWrapper key={index}>{filter}</FilterWrapper>
         )}
+        {smallData && (
+          <TooltipTrigger maxWidth={232} contents={tenant?.smallDataDisclaimer}>
+            <Icon kind={IconSVG.Info} width={16} height={16} />
+          </TooltipTrigger>
+        )}
       </ControlsGroup>
       <ControlsGroup>
         <Button onClick={() => download()}>

diff --git a/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx b/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx
@@ -122,9 +122,10 @@ const VizDemographicsByCategory: React.FC<VizDemographicsByCategoryProps> = ({
         <MetricVizControls
           filters={[<DemographicFilterSelect metric={metric} />]}
           metric={metric}
+          smallData
         />
         {viz}
-        <VizNotes smallData unknowns={unknowns} download={download} />
+        <VizNotes unknowns={unknowns} download={download} />
       </>
     );
   }

diff --git a/spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.tsx b/spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.tsx
@@ -59,6 +59,7 @@ const VizPopulationBreakdownByLocation: React.FC<VizPopulationBreakdownByLocatio
         <MetricVizControls
           filters={[<LocalityFilterSelect metric={metric} />]}
           metric={metric}
+          smallData
         />
         {viz}
         <StatisticWrapper>
@@ -71,11 +72,7 @@ const VizPopulationBreakdownByLocation: React.FC<VizPopulationBreakdownByLocatio
             }
           />
         </StatisticWrapper>
-        <VizNotes
-          smallData
-          unknowns={metric.unknowns}
-          download={metric.download}
-        />
+        <VizNotes unknowns={metric.unknowns} download={metric.download} />
       </>
     );
   }

diff --git a/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx b/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx
@@ -90,6 +90,7 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
         <MetricVizControls
           filters={[<DemographicFilterSelect metric={metric} />]}
           metric={metric}
+          smallData
         />
         <AutoHeightTransition initialHeight={singleChartHeight}>
           <ChartsWrapper>
@@ -109,7 +110,7 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
             ))}
           </ChartsWrapper>
         </AutoHeightTransition>
-        <VizNotes smallData unknowns={unknowns} download={metric.download} />
+        <VizNotes unknowns={unknowns} download={metric.download} />
       </>
     );
   }

diff --git a/spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.tsx b/spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.tsx
@@ -72,6 +72,7 @@ const VizRecidivismRateCumulative: React.FC<VizRecidivismRateCumulativeProps> =
             ),
           ]}
           metric={metric}
+          smallData
         />
         <ChartWrapper>
           {chartTransitions.map(({ item, props, key }) => (
@@ -99,7 +100,7 @@ const VizRecidivismRateCumulative: React.FC<VizRecidivismRateCumulativeProps> =
             </animated.div>
           ))}
         </ChartWrapper>
-        <VizNotes smallData unknowns={unknowns} download={metric.download} />
+        <VizNotes unknowns={unknowns} download={metric.download} />
       </>
     );
   }

diff --git a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx b/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx
@@ -126,6 +126,7 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
                 ),
               ]}
               metric={metric}
+              smallData
             />
             <AutoHeightTransition initialHeight={singleChartHeight}>
               <ChartsWrapper ref={measureRef}>
@@ -147,11 +148,7 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
                 ))}
               </ChartsWrapper>
             </AutoHeightTransition>
-            <VizNotes
-              smallData
-              unknowns={unknowns}
-              download={metric.download}
-            />
+            <VizNotes unknowns={unknowns} download={metric.download} />
           </>
         )}
       </Measure>

diff --git a/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx b/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx
@@ -66,6 +66,7 @@ const VizSentenceTypeByLocation: React.FC<VizSentenceTypeByLocationProps> = ({
             <DemographicFilterSelect metric={metric} />,
           ]}
           metric={metric}
+          smallData
         />
         <ChartWrapper>
           {chartTransitions.map(
@@ -77,11 +78,7 @@ const VizSentenceTypeByLocation: React.FC<VizSentenceTypeByLocationProps> = ({
               )
           )}
         </ChartWrapper>
-        <VizNotes
-          smallData
-          unknowns={metric.unknowns}
-          download={metric.download}
-        />
+        <VizNotes unknowns={metric.unknowns} download={metric.download} />
       </>
     );
   }

diff --git a/spotlight-client/src/VizSupervisionSuccessRate/VizSupervisionSuccessRate.tsx b/spotlight-client/src/VizSupervisionSuccessRate/VizSupervisionSuccessRate.tsx
@@ -108,6 +108,7 @@ const VizSupervisionSuccessRate: React.FC<VizSupervisionSuccessRateProps> = ({
             <DemographicFilterSelect metric={metric} />,
           ]}
           metric={metric}
+          smallData
         />
         <CohortChartWrapper>
           {cohortTransitions.map(({ item, key, props }) => (
@@ -155,11 +156,7 @@ const VizSupervisionSuccessRate: React.FC<VizSupervisionSuccessRateProps> = ({
             </animated.div>
           )}
         </Measure>
-        <VizNotes
-          smallData
-          unknowns={metric.unknowns}
-          download={metric.download}
-        />
+        <VizNotes unknowns={metric.unknowns} download={metric.download} />
       </>
     );
   }

diff --git a/spotlight-client/src/charts/BarChartTrellis.test.tsx b/spotlight-client/src/charts/BarChartTrellis.test.tsx
@@ -27,8 +27,8 @@ const testData = [
   {
     label: "Group 1",
     records: [
-      { label: "Category A", color: "red", value: 30, pct: 0.3 },
-      { label: "Category B", color: "blue", value: 70, pct: 0.7 },
+      { label: "Category A", color: "red", value: 300, pct: 0.3 },
+      { label: "Category B", color: "blue", value: 700, pct: 0.7 },
     ],
   },
   {
@@ -54,6 +54,7 @@ test("renders charts", () => {
   ).toHaveStyle("fill: red");
   expect(
     screen.getByRole("img", { name: "Category A bar value 40%" })
+    // if value is less than certain threshold (e.g. n=100), then the bar is rendered as a hatch
   ).toHaveStyle("fill: red");
   expect(
     screen.getByRole("img", { name: "Category B bar value 70%" })