Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2096 viz components update #735

Merged
merged 3 commits into from
Apr 7, 2020
Merged

2096 viz components update #735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
16d8f56
styling mostly updated
tillyw Apr 6, 2020
1febe25
styling and functionality updated
tillyw Apr 6, 2020
da34c10
resolved comments
tillyw Apr 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions atd-vzv/src/constants/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const colors = {
intensity3Of5: '#ff8b8f',
intensity4Of5: '#ff343b',
intensity5Of5Highest: '#990428',
buttonBackground: '#f6f6f6',
info: "#18A2B8",
infoDark: "#257A8B",
dark: "#343A41",
Expand Down
177 changes: 78 additions & 99 deletions atd-vzv/src/views/nav/CrashTypeSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
import React, { useState, useEffect } from "react";
import { Button, ButtonGroup } from "reactstrap";
import { Button } from "reactstrap";
import styled from "styled-components";
import classnames from "classnames";
import { colors } from "../../constants/colors";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeartbeat, faMedkit } from "@fortawesome/free-solid-svg-icons";

const CrashTypeSelector = ({ setCrashType }) => {
const fatalitiesAndSeriousInjuries = {
name: "fatalitiesAndSeriousInjuries",
textString: "Fatalities and Serious Injuries",
queryStringCrash: "(death_cnt > 0 OR sus_serious_injry_cnt > 0)",
queryStringPerson: "(prsn_injry_sev_id = 4 OR prsn_injry_sev_id = 1)"
};

const fatalities = {
name: "fatalities",
textString: "Fatalities",
Expand All @@ -18,118 +28,87 @@ const CrashTypeSelector = ({ setCrashType }) => {
queryStringPerson: "(prsn_injry_sev_id = 1)"
};

const [activeTab, setActiveTab] = useState([fatalities, seriousInjuries]);
const [previousTabClicked, setPreviousTabClicked] = useState([]);
const [activeTab, setActiveTab] = useState(fatalitiesAndSeriousInjuries);

const toggle = tab => {
// Make a copy of the activeTab array that exists in state in order to mutate it
let placeHolder = [...activeTab];
// Attempt to filter out the object in the activeTab copy that matches the clicked tab
let filteredObject = placeHolder.filter(
objectChild => objectChild.name === tab.name
);
// Store the previous object filtered out to default back to if user clicks same tab twice
setPreviousTabClicked(filteredObject);
// If the clicked tab object is filtered out of the activeTab copy,
// find any remaining objects and place them into a new array
if (filteredObject.length) {
let placeHolderChild = [];
placeHolder.forEach(item => {
if (item.name !== tab.name) {
placeHolderChild.push(item);
}
});
// If there are remaining objects, set them to replace the activeTab copy, clearing out the clicked tab,
// else if there are no remaining objects, set the previous tab to replace the activeTab copy
// (toggling back to previous state rather than emptying activeTab completely and returning no results)
placeHolder = placeHolderChild.length
? placeHolderChild
: previousTabClicked;
// If the clicked tab object was not found in the activeTab copy,
// add it back into the activeTab copy
} else {
placeHolder.push(tab);
if (activeTab.name !== tab.name) {
setActiveTab(tab);
}
// Set the activeTab copy to replace activeTab in state
setActiveTab(placeHolder);
};

// Check to see whether a tab is unselected, return true if unselected
const isUnselected = tab => {
let filteredObject = activeTab.find(element => element.name === tab.name);
let unselected = filteredObject ? false : true;
return unselected;
};

// Set hover class based on whether button is unselected
const setHoverClass = unselected => {
return unselected ? "unselected" : "selected";
};

useEffect(() => {
const fatalitiesAndSeriousInjuries = {
name: "fatalitiesAndSeriousInjuries",
textString: "Fatalities and Serious Injuries",
queryStringCrash: "(death_cnt > 0 OR sus_serious_injry_cnt > 0)",
queryStringPerson:
"(prsn_injry_sev_id = 4 OR prsn_injry_sev_id = 1)"
};

const handleCrashType = () => {
let selectedCrashType =
activeTab.length > 1 ? fatalitiesAndSeriousInjuries : activeTab[0];
return selectedCrashType;
};

setCrashType(handleCrashType());
setCrashType(activeTab);
}, [setCrashType, activeTab]);

// Set styles to override Bootstrap hover behavior based on whether button is selected
// Set styles to override Bootstrap default styling
const StyledButton = styled.div`
.selected:hover {
background-color: ${colors.info};
border: 1px solid ${colors.info};
color: ${colors.white};
}
.unselected:hover {
background-color: ${colors.white};
border: 1px solid ${colors.info};
color: ${colors.info};
.crash-type {
color: ${colors.dark};
background: ${colors.buttonBackground} 0% 0% no-repeat padding-box;
border-style: none;
border-radius: 18px;
opacity: 1;
margin-right: 10px;
}
`;

const fatalitiesIcon = (
<FontAwesomeIcon
className="block-icon"
icon={faHeartbeat}
color={colors.fatalities}
/>
);

const seriousInjuriesIcon = (
<FontAwesomeIcon
className="block-icon"
icon={faMedkit}
color={colors.seriousInjuries}
/>
);

return (
<StyledButton>
<ButtonGroup className="mb-3 d-flex">
<Button
id="fatalities-btn"
type="button"
color="info"
className={`${setHoverClass(
isUnselected(fatalities)
)} w-100 pt-1 pb-1 pl-0 pr-0`}
onClick={() => {
toggle(fatalities);
}}
outline={isUnselected(fatalities)}
>
Fatalities
</Button>
<Button
id="serious-injuries-btn"
type="button"
color="info"
className={`${setHoverClass(
isUnselected(seriousInjuries)
)} w-100 pt-1 pb-1 pl-0 pr-0`}
onClick={() => {
toggle(seriousInjuries);
}}
outline={isUnselected(seriousInjuries)}
>
Serious Injuries
</Button>
</ButtonGroup>
<Button
id="all-btn"
type="button"
className={classnames(
tillyw marked this conversation as resolved.
Show resolved Hide resolved
{ active: activeTab.name === "fatalitiesAndSeriousInjuries" },
"crash-type"
)}
onClick={() => {
toggle(fatalitiesAndSeriousInjuries);
}}
>
All
</Button>
<Button
id="fatalities-btn"
type="button"
className={classnames(
{ active: activeTab.name === "fatalities" },
"crash-type"
)}
onClick={() => {
toggle(fatalities);
}}
>
{fatalitiesIcon} Fatalities
</Button>
<Button
id="serious-injuries-btn"
type="button"
className={classnames(
{ active: activeTab.name === "seriousInjuries" },
"crash-type"
)}
onClick={() => {
toggle(seriousInjuries);
}}
>
{seriousInjuriesIcon} Serious Injuries
</Button>
</StyledButton>
);
};
Expand Down
21 changes: 13 additions & 8 deletions atd-vzv/src/views/summary/CrashesByMode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const CrashesByMode = () => {

accumulator += isFatalQuery && parseInt(record[fields.fatal]);
accumulator += isInjuryQuery && parseInt(record[fields.injury]);

return accumulator;
}, 0);
});
Expand Down Expand Up @@ -145,9 +145,19 @@ const CrashesByMode = () => {

return (
<Container>
<Row className="pb-3">
<Row>
<Col>
<h1 className="text-left, font-weight-bold">By Mode</h1>
</Col>
</Row>
<Row>
<Col>
<h3 className="text-center">{crashType.textString} by Mode</h3>
<CrashTypeSelector setCrashType={setCrashType} />
</Col>
</Row>
<Row>
<Col>
<hr />
</Col>
</Row>
<Row>
Expand Down Expand Up @@ -179,11 +189,6 @@ const CrashesByMode = () => {
</p>
</Col>
</Row>
<Row className="pt-3">
<Col>
<CrashTypeSelector setCrashType={setCrashType} />
</Col>
</Row>
</Container>
);
};
Expand Down
26 changes: 18 additions & 8 deletions atd-vzv/src/views/summary/CrashesByMonth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,14 +160,29 @@ const CrashesByMonth = () => {

return (
<Container>
<Row className="pb-3">
<Row>
<Col>
<h3 className="text-center">{crashType.textString} by Year</h3>
<h1 className="text-left, font-weight-bold">By Year</h1>
</Col>
</Row>
<Row style={{ paddingBottom: 20 }}>
<Row>
<Col>
<CrashTypeSelector setCrashType={setCrashType} />
</Col>
</Row>
<Row>
<Col>
<hr />
</Col>
</Row>
<Row>
<Col>{!!chartData && renderHeader()}</Col>
</Row>
<Row>
<Col>
<hr className="mt-1"/>
</Col>
</Row>
<Row style={{ paddingBottom: 20 }}>
<Col>
<h6 style={{ textAlign: "center" }}>Prior Years:</h6>
Expand Down Expand Up @@ -200,11 +215,6 @@ const CrashesByMonth = () => {
/>
</Col>
</Row>
<Row className="pt-3">
<Col>
<CrashTypeSelector setCrashType={setCrashType} />
</Col>
</Row>
</Container>
);
};
Expand Down
21 changes: 12 additions & 9 deletions atd-vzv/src/views/summary/CrashesBySystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,19 @@ const CrashesBySystem = () => {

return (
<Container>
<Row className="pb-3">
<Row>
<Col>
<h1 className="text-left, font-weight-bold">By Jurisdiction</h1>
</Col>
</Row>
<Row>
<Col>
<CrashTypeSelector setCrashType={setCrashType} />
</Col>
</Row>
<Row>
<Col>
<h3 className="text-center">
{crashType.textString} by Jurisdiction
</h3>
<hr />
</Col>
</Row>
<Row>
Expand All @@ -134,11 +142,6 @@ const CrashesBySystem = () => {
/>
</Col>
</Row>
<Row className="pt-3">
<Col>
<CrashTypeSelector setCrashType={setCrashType} />
</Col>
</Row>
</Container>
);
};
Expand Down
Loading