diff --git a/dashboard/css/app.css b/dashboard/css/app.css
index 5e44756..bac1e32 100644
--- a/dashboard/css/app.css
+++ b/dashboard/css/app.css
@@ -47,6 +47,7 @@ body {
width: 950px;
height: 120px;
margin-right: 15px;
+ margin-bottom: 10px;
}
.linechart svg {
width: 100%;
@@ -69,13 +70,13 @@ body {
.linechart .dot.errors {
fill: #f64;
}
- .linechart .axis {
- stroke: #888;
- }
- .linechart .arrow {
- stroke: #888;
- fill: #888;
- }
+.axis {
+ stroke: #888;
+}
+.arrow {
+ stroke: #888;
+ fill: #888;
+}
/*
@@ -85,7 +86,7 @@ body {
.boxplot {
float: left;
width: 950px;
- height: 200px;
+ height: 170px;
}
.boxplot svg {
width: 100%;
diff --git a/dashboard/js/app.jsx b/dashboard/js/app.jsx
index 5bd9dc2..3ccc42a 100644
--- a/dashboard/js/app.jsx
+++ b/dashboard/js/app.jsx
@@ -97,8 +97,13 @@ var Daemon = React.createClass({
var BoxPlot = React.createClass({
render: function(){
var points = this.props.points,
- maxHeight = 140,
- padding = 5;
+ chartWidth = 950,
+ chartHeight = 170,
+ padLeft = 30,
+ padTop = 10,
+ padBottom = 20,
+ valueInterval = 5,
+ maxHeight = chartHeight - padTop - padBottom;
var min, max;
points.map(function(point) {
@@ -112,14 +117,13 @@ var BoxPlot = React.createClass({
var renderBox = function(point, i) {
var relativeY = function(val) {
- return maxHeight - Math.round((val-min)/(max-min) * maxHeight) + padding;
+ return maxHeight - Math.round((val-min)/(max-min) * maxHeight);
};
- var width = 10;
- var padding = 5;
+ var boxWidth = 10;
- var x1 = (width + padding) * i + padding;
- var x2 = x1 + width;
+ var x1 = (boxWidth + valueInterval) * i + padLeft + valueInterval;
+ var x2 = x1 + boxWidth;
var minY = relativeY(point.min);
var p25Y = relativeY(point.p25);
var medianY = relativeY(point.median);
@@ -135,21 +139,21 @@ var BoxPlot = React.createClass({
y2={maxY}
className="tick" />
);
};
+
+ var yMaxX = padLeft - 3,
+ yMaxY = padTop + 5;
+
return (
);
@@ -179,17 +195,16 @@ var BoxPlot = React.createClass({
var LineChart = React.createClass({
render: function() {
- var width = 950,
- height = 120,
- paddingLeft = 30,
- paddingTop = 10,
- paddingBottom = 20;
-
var points = this.props.points,
- maxHeight = height - paddingTop - paddingBottom,
- padding = 30;
+ chartWidth = 950,
+ chartHeight = 120,
+ padLeft = 30,
+ padTop = 10,
+ padBottom = 20,
+ valueInterval = 15;
+ maxHeight = chartHeight - padTop - padBottom;
- var min = 0, max = 0;
+ var max = 0;
points.map(function(point) {
if (max === undefined || point.processed > max) {
max = point.processed;
@@ -203,19 +218,18 @@ var LineChart = React.createClass({
var npoints = points.map(function(point, i) {
var val = point[key];
- var width = 15;
- var x = i * width + padding;
- var y = maxHeight - Math.round((val-min)/(max-min) * maxHeight) + paddingTop;
+ var x = i * valueInterval + padLeft;
+ var y = maxHeight - Math.round(val/max * maxHeight) + padTop;
return [x, y];
});
- var numMaxPoints = points.map(function(point, i) {
+ var maxPointsRatio = points.map(function(point, i) {
var val = point[key];
return val === max ? 1 : 0;
}).reduce(function(sum, val) {
return sum + val;
- });
+ }) / points.length;
var path = npoints.map(function(point, i) {
var x = point[0], y = point[1];
@@ -232,11 +246,11 @@ var LineChart = React.createClass({
var r = 2; // Radius
// Hide leftmost and zero points
- if (x === paddingLeft || y === height - paddingBottom) {
+ if (x === padLeft || y === chartHeight - padBottom) {
r = 0;
}
- // Highlight max values if less then 50% of values are max
- if (y == paddingTop && numMaxPoints / points.length < .5) {
+ // Highlight max values if less then 25% of values are max
+ if (y == padTop && maxPointsRatio <= .25) {
r = 4;
}
@@ -258,14 +272,12 @@ var LineChart = React.createClass({
};
// TODO: Define magic numbers from below here
- var yMaxX = paddingLeft - 3,
- yMaxY = paddingTop + 5,
- xLabel1x = paddingLeft,
- xLabel2x = paddingLeft + 15 * 6;
+ var yMaxX = padLeft - 3,
+ yMaxY = padTop + 5;
var xlabels = Array.apply(null, Array(10)).map(function(_, i){
return
@@ -276,9 +288,10 @@ var LineChart = React.createClass({
return (