localhots
/
empact
1
0
Fork 0
Code Releases Activity

Week selector in place

This commit is contained in:
Gregory Eremin 2015-03-16 18:20:32 +07:00
parent 0d8298d2c7
commit 05ebd2e417
5 changed files with 60 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/scripts/src/app.jsx
View File

@ -240,31 +240,15 @@ var WeekIntervalSelector = React.createClass({
weeks.push(i);
};
var from = (this.getQuery().f ? parseInt(this.getQuery().f, 10)*100 : lastWeek - 7*weekSeconds),
to = (this.getQuery().t ? parseInt(this.getQuery().t, 10)*100 : lastWeek);
return {
from: from,
to: to,
weeks: weeks
weeks: weeks.sort()
};
},
componentDidMount: function() {
this.updateLocation();
},
handleChange: function(thing, e) {
var patch = {};
patch[thing] = e.target.value;
this.setState(patch, this.updateLocation);
},
updateLocation: function() {
this.transitionTo(document.location.pathname, null, {
f: this.state.from/100,
t: this.state.to/100
});
var params = this.getQuery();
params[thing.slice(0, 1)] = e.target.value/100;
this.transitionTo(document.location.pathname, null, params);
},
formatDate: function(ts, showYear) {
@ -281,18 +265,23 @@ var WeekIntervalSelector = React.createClass({
},
render: function() {
var daySeconds = 86400,
weekSeconds = daySeconds*7,
lastWeek = this.state.weeks[this.state.weeks.length-1],
from = (this.getQuery().f ? parseInt(this.getQuery().f, 10)*100 : lastWeek - 7*weekSeconds),
to = (this.getQuery().t ? parseInt(this.getQuery().t, 10)*100 : lastWeek);
var weeksBefore = _(this.state.weeks)
.filter(function(week) {
return week <= this.state.to;
}.bind(this))
.sort()
return week <= to;
})
.reverse()
.value();
var weeksAfter = _(this.state.weeks)
.filter(function(week) {
return week >= this.state.from;
}.bind(this))
.sort()
return week >= from;
})
.reverse()
.value();
var renderOption = function(ts) {
@ -303,16 +292,17 @@ var WeekIntervalSelector = React.createClass({
return (
<div className="week-selector">
<div ref="from" className="week">
<span ref="label" className="label">{this.formatDate(this.state.from)}</span>
<select ref="select" value={this.state.from} onChange={this.handleChange.bind(this, 'from')}>
<span>from</span>
<div ref="from" className="selector">
<em ref="label">{this.formatDate(from)}</em>
<select ref="select" value={from} onChange={this.handleChange.bind(this, 'from')}>
{weeksBefore.map(renderOption)}
</select>
</div>
&mdash;
<div ref="to" className="week">
<span ref="label" className="label">{this.formatDate(this.state.to)}</span>
<select ref="select" value={this.state.to} onChange={this.handleChange.bind(this, 'to')}>
<span>to</span>
<div ref="to" className="selector">
<em ref="label">{this.formatDate(to)}</em>
<select ref="select" value={to} onChange={this.handleChange.bind(this, 'to')}>
{weeksAfter.map(renderOption)}
</select>
</div>

2
app/scripts/src/charts/bar_chart.jsx
View File

@ -120,7 +120,7 @@ var BarChart = React.createClass({
return (
<div className="barchart-container">
<div className="whatsgoingon">
This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} <WeekIntervalSelector />
</div>
<div className="filters">
<Selector thing="sort"

2
app/scripts/src/charts/stacked_area_chart.jsx
View File

@ -196,7 +196,7 @@ var StackedAreaChart = React.createClass({
return (
<div className="sachart-container">
<div className="whatsgoingon">
This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} <WeekIntervalSelector />
</div>
<div className="filters">
<Selector thing="sort"

30
app/styles/app.css
View File

@ -41,33 +41,3 @@
margin: 0;
font-weight: 400;
}
.week-selector {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
line-height: 40px;
color: #666;
}
.week-selector .week {
position: relative;
display: inline-block;
padding: 0 6px;
margin: 0 3px;
}
.week-selector .week select {
position: absolute;
top: 30%;
left: 0;
width: 100%;
visibility: hidden;
}
.week-selector .week:hover .label {
visibility: hidden;
}
.week-selector .week:hover select {
visibility: visible;
}

37
app/styles/charts.css
View File

@ -103,10 +103,13 @@
background-color: #f0f0f0;
border-radius: 2px;
}
.whatsgoingon em.date {
.week-selector em {
background-color: #d0f0f0;
}
.whatsgoingon em.date:before {
.week-selector em:before {
content: '';
display: inline-block;
margin: 0 3px -1px 0;
@ -116,3 +119,33 @@
/* Source: https://github.com/github/octicons/blob/master/svg/calendar.svg */
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik03MDQgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNTEyaC02NHYxMjhoNjRWNTEyek03MDQgMzIwaC02NHYxMjhoNjRWMzIwek04MzIgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNzA0aC02NHYxMjhoNjRWNzA0ek03NjggMGgtNjR2MTI4aDY0VjB6TTI1NiAwaC02NHYxMjhoNjRWMHpNODMyIDMyMGgtNjR2MTI4aDY0VjMyMHpNNTc2IDMyMGgtNjR2MTI4aDY0VjMyMHpNMzIwIDcwNGgtNjR2MTI4aDY0VjcwNHpNMTkyIDUxMmgtNjR2MTI4aDY0VjUxMnpNMzIwIDUxMmgtNjR2MTI4aDY0VjUxMnpNODMyIDY0djEyOEg2NDBWNjRIMzIwdjEyOEgxMjhWNjRIMHY4OTZoOTYwVjY0SDgzMnpNODk2IDg5Nkg2NFYyNTZoODMyVjg5NnpNMTkyIDcwNGgtNjR2MTI4aDY0VjcwNHpNNDQ4IDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDcwNGgtNjR2MTI4aDY0VjcwNHpNMzIwIDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDUxMmgtNjR2MTI4aDY0VjUxMnpNNzA0IDcwNGgtNjR2MTI4aDY0VjcwNHoiIC8+Cjwvc3ZnPg==");
}
.week-selector {
display: inline-block;
}
.week-selector .selector {
position: relative;
display: inline-block;
padding: 0 6px;
width: 110px;
}
.week-selector .selector em {
width: 100%;
}
.week-selector .selector select {
position: absolute;
top: 5px;
left: 5%;
width: 90%;
margin: 0;
display: none;
}
.week-selector .selector:hover em {
visibility: hidden;
}
.week-selector .selector:hover select {
display: inline;
}