Skip to content
Permalink
Browse files

add chart group options to navbar (hour, day, month).

we should probably enforce 1st of month date when choosing 'month'
  • Loading branch information...
dannyvankooten committed Nov 23, 2018
1 parent cae987c commit d62c9b9f812ec77dbc6562b4431f481fab96d8db
@@ -8,32 +8,38 @@ import * as d3 from 'd3';
import 'd3-transition';
d3.tip = require('d3-tip');

const
formatHour = d3.timeFormat("%H"),
formatDay = d3.timeFormat("%e"),
formatMonth = d3.timeFormat("%b"),
formatMonthDay = d3.timeFormat("%b %e"),
formatYear = d3.timeFormat("%Y");
const formatMonth = d3.timeFormat("%b"),
formatMonthDay = d3.timeFormat("%b %e");

const t = d3.transition().duration(600).ease(d3.easeQuadOut);
const xTickFormat = (len) => {
return {
hour: (d, i) => {
if(len <= 24 && d.getHours() == 0 || d.getHours() == 12) {
return d.getHours() + ":00";
}

function timeFormatPicker(n, days) {
return function(d, i) {
if( days <= 1 ) {
return formatHour(d);
}

if(d.getDate() === 1) {
return d.getMonth() === 0 ? formatYear(d) : formatMonth(d)
}

if(i === 0) {
return formatMonthDay(d)
} else if(n < 32) {
return formatDay(d);
}
if(i === 0 || i === len-1) {
return formatMonthDay(d);
}

return '';
},

day: (d, i) => {
if(i === 0 || i === len-1) {
return formatMonthDay(d);
}

return '';
return '';
},
month: (d, i) => {
if(len>24) {
return d.getFullYear();
}

return d.getMonth() === 0 ? d.getFullYear() : formatMonth(d);
}
}
}

@@ -44,38 +50,34 @@ class Chart extends Component {
this.state = {
loading: false,
data: [],
chartData: [],
diffInDays: 1,
hoursPerTick: 24,
}
}

componentWillReceiveProps(newProps, newState) {
if(!this.paramsChanged(this.props, newProps)) {
return;
}

componentWillReceiveProps(newProps) {
let daysDiff = Math.round((newProps.dateRange[1]-newProps.dateRange[0])/1000/24/60/60);
let stepHours = daysDiff > 1 ? 24 : 1;
this.setState({
diffInDays: daysDiff,
hoursPerTick: stepHours,
tickStep: newProps.tickStep,
})

this.fetchData(newProps)
}

paramsChanged(o, n) {
return o.siteId != n.siteId || o.dateRange != n.dateRange;
if( newProps.siteId != this.props.siteId || newProps.dateRange[0] != this.props.dateRange[0] || newProps.dateRange[1] != this.props.dateRange[1] ) {
this.fetchData(newProps)
} else if (newProps.tickStep != this.props.tickStep) {
this.chartData()
this.redrawChart()
}
}

@bind
prepareData(data) {
chartData() {
let startDate = this.props.dateRange[0];
let endDate = this.props.dateRange[1];
let newData = [];

// instantiate JS Date objects
data = data.map((d) => {
let data = this.state.data.map(d => {
d.Date = new Date(d.Date);
return d
})
@@ -90,11 +92,23 @@ class Chart extends Component {
};

nextDate = new Date(currentDate)
nextDate.setHours(nextDate.getHours() + this.state.hoursPerTick);

switch(this.state.tickStep) {
case 'hour':
nextDate.setHours(nextDate.getHours() + 1);
break;

case 'day':
nextDate.setDate(nextDate.getDate() + 1);
break;

case 'month':
nextDate.setMonth(nextDate.getMonth() + 1);
break;
}

// grab data that falls between currentDate & nextDate
for(let i=data.length-offset-1; i>=0; i--) {

// Because 9AM should be included in 9AM-10AM range, check for equality here
if( data[i].Date >= nextDate) {
break;
@@ -117,10 +131,10 @@ class Chart extends Component {
currentDate = nextDate;
}

return newData;
this.setState({
chartData: newData,
})
}



@bind
prepareChart() {
@@ -145,9 +159,9 @@ class Chart extends Component {
this.tip = d3.tip().attr('class', 'd3-tip').html((d) => {
let title = d.Date.toLocaleDateString();

if(this.state.diffInDays <= 1) {
if(this.state.tickStep === 'hour') {
title += ` ${d.Date.getHours()}:00 - ${d.Date.getHours() + 1}:00`
}
}

return (`<div class="tip-heading">${title}</div>
<div class="tip-content">
@@ -165,7 +179,7 @@ class Chart extends Component {

@bind
redrawChart() {
let data = this.state.data;
let data = this.state.chartData;

if( ! this.ctx ) {
this.prepareChart()
@@ -177,14 +191,12 @@ class Chart extends Component {
const max = d3.max(data, d => d.Pageviews);
let x = this.x.domain(data.map(d => d.Date))
let y = this.y.domain([0, max*1.1])
let yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth).tickFormat((v, i) => numbers.formatPretty(v))
let xAxis = d3.axisBottom().scale(x).tickFormat(timeFormatPicker(data.length, this.state.diffInDays))

// hide all "day" ticks if we're watching more than 31 items of data
if(data.length > 31) {
xAxis.tickValues(data.filter(d => d.Date.getDate() === 1).map(d => d.Date))
} else if(data.length > 15) {
xAxis.tickValues(data.filter((d, i) => d.Date.getDate() === 1 || i === 0 || i == Math.floor((data.length-1)/2)|| i === data.length-1).map(d => d.Date))
let yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth).tickFormat(v => numbers.formatPretty(v))
let xAxis = d3.axisBottom().scale(x).tickFormat(xTickFormat(data.length)[this.state.tickStep])

// only show first and last tick if we have more than 24 ticks to show
if(data.length > 24) {
xAxis.tickValues(data.map(d => d.Date).filter((d, i) => i === 0 || i === data.length-1))
}

// empty previous graph
@@ -251,17 +263,14 @@ class Chart extends Component {
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)) {
return;
}
.then(data => {

let chartData = this.prepareData(d);
this.setState({
loading: false,
data: chartData,
data: data,
})

this.chartData()
this.redrawChart()
})
}
@@ -82,6 +82,7 @@ class DatePicker extends Component {
period: window.location.hash.substring(2) || window.localStorage.getItem('period') || defaultPeriod,
startDate: now,
endDate: now,
groupBy: 'day',
}
this.updateDatesFromPeriod(this.state.period)
}
@@ -106,19 +107,23 @@ class DatePicker extends Component {
@bind
setDateRange(start, end, period) {
// don't update state if start > end. user may be busy picking dates.
// TODO: show error
if(start > end) {
return;
}

// include start & end day by forcing time
start.setHours(0, 0, 0);
end.setHours(23, 59, 59);

let diff = Math.round((end - start) / 1000 / 60 / 60 / 24)
let groupBy = diff >= 31 ? 'month' : 'day';

this.setState({
period: period || '',
startDate: start,
endDate: end,
diff: diff,
groupBy: groupBy,
});

// use slight delay for updating rest of application to allow this function to be called again
@@ -188,8 +193,16 @@ class DatePicker extends Component {
}
}

@bind
setGroupBy(e) {
this.setState({
groupBy: e.target.getAttribute('data-value')
})
this.props.onChange(this.state);
}

render(props, state) {
const links = Object.keys(availablePeriods).map((id) => {
const presets = Object.keys(availablePeriods).map((id) => {
let p = availablePeriods[id];
return (
<li class={classNames({ current: id == state.period })}>
@@ -201,11 +214,16 @@ class DatePicker extends Component {
return (
<nav class="date-nav sm ac">
<ul>
{links}
{presets}
</ul>
<ul>
<li><Pikadayer value={this.dateValue(state.startDate)} onSelect={this.setStartDate} /> <span></span> <Pikadayer value={this.dateValue(state.endDate)} onSelect={this.setEndDate} /></li>
</ul>
<ul>
{state.diff < 30 ? (<li class={classNames({ current: 'hour' === state.groupBy })}><a href="#" data-value="hour" onClick={this.setGroupBy}>Hourly</a></li>) : ''}
<li class={classNames({ current: 'day' === state.groupBy })}><a href="#" data-value="day" onClick={this.setGroupBy}>Daily</a></li>
{state.diff >= 30 ? (<li class={classNames({ current: 'month' === state.groupBy })}><a href="#" data-value="month" onClick={this.setGroupBy}>Monthly</a></li>) : ''}
</ul>
</nav>
)

@@ -25,7 +25,7 @@ class Sidebar extends Component {
}

paramsChanged(o, n) {
return o.siteId != n.siteId || o.dateRange != n.dateRange;
return o.siteId != n.siteId || o.dateRange[0] != n.dateRange[0] || o.dateRange[1] != n.dateRange[1];
}

@bind
@@ -32,7 +32,7 @@ class Table extends Component {
}

paramsChanged(o, n) {
return o.siteId != n.siteId || o.dateRange != n.dateRange;
return o.siteId !== n.siteId || o.dateRange[0] != n.dateRange[0] || o.dateRange[1] != n.dateRange[1];
}

@bind
@@ -26,6 +26,7 @@ class Dashboard extends Component {

this.state = {
dateRange: [],
groupBy: 'day',
isPublic: document.cookie.indexOf('auth') < 0,
site: defaultSite,
sites: [],
@@ -69,6 +70,7 @@ class Dashboard extends Component {
this.setState({
dateRange: [ s.startDate, s.endDate ],
period: s.period,
groupBy: s.groupBy,
})
}

@@ -165,7 +167,7 @@ class Dashboard extends Component {
<Sidebar siteId={state.site.id} dateRange={state.dateRange} />

<div class="box box-graph">
<Chart siteId={state.site.id} dateRange={state.dateRange} />
<Chart siteId={state.site.id} dateRange={state.dateRange} tickStep={state.groupBy} />
</div>
<div class="box box-pages">
<Table endpoint="pages" headers={["Top pages", "Views", "Uniques"]} siteId={state.site.id} dateRange={state.dateRange} />

0 comments on commit d62c9b9

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