Skip to content
Permalink
Browse files

clean-up state from date range timestamps

  • Loading branch information...
dannyvankooten committed Nov 21, 2018
1 parent 5143265 commit 239f880c738067d1176fac0ec6b18b37256ef44b
@@ -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)) {
@@ -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
@@ -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)) {
@@ -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
@@ -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>

0 comments on commit 239f880

Please sign in to comment.
You can’t perform that action at this time.