From d89904e902f5fd5bcabcdb6aa2d4f19d71b73e53 Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Sat, 14 Mar 2015 22:54:27 +0700
Subject: [PATCH] Time interval selector draft

---
 app/scripts/src/app.jsx              | 56 ++++++++++++++++++++++++++++
 app/scripts/src/charts/bar_chart.jsx |  9 +++--
 app/styles/app.css                   | 26 +++++++++++++
 3 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/app/scripts/src/app.jsx b/app/scripts/src/app.jsx
index a6826e2..35751f8 100644
--- a/app/scripts/src/app.jsx
+++ b/app/scripts/src/app.jsx
@@ -60,6 +60,7 @@ var App = React.createClass({
         return (
             <section className="app">
                 <Menu orgs={this.state.orgs} teams={this.state.teams} />
+                <WeekIntervalSelector />
                 <Router.RouteHandler />
             </section>
         );
@@ -126,6 +127,7 @@ var Dashboard = React.createClass({
 
         if (p.team) {
             infoTitle = p.team;
+            infoText = 'A '+ p.org +' team';
             bcApi = '/api/stat/teams/top';
             bcItems = ['repo', 'user'],
             sacApi = '/api/stat/teams/activity';
@@ -192,6 +194,60 @@ var InfoBlock = React.createClass({
     }
 });
 
+var WeekIntervalSelector = React.createClass({
+    monthNames: [
+        'Jan', 'Feb', 'Mar',
+        'Apr', 'May', 'Jun',
+        'Jul', 'Aug', 'Sep',
+        'Oct', 'Nov', 'Dec'
+    ],
+
+    componentDidMount: function() {
+        this.resize();
+        window.addEventListener('resize', this.resize);
+    },
+
+    resize: function() {
+        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        this.refs.selector.getDOMNode().style.height = ''+ (h - 40) +'px';
+    },
+
+    render: function() {
+        var ms = 1000,
+            daySeconds = 86400,
+            weekSeconds = daySeconds*7,
+            today = new Date(),
+            sunday = new Date(today - daySeconds*ms*today.getDay()),
+            perfectSunday = new Date(Date.UTC(sunday.getFullYear(), sunday.getMonth(), sunday.getDate())),
+            lastWeek = perfectSunday.setHours(0)/ms,
+            firstWeek = lastWeek - 51*weekSeconds;
+
+        var weeks = [];
+        for (var i = lastWeek; i >= firstWeek; i -= weekSeconds) {
+            weeks.push(i);
+        };
+
+        var renderWeek = function(week, i) {
+            var d = new Date(week*ms),
+                month = this.monthNames[d.getMonth()],
+                day = d.getDate();
+
+            return (
+                <div key={'week-'+ i} className="week">
+                    <div key={''+ i +'-week'} className="square">{day}</div>
+                    <div key={''+ i +'-month'} className="square">{month}</div>
+                    <div key={''+ i +'-day'} className="square">{day}</div>
+                </div>
+            )
+        }.bind(this);
+        return (
+            <section ref="selector" className="week-selector">
+                {weeks.map(renderWeek)}
+            </section>
+        );
+    }
+});
+
 var routes = [
     <Router.Route name="root" path="/app/" handler={App}>
         <Router.DefaultRoute handler={SelectOrg} />
diff --git a/app/scripts/src/charts/bar_chart.jsx b/app/scripts/src/charts/bar_chart.jsx
index 9fa6ba8..3abaaf6 100644
--- a/app/scripts/src/charts/bar_chart.jsx
+++ b/app/scripts/src/charts/bar_chart.jsx
@@ -113,13 +113,16 @@ var BarChart = React.createClass({
                     user: 'which were the most active working on'
                 }
             },
-            who = this.getParams().repo || this.getParams().team || this.getParams().user || this.getParams().org,
-            params = Object.keys(this.getParams());
+            who = this.getParams().repo || this.getParams().team || this.getParams().user || this.getParams().org;
+
+        var params = Object.keys(this.getParams());
         params.splice(params.indexOf('org'), 1);
+        var subject = params[0];
+
         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[params[0]]} from <em>W11, Mar 9</em> to <em>W18, 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]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em>
                 </div>
                 <div className="filters">
                     <Selector thing="item"
diff --git a/app/styles/app.css b/app/styles/app.css
index dc056f5..d8ccb5c 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -103,3 +103,29 @@ section {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.week-selector {
+    display: none;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+    float: left;
+    margin: 20px 20px 20px 0;
+}
+.week-selector .week {
+    float: left;
+    width: 20px;
+    font-size: 8px;
+    line-height: 10px;
+    margin: 0 0 1px;
+}
+.week-selector .week .square {
+    float: left;
+    width: 20px;
+    height: 20px;
+    border: #aaa 1px solid;
+    text-align: center;
+    line-height: 20px;
+    background-color: #fff;
+}