Table view + charts

dashboard/css/app.css

@@ -6,77 +6,65 @@ body {
 }
 
 #app {
-    width: 1260px;
+    width: 800px;
     margin: 0 auto;
-    /*background-color: #ccc;*/
 }
 
-.header {
-    width: 100%;
-    height: 30px;
+/*
+ * Table
+ */
+
+.table-row {
+    width: 800px;
+    height: 40px;
 }
-    .header > div {
-        float: left;
-        line-height: 30px;
-        text-align: center;
+.table-cell {
+    float: left;
+    width: 120px;
+    line-height: 40px;
+    text-align: right;
+}
+    .table-cell.col-name {
+        width: 200px;
+        text-align: left;
         font-weight: 600;
-        border-right: #666 1px solid;
+    }
+.table-header .table-cell {
+    font-weight: 600;
+    border-bottom: #666 1px solid;
+}
+
+
+/*
+ * Line chart
+ */
+
+.linechart {
+    float: left;
+    width: 330px;
+    height: 150px;
+    margin-right: 15px;
+}
+    .linechart svg {
+        width: 100%;
+        height: 100%;
     }
 
-.col-name      { width: 200px; }
-.col-processed { width: 100px; }
-.col-errors    { width: 100px; }
-.col-min       { width: 100px; }
-.col-median    { width: 100px; }
-.col-max       { width: 100px; }
 
-.daemon {
-    margin-top: 40px;
+/*
+ * Box plot
+ */
+
+.boxplot {
+    float: left;
+    width: 455px;
     height: 150px;
 }
-    .daemon .stats {
+    .boxplot svg {
         width: 100%;
-        height: 30px;
+        height: 100%;
     }
-        .daemon .stats > div {
-            float: left;
-            line-height: 30px;
-            text-align: right;
-            padding-right: 5px;
-            border-right: #666 1px solid;
-        }
-        .daemon .stats > div.col-name {
-            text-align: left;
-            font-weight: 600;
-        }
-    .daemon .left-block {
-        float: left;
-        width: 330px;
-        height: 150px;
-        /*background-color: #cfc;*/
-    }
-        .daemon .left-block h1 {
-            padding: 0;
-            margin: 0;
-            font-weight: 400;
-        }
-        .daemon .left-block dl {
-            width: 170px;
-        }
-        .daemon .left-block dt, .daemon .left-block dd {
-            float: left;
-            margin: 0 5px 0 0;
-            width: 80px;
-            line-height: 30px;
-        }
-        .daemon .left-block dd {
-            font-family: monospace;
-        }
 
-    .daemon .boxplot {
-        float: left;
-        height: 150px;
-        margin-right: 20px;
-        /*background-color: #fcc;*/
-        /*border: #ccc 1px solid;*/
-    }
+.daemon {
+    width: 100%;
+}

dashboard/js/app.jsx

@@ -53,13 +53,13 @@ var Dashboard = React.createClass({
 var Header = React.createClass({
     render: function() {
         return (
-            <div className="header">
-                <div className="col-name">Daemon</div>
-                <div className="col-processed">Processed</div>
-                <div className="col-errors">Errors</div>
-                <div className="col-min">Min</div>
-                <div className="col-median">Median</div>
-                <div className="col-max">Max</div>
+            <div className="table-row table-header">
+                <div className="table-cell col-name">Daemon</div>
+                <div className="table-cell col-processed">Processed</div>
+                <div className="table-cell col-errors">Errors</div>
+                <div className="table-cell col-min">Min</div>
+                <div className="table-cell col-median">Median</div>
+                <div className="table-cell col-max">Max</div>
             </div>
         );
     }
@@ -69,13 +69,13 @@ var StatsRow = React.createClass({
     render: function() {
         var value = this.props.value;
         return (
-            <div className="stats">
-                <div className="col-name">{this.props.name}</div>
-                <div className="col-processed">{value.processed}</div>
-                <div className="col-errors">{value.errors}</div>
-                <div className="col-min">{formatDuration(value.min)}</div>
-                <div className="col-median">{formatDuration(value.median)}</div>
-                <div className="col-max">{formatDuration(value.max)}</div>
+            <div className="table-row">
+                <div className="table-cell col-name">{this.props.name}</div>
+                <div className="table-cell col-processed">{value.processed}</div>
+                <div className="table-cell col-errors">{value.errors}</div>
+                <div className="table-cell col-min">{formatDuration(value.min)}</div>
+                <div className="table-cell col-median">{formatDuration(value.median)}</div>
+                <div className="table-cell col-max">{formatDuration(value.max)}</div>
             </div>
         );
     }
@@ -87,9 +87,7 @@ var Daemon = React.createClass({
         return (
             <div className="daemon">
                 <StatsRow name={this.props.name} value={last} />
-                <div className="left-block">
-                    <LineChart points={this.props.points} />
-                </div>
+                <LineChart points={this.props.points} />
                 <BoxPlot points={this.props.points} />
             </div>
         );
@@ -179,7 +177,7 @@ var BoxPlot = React.createClass({
         };
         return (
             <div className="boxplot">
-                <svg width="455" height="150">
+                <svg>
                     {this.props.points.map(renderBox)}
                 </svg>
             </div>
@@ -190,7 +188,7 @@ var BoxPlot = React.createClass({
 var LineChart = React.createClass({
     render: function() {
         var points = this.props.points,
-            maxHeight = 90,
+            maxHeight = 140,
             padding = 5,
             colors = {processed: "#46f", errors: "#f64"};
 
@@ -229,7 +227,7 @@ var LineChart = React.createClass({
 
         return (
             <div className="linechart">
-                <svg width="300" height="100">
+                <svg>
                     {makePath(points, "processed")}
                     {makePath(points, "errors")}
                 </svg>