From e6d5ac7ef955091465ba9cae6861a68d1e12fb8c Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Sat, 31 Oct 2015 23:16:21 +0300
Subject: [PATCH] Move all svg styling to css

---
 dashboard/css/app.css | 34 +++++++++++++++++++++++++++++++---
 dashboard/js/app.jsx  | 36 ++++++++++++++++--------------------
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/dashboard/css/app.css b/dashboard/css/app.css
index bc4ac1e..c3d12cd 100644
--- a/dashboard/css/app.css
+++ b/dashboard/css/app.css
@@ -41,7 +41,7 @@ body {
 
 .linechart {
     float: left;
-    width: 330px;
+    width: 300px;
     height: 150px;
     margin-right: 15px;
 }
@@ -49,6 +49,16 @@ body {
         width: 100%;
         height: 100%;
     }
+    .linechart .line {
+        stroke-width: 1px;
+        fill: transparent;
+    }
+        .linechart .line.processed {
+            stroke: #46f;
+        }
+        .linechart .line.errors {
+            stroke: #f64;
+        }
 
 
 /*
@@ -57,13 +67,31 @@ body {
 
 .boxplot {
     float: left;
-    width: 455px;
-    height: 150px;
+    width: 485px;
+    height: 200px;
 }
     .boxplot svg {
         width: 100%;
         height: 100%;
     }
+    .boxplot .tick {
+        stroke-width: 1px;
+        stroke: #aaa;
+    }
+    .boxplot .whisker {
+        stroke-width: 1px;
+        stroke: #ccc;
+        stroke-dasharray: 3, 1;
+    }
+    .boxplot .iqr {
+        stroke-width: 1px;
+        fill: #f0f0f0;
+        stroke: #888;
+    }
+    .boxplot .median {
+        stroke-width: 2px;
+        stroke: #444;
+    }
 
 .daemon {
     width: 100%;
diff --git a/dashboard/js/app.jsx b/dashboard/js/app.jsx
index f33e237..822b20d 100644
--- a/dashboard/js/app.jsx
+++ b/dashboard/js/app.jsx
@@ -133,45 +133,37 @@ var BoxPlot = React.createClass({
                         x2={x2-2}
                         y1={maxY}
                         y2={maxY}
-                        strokeWidth={1}
-                        style={{stroke: "#aaa"}} />
-                    <line key="max-bar"
+                        className="tick" />
+                    <line key="max-whisker"
                         x1={x1+width/2}
                         x2={x1+width/2}
                         y1={maxY}
                         y2={p75Y}
-                        strokeDasharray="3,1"
-                        strokeWidth={1}
-                        style={{stroke: "#ccc"}} />
-                    <line key="min-bar"
+                        className="whisker" />
+                    <line key="min-whisker"
                         x1={x1+width/2}
                         x2={x1+width/2}
                         y1={minY}
                         y2={p25Y}
-                        strokeDasharray="3,1"
-                        strokeWidth={1}
-                        style={{stroke: "#ccc"}} />
+                        className="whisker" />
                     <rect key="iqr"
                         x={x1}
                         y={p75Y}
                         width={width}
                         height={p25Y - p75Y}
-                        strokeWidth={1}
-                        style={{fill: "#f0f0f0", stroke: "#888"}} />
+                        className="iqr" />
                     <line key="median"
                         x1={x1}
                         x2={x2}
                         y1={medianY}
                         y2={medianY}
-                        strokeWidth={2}
-                        style={{stroke: "#444"}} />
+                        className="median" />
                     <line key="min"
                         x1={x1+2}
                         x2={x2-2}
                         y1={minY}
                         y2={minY}
-                        strokeWidth={1}
-                        style={{stroke: "#aaa"}} />
+                        className="tick" />
                 </g>
             );
         };
@@ -189,8 +181,7 @@ var LineChart = React.createClass({
     render: function() {
         var points = this.props.points,
             maxHeight = 140,
-            padding = 5,
-            colors = {processed: "#46f", errors: "#f64"};
+            padding = 5;
 
         var min = 0, max;
         points.map(function(point) {
@@ -220,14 +211,19 @@ var LineChart = React.createClass({
             return (
                 <path
                     d={path.join(" ")}
-                    strokeWidth={2}
-                    style={{stroke: colors[key], fill: "transparent"}} />
+                    className={"line "+key} />
             );
         };
 
         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")}
                 </svg>