Merge pull request #750 from adamkendis/748-FRONT-analytics

Analytics scripts, pie chart tweak
hackforla · Jul 30, 2020 · 048bfab · 048bfab
2 parents 703f307 + 04ee122
commit 048bfab
Show file tree

Hide file tree

Showing 19 changed files with 101 additions and 130 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,6 +12,10 @@
       window['ga-disable-UA-166263401-1'] = devHostname;
       window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-166263401-1');
     </script>
+    <script src="https://www.googleoptimize.com/optimize.js?id=OPT-WHKV393"></script>
+
+    <!-- Hotjar -->
+    <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:1881395,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script>
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

diff --git a/src/Routes.jsx b/src/Routes.jsx
@@ -16,7 +16,8 @@ export default function Routes() {
       <Route path="/about" component={About} />
       <Route path="/privacy" component={PrivacyPolicy} />
       <Route path="/comparison" component={Body} />
-      <Route path="/" component={Body} />
+      <Route path="/data" component={Body} />
+      <Route path="/" component={About} />
     </Switch>
   );
 }
diff --git a/src/components/Comparison/Contact311Comparison.jsx b/src/components/Comparison/Contact311Comparison.jsx
@@ -8,6 +8,8 @@ import { transformCounts } from '@utils';
 
 const Contact311Comparison = ({
   counts: { set1, set2 },
+  set1list,
+  set2list,
 }) => {
   const setName = district => (
     DISTRICT_TYPES
@@ -73,28 +75,34 @@ const Contact311Comparison = ({
         exportData={exportData}
         filename="How People Contact 311"
       />
-      <div className="chart-container">
-        <PieChart
-          sectors={setSectors(set1counts)}
-          addLabels
-          exportable={false}
-        />
-        <h2>{ set1name }</h2>
-      </div>
-      <div className="chart-container">
-        <PieChart
-          sectors={setSectors(set2counts)}
-          addLabels
-          exportable={false}
-        />
-        <h2>{ set2name }</h2>
+      <div className="columns is-gapless">
+        <div className="chart-container column">
+          <PieChart
+            sectors={setSectors(set1counts)}
+            addLabels
+            exportable={false}
+          />
+          <h2>{`${set1name}${set1list.length > 1 ? 's' : ''} (Set 1):`}</h2>
+          <p className="set-list">{ set1list.join(', ')}</p>
+        </div>
+        <div className="chart-container column">
+          <PieChart
+            sectors={setSectors(set2counts)}
+            addLabels
+            exportable={false}
+          />
+          <h2>{`${set2name}${set2list.length > 1 ? 's' : ''} (Set 2):`}</h2>
+          <p className="set-list">{ set2list.join(', ') }</p>
+        </div>
       </div>
     </div>
   );
 };
 
 const mapStateToProps = state => ({
   counts: state.comparisonData.counts,
+  set1list: state.comparisonFilters.comparison.set1.list,
+  set2list: state.comparisonFilters.comparison.set2.list,
 });
 
 export default connect(mapStateToProps)(Contact311Comparison);
@@ -110,6 +118,8 @@ Contact311Comparison.propTypes = {
       source: PropTypes.shape({}),
     }),
   }),
+  set1list: PropTypes.arrayOf(PropTypes.string).isRequired,
+  set2list: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 Contact311Comparison.defaultProps = {

diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx
@@ -1,8 +1,4 @@
 import React from 'react';
-import PropTypes from 'proptypes';
-import { connect } from 'react-redux';
-import { disableSplashPage } from '@reducers/ui';
-
 import { Link } from 'react-router-dom';
 import Button from '@components/common/Button';
 import Icon from '@components/common/Icon';
@@ -11,9 +7,7 @@ import HeroImage from './HeroImage';
 import WhatIs311Data from './WhatIs311Data';
 import HowItWorks from './HowItWorks';
 
-const About = ({
-  disableSplash,
-}) => {
+const About = () => {
   const aboutRef = React.createRef();
 
   const scrollTo = ref => {
@@ -37,19 +31,11 @@ const About = ({
       </div>
       <WhatIs311Data ref={aboutRef} />
       <HowItWorks />
-      <Link to="/">
-        <Button id="about-311" label="Let's Get Started" handleClick={disableSplash} />
+      <Link to="/data">
+        <Button id="about-311" label="Let's Get Started" />
       </Link>
     </div>
   );
 };
 
-const mapDispatchToProps = dispatch => ({
-  disableSplash: () => dispatch(disableSplashPage()),
-});
-
-About.propTypes = {
-  disableSplash: PropTypes.func.isRequired,
-};
-
-export default connect(null, mapDispatchToProps)(About);
+export default About;
diff --git a/src/components/chartExtras/ComparisonCriteria.jsx b/src/components/chartExtras/ComparisonCriteria.jsx
@@ -63,12 +63,13 @@ const ComparisonCriteria = ({
 
     return (
       <>
-        { selectedTypes.map(type => (
+        { selectedTypes.map((type, i) => (
           <span key={type.displayName}>
             { type.displayName }
             &nbsp;[
             <span style={{ color: type.color }}>{ type.abbrev }</span>
-            ];&nbsp;
+            ]
+            { i < selectedTypes.length - 1 ? ';\u00a0' : '' }
           </span>
         ))}
       </>

diff --git a/src/components/common/MultiSelect/SearchBar.jsx b/src/components/common/MultiSelect/SearchBar.jsx
@@ -3,16 +3,17 @@ import PropTypes from 'proptypes';
 
 const SearchBar = ({
   value,
+  placeholder,
   onChange,
 }) => (
   <div className="search-bar control has-icons-right">
     <input
       className="input"
       type="text"
-      placeholder="Search"
+      placeholder={placeholder}
       value={value}
       onChange={e => onChange(e.target.value)}
-      aria-label="Search"
+      aria-label={placeholder}
     />
     <span className="icon is-small is-right">
       <i className="fas fa-search" />
@@ -24,10 +25,12 @@ export default SearchBar;
 
 SearchBar.propTypes = {
   value: PropTypes.string,
+  placeholder: PropTypes.string,
   onChange: PropTypes.func,
 };
 
 SearchBar.defaultProps = {
   value: null,
+  placeholder: 'Search',
   onChange: () => null,
 };
diff --git a/src/components/common/MultiSelect/index.jsx b/src/components/common/MultiSelect/index.jsx
@@ -11,6 +11,7 @@ const MultiSelect = ({
   onChange,
   groupBy,
   searchBar,
+  searchPlaceholder,
   selectAll,
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -20,6 +21,7 @@ const MultiSelect = ({
       { searchBar && (
         <SearchBar
           value={searchTerm}
+          placeholder={searchPlaceholder}
           onChange={setSearchTerm}
         />
       )}
@@ -76,6 +78,7 @@ MultiSelect.propTypes = {
   onChange: PropTypes.func,
   groupBy: PropTypes.string,
   searchBar: PropTypes.bool,
+  searchPlaceholder: PropTypes.string,
   selectAll: PropTypes.bool,
 };
 
@@ -84,5 +87,6 @@ MultiSelect.defaultProps = {
   onChange: () => null,
   groupBy: null,
   searchBar: false,
+  searchPlaceholder: 'Search',
   selectAll: false,
 };
diff --git a/src/components/main/body/Body.jsx b/src/components/main/body/Body.jsx
@@ -4,7 +4,6 @@ import PropTypes from 'proptypes';
 import { Switch, Route } from 'react-router-dom';
 import clx from 'classnames';
 
-import About from '@components/about/About';
 import Visualizations from '@components/Visualizations';
 import Comparison from '@components/Comparison';
 import Loader from '@components/common/Loader';
@@ -17,37 +16,30 @@ const Body = ({
   openErrorModal,
   error,
   menuIsOpen,
-  splashPageDisabled,
-}) => {
-  if (splashPageDisabled) {
-    return (
-      <div className={clx('body', { 'menu-is-open': menuIsOpen })}>
-        <Menu />
-        <Switch>
-          <Route path="/comparison">
-            <Comparison />
-          </Route>
-          <Route path="/">
-            <PinMap />
-            <Visualizations />
-          </Route>
-        </Switch>
-        <Loader />
-        <Modal
-          open={openErrorModal}
-          content={<DataRequestError error={error} />}
-        />
-      </div>
-    );
-  }
-  return <About />;
-};
+}) => (
+  <div className={clx('body', { 'menu-is-open': menuIsOpen })}>
+    <Menu />
+    <Switch>
+      <Route path="/comparison">
+        <Comparison />
+      </Route>
+      <Route path="/data">
+        <PinMap />
+        <Visualizations />
+      </Route>
+    </Switch>
+    <Loader />
+    <Modal
+      open={openErrorModal}
+      content={<DataRequestError error={error} />}
+    />
+  </div>
+);
 
 Body.propTypes = {
   error: PropTypes.shape({}),
   openErrorModal: PropTypes.bool.isRequired,
   menuIsOpen: PropTypes.bool.isRequired,
-  splashPageDisabled: PropTypes.bool.isRequired,
 };
 
 Body.defaultProps = {
@@ -58,7 +50,6 @@ const mapStateToProps = state => ({
   error: state.data.error,
   openErrorModal: state.ui.error.isOpen,
   menuIsOpen: state.ui.menu.isOpen,
-  splashPageDisabled: state.ui.splashPageDisabled,
 });
 
 export default connect(mapStateToProps, null)(Body);
diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx
@@ -10,12 +10,12 @@ const Footer = ({
   version,
   backendSha,
   menuIsOpen,
-  splashPageDisabled,
+  location: { pathname },
 }) => {
   const frontendSha = process.env.GITHUB_SHA || 'DEVELOPMENT';
   return (
     <footer
-      className={clx('navbar has-navbar-fixed-bottom', { 'menu-is-open': menuIsOpen && splashPageDisabled })}
+      className={clx('navbar has-navbar-fixed-bottom', { 'menu-is-open': menuIsOpen && ['/data', '/comparison'].includes(pathname) })}
     >
       { lastUpdated && (
         <span className="last-updated">
@@ -48,15 +48,16 @@ const mapStateToProps = state => ({
   version: state.metadata.version,
   backendSha: state.metadata.gitSha,
   menuIsOpen: state.ui.menu.isOpen,
-  splashPageDisabled: state.ui.splashPageDisabled,
 });
 
 Footer.propTypes = {
   lastUpdated: PropTypes.string,
   version: PropTypes.string,
   backendSha: PropTypes.string,
   menuIsOpen: PropTypes.bool.isRequired,
-  splashPageDisabled: PropTypes.bool.isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }).isRequired,
 };
 
 Footer.defaultProps = {

diff --git a/src/components/main/header/Header.jsx b/src/components/main/header/Header.jsx
@@ -1,14 +1,8 @@
 import React from 'react';
-import PropTypes from 'proptypes';
-import { connect } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
-import { disableSplashPage } from '@reducers/ui';
 import COLORS from '../../../styles/COLORS';
 
-const Header = ({
-  disableSplash,
-  splashPageDisabled,
-}) => {
+const Header = () => {
   const cta2Style = {
     color: COLORS.BRAND.CTA2,
   };
@@ -28,15 +22,7 @@ const Header = ({
       aria-label="main navigation"
     >
       <div className="navbar-brand">
-        <Link
-          to="/"
-          className="navbar-item"
-          onClick={() => {
-            if (!splashPageDisabled) {
-              disableSplash();
-            }
-          }}
-        >
+        <Link to="/" className="navbar-item">
           <div className="navbar-item">
             <p style={cta1Style}>311</p>
             <p style={cta2Style}>DATA</p>
@@ -50,17 +36,22 @@ const Header = ({
       <div id="navbar" className="navbar-menu">
         <div className="navbar-end">
           <div className="navbar-item">
-            <NavLink to="/comparison" activeClassName="navbar-selected" style={cta2Style}>
-              Comparison Tool
+            <NavLink exact to="/data" activeClassName="navbar-selected" style={backgroundStyle}>
+              Explore My Council&apos;s 311 Data
             </NavLink>
           </div>
           <div className="navbar-item">
-            <NavLink to="/about" activeClassName="navbar-selected" style={backgroundStyle}>
+            <NavLink exact to="/comparison" activeClassName="navbar-selected" style={backgroundStyle}>
+              Compare Different Councils
+            </NavLink>
+          </div>
+          <div className="navbar-item">
+            <NavLink exact to="/about" activeClassName="navbar-selected" style={backgroundStyle}>
               About 311 Data
             </NavLink>
           </div>
           <div className="navbar-item">
-            <NavLink to="/contact" activeClassName="navbar-selected" style={backgroundStyle}>
+            <NavLink exact to="/contact" activeClassName="navbar-selected" style={backgroundStyle}>
               Contact Us
             </NavLink>
           </div>
@@ -70,17 +61,4 @@ const Header = ({
   );
 };
 
-Header.propTypes = {
-  splashPageDisabled: PropTypes.bool.isRequired,
-  disableSplash: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = state => ({
-  splashPageDisabled: state.ui.splashPageDisabled,
-});
-
-const mapDispatchToProps = dispatch => ({
-  disableSplash: () => dispatch(disableSplashPage()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default Header;