localhots
/
shezmu
1
0
Fork 0
Code Releases Activity

Table view + charts

This commit is contained in:
Gregory Eremin 2015-10-31 22:55:38 +03:00
parent 010b5a2d59
commit abff920248
2 changed files with 67 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
dashboard/css/app.css
View File

@ -6,77 +6,65 @@ body {
} }
#app { #app {
width: 1260px; width: 800px;
margin: 0 auto; margin: 0 auto;
/*background-color: #ccc;*/
} }
.header { /*
width: 100%; * Table
height: 30px; */
.table-row {
width: 800px;
height: 40px;
} }
.header > div { .table-cell {
float: left; float: left;
line-height: 30px; width: 120px;
text-align: center; line-height: 40px;
text-align: right;
}
.table-cell.col-name {
width: 200px;
text-align: left;
font-weight: 600; 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; height: 150px;
} }
.daemon .stats { .boxplot svg {
width: 100%; 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 { .daemon {
float: left; width: 100%;
height: 150px; }
margin-right: 20px;
/*background-color: #fcc;*/
/*border: #ccc 1px solid;*/
}

38
dashboard/js/app.jsx
View File

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