More charting feedback updates

web/js/components/charting/chart-component.js

@@ -9,7 +9,7 @@ function ChartComponent (props) {
     liveData,
   } = props;
 
-  const { data } = liveData;
+  const { data, unit } = liveData;
 
   // Arbitrary array of colors to use
   const lineColors = ['#A3905D', '#82CA9D', 'orange', 'pink', 'green', 'red', 'yellow', 'aqua', 'maroon'];
@@ -49,6 +49,19 @@ function ChartComponent (props) {
     return bufferYAxisMinAndMax(lowestMin, highestMax);
   }
 
+  const renderCustomAxisTick = ({ x, y, payload }) => {
+    const formattedUnit = unit ? ` ${unit}` : '';
+
+    return (
+      <g transform={`translate(${x},${y})`}>
+        <text x={0} y={3} textAnchor="end" fill="#a6a5a6">
+          {payload.value}
+          {formattedUnit}
+        </text>
+      </g>
+    );
+  };
+
   const yAxisValuesArr = getYAxisValues(data);
 
   /**
@@ -107,7 +120,7 @@ function ChartComponent (props) {
               Median:
             </div>
             <div className="charting-statistics-value">
-              {formatToThreeDigits(parseFloat(medianTotal) / count)}
+              {formatToThreeDigits(medianTotal / count)}
             </div>
           </div>
           <div className="charting-statistics-row">
@@ -153,21 +166,35 @@ function ChartComponent (props) {
     );
   }
 
+  const formattedUnit = unit ? ` (${unit})` : '';
+
   return (
     <div className="charting-chart-container">
       <div className="charting-chart-text">
-        <LineChart width={600} height={300} data={data}>
-          <Tooltip />
+        <LineChart
+          width={600}
+          height={300}
+          data={data}
+          margin={{
+            top: 20,
+            right: 20,
+            left: 20,
+            bottom: 20,
+          }}
+        >
+          <Tooltip formatter={(value, name) => [value, `${name}${formattedUnit}`]} />
           {' '}
-          <Legend />
           {getLineChart(data)}
           <XAxis dataKey="name" stroke="#a6a5a6" />
-          <YAxis type="number" stroke="#a6a5a6" domain={yAxisValuesArr} />
-          <Legend />
+          <YAxis type="number" stroke="#a6a5a6" domain={yAxisValuesArr} tick={renderCustomAxisTick} />
+          <Legend formatter={(value) => `${value}${formattedUnit}`} />
         </LineChart>
       </div>
       <div className="charting-stat-text">
-        <h3>Average Statistics</h3>
+        <h3>
+          Average Statistics
+          {formattedUnit}
+        </h3>
         <br />
         {getQuickStatistics(data)}
       </div>

web/js/components/charting/charting-error.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function ChartingError(props) {
+  const { msg } = props;
+  return (
+    <div className="charting-error-container">
+      <div className="charting-error-text">
+        {msg}
+      </div>
+    </div>
+  );
+}
+
+ChartingError.propTypes = {
+  msg: PropTypes.string,
+};
+
+export default ChartingError;

web/js/components/charting/charting-info.js

@@ -1,13 +1,21 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import onClickFeedback from '../../modules/feedback/util';
+import initFeedback from '../../modules/feedback/actions';
 
 function ChartingInfo(props) {
+  const {
+    sendFeedback,
+    feedbackIsInitiated,
+    isMobile,
+  } = props;
   return (
     <div className="charting-info-container">
       <div className="charting-info-text">
         <p className="charting-info">
-          The charting feature is available for beta testing and evaluation. Please send comments and feedback to&nbsp;
-          <a class="charting-feedback" href="mailto:[email protected]">[email protected]</a>
-          .
+          The charting feature is available for beta testing and evaluation.&nbsp;
+          <span class="charting-feedback" onClick={() => sendFeedback(feedbackIsInitiated, isMobile)}>Please send comments and feedback to us.</span>
         </p>
         <p className="charting-info">The Charting Tool provides the option to create a line chart for a date range showing change over time, and statistics for a single date (minimum, maximum, mean, and standard deviation) for an area of interest.</p>
 
@@ -28,5 +36,32 @@ function ChartingInfo(props) {
   );
 }
 
-export default ChartingInfo;
+const mapStateToProps = (state) => {
+  const {
+    feedback, screenSize,
+  } = state;
+  return {
+    feedbackIsInitiated: feedback.isInitiated,
+    isMobile: screenSize.isMobileDevice,
+  };
+};
 
+const mapDispatchToProps = (dispatch) => ({
+  sendFeedback: (isInitiated, isMobile) => {
+    onClickFeedback(isInitiated, isMobile);
+    if (!isInitiated) {
+      dispatch(initFeedback());
+    }
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ChartingInfo);
+
+ChartingInfo.propTypes = {
+  feedbackIsInitiated: PropTypes.bool,
+  sendFeedback: PropTypes.func,
+  isMobile: PropTypes.bool,
+};