Closes-Bug:#1581650

Did the following UI changes in monitor infra config node summary page 1)Aligned the time axis tick values in line bar chart and stack chart 2)Reduced the bar width of the stack chart and line bar chart, current bucket size is 2 mins for stacked chart and 4 mins in line bar chart. 3)Adjusted the font size of tick label and thickness of tick line to be in sync with other charts 4)Removed the fetching data label in line bar chart and donut chart 5)Aligned the base of stack chart and donut chart 6)Added the timestamp in stack chart tooltip. 7)Fixed the issue line bar chart is not showing complete 2 hrs data. Change-Id: I62b247ac7e545ae480e035023c2cb05541e8d6fd
Juniper · Jun 7, 2016 · 6879f87 · 6879f87
1 parent 9828bb0
commit 6879f87
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 20 deletions.
diff --git a/webroot/build/config.generator.constants.js b/webroot/build/config.generator.constants.js
@@ -394,6 +394,7 @@ constants.controllerModules = [
             'monitor-infra-confignode-model',
             'monitor-infra-controlnode-model',
             'monitor-infra-vrouter-model',
+            'monitor-infra-confignode-charts-model',
 
             'monitor-infra-parsers',
             'monitor-infra-utils',

diff --git a/webroot/css/contrail.custom.css b/webroot/css/contrail.custom.css
@@ -1099,7 +1099,7 @@ p.error, p.error-text {
 
 .confignode-chart .widget-box .widget-header {
     border-bottom: none;
-    font-size: 13px;
+    font-size: 14px;
     height: 23px;
     cursor: auto;
     padding: 3px 0px;
@@ -1118,7 +1118,8 @@ p.error, p.error-text {
     fill-opacity: 1 !important;
 }
 .confignode-chart .contrail-legend text {
-    font: normal 10px Open Sans;
+    font: normal 11px Open Sans;
+    opacity: 1;
 }
 .confignode-chart .widget-box {
     margin: 0px;

diff --git a/webroot/css/contrail.theme.elements.css b/webroot/css/contrail.theme.elements.css
@@ -4298,15 +4298,11 @@ td.td-actions a.td-action {
     vertical-align: middle;
 }
 
-.stacked-bar-chart-container .tick line{
-    opacity: 0.1;
-  }
-
-.stacked-bar-chart-container .axis {
-  opacity: 0.7;
+.stacked-bar-chart-container .axis line, .stacked-bar-chart-container .axis path{
+    stroke: #e5e5e5;
 }
 
-.stacked-bar-chart-container .axis-label {
+.stacked-bar-chart-container .axis {
   opacity: 0.7;
 }
 

diff --git a/webroot/js/common/core.views.default.config.js b/webroot/js/common/core.views.default.config.js
@@ -119,7 +119,8 @@ define([
             y1Formatter: function(number) {
                 number.toFixed(1);
             },
-            showLegend: true
+            showLegend: true,
+            focusEnable: true
         };
     };
 

diff --git a/webroot/js/models/DonutChartModel.js b/webroot/js/models/DonutChartModel.js
@@ -214,7 +214,7 @@ define([], function () {
                         container.select('g.contrail-chart-title').remove();
                         //Default title is placed at bottom of chart
                         container.append('g')
-                            .attr('transform', 'translate('+parseInt(container.style('width'))/2+', '+(parseInt(container.style('height')) - 5)+')')
+                            .attr('transform', 'translate('+parseInt(container.style('width'))/2+', '+(parseInt(container.style('height')))+')')
                             .attr('class', 'contrail-chart-title')
                             .append('text')
                             .attr('text-anchor', 'middle')

diff --git a/webroot/js/models/LineBarWithFocusChartModel.js b/webroot/js/models/LineBarWithFocusChartModel.js
@@ -114,7 +114,12 @@ define([
         x2Axis.orient('bottom').tickPadding(5);
         y3Axis.orient('left');
         y4Axis.orient('right');
-
+        // Default y2Axis width is more, compared to y1Axis
+        // because assuming max width for tick values of y2Axis which is not required
+        // often.So if it is option we can set where ever it is required.
+        if (chartOptions.y2AxisWidth != null) {
+            y2Axis.width(chartOptions.y2AxisWidth);
+        }
         tooltip.headerEnabled(true).headerFormatter(function(d, i) {
             return xAxis.tickFormat()(d, i);
         });
@@ -687,11 +692,15 @@ define([
             chartModel.lines2.forceY(chartOptions.forceY2);
         }
 
-        chartModel.xAxis.tickFormat(function (d) {
-            return d3.time.format('%H:%M:%S')(new Date(d));
-        });
         if (chartOptions['xFormatter'] != null) {
             chartModel.xAxis.tickFormat(chartOptions['xFormatter']);
+        } else {
+            chartModel.xAxis.tickFormat(function (d) {
+                return d3.time.format('%H:%M:%S')(new Date(d));
+            });
+        }
+        if (chartOptions['xAxisMaxMin'] != null) {
+            chartModel.xAxis.showMaxMin(chartOptions['xAxisMaxMin']);
         }
         chartModel.xAxis.axisLabelDistance(chartOptions.axisLabelDistance);
         if (chartOptions['xAxisLabel'] != null) {

diff --git a/webroot/js/views/DonutChartView.js b/webroot/js/views/DonutChartView.js
@@ -104,10 +104,12 @@ define([
                 requestState: chartDataRequestState
             },
             chartOptions = chartViewConfig['chartOptions'];
-
+        var defaultDataStatusMessage =
+            chartOptions['defaultDataStatusMessage'] != null ?
+                chartOptions['defaultDataStatusMessage'] : true;
         d3.select($(selector)[0]).select('svg').datum(chartDataObj).call(chartModel);
 
-        if (chartDataRequestState !== cowc.DATA_REQUEST_STATE_SUCCESS_NOT_EMPTY) {
+        if (defaultDataStatusMessage && chartDataRequestState !== cowc.DATA_REQUEST_STATE_SUCCESS_NOT_EMPTY) {
             var container = d3.select($(selector).find("svg")[0]),
                 requestStateText = container.selectAll('.nv-requestState').data([cowm.getRequestMessage(chartDataRequestState)]),
                 textPositionX = $(selector).width() / 2,

diff --git a/webroot/js/views/LineBarWithFocusChartView.js b/webroot/js/views/LineBarWithFocusChartView.js
@@ -163,8 +163,7 @@ define([
 
         chartOptions['forceY1'] = getForceY1Axis(chartData, chartOptions['forceY1']);
         chartOptions['forceY2'] = getForceY2Axis(chartData, chartOptions['forceY2']);
-
-        if (chartData.length > 0) {
+        if (chartData.length > 0 && chartOptions['focusEnable']) {
             var values = chartData[0].values,
                 brushExtent = null,
                 start, end;

diff --git a/webroot/templates/core.common.tmpl b/webroot/templates/core.common.tmpl
@@ -2160,7 +2160,7 @@ $(this).parent().closest('tr').next().closest('tr').next().slideToggle(20);$(thi
 </script>
 
 <script type="text/x-handlebars-template" id="core-stacked-bar-chart-template">
-    <div class="stacked-bar-chart-container row-fluid">
+    <div class="stacked-bar-chart-container chart-container row-fluid">
          <!-- <svg style="height:{{height}}px;"></svg> -->
     </div>
 </script>