diff --git a/v2/assets/css/chart.css b/v2/assets/css/chart.css index 034ce85..26e18da 100644 --- a/v2/assets/css/chart.css +++ b/v2/assets/css/chart.css @@ -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); } diff --git a/v2/assets/css/style.css b/v2/assets/css/style.css index 85a1657..a2551a8 100644 --- a/v2/assets/css/style.css +++ b/v2/assets/css/style.css @@ -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); } @@ -1111,4 +1055,4 @@ h4.widget-title:hover { } .loadingMask .mask{ opacity: 0.5; -} \ No newline at end of file +} diff --git a/v2/src/common/charts.js b/v2/src/common/charts.js index e2bc37b..487147d 100644 --- a/v2/src/common/charts.js +++ b/v2/src/common/charts.js @@ -375,7 +375,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; @@ -422,31 +447,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) @@ -469,8 +469,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() @@ -594,7 +593,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" @@ -671,4 +670,4 @@ define(['angular', 'ganttChart'], function(angular, ganttChart) { } }); -}); \ No newline at end of file +});