diff --git a/assets/src/js/components/Chart.js b/assets/src/js/components/Chart.js index 12b4044..5e992b0 100644 --- a/assets/src/js/components/Chart.js +++ b/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)) { diff --git a/assets/src/js/components/DatePicker.js b/assets/src/js/components/DatePicker.js index 50bc536..d069f9a 100644 --- a/assets/src/js/components/DatePicker.js +++ b/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 diff --git a/assets/src/js/components/Sidebar.js b/assets/src/js/components/Sidebar.js index f6fd5de..a192bea 100644 --- a/assets/src/js/components/Sidebar.js +++ b/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)) { diff --git a/assets/src/js/components/Table.js b/assets/src/js/components/Table.js index a0d3fe2..ce9b98a 100644 --- a/assets/src/js/components/Table.js +++ b/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 diff --git a/assets/src/js/pages/dashboard.js b/assets/src/js/pages/dashboard.js index 89fcef1..f6fc03e 100644 --- a/assets/src/js/pages/dashboard.js +++ b/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 (
-
+