From 879c76c7895d8003f2c75a071a264b12ae3c9f47 Mon Sep 17 00:00:00 2001 From: nasaownsky Date: Fri, 27 May 2022 13:49:05 +0300 Subject: [PATCH] Added visual legend instead of caption --- .../MetricVizControls/MetricVizControls.test.tsx | 6 +++--- .../src/MetricVizControls/MetricVizControls.tsx | 3 +++ .../BarChartPair.tsx | 3 +-- .../src/VizControls/VizControls.test.tsx | 4 ++-- spotlight-client/src/VizControls/VizControls.tsx | 15 ++++++++++++--- .../VizDemographicsByCategory.tsx | 3 ++- .../VizPopulationBreakdownByLocation.tsx | 7 ++----- .../VizPrisonStayLengths/VizPrisonStayLengths.tsx | 3 ++- .../VizRecidivismRateCumulative.tsx | 3 ++- .../VizRecidivismRateSingleFollowup.tsx | 7 ++----- .../VizSentenceTypeByLocation.tsx | 7 ++----- .../VizSupervisionSuccessRate.tsx | 7 ++----- 12 files changed, 35 insertions(+), 33 deletions(-) diff --git a/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx b/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx index b8d9c03a..56e61a2f 100644 --- 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(); + renderWithStore(); 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(); + renderWithStore(); const methodology = screen.getByRole("button", { name: "Methodology" }); diff --git a/spotlight-client/src/MetricVizControls/MetricVizControls.tsx b/spotlight-client/src/MetricVizControls/MetricVizControls.tsx index 2a624583..473d2093 100644 --- 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; + smallData?: boolean; }; const MetricVizControls = ({ filters, metric, + smallData, }: MetricVizControlsProps): React.ReactElement => { return ( metric.download()} methodology={metric.methodology} + smallData={smallData} /> ); }; diff --git a/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx b/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx index e14da5b9..5b87f244 100644 --- 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} /> )} - {!preview && } ); } diff --git a/spotlight-client/src/VizControls/VizControls.test.tsx b/spotlight-client/src/VizControls/VizControls.test.tsx index 7fa646c5..9ca10ec9 100644 --- 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( . // ============================================================================= +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 ( @@ -91,6 +95,11 @@ const VizControls = ({ // eslint-disable-next-line react/no-array-index-key filter && {filter} )} + {smallData && ( + + + + )}