From 27955a19eb9110b8a4a40a90139eff3bedb20bfc Mon Sep 17 00:00:00 2001 From: Frank Hereford Date: Thu, 11 Feb 2021 09:54:59 -0600 Subject: [PATCH 1/3] Add links to various Vision Zero resources to VZE dashboard --- atd-vze/src/views/VZDashboard/VZDashboard.js | 47 ++++++++ atd-vze/src/views/Widgets/VZLinksWidget.js | 117 +++++++++++++++++++ atd-vze/src/views/Widgets/Widgets.js | 10 ++ 3 files changed, 174 insertions(+) create mode 100644 atd-vze/src/views/Widgets/VZLinksWidget.js diff --git a/atd-vze/src/views/VZDashboard/VZDashboard.js b/atd-vze/src/views/VZDashboard/VZDashboard.js index b1d1c6789..695254b11 100644 --- a/atd-vze/src/views/VZDashboard/VZDashboard.js +++ b/atd-vze/src/views/VZDashboard/VZDashboard.js @@ -3,6 +3,7 @@ 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"; @@ -85,6 +86,52 @@ function VZDashboard() { } + + + + + + + + + + + ); } diff --git a/atd-vze/src/views/Widgets/VZLinksWidget.js b/atd-vze/src/views/Widgets/VZLinksWidget.js new file mode 100644 index 000000000..0a11ca3ca --- /dev/null +++ b/atd-vze/src/views/Widgets/VZLinksWidget.js @@ -0,0 +1,117 @@ +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, + 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", + color: "primary", + variant: "0", + link: "#", + target: "_new", +}; + +class VZLinksWidget extends Component { + render() { + const { + className, + cssModule, + header, + mainText, + icon, + 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, 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) { + const classes = classNames( + icon, + "bg-" + card.color, + padding.icon, + "font-2xl mr-3 float-left" + ); + return ; + }; + + const cardFooter = function() { + if (footer) { + return ( + + + View More + + + + ); + } + }; + + return ( + + + {blockIcon(card.icon)} +
+ + {header} + +
+
+ {mainText} +
+
+ {cardFooter()} +
+ ); + } +} + +VZLinksWidget.propTypes = propTypes; +VZLinksWidget.defaultProps = defaultProps; + +export default VZLinksWidget; diff --git a/atd-vze/src/views/Widgets/Widgets.js b/atd-vze/src/views/Widgets/Widgets.js index 491bdc6d1..592a1652f 100644 --- a/atd-vze/src/views/Widgets/Widgets.js +++ b/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 + + From 29e2b00b84779b616f69dd7c4e71abbf3583c801 Mon Sep 17 00:00:00 2001 From: Frank Hereford Date: Mon, 22 Feb 2021 09:07:48 -0600 Subject: [PATCH 2/3] Update to VZE dashboard link icons and removal of total crashes card Based on feedback from Lewis, the cards which link to external BI dashboards and AGOL maps have had thier icons alinged. For the BI links, due to there not being a brand icon in the FontAwesome collection a 24x24 px raster icon is added, and the relevent react components have been extended to support the use of the icon. Additionally, again based on Lewis' direction, the card indicating the total number of crashes in the current year has been removed. Currently, this is done by commenting out that particular component and related objects, pending a final review by Lewis later this afternoon. --- .../power_bi_icon_white_on_transparent.png | Bin 0 -> 574 bytes atd-vze/src/views/VZDashboard/VZDashboard.js | 32 ++++++++++++------ atd-vze/src/views/Widgets/VZLinksWidget.js | 19 +++++++---- 3 files changed, 34 insertions(+), 17 deletions(-) create mode 100644 atd-vze/src/assets/img/brand/power_bi_icon_white_on_transparent.png diff --git a/atd-vze/src/assets/img/brand/power_bi_icon_white_on_transparent.png b/atd-vze/src/assets/img/brand/power_bi_icon_white_on_transparent.png new file mode 100644 index 0000000000000000000000000000000000000000..6b8135ca5971b087d59a6a9595f7e2cce91e00b8 GIT binary patch literal 574 zcmV-E0>S->P)pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10n155 zK~zYIrIj&D98na7zq_kqp#}nhfD%!(3Ix)n&}^d-!N$gRe?eORKuQb$f(mI85<)5s zfgl8}*T#TiqmW9M1kI{(_gKs-le=$bp5|2h?tU|8&Yk<-n4}u;3}^zsNz?*<0S(|B zr~`YzM>G3Mh9nIEJE_tRl3Kc()+Ig6FnHqFvr^X6h$C1=@u|@+-MbaO~y$^6vEvoy1nQa1ZUHNfL0B<1RG=n{K>*H91bbpOxTtj;9 z)*CSfNV;-;>j^NEjyn#GYUmww(K#X0l6HX}U=Wx97J+j6|0|$sW+$-;{^so}rvpiq zoO=bQ$S26W9@qrVBKcd_%R3~v(Tb$rm<0YE2zUhy0R6x)Fak^gLn*EbJOJin5?rJ$ zGnkU3r9hI|q6A1fcg5f#CaEmxhhtZZ3`!)MD=oiHie^n<%axzzbq6|ka;8CBU2ffd zAA@oTRI @@ -70,14 +72,16 @@ function VZDashboard() { color="info" /> - - - + {/* + + + + */} @@ -92,6 +96,8 @@ function VZDashboard() { 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' @@ -100,6 +106,8 @@ function VZDashboard() { 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' @@ -108,6 +116,8 @@ function VZDashboard() { 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' @@ -125,7 +135,7 @@ function VZDashboard() { ; + return {raster_icon ? {raster_icon_alt} : null}; }; const cardFooter = function() { @@ -95,7 +102,7 @@ class VZLinksWidget extends Component { return ( - {blockIcon(card.icon)} + {blockIcon(card.icon, card.raster_icon)}
{header} From 4f5ab1bdec8cf6ba86629e7342edbcee77e3fa13 Mon Sep 17 00:00:00 2001 From: Frank Hereford Date: Tue, 23 Feb 2021 11:15:21 -0600 Subject: [PATCH 3/3] Remove components which I had commented out in previous commit --- atd-vze/src/views/VZDashboard/VZDashboard.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/atd-vze/src/views/VZDashboard/VZDashboard.js b/atd-vze/src/views/VZDashboard/VZDashboard.js index 66663d9c1..7886ceb82 100644 --- a/atd-vze/src/views/VZDashboard/VZDashboard.js +++ b/atd-vze/src/views/VZDashboard/VZDashboard.js @@ -33,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 => @@ -72,16 +69,6 @@ function VZDashboard() { color="info" /> - {/* - - - - */}