From a05b28f549c7d04eb510568e1f627d83390ea490 Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Sat, 31 Oct 2015 23:53:10 +0300
Subject: [PATCH] Draw line chart axises

---
 dashboard/css/app.css |  7 +++++++
 dashboard/js/app.jsx  | 32 ++++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/dashboard/css/app.css b/dashboard/css/app.css
index c3d12cd..18dc559 100644
--- a/dashboard/css/app.css
+++ b/dashboard/css/app.css
@@ -59,6 +59,13 @@ body {
         .linechart .line.errors {
             stroke: #f64;
         }
+    .linechart .axis {
+        stroke: #aaa;
+    }
+    .linechart .arrow {
+        stroke: #aaa;
+        fill: #aaa;
+    }
 
 
 /*
diff --git a/dashboard/js/app.jsx b/dashboard/js/app.jsx
index 822b20d..689b330 100644
--- a/dashboard/js/app.jsx
+++ b/dashboard/js/app.jsx
@@ -180,8 +180,8 @@ var BoxPlot = React.createClass({
 var LineChart = React.createClass({
     render: function() {
         var points = this.props.points,
-            maxHeight = 140,
-            padding = 5;
+            maxHeight = 130,
+            padding = 3;
 
         var min = 0, max;
         points.map(function(point) {
@@ -198,8 +198,8 @@ var LineChart = React.createClass({
             var path = points.map(function(point, i) {
                 var val = point[key];
                 var width = 15;
-                var x = i * width;
-                var y = maxHeight - Math.round((val-min)/(max-min) * maxHeight) + padding;
+                var x = i * width + padding;
+                var y = maxHeight - Math.round((val-min)/(max-min) * maxHeight) + 16;
 
                 if (i === 0) {
                     return "M"+x+","+y;
@@ -218,14 +218,26 @@ var LineChart = React.createClass({
         return (
             <div className="linechart">
                 <svg>
-                    <line key="y-axis"
-                        x1={2}
-                        x2={2}
-                        y1={0}
-                        y2={maxHeight}
-                        className="y-axis" />
                     {makePath(points, "processed")}
                     {makePath(points, "errors")}
+                    <line key="y-axis"
+                        x1={3}
+                        x2={3}
+                        y1={0}
+                        y2={147}
+                        className="axis" />
+                    <path key="y-arrow"
+                        d="M3,0 5,7 1,7 Z"
+                        className="arrow" />
+                    <line key="x-axis"
+                        x1={3}
+                        x2={300}
+                        y1={147}
+                        y2={147}
+                        className="axis" />
+                    <path key="x-arrow"
+                        d="M300,147 293,149 293,145 Z"
+                        className="arrow" />
                 </svg>
             </div>
         );