Merge pull request #974 from cityofaustin/add_links_to_dashboard

Add links to various Vision Zero resources to VZE dashboard

atd-vze/src/views/VZDashboard/VZDashboard.js

@@ -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`;
@@ -30,13 +33,10 @@ function VZDashboard() {
     apd_confirmed_death_count: deathCount,
   } = data.fatalities.aggregate.sum;
 
-  const { count: crashesCount } = data.seriousInjuriesAndTotal.aggregate;
-
   const yearsOfLifeLostYTD =
     yearsOfLifeLostPrimaryPerson + yearsOfLifeLostPerson;
   const fatalitiesYTD = deathCount;
   const seriousInjuriesYTD = seriousInjuryCount;
-  const crashesYTD = crashesCount;
 
   // Widget02 expects a string value, DB returns number or null
   const commaSeparator = number =>
@@ -69,14 +69,6 @@ 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>
       </Row>
       <Row>
         <Col className="ml-1">
@@ -85,6 +77,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'
+          />
+          <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>
   );
 }

atd-vze/src/views/Widgets/VZLinksWidget.js

@@ -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;

atd-vze/src/views/Widgets/Widgets.js

@@ -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
@@ -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>