clean-up state from date range timestamps

assets/src/js/components/Chart.js

@@ -58,7 +58,7 @@ class Chart extends Component {
       return;
     }
     
-    let daysDiff = Math.round((newProps.before-newProps.after)/24/60/60);
+    let daysDiff = Math.round((newProps.dateRange[1]-newProps.dateRange[0])/24/60/60);
     let stepHours = daysDiff > 1 ? 24 : 1;
     this.setState({
       diffInDays: daysDiff,
@@ -69,13 +69,13 @@ class Chart extends Component {
   }
 
   paramsChanged(o, n) {
-    return o.siteId != n.siteId || o.before != n.before || o.after != n.after;
+    return o.siteId != n.siteId || o.dateRange != n.dateRange;
   }
 
   @bind
   prepareData(data) {
-    let startDate = new Date(this.props.after * 1000);
-    let endDate = new Date(this.props.before * 1000);
+    let startDate = this.props.dateRange[0];
+    let endDate = this.props.dateRange[1];
     let newData = [];
 
     // instantiate JS Date objects
@@ -249,7 +249,10 @@ class Chart extends Component {
   fetchData(props) {
     this.setState({ loading: true })
 
-    Client.request(`/sites/${props.siteId}/stats/site?before=${props.before}&after=${props.after}`)
+    let before = props.dateRange[1]/1000;
+    let after = props.dateRange[0]/1000;
+
+    Client.request(`/sites/${props.siteId}/stats/site?before=${before}&after=${after}`)
       .then((d) => { 
         // request finished; check if params changed in the meantime
         if( this.paramsChanged(props, this.props)) {

assets/src/js/components/DatePicker.js

@@ -45,7 +45,8 @@ const availablePeriods = {
 'qtd': {
   label: 'Qtd',
   start: function() {
-    return new Date(now.getFullYear(), Math.ceil(now.getMonth() / 3), 1);
+    let qs = Math.ceil((now.getMonth()+1) / 3) * 3 - 3;
+    return new Date(now.getFullYear(), qs, 1);
 
   },
   end: function() {
@@ -79,10 +80,8 @@ class DatePicker extends Component {
 
     this.state = {
       period: window.location.hash.substring(2) || window.localStorage.getItem('period') || defaultPeriod,
-      before: 0, // UTC timestamp
-      after: 0, // UTC timestamp
-      startDate: null, // local date object
-      endDate: null, // local date object
+      startDate: now,
+      endDate: now,
     }    
     this.updateDatesFromPeriod(this.state.period)
   }
@@ -105,28 +104,21 @@ class DatePicker extends Component {
   }
 
   @bind
-  setDateRange(startDate, endDate, period) {
+  setDateRange(start, end, period) {
     // don't update state if start > end. user may be busy picking dates.
     // TODO: show error
-    if(startDate > endDate) {
+    if(start > end) {
       return;
     }
 
     // include start & end day by forcing time
-    startDate.setHours(0, 0, 0);
-    endDate.setHours(23, 59, 59);
-
-    // create unix timestamps from local date objects
-    let before, after;
-    before = Math.round((+endDate) / 1000);
-    after = Math.round((+startDate) / 1000);
-
+    start.setHours(0, 0, 0);
+    end.setHours(23, 59, 59);
+   
     this.setState({
       period: period || '',
-      startDate: startDate,
-      endDate: endDate,
-      before: before,
-      after: after,
+      startDate: start,
+      endDate: end,
     });
 
     // use slight delay for updating rest of application to allow this function to be called again

assets/src/js/components/Sidebar.js

@@ -25,14 +25,16 @@ class Sidebar extends Component {
   }
 
   paramsChanged(o, n) {
-    return o.siteId != n.siteId || o.before != n.before || o.after != n.after;
+    return o.siteId != n.siteId || o.dateRange != n.dateRange;
   }
 
   @bind
   fetchData(props) {
     this.setState({ loading: true })
+    let before = props.dateRange[1]/1000;
+    let after = props.dateRange[0]/1000;
 
-    Client.request(`/sites/${props.siteId}/stats/site/agg?before=${props.before}&after=${props.after}`)
+    Client.request(`/sites/${props.siteId}/stats/site/agg?before=${before}&after=${after}`)
       .then((data) => { 
         // request finished; check if timestamp range is still the one user wants to see
         if(this.paramsChanged(props, this.props)) {

assets/src/js/components/Table.js

@@ -32,14 +32,16 @@ class Table extends Component {
   }
 
   paramsChanged(o, n) {
-    return o.siteId != n.siteId || o.before != n.before || o.after != n.after;
+    return o.siteId != n.siteId || o.dateRange != n.dateRange;
   }
   
   @bind
   fetchData(props) {
     this.setState({ loading: true });
+    let before = props.dateRange[1]/1000;
+    let after = props.dateRange[0]/1000;
 
-    Client.request(`/sites/${props.siteId}/stats/${props.endpoint}/agg?before=${props.before}&after=${props.after}&offset=${this.state.offset}&limit=${this.state.limit}`)
+    Client.request(`/sites/${props.siteId}/stats/${props.endpoint}/agg?before=${before}&after=${after}&offset=${this.state.offset}&limit=${this.state.limit}`)
       .then((d) => {
          // request finished; check if timestamp range is still the one user wants to see
         if( this.paramsChanged(props, this.props) ) {
@@ -53,7 +55,7 @@ class Table extends Component {
       });
 
      // fetch totals too
-     Client.request(`/sites/${props.siteId}/stats/${props.endpoint}/agg/pageviews?before=${props.before}&after=${props.after}`)
+     Client.request(`/sites/${props.siteId}/stats/${props.endpoint}/agg/pageviews?before=${before}&after=${after}`)
       .then((d) => {
         this.setState({
           total: d

assets/src/js/pages/dashboard.js

@@ -25,8 +25,7 @@ class Dashboard extends Component {
     super(props)
 
     this.state = {
-      before: 0,
-      after: 0,
+      dateRange: [],
       isPublic: document.cookie.indexOf('auth') < 0,
       site: defaultSite,
       sites: [],
@@ -68,8 +67,7 @@ class Dashboard extends Component {
   @bind
   changeDateRange(s) {
     this.setState({ 
-      before: s.before, 
-      after: s.after,
+      dateRange: [ s.startDate, s.endDate ],
       period: s.period,
     })
   }
@@ -147,7 +145,7 @@ class Dashboard extends Component {
 
     return (
   <div class="app-page ">
-     <div class={`rapper animated fadeInUp delayed_02s ${state.period} ` + classNames({ ltday: state.before - state.after < 86400 })}>
+     <div class={`rapper animated fadeInUp delayed_02s ${state.period} ` + classNames({ ltday: state.dateRange[1] - state.dateRange[0] < 86400 })}>
 
       <header class="section">
         <nav class="main-nav">
@@ -164,16 +162,16 @@ class Dashboard extends Component {
 
       <section class="section">
         <div class="boxes">
-          <Sidebar siteId={state.site.id} before={state.before} after={state.after} />
+          <Sidebar siteId={state.site.id} dateRange={state.dateRange} />
 
           <div class="box box-graph">
-            <Chart siteId={state.site.id} before={state.before} after={state.after}  />
+            <Chart siteId={state.site.id} dateRange={state.dateRange}  />
           </div>
           <div class="box box-pages">
-            <Table endpoint="pages" headers={["Top pages", "Views", "Uniques"]} siteId={state.site.id} before={state.before} after={state.after} />
+            <Table endpoint="pages" headers={["Top pages", "Views", "Uniques"]} siteId={state.site.id} dateRange={state.dateRange} />
           </div>
           <div class="box box-referrers">
-            <Table endpoint="referrers" headers={["Top referrers", "Views", "Uniques"]} siteId={state.site.id} before={state.before} after={state.after} showHostname="true" />
+            <Table endpoint="referrers" headers={["Top referrers", "Views", "Uniques"]} siteId={state.site.id} dateRange={state.dateRange} showHostname="true" />
           </div>
         </div>