SAC X axis

app/app.html

@@ -20,6 +20,7 @@
     <script src="/bower_components/react-router/build/global/ReactRouter.js"></script>
     <script src="/bower_components/lodash/lodash.js"></script>
     <script src="/bower_components/jquery/dist/jquery.js"></script>
+    <script src="/scripts/date.js"></script>
     <script src="/scripts/colors.js"></script>
     <script src="/scripts/svground.js"></script>
     <script src="/scripts/compiled/charts/charts.js"></script>

app/scripts/date.js

@@ -0,0 +1,19 @@
+var monthNames = [
+    'Jan', 'Feb', 'Mar',
+    'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep',
+    'Oct', 'Nov', 'Dec'
+];
+
+function formatDate(ts, showYear) {
+    var d = new Date(ts*1000),
+        day = d.getDate(),
+        month = monthNames[d.getMonth()],
+        year = (''+ d.getFullYear()).slice(2);
+
+    if (showYear) {
+        return month +' '+ day +" '"+ year;
+    } else {
+        return month +' '+ day;
+    }
+}

app/scripts/src/app.jsx

@@ -218,12 +218,6 @@ var InfoBlock = React.createClass({
 
 var WeekIntervalSelector = React.createClass({
     mixins: [ReactRouter.Navigation, ReactRouter.State],
-    monthNames: [
-        'Jan', 'Feb', 'Mar',
-        'Apr', 'May', 'Jun',
-        'Jul', 'Aug', 'Sep',
-        'Oct', 'Nov', 'Dec'
-    ],
 
     getInitialState: function() {
         var ms = 1000,
@@ -251,19 +245,6 @@ var WeekIntervalSelector = React.createClass({
         this.transitionTo(document.location.pathname, null, params);
     },
 
-    formatDate: function(ts, showYear) {
-        var d = new Date(ts*1000),
-            day = d.getDate(),
-            month = this.monthNames[d.getMonth()],
-            year = (''+ d.getFullYear()).slice(2);
-
-        if (showYear) {
-            return month +' '+ day +" '"+ year;
-        } else {
-            return month +' '+ day;
-        }
-    },
-
     render: function() {
         var daySeconds = 86400,
             weekSeconds = daySeconds*7,
@@ -286,22 +267,22 @@ var WeekIntervalSelector = React.createClass({
 
         var renderOption = function(ts) {
             return (
-                <option key={ts} value={ts}>{this.formatDate(ts, true)}</option>
+                <option key={ts} value={ts}>{formatDate(ts, true)}</option>
             );
-        }.bind(this);
+        };
 
         return (
             <div className="week-selector">
                 <span>from</span>
                 <div ref="from" className="selector">
-                    <em ref="label">{this.formatDate(from)}</em>
+                    <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">{this.formatDate(to)}</em>
+                    <em ref="label">{formatDate(to)}</em>
                     <select ref="select" value={to} onChange={this.handleChange.bind(this, 'to')}>
                         {weeksAfter.map(renderOption)}
                     </select>

app/scripts/src/charts/stacked_area_chart.jsx

@@ -4,6 +4,8 @@ var StackedAreaChart = React.createClass({
     numElements: 10,
     maxWeeks: 30,
     height: 350,
+    xAxisHeight: 20,
+
     words: {
         items: {
             repo: 'repositories',
@@ -185,7 +187,7 @@ var StackedAreaChart = React.createClass({
                     };
                 });
 
-                return [week, points];
+                return [parseInt(week, 10), points];
             })
             .sort(0)
             .reverse()
@@ -295,11 +297,17 @@ var StackedAreaChart = React.createClass({
                         onChange={this.handleFilter.bind(this, 'item')} />
                 </div>
                 <svg ref="svg" className="sachart" key="sachart-svg"
+                    width="100%"
+                    height={this.height + this.xAxisHeight}
+                    viewBox={"0 0 "+ (this.state.canvasWidth || 0) + " "+ (this.height + this.xAxisHeight)}
                     onMouseOut={this.handleFocusOut}
-                    width="100%" height={maxHeight}
+                    >
-                    viewBox={"0 0 "+ (this.state.canvasWidth || 0) + " "+ maxHeight}>
                     <g ref="areas">{areas.reverse()}</g>
                     <g ref="dots">{renderedDots}</g>
+                    <Axis
+                        weeks={_.pluck(points, 0)}
+                        y={this.height + 3}
+                        width={this.state.canvasWidth} />
                 </svg>
                 <ul className="legend">
                     {legend.map(renderLegend)}
@@ -379,3 +387,55 @@ var Dot = React.createClass({
         );
     }
 });
+
+var Axis = React.createClass({
+    render: function() {
+        if (this.props.weeks.length === 0) {
+            return null;
+        }
+        var renderMark = function(week, i) {
+            var x = i/(this.props.weeks.length - 1)*this.props.width,
+                ta = (i === 0
+                    ? 'start'
+                    : (i === this.props.weeks.length - 1
+                        ? 'end'
+                        : 'middle'));
+            return (
+                <g key={'mark-'+ i}>
+                    <line
+                        x1={x}
+                        y1={this.props.y}
+                        x2={x}
+                        y2={this.props.y + 4}
+                        stroke="#666" strokeWidth="1" />
+                    <text className="axis-mark"
+                        x={x}
+                        y={this.props.y + 15}
+                        textAnchor={ta}
+                        fill="#666"
+                        >
+                        {formatDate(week)}
+                    </text>
+                </g>
+            );
+        }.bind(this);
+
+        return (
+            <g ref="axis">
+                <line
+                    x1="0"
+                    y1={this.props.y}
+                    x2={this.props.width}
+                    y2={this.props.y}
+                    stroke="#666" strokeWidth="1" />
+                {this.props.weeks.map(renderMark)}
+                <line
+                    x1={this.props.width - 1}
+                    y1={this.props.y}
+                    x2={this.props.width - 1}
+                    y2={this.props.y + 4}
+                    stroke="#666" strokeWidth="1" />
+            </g>
+        )
+    }
+});

app/styles/charts.css

@@ -196,3 +196,7 @@
 .week-selector .selector:hover select {
     display: inline;
 }
+
+.axis-mark {
+    font-size: 10px;
+}