Merge "Fix style for treechart and ganttchart"

v2/assets/css/chart.css

@@ -26,22 +26,56 @@ circle.parent:hover {
 circle.child {
     pointer-events: none;
 }
-circle[depth='0'] {
+circle.parent {
-    fill: #428bca;
+    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);
 }

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;
-}
+}

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("font-size", "15px");
-                            .style("fill-opacity", 1e-6);
 
                         // 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) {
         }
 
     });
-});
+});