localhots/shezmu
1
0
Fork 0
Code Releases Activity

Draw line chart axises

Browse Source
This commit is contained in:
Gregory Eremin 2015-10-31 23:53:10 +03:00
parent 091959185e
commit a05b28f549
2 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dashboard/css/app.css
View File

@ -59,6 +59,13 @@ body {
.linechart .line.errors {
stroke: #f64;
}
.linechart .axis {
stroke: #aaa;
}
.linechart .arrow {
stroke: #aaa;
fill: #aaa;
}
/*

32
dashboard/js/app.jsx
View File

@ -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>
);