Skip to content

Commit

Permalink
Merge "Related-Bug:#1664823 Added the following changes for charts 1)…
Browse files Browse the repository at this point in the history 
…On reducing the dimension of the charts container we are hiding the legend, x and y axis lables and ticks. 2)Added few axis related options in charts like showXMinMax: To show first and last values of the axis showXAxis: To show/hide the axis 3)Removed the unnecessary paddings in the charts"
  • Loading branch information
@opencontrail-ci-admin
Zuul authored and opencontrail-ci-admin committed Mar 7, 2017
2 parents 88b173a + a610ef7 commit 0f64015
Show file tree
Hide file tree
Showing 13 changed files with 345 additions and 115 deletions.
11 changes: 9 additions & 2 deletions webroot/common/ui/scss/contrail.custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1242,8 +1242,15 @@ button#close-error-popup{
.custom-grid-stack.show-borders .custom-grid-stack-item {
border: 1px solid #f2f2f2;
}


.custom-grid-stack .custom-grid-stack-item g.nv-axisMin-x text {
text-anchor: start !important;
}
.custom-grid-stack .custom-grid-stack-item g.nv-axisMax-x text {
text-anchor: end !important;
}
.custom-grid-stack .custom-grid-stack-item g.x g.tick text:first {
text-anchor: start !important;
}
/* Start - Event-drops css */
/*.event-drops-tooltip {
position: absolute;
Expand Down
56 changes: 29 additions & 27 deletions webroot/common/ui/templates/core.common.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2407,36 +2407,38 @@
<div class="container-fluid {{#if this.cssClass}}{{{this.cssClass}}}{{/if}}">
</script>
<script type="text/x-handlebars-template" id="custom-chart-legend">
<div class="custom-chart-legend color-selection">
{{#if showControls}}
<div class="pull-left">
{{#each controlsData}}
<label class="pull-left"> {{this.label}} </label>
<div class="pull-left circle {{#IfCompare this.cssClass null operator= '!='}}{{this.cssClass}}{{/IfCompare}}"></div>
{{/each}}
</div>
{{/if}}
{{#if showLegend}}
<div class="pull-right">
{{#each legendData}}
<div class="pull-left" style="padding-right: 10px;">
{{#IfCompare label null operator='!='}}
<label class="pull-left" style="padding-right: 10px;"> {{label}} </label>
{{/IfCompare}}
{{#each this.legend}}
{{#IfCompare ../label null operator='=='}}
{{#IfCompare this.name null operator='!='}}
<label class="pull-left"> {{this.name}} </label>
{{#IfCompare showControls showLegend operator='||'}}
<div class="custom-chart-legend color-selection clearfix">
{{#if showControls}}
<div class="pull-left">
{{#each controlsData}}
<label class="pull-left"> {{this.label}} </label>
<div class="pull-left circle {{#IfCompare this.cssClass null operator= '!='}}{{this.cssClass}}{{/IfCompare}}"></div>
{{/each}}
</div>
{{/if}}
{{#if showLegend}}
<div class="pull-right">
{{#each legendData}}
<div class="pull-left" style="padding-right: 10px;">
{{#IfCompare label null operator='!='}}
<label class="pull-left" style="padding-right: 10px;"> {{label}} </label>
{{/IfCompare}}
{{/IfCompare}}
<div title = {{this.name}} class="pull-left square {{#IfCompare this.cssClass null operator= '!='}}{{this.cssClass}}{{/IfCompare}}"
{{#IfCompare this.color null operator='!='}} style="background:{{this.color}}" {{/IfCompare}}></div>
{{#each this.legend}}
{{#IfCompare ../label null operator='=='}}
{{#IfCompare this.name null operator='!='}}
<label class="pull-left"> {{this.name}} </label>
{{/IfCompare}}
{{/IfCompare}}
<div title = {{this.name}} class="pull-left square {{#IfCompare this.cssClass null operator= '!='}}{{this.cssClass}}{{/IfCompare}}"
{{#IfCompare this.color null operator='!='}} style="background:{{this.color}}" {{/IfCompare}}></div>
{{/each}}
</div>
{{/each}}
</div>
{{/if}}
</div>
{{/each}}
</div>
{{/if}}
</div>
{{/IfCompare}}
</script>
<script type="text/x-handlebars-template" id="carousal-view-template">
<div class="carousel slide" data-ride="carousel">
Expand Down
48 changes: 48 additions & 0 deletions webroot/js/chartconfig.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Copyright (c) 2014 Juniper Networks, Inc. All rights reserved.
*/

define([
'underscore'
], function (_) {
var ChartSettings = function() {
var self = this;
self.config = {
'min-width': {
350: {
'showXAxis': true,
'showXLabel': true
},
200: {
'showLegend': false,
'showXAxis': false,
'showXLabel': false
},
0: {
'showXAxis': false,
'showXLabel': false,
'showYAxis': false,
'showYLabel': false
}
},
'min-height': {
200: {
'showYAxis': true,
'showYLabel': true
},
150: {
'showLegend': false,
'showYAxis': false,
'showYLabel': false
},
0: {
'showXAxis': false,
'showXLabel': false,
'showYAxis': false,
'showYLabel': false
}
}
}
}
return ChartSettings;
});
55 changes: 51 additions & 4 deletions webroot/js/common/chart.utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,11 +197,13 @@ define([
tickPadding: 8,
margin: {
left: 45,
top: 20,
right: 0,
bottom: 15
top: 15,
right: 10,
bottom: 20
},
yAxisOffset: 25,
showXMinMax: true,
showYMinMax: true,
forceY: [0, 0.01],
defaultZeroLineDisplay: true,
tooltipFn: this.defaultLineAreaTooltipFn
Expand All @@ -222,6 +224,8 @@ define([
xAxisLabel: '',
yAxisLabel: '',
groupBy: 'Source',
showXMinMax: true,
showYMinMax: true,
yField: '',
yFieldOperation: 'average',
// bucketSize: this.STATS_BUCKET_DURATION,
Expand All @@ -233,7 +237,7 @@ define([
margin: {
left: 58,
top: 20,
right: 0,
right: 10,
bottom: 20
},
tickPadding: 8,
Expand Down Expand Up @@ -284,6 +288,49 @@ define([
return defaultViewConfigMap[chartType]
else
return {};
},
updateTickOptionsInChart: function (chartObj, chartOptions) {
var showXMinMax = cowu.getValueByJsonPath(chartOptions, 'showXMinMax', false),
showYMinMax = cowu.getValueByJsonPath(chartOptions, 'showYMinMax', false),
xTickCnt = cowu.getValueByJsonPath(chartOptions, 'xTickCnt'),
showTicks = cowu.getValueByJsonPath(chartOptions, 'showTicks', true)
showXAxis = cowu.getValueByJsonPath(chartOptions, 'showXAxis', true),
showYAxis = cowu.getValueByJsonPath(chartOptions, 'showYAxis', true),
yTickCnt = cowu.getValueByJsonPath(chartOptions, 'yTickCnt');
if (xTickCnt) {
chartObj.xAxis.ticks(xTickCnt);
}
if (yTickCnt) {
if (chartObj.y1Axis != null) {
chartObj.y1Axis.ticks(yTickCnt)
}
chartObj.yAxis.ticks(yTickCnt);
}
if (!showTicks) {
chartObj.xAxis.ticks(0);
chartObj.y1Axis != null ? chartObj.y1Axis.ticks(0): chartObj.yAxis.ticks(0);
if (chartObj.x2Axis != null) {
chartObj.x2Axis.ticks(0);
}
if (chartObj.y2Axis != null) {
chartObj.y2Axis.ticks(0);
}
}
// If showXMinMax/showYMinMax is true we are
// hiding the other ticks.
if (showXMinMax) {
chartObj.xAxis.ticks(0);
if (chartObj.x2Axis != null) {
chartObj.x2Axis.ticks(0);
}
}
if (showYMinMax) {
chartObj.y1Axis != null ? chartObj.y1Axis.ticks(0): chartObj.yAxis.ticks(0);
if (chartObj.y2Axis != null) {
chartObj.y2Axis.ticks(0);
}
}
return chartObj;
}
};

Expand Down
4 changes: 3 additions & 1 deletion webroot/js/common/core.app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ function getCoreAppPaths(coreBaseDir, coreBuildDir, env) {
'jdorn-jsoneditor' : coreWebDir + '/assets/jdorn-jsoneditor/js/jdorn-jsoneditor',
'jquery-linedtextarea' : coreWebDir + '/assets/jquery-linedtextarea/js/jquery-linedtextarea',
'qe-module' : coreWebDir + '/reports/qe/ui/js/qe.module',
'udd-module' : coreWebDir + '/reports/udd/ui/js/udd.module'
'udd-module' : coreWebDir + '/reports/udd/ui/js/udd.module',
'chart-config' : coreWebDir + '/js/chartconfig'
};

//Separate out aliases that need to be there for both prod & dev environments
Expand Down Expand Up @@ -484,6 +485,7 @@ var coreBundles = {
'help-handler',
'content-handler',
'validation',
'chart-config',
'core-basedir/js/views/BarChartInfoView',
'core-basedir/js/views/BreadcrumbDropdownView',
'core-basedir/js/views/BreadcrumbTextView',
Expand Down
39 changes: 26 additions & 13 deletions webroot/js/models/LineBarWithFocusChartModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,19 @@ define([
, defaultState = null
, legendLeftAxisHint = ' (left axis)'
, legendRightAxisHint = ' (right axis)'
, showXAxis = cowu.getValueByJsonPath(chartOptions, 'showXAxis', true)
, showYAxis = cowu.getValueByJsonPath(chartOptions, 'showYAxis', true)
, showXMinMax = cowu.getValueByJsonPath(chartOptions, 'showXMinMax', false)
, showYMinMax = cowu.getValueByJsonPath(chartOptions, 'showYMinMax', false)
;

if (!showXAxis) {
margin['bottom'] =0;
}
if (!showYAxis) {
margin['left'] = 0;
margin['right'] = 0;
}
lines.clipEdge(true);
lines2.interactive(false);
xAxis.orient('bottom').tickPadding(5);
Expand Down Expand Up @@ -507,8 +518,10 @@ define([

xAxis.domain([Math.ceil(extent[0]), Math.floor(extent[1])]);

g.select('.nv-x.nv-axis').transition().duration(transitionDuration)
.call(xAxis);
if(showXAxis) {
g.select('.nv-x.nv-axis').transition().duration(transitionDuration)
.call(xAxis);
}

// Update Main (Focus) Bars and Lines
focusBarsWrap.transition().duration(transitionDuration).call(bars);
Expand All @@ -531,10 +544,12 @@ define([
g.select('.nv-focus .nv-y2.nv-axis')
.attr('transform', 'translate(' + x2.range()[1] + ',0)');

g.select('.nv-focus .nv-y1.nv-axis').transition().duration(transitionDuration)
.call(y1Axis);
g.select('.nv-focus .nv-y2.nv-axis').transition().duration(transitionDuration)
.call(y2Axis);
if(showYAxis) {
g.select('.nv-focus .nv-y1.nv-axis').transition().duration(transitionDuration)
.call(y1Axis);
g.select('.nv-focus .nv-y2.nv-axis').transition().duration(transitionDuration)
.call(y2Axis);
}
}

onBrush();
Expand Down Expand Up @@ -698,30 +713,28 @@ define([
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) {
chartModel.xAxis.axisLabel(chartOptions['xAxisLabel']);
}
if (chartOptions['xAxisTicksCnt'] != null) {
chartModel.xAxis.ticks(parseInt(chartOptions['xAxisTicksCnt']));
chartModel.xAxis.ticks(parseInt(chartOptions['xAxisTicksCnt']))
.showMaxMin(showXMinMax);
}

chartModel.x2Axis.axisLabel("Time").tickFormat(function (d) {
return d3.time.format('%H:%M:%S')(new Date(d));
});

chUtils.updateTickOptionsInChart(chartModel, chartOptions);
chartModel.y1Axis.axisLabel(chartOptions.y1AxisLabel)
.axisLabelDistance(chartOptions.axisLabelDistance)
.tickFormat(chartOptions['y1Formatter'])
.showMaxMin(false);
.showMaxMin(showYMinMax);

chartModel.y2Axis.axisLabel(chartOptions.y2AxisLabel)
.axisLabelDistance(chartOptions.axisLabelDistance)
.tickFormat(chartOptions['y2Formatter'])
.showMaxMin(false);
.showMaxMin(showYMinMax);

chartModel.showLegend(chartOptions.showLegend);

Expand Down

0 comments on commit 0f64015

Please sign in to comment.