Analytics scripts, pie chart tweak

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

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 = {

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,
 };

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,
 };

src/components/main/menu/CCSelector.jsx

@@ -27,6 +27,7 @@ const CCSelector = ({
       items={items}
       onChange={onChange}
       searchBar
+      searchPlaceholder="Neighborhood"
       selectAll
     />
   );

src/components/main/menu/NCSelector.jsx

@@ -29,6 +29,7 @@ const NCSelector = ({
       onChange={onChange}
       groupBy="region"
       searchBar
+      searchPlaceholder="Neighborhood"
       selectAll
     />
   );

src/components/privacyPolicy/PrivacyPolicy.jsx

@@ -197,6 +197,8 @@ const PrivacyPolicy = () => (
         {', '}
         <a href="https://mixpanel.com/">Mixpanel</a>
         {', '}
+        <a href="https://www.hotjar.com/">Hotjar</a>
+        {', '}
         <a href="https://www.eventbrite.com/">Eventbrite</a>
         {', '}
         <a href="https://donorbox.org/">Donorbox</a>

src/styles/comparison/_comparison.scss

@@ -34,5 +34,9 @@
       width: 100%;
       padding: 2px;
     }
+    .set-list {
+      margin: 0 15px;
+    }
+
   }
 }