Get week range from server

app/jsx/charts/bc/bar_chart.jsx

@@ -143,7 +143,7 @@ var BarChart = React.createClass({
         return (
             <div className="barchart-container">
                 <div className="whatsgoingon">
-                    This bar chart shows <em>{words.values[this.state.sort]}</em> {words.actions[this.state.item +'-'+ this.state.sort]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]}<br /><WeekIntervalSelector />
+                    This bar chart shows <em>{words.values[this.state.sort]}</em> {words.actions[this.state.item +'-'+ this.state.sort]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]}<br /><WeekIntervalSelector org={this.getParams().org} />
                 </div>
                 <div className="filters">
                     <Selector thing="sort"

app/jsx/charts/sac/stacked_area_chart.jsx

@@ -301,7 +301,7 @@ var StackedAreaChart = React.createClass({
         return (
             <div ref="container" className="sac">
                 <div className="whatsgoingon">
-                    This stacked area chart shows <em>the number of commits</em> {words.actions[this.state.item]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]}<br /><WeekIntervalSelector />
+                    This stacked area chart shows <em>the number of commits</em> {words.actions[this.state.item]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]}<br /><WeekIntervalSelector org={this.getParams().org} />
                 </div>
                 <div className="filters">
                     <Selector thing="sort"

app/jsx/charts/week_interval_selector.jsx

@@ -0,0 +1,83 @@
+var WeekIntervalSelector = React.createClass({
+    mixins: [ReactRouter.Navigation, ReactRouter.State],
+
+    getInitialState: function() {
+        return {
+            weeks: []
+        };
+    },
+
+    componentDidMount: function() {
+        this.loadWeekRange(this.props.org);
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this.loadWeekRange(newProps.org);
+    },
+
+    handleChange: function(thing, e) {
+        var params = this.getQuery();
+        params[thing.slice(0, 1)] = e.target.value/100;
+        this.transitionTo(document.location.pathname, null, params);
+    },
+
+    loadWeekRange: function(org) {
+        getURL("/api/weeks", {org: org}, function(res){
+            var weeks = [],
+                min = res[0],
+                max = res[1];
+            for (var i = min; i <= max; i += 86400*7) {
+                weeks.push(i);
+            };
+            this.setState({
+                weeks: weeks
+            });
+        }.bind(this));
+    },
+
+    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 - 29*weekSeconds),
+            to = (this.getQuery().t ? parseInt(this.getQuery().t, 10)*100 : lastWeek);
+
+        var weeksBefore = _(this.state.weeks)
+            .filter(function(week) {
+                return week < to;
+            })
+            .reverse()
+            .value();
+        var weeksAfter = _(this.state.weeks)
+            .filter(function(week) {
+                return week > from;
+            })
+            .reverse()
+            .value();
+
+        var renderOption = function(ts) {
+            return (
+                <option key={ts} value={ts}>{formatDate(ts, true)}</option>
+            );
+        };
+
+        return (
+            <div className="week-selector">
+                <span>from</span>
+                <div ref="from" className="selector">
+                    <em ref="label">{formatDate(from)}</em>
+                    <select ref="select" value={from} onChange={this.handleChange.bind(this, 'from')}>
+                        {weeksBefore.map(renderOption)}
+                    </select>
+                </div>
+                <span>to</span>
+                <div ref="to" className="selector">
+                    <em ref="label">{formatDate(to)}</em>
+                    <select ref="select" value={to} onChange={this.handleChange.bind(this, 'to')}>
+                        {weeksAfter.map(renderOption)}
+                    </select>
+                </div>
+            </div>
+        );
+    }
+});