x
/
compass-web
Code Issues Proposed changes

Fix style for treechart and ganttchart 

Change-Id: Id2710099b73edcae47bc1da52d1ef7e201b4e6f0
This commit is contained in:
jiahuay 2014-10-17 12:03:03 -07:00
parent eeb7b83972
commit 5511a9484f
3 changed files with 76 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
v2/assets/css/chart.css
View File

@ -26,22 +26,56 @@ circle.parent:hover {
circle.child {
pointer-events: none;
}
circle[depth='0'] {
fill: #428bca;
circle.parent {
fill-opacity: 1 !important;
//stroke: none !important;
fill: #E6F7FF!important;
}
circle {
fill-opacity: 1 !important;
//stroke: none !important;
}
circle[depth='1'] {
fill: #ffb752;
fill: #85D6FF !important;
}
circle[depth='2'] {
fill: #d6487e;
fill: #70B8FF !important;
}
circle[depth='3'] {
fill: #fee188;
fill: #3399FF !important;
}
circle[depth='4'] {
fill: #9585bf;
fill: #005CE6 !important;
}
circle.node {
cursor: pointer;
}
circle.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
circle.node--leaf {
fill: white;
}
.chartLabel {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.chartLabel-hover{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
font-size: 30px !important;
}
.chartLabel,
.node--root,
.node--leaf {
pointer-events: none;
}
.red-border {
border-color: red !important;
}
/* tree chart*/
@ -61,6 +95,7 @@ path.link {
}
treechart rect {
fill: none;
cursor: pointer;
}
treechart rect[data-state='ok'] {
fill: green;
@ -104,6 +139,7 @@ ganttchart .axis path, ganttchart .axis line {
}
ganttchart .bar {
fill: #B8B8B8; /*grey*/
}
ganttchart .bar-failed {
@ -120,5 +156,9 @@ ganttchart .bar-successful {
ganttchart .bar-unknown {
fill: #33b5e5; /*blue*/
/*fill: #B8B8B8; grey*/
}
ganttchart .x text {
text-anchor: end !important;
transform: rotate(-65deg);
}

56
v2/assets/css/style.css
View File

@ -822,62 +822,6 @@ address, caption, cite, code, dfn, em, strong, th, var {
div.toc ul li a {
border-radius: 7px;
}
circle.parent {
fill-opacity: 1 !important;
//stroke: none !important;
fill: #E6F7FF!important;
}
circle {
fill-opacity: 1 !important;
//stroke: none !important;
}
circle[depth='1'] {
fill: #85D6FF !important;
}
circle[depth='2'] {
fill: #70B8FF !important;
}
circle[depth='3'] {
fill: #3399FF !important;
}
circle[depth='4'] {
fill: #005CE6 !important;
}
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.chartLabel {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.chartLabel-hover{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
font-size: 30px !important;
}
.chartLabel,
.node--root,
.node--leaf {
pointer-events: none;
}
.red-border {
border-color: red !important;
}
.table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th {
background-color: rgba(194, 221, 240, 1);
}

57
v2/src/common/charts.js
View File

@ -376,7 +376,32 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
})
.attr("width", imgWidth)
.attr("height", imgHeight)
.on("click", click)
.on("click", click);
nodeEnter.append("image")
.attr("xlink:href", function(d) {
if (d.depth == 0)
return "assets/img/router.png";
else if (d.depth == 1)
return "assets/img/switch1.png";
else
return "assets/img/server1.png";
})
.attr("width", imgWidth)
.attr("height", imgHeight);
nodeEnter.append("rect")
.attr("width", imgWidth)
.attr("height", imgHeight)
.attr("data-state", function(d) {
return d.state
})
.style("opacity", function(d) {
if (d.depth == 0)
return 0;
else
return 0.3;
})
.on("mouseover", function(d) {
if (d.depth > 1) {
var foWidth = 300;
@ -423,31 +448,6 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
svg.selectAll(".svg-tooltip").remove();
});
nodeEnter.append("image")
.attr("xlink:href", function(d) {
if (d.depth == 0)
return "assets/img/router.png";
else if (d.depth == 1)
return "assets/img/switch1.png";
else
return "assets/img/server1.png";
})
.attr("width", imgWidth)
.attr("height", imgHeight);
nodeEnter.append("rect")
.attr("width", imgWidth)
.attr("height", imgHeight)
.attr("data-state", function(d) {
return d.state
})
.style("opacity", function(d) {
if (d.depth == 0)
return 0;
else
return 0.3;
});
nodeEnter.append("text")
.attr("x", function(d) {
if (d.depth == 0)
@ -470,8 +470,7 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
.text(function(d) {
return d.name;
})
.style("font-size", "15px")
.style("fill-opacity", 1e-6);
.style("font-size", "15px");
// Transition nodes to their new position.
var nodeUpdate = node.transition()
@ -595,7 +594,7 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) {
//var hostnames = scope.hosts;
var taskStatus = {
"successful": "bar-successful",
"ok": "bar-successful",
"critical": "bar-failed",
"warning": "bar-warning",
"unknown": "bar-unknown"