Skip to content

Commit

Permalink
Merge 5da2928 into 2eaa46a
Browse files Browse the repository at this point in the history
  • Loading branch information
macfarlandian committed Mar 3, 2021
2 parents 2eaa46a + 5da2928 commit 89bf060
Show file tree
Hide file tree
Showing 18 changed files with 1,179 additions and 117 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- run: yarn install --frozen-lockfile
- run: yarn lint
Expand All @@ -29,7 +29,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- run: yarn install --frozen-lockfile
- run: yarn test --coverage
Expand All @@ -50,7 +50,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- run: yarn install --frozen-lockfile
- run: yarn lint
Expand All @@ -66,7 +66,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- run: yarn install --frozen-lockfile
- run: yarn test --coverage --forceExit
Expand All @@ -87,7 +87,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- run: yarn install --frozen-lockfile
- run: yarn lint
Expand All @@ -101,7 +101,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- run: yarn install --frozen-lockfile
- run: yarn test --coverage
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/spotlight-staging.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: "12.x"
node-version: "14.x"
- uses: c-hive/gha-yarn-cache@v1
- name: Install dependencies
run: yarn install --frozen-lockfile
Expand Down
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
12.*
14.*
7 changes: 4 additions & 3 deletions public-dashboard-client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@
"empty-lite": "^1.0.3",
"env-cmd": "^10.1.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react": "^17.0.0",
"react-app-polyfill": "^1.0.6",
"react-collapsed": "^3.0.0",
"react-dom": "^16.13.1",
"react-dom": "^17.0.0",
"react-helmet": "^6.1.0",
"react-measure": "^2.3.0",
"react-scripts": "3.4.3",
Expand Down Expand Up @@ -72,7 +72,8 @@
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
"last 1 safari version",
"ie 11"
]
},
"resolutions": {
Expand Down
1 change: 1 addition & 0 deletions spotlight-api/.nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
10.*
10 changes: 6 additions & 4 deletions spotlight-client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"dependencies": {
"@auth0/auth0-spa-js": "^1.13.1",
"@reach/router": "^1.3.4",
"@recidiviz/case-triage-components": "^0.2.2",
"@types/classnames": "^2.2.11",
"@types/d3-array": "^2.8.0",
"@types/d3-color": "^2.0.1",
Expand All @@ -32,8 +33,8 @@
"@types/lodash.xor": "^4.5.6",
"@types/qs": "^6.9.5",
"@types/reach__router": "^1.3.6",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-measure": "^2.0.6",
"@types/react-portal": "^4.0.2",
"@types/react-simple-maps": "^1.0.3",
Expand Down Expand Up @@ -65,15 +66,16 @@
"mobx-utils": "^6.0.1",
"polished": "^4.0.5",
"qs": "^6.9.4",
"react": "^16.13.1",
"react": "^17.0.0",
"react-app-polyfill": "^1.0.6",
"react-collapsed": "^3.0.1",
"react-dom": "^16.13.1",
"react-dom": "^17.0.0",
"react-error-boundary": "^3.0.2",
"react-helmet-async": "^1.0.7",
"react-intersection-observer": "^8.31.0",
"react-is": "^16.13.1",
"react-measure": "^2.5.2",
"react-modal": "^3.12.1",
"react-portal": "^4.2.1",
"react-scripts": "3.4.3",
"react-simple-maps": "^2.3.0",
Expand Down
69 changes: 69 additions & 0 deletions spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
// Recidiviz - a data platform for criminal justice reform
// Copyright (C) 2021 Recidiviz, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

import { fireEvent, render, screen, within } from "@testing-library/react";
import React from "react";
import createMetricMapping from "../contentModels/createMetricMapping";
import HistoricalPopulationBreakdownMetric from "../contentModels/HistoricalPopulationBreakdownMetric";
import contentFixture from "../contentModels/__fixtures__/tenant_content_exhaustive";
import MetricVizControls from "./MetricVizControls";

const testTenantId = "US_ND";
const testMetricId = "ProbationPopulationHistorical";
const testMetadataMapping = {
[testMetricId]: contentFixture.metrics[testMetricId],
};

// we can use any metric here, the behavior is generic
function getTestMetric() {
return createMetricMapping({
localityLabelMapping: undefined,
metadataMapping: testMetadataMapping,
tenantId: testTenantId,
}).get(testMetricId) as HistoricalPopulationBreakdownMetric;
}

test("download button", () => {
const metric = getTestMetric();
jest.spyOn(metric, "download").mockImplementation(() => Promise.resolve());

render(<MetricVizControls filters={[]} metric={metric} />);

const download = screen.getByRole("button", { name: "Download Data" });
expect(download).toBeVisible();
fireEvent.click(download);

expect(metric.download).toHaveBeenCalled();
});

test("methodology modal", () => {
const metric = getTestMetric();
render(<MetricVizControls filters={[]} metric={metric} />);

const methodology = screen.getByRole("button", { name: "Methodology" });

fireEvent.click(methodology);

const modal = screen.getByRole("dialog");

expect(modal).toBeVisible();
expect(
within(modal).getByRole("heading", { name: "Methodology" })
).toBeVisible();
// this only works because the test metric has no HTML in it
expect(within(modal).getByText(metric.methodology)).toBeVisible();
});
35 changes: 28 additions & 7 deletions spotlight-client/src/MetricVizControls/MetricVizControls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

import HTMLReactParser from "html-react-parser";
import { rem } from "polished";
import React from "react";
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 Metric from "../contentModels/Metric";
import { MetricRecord } from "../contentModels/types";
import { colors, zIndex } from "../UiLibrary";
import { colors, CopyBlock, Modal, ModalHeading, zIndex } from "../UiLibrary";

const Wrapper = styled.div`
background: ${colors.background};
Expand Down Expand Up @@ -50,7 +52,7 @@ const FilterWrapper = styled.div`
}
`;

const DownloadButton = styled.button`
const Button = styled.button`
background: none;
border: none;
color: ${colors.link};
Expand All @@ -60,13 +62,18 @@ const DownloadButton = styled.button`
padding: none;
`;

const DownloadIcon = styled.img.attrs({ src: downloadPath })`
const ButtonIcon = styled.img`
height: ${rem(16)};
/* icon needs minor adjustment to align with text */
margin-bottom: ${rem(-2)};
width: ${rem(16)};
`;

const MethodologyCopy = styled(CopyBlock)`
line-height: 1.7;
margin-top: ${rem(16)};
`;

type MetricVizControlsProps = {
filters: React.ReactElement[];
metric: Metric<MetricRecord>;
Expand All @@ -76,6 +83,8 @@ const MetricVizControls = ({
filters,
metric,
}: MetricVizControlsProps): React.ReactElement => {
const [showMethodology, setShowMethodology] = useState(false);

return (
<Wrapper>
<ControlsGroup>
Expand All @@ -87,9 +96,21 @@ const MetricVizControls = ({
))}
</ControlsGroup>
<ControlsGroup>
<DownloadButton onClick={() => metric.download()}>
<DownloadIcon /> Download Data
</DownloadButton>
<Button onClick={() => metric.download()}>
<ButtonIcon src={downloadPath} /> Download Data
</Button>
<Button onClick={() => setShowMethodology(true)}>
<ButtonIcon src={machineLearningPath} /> Methodology
</Button>
<Modal
isOpen={showMethodology}
onRequestClose={() => setShowMethodology(false)}
>
<ModalHeading>Methodology</ModalHeading>
<MethodologyCopy>
{HTMLReactParser(metric.methodology)}
</MethodologyCopy>
</Modal>
</ControlsGroup>
</Wrapper>
);
Expand Down
58 changes: 58 additions & 0 deletions spotlight-client/src/UiLibrary/Modal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// Recidiviz - a data platform for criminal justice reform
// Copyright (C) 2021 Recidiviz, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

import { Modal as ModalBase } from "@recidiviz/case-triage-components";
import { rem, rgba } from "polished";
import styled from "styled-components/macro";
import { colors } from ".";
import animation from "./animation";
import zIndex from "./zIndex";

export const Modal = styled(ModalBase).attrs({
closeTimeoutMS: animation.defaultDuration,
})`
/*
the double ampersands are a trick to overcome
specificity in the imported component styles
*/
&& .ReactModal__Overlay {
background: ${rgba(colors.modalOverlay, 0)};
transition: background-color ${animation.defaultDuration}ms,
backdrop-filter ${animation.defaultDuration}ms;
z-index: ${zIndex.modal};
&.ReactModal__Overlay--after-open {
/* not all browsers support backdrop-filter but it's a nice progressive enhancement */
backdrop-filter: blur(${rem(4)});
background: ${rgba(colors.modalOverlay, 0.7)};
}
&.ReactModal__Overlay--before-close {
backdrop-filter: none;
background: ${rgba(colors.modalOverlay, 0)};
}
}
&& .ReactModal__Content {
max-height: 90vh;
max-width: 90vw;
overflow: auto;
z-index: ${zIndex.modal + 1};
}
`;

export { ModalHeading } from "@recidiviz/case-triage-components";
1 change: 1 addition & 0 deletions spotlight-client/src/UiLibrary/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export default {
menuButtonOpen: pineBright,
mobileMenuBackground: pineDark,
mobileMenuRule: pine,
modalOverlay: gray,
rule: gray,
ruleHover: "#AFC1C3",
text: pine,
Expand Down
1 change: 1 addition & 0 deletions spotlight-client/src/UiLibrary/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export { default as CopyBlock } from "./CopyBlock";
export { default as colors } from "./colors";
export * from "./Dropdown";
export { default as FixedBottomPanel } from "./FixedBottomPanel";
export * from "./Modal";
export { default as PageSection } from "./PageSection";
export * from "./typography";
export { default as zIndex } from "./zIndex";
11 changes: 11 additions & 0 deletions spotlight-client/src/assets/machine-learning.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions spotlight-client/src/contentApi/sources/methodologyBoilerplate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Recidiviz - a data platform for criminal justice reform
// Copyright (C) 2021 Recidiviz, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

export const ageGroup = `In distributions by age, individuals are counted towards the
age group they fall into as of the reporting date.`;

export const gender = `Gender distributions only include male and female due to
low numbers of other reported genders.`;

export const raceOrEthnicity = `Distributions by race count individuals with more than
one reported race or ethnicity towards the racial or ethnic identity that is least
represented in the general population.`;

0 comments on commit 89bf060

Please sign in to comment.