localhots
/
shezmu
1
0
Fork 0
Code Releases Activity

Move all svg styling to css

This commit is contained in:
Gregory Eremin 2015-10-31 23:16:21 +03:00
parent abff920248
commit e6d5ac7ef9
2 changed files with 47 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
dashboard/css/app.css
View File

@ -41,7 +41,7 @@ body {
.linechart { .linechart {
float: left; float: left;
width: 330px; width: 300px;
height: 150px; height: 150px;
margin-right: 15px; margin-right: 15px;
} }
@ -49,6 +49,16 @@ body {
width: 100%; width: 100%;
height: 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 { .boxplot {
float: left; float: left;
width: 455px; width: 485px;
height: 150px; height: 200px;
} }
.boxplot svg { .boxplot svg {
width: 100%; width: 100%;
height: 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 { .daemon {
width: 100%; width: 100%;

36
dashboard/js/app.jsx
View File

@ -133,45 +133,37 @@ var BoxPlot = React.createClass({
x2={x2-2} x2={x2-2}
y1={maxY} y1={maxY}
y2={maxY} y2={maxY}
strokeWidth={1} className="tick" />
style={{stroke: "#aaa"}} /> <line key="max-whisker"
<line key="max-bar"
x1={x1+width/2} x1={x1+width/2}
x2={x1+width/2} x2={x1+width/2}
y1={maxY} y1={maxY}
y2={p75Y} y2={p75Y}
strokeDasharray="3,1" className="whisker" />
strokeWidth={1} <line key="min-whisker"
style={{stroke: "#ccc"}} />
<line key="min-bar"
x1={x1+width/2} x1={x1+width/2}
x2={x1+width/2} x2={x1+width/2}
y1={minY} y1={minY}
y2={p25Y} y2={p25Y}
strokeDasharray="3,1" className="whisker" />
strokeWidth={1}
style={{stroke: "#ccc"}} />
<rect key="iqr" <rect key="iqr"
x={x1} x={x1}
y={p75Y} y={p75Y}
width={width} width={width}
height={p25Y - p75Y} height={p25Y - p75Y}
strokeWidth={1} className="iqr" />
style={{fill: "#f0f0f0", stroke: "#888"}} />
<line key="median" <line key="median"
x1={x1} x1={x1}
x2={x2} x2={x2}
y1={medianY} y1={medianY}
y2={medianY} y2={medianY}
strokeWidth={2} className="median" />
style={{stroke: "#444"}} />
<line key="min" <line key="min"
x1={x1+2} x1={x1+2}
x2={x2-2} x2={x2-2}
y1={minY} y1={minY}
y2={minY} y2={minY}
strokeWidth={1} className="tick" />
style={{stroke: "#aaa"}} />
</g> </g>
); );
}; };
@ -189,8 +181,7 @@ var LineChart = React.createClass({
render: function() { render: function() {
var points = this.props.points, var points = this.props.points,
maxHeight = 140, maxHeight = 140,
padding = 5, padding = 5;
colors = {processed: "#46f", errors: "#f64"};
var min = 0, max; var min = 0, max;
points.map(function(point) { points.map(function(point) {
@ -220,14 +211,19 @@ var LineChart = React.createClass({
return ( return (
<path <path
d={path.join(" ")} d={path.join(" ")}
strokeWidth={2} className={"line "+key} />
style={{stroke: colors[key], fill: "transparent"}} />
); );
}; };
return ( return (
<div className="linechart"> <div className="linechart">
<svg> <svg>
<line key="y-axis"
x1={2}
x2={2}
y1={0}
y2={maxHeight}
className="y-axis" />
{makePath(points, "processed")} {makePath(points, "processed")}
{makePath(points, "errors")} {makePath(points, "errors")}
</svg> </svg>