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.

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

Add links to various Vision Zero resources to VZE dashboard #974

Merged
merged 3 commits into from
Feb 23, 2021
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 67 additions & 10 deletions atd-vze/src/views/VZDashboard/VZDashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import { Col, Row } from "reactstrap";
import { withApollo } from "react-apollo";
import { useQuery } from "@apollo/react-hooks";
import Widget02 from "../Widgets/Widget02";
import VZLinksWidget from "../Widgets/VZLinksWidget";

import { GET_CRASHES_YTD } from "../../queries/dashboard";

import bi_logo from "../../assets/img/brand/power_bi_icon_white_on_transparent.png";

function VZDashboard() {
const year = new Date().getFullYear();
const yearStart = `${year}-01-01`;
Expand All @@ -30,13 +33,13 @@ function VZDashboard() {
apd_confirmed_death_count: deathCount,
} = data.fatalities.aggregate.sum;

const { count: crashesCount } = data.seriousInjuriesAndTotal.aggregate;
//const { count: crashesCount } = data.seriousInjuriesAndTotal.aggregate;

const yearsOfLifeLostYTD =
yearsOfLifeLostPrimaryPerson + yearsOfLifeLostPerson;
const fatalitiesYTD = deathCount;
const seriousInjuriesYTD = seriousInjuryCount;
const crashesYTD = crashesCount;
//const crashesYTD = crashesCount;

// Widget02 expects a string value, DB returns number or null
const commaSeparator = number =>
Expand Down Expand Up @@ -69,14 +72,16 @@ function VZDashboard() {
color="info"
/>
</Col>
<Col xs="12" sm="6" md="4">
<Widget02
header={commaSeparator(crashesYTD)}
mainText={`Crashes in ${year}`}
icon="fa fa-car"
color="warning"
/>
</Col>
{/*
<Col xs="12" sm="6" md="4">
<Widget02
header={commaSeparator(crashesYTD)}
mainText={`Crashes in ${year}`}
icon="fa fa-car"
color="warning"
/>
</Col>
*/}
</Row>
<Row>
<Col className="ml-1">
Expand All @@ -85,6 +90,58 @@ function VZDashboard() {
}
</Col>
</Row>
<Row className='mt-3'>
<Col xs="12" sm="6" md="6">
<VZLinksWidget
header={`Arterial Management Division Overview`}
mainText={`Top location overview, by collision types and modes`}
icon="fa fa-arrows"
raster_icon={bi_logo}
raster_icon_alt="Power BI"
color="dark"
link="https://app.powerbigov.us/sharedwithme/reports/42c00944-3a44-4d0a-bdd4-d19d7e3647fe/ReportSection512b18e1068b03c18800?ctid=5c5e19f6-a6ab-4b45-b1d0-be4608a9a67f"
target='_bi_amd'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was completely unaware of this use of the target attribute! I can't believe that I've never thought referencing an already open window instead of creating a new one each time. Very cool to learn.

/>
<VZLinksWidget
header={`High Injury Roadways`}
mainText={`Each High Injury Roadway by Polygon with various statistics`}
icon="fa fa-road"
raster_icon={bi_logo}
raster_icon_alt="Power BI"
color="dark"
link="https://app.powerbigov.us/groups/me/reports/5fd3a24f-839c-4702-870c-c44bf02abbfa/ReportSectiona58ac4e954138e705130?ctid=5c5e19f6-a6ab-4b45-b1d0-be4608a9a67f"
target='_bi_hir'
/>
<VZLinksWidget
header={`Emerging Hotspots and Bond Locations`}
mainText={`Track crash impact of Vision Zero Bond Projects and changing crash trends`}
icon="fa fa-exchange"
raster_icon={bi_logo}
raster_icon_alt="Power BI"
color="dark"
link="https://app.powerbigov.us/groups/me/reports/ec595df7-a0ac-44ad-a973-e389a61bce80/ReportSection7bcb3c8d66b4510de019?ctid=5c5e19f6-a6ab-4b45-b1d0-be4608a9a67f"
target='_bi_hotspots'
/>
</Col>
<Col xs="12" sm="6" md="6">
<VZLinksWidget
header={`Comprehensive Costs by Location`}
mainText={`Based on Vision Zero polygons`}
icon="fa fa-map"
color="primary"
link="https://austin.maps.arcgis.com/apps/instant/interactivelegend/index.html?appid=32b276f4e6cd406aa1c2040d2eb26b37"
target='_compcostmap'
/>
<VZLinksWidget
header={`Vision Zero Viewer`}
mainText={`Public-facing insight into crash trends`}
icon="fa fa-map"
color="primary"
link="https://visionzero.austin.gov/viewer/"
target='_vzv'
/>
</Col>
</Row>
</div>
);
}
Expand Down
124 changes: 124 additions & 0 deletions atd-vze/src/views/Widgets/VZLinksWidget.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Card, CardBody, CardFooter } from "reactstrap";
import classNames from "classnames";
import { mapToCssModules } from "reactstrap/lib/utils";

const propTypes = {
header: PropTypes.string,
mainText: PropTypes.string,
icon: PropTypes.string,
raster_icon: PropTypes.string,
raster_icon_alt: PropTypes.string,
color: PropTypes.string,
variant: PropTypes.string,
footer: PropTypes.bool,
link: PropTypes.string,
target: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
cssModule: PropTypes.object,
};

const defaultProps = {
header: "$1,999.50",
mainText: "Income",
icon: "fa fa-cogs",
raster_icon: null,
raster_icon_alt: null,
color: "primary",
variant: "0",
link: "#",
target: "_new",
};

class VZLinksWidget extends Component {
render() {
const {
className,
cssModule,
header,
mainText,
icon,
raster_icon,
raster_icon_alt,
color,
footer,
link,
target,
children,
variant,
...attributes
} = this.props;

// demo purposes only
const padding =
variant === "0"
? { card: "p-3", icon: "p-3", lead: "mt-2" }
: variant === "1"
? {
card: "p-0",
icon: "p-4",
lead: "pt-3",
}
: { card: "p-0", icon: "p-4 px-5", lead: "pt-3" };

const card = { style: "clearfix", color: color, icon: icon, raster_icon: raster_icon, raster_icon_alt: raster_icon_alt, classes: "" };
card.classes = mapToCssModules(
classNames(className, card.style, padding.card),
cssModule
);

const lead = { style: "h5 mb-0", color: color, classes: "" };
lead.classes = classNames(lead.style, "text-" + card.color, padding.lead);

const blockIcon = function(icon, raster_icon) {
const classes = classNames(
raster_icon ? null : icon,
"bg-" + card.color,
padding.icon,
raster_icon ? null : "font-2xl",
"mr-3 float-left"
);
return <i className={classes}>{raster_icon ? <img src={raster_icon} alt={raster_icon_alt} /> : null}</i>;
};

const cardFooter = function() {
if (footer) {
return (
<CardFooter className="px-3 py-2">
<a
className="font-weight-bold font-xs btn-block text-muted"
href={link}
>
View More
<i className="fa fa-angle-right float-right font-lg"></i>
</a>
</CardFooter>
);
}
};

return (
<Card>
<CardBody className={card.classes} {...attributes}>
{blockIcon(card.icon, card.raster_icon)}
<div className={lead.classes}>
<a target={target} href={link}>
{header}
</a>
</div>
<div className="text-muted text-uppercase font-weight-bold font-xs">
{mainText}
</div>
</CardBody>
{cardFooter()}
</Card>
);
}
}

VZLinksWidget.propTypes = propTypes;
VZLinksWidget.defaultProps = defaultProps;

export default VZLinksWidget;
10 changes: 10 additions & 0 deletions atd-vze/src/views/Widgets/Widgets.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Widget01 from "./Widget01";
import Widget02 from "./Widget02";
import Widget03 from "./Widget03";
import Widget04 from "./Widget04";
import VZLinksWidget from "./VZLinksWidget";
import { Line } from "react-chartjs-2";

// Brand Card Chart
Expand Down Expand Up @@ -487,6 +488,15 @@ class Widgets extends Component {
>
Comments
</Widget04>

<VZLinksWidget
header={`Name of resouce`}
mainText={`Description of resource`}
icon="fa fa-arrows"
color="success"
link="https://austintexas.gov"
target='_new'
/>
</Col>
</Row>
</div>
Expand Down