Merge pull request #74 from back4app/improve-analytics-features

Improve analytics features

Author: paivaric

src/components/DateRange/DateRange.react.js

@@ -11,7 +11,8 @@ import Icon                             from 'components/Icon/Icon.react';
 import {
   monthDayStringUTC,
   monthsFrom,
-  daysFrom
+  daysFrom,
+  daysToMilli
 }                                       from 'lib/DateUtils';
 import Popover                          from 'components/Popover/Popover.react';
 import Position                         from 'lib/Position';
@@ -30,7 +31,8 @@ export default class DateRange extends React.Component {
       open: false,
       position: null,
       start: val.start || monthsFrom(new Date(), -1),
-      end: val.end || new Date()
+      end: val.end || new Date(),
+      maxRange: props.maxRange,
     };
   }
 
@@ -59,6 +61,7 @@ export default class DateRange extends React.Component {
     if (start > end) {
       end = daysFrom(start, 1);
     }
+    if (this.state.maxRange && end - start > daysToMilli(this.state.maxRange)) end = daysFrom(start, this.state.maxRange)
     this.setState({ start, end });
   }
 
@@ -67,6 +70,7 @@ export default class DateRange extends React.Component {
     if (start > end) {
       start = daysFrom(end, -1);
     }
+    if (this.state.maxRange && end - start > daysToMilli(this.state.maxRange)) start = daysFrom(end, -this.state.maxRange)
     this.setState({ start, end });
   }
 
@@ -143,4 +147,7 @@ DateRange.propTypes = {
   align: PropTypes.string.describe(
     'The side to align the range selector with. Possible options are Constants.Directions.LEFT or Constants.Directions.RIGHT.'
   ),
+  maxRange: PropTypes.number.describe(
+    'The maximum range in days that can be seted in the date range. If is null, any range can be seted.'
+  )
 };

src/dashboard/Analytics/Performance/Performance.react.js

@@ -185,7 +185,8 @@ export default class Performance extends DashboardView {
             <DateRange
               value={this.state.dateRange}
               onChange={(newValue) => (this.setState({ dateRange: newValue, mutated: true }))}
-              align={Directions.RIGHT} />
+              align={Directions.RIGHT}
+              maxRange={30} />
           </span>
           <Button
             primary={true}
@@ -235,7 +236,8 @@ export default class Performance extends DashboardView {
         <Chart
           width={this.displaySize.width}
           height={this.displaySize.height}
-          data={chartData} />
+          data={chartData}
+          formatter={(value) => value + ' requests/min'}/>
       );
     }
 

src/lib/DateUtils.js

@@ -164,3 +164,8 @@ export function pad(number) {
   }
   return r;
 }
+
+export function daysToMilli(days) {
+  if (!days) return days
+  return days * (1000 * 60 * 60 * 24)
+}