Skip to content

Commit

Permalink
Related-Bug: #1435268
Browse files Browse the repository at this point in the history 
1. Added option to display filtered row count in grid header
2. Keep-track of filters applied/removed on crossfilter dimension [manageCrossFilters Class]
3. Maintain colorFilter dimension in crossFilter
4. Fixed issue with clicking Esc while drag selection
5. If dragged region doesn't enclose any node,ignore it i.e no drill-down
6. Changed the order of colors (last is blue)
7. Clean the tooltip on drill-down
8. Disable multiTooltip
9. Disable dblClik if single click is processed
10. Changed bubble-sizes
11. Moved bucketization code to MVC
12. Added new argument for tooltip functions to decide between old & new
formats
13. Added name dimension on vRouter crossfilter
14. Add dragFunctionality on scatterChart only in case of bucketization

Change-Id: Ieca3643556c0d04c107d4d0b43f6bd1cd66b018c
  • Loading branch information
@knagakiran
knagakiran committed May 5, 2015
1 parent 935544b commit c264a59
Show file tree
Hide file tree
Showing 8 changed files with 1,082 additions and 613 deletions.
942 changes: 437 additions & 505 deletions webroot/js/chart-utils.js
View file

Large diffs are not rendered by default.

74 changes: 42 additions & 32 deletions webroot/js/d3-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,69 +585,79 @@ function updateChartOnResize(selector,chart){
function initScatterBubbleChart(selector, data, chart, chartOptions) {
nv.addGraph(function () {
//No need to set the sizeDomain,as we already normalize the sizes before invoking this function
chart = nv.models.scatterChart()
chartModel = nv.models.scatterChart()
.showDistX(false)
.showDistY(false)
.sizeDomain([0.7,2])
//.sizeRange([50,500])
.sizeDomain([4,14])
.sizeRange([4,14])
// .sizeDomain([0.7,2])
// .sizeRange([200,1500])
.tooltipXContent(null)
.tooltipYContent(null)
.showTooltipLines(false)
.tooltipContent(chartOptions['tooltipFn']);

if(chartOptions['tooltipRenderedFn'] != null)
chart.tooltipRenderedFn(chartOptions['tooltipRenderedFn']);
chartModel.tooltipRenderedFn(chartOptions['tooltipRenderedFn']);
if (chartOptions['forceX'] != null)
chart.forceX(chartOptions['forceX']);
chartModel.forceX(chartOptions['forceX']);
if (chartOptions['forceY'] != null)
chart.forceY(chartOptions['forceY']);
chartModel.forceY(chartOptions['forceY']);
if(chartOptions['seriesMap'] != null)
chart.seriesMap(chartOptions['seriesMap']);
if(chartOptions['xPositive'] != null && chart.scatter != null)
chart.scatter.xPositive(chartOptions['xPositive']);
if(chartOptions['yPositive'] != null && chart.scatter != null)
chart.scatter.yPositive(chartOptions['yPositive']);
if(chartOptions['addDomainBuffer'] != null && chart.scatter != null)
chart.scatter.addDomainBuffer(chartOptions['addDomainBuffer']);
if(chartOptions['useVoronoi'] != null && chart.scatter != null)
chart.scatter.useVoronoi(chartOptions['useVoronoi']);
chartModel.seriesMap(chartOptions['seriesMap']);
if(chartOptions['xPositive'] != null && chartModel.scatter != null)
chartModel.scatter.xPositive(chartOptions['xPositive']);
if(chartOptions['yPositive'] != null && chartModel.scatter != null)
chartModel.scatter.yPositive(chartOptions['yPositive']);
if(chartOptions['addDomainBuffer'] != null && chartModel.scatter != null)
chartModel.scatter.addDomainBuffer(chartOptions['addDomainBuffer']);
if(chartOptions['useVoronoi'] != null && chartModel.scatter != null)
chartModel.scatter.useVoronoi(chartOptions['useVoronoi']);
if(chartOptions['useSizeAsRadius'] != null && chartModel.scatter != null)
chartModel.scatter.useSizeAsRadius(chartOptions['useSizeAsRadius']);

//If there is only set of bubbles and showLegend is set to false then disable the legend
if(data.length == 1 || chartOptions['showLegend'] == false) {
chart.showLegend(false);
chartModel.showLegend(false);
}

$(selector).data('chart', chart);
chart.xAxis.tickFormat(chartOptions['xLblFormat']);
chart.yAxis.tickFormat(chartOptions['yLblFormat']);
chart.xAxis.showMaxMin(false);
chart.yAxis.showMaxMin(false);
chart.yAxis.axisLabel(chartOptions['yLbl']);
chart.xAxis.axisLabel(chartOptions['xLbl']);
chart.yAxis.ticks(3);
$(selector).data('chart', chartModel);
chartModel.xAxis.tickFormat(chartOptions['xLblFormat']);
chartModel.yAxis.tickFormat(chartOptions['yLblFormat']);
chartModel.xAxis.showMaxMin(false);
chartModel.yAxis.showMaxMin(false);
chartModel.yAxis.axisLabel(chartOptions['yLbl']);
chartModel.xAxis.axisLabel(chartOptions['xLbl']);
chartModel.yAxis.ticks(3);

$(selector).append('<svg></svg>');

chart.dispatch.on('stateChange', chartOptions['stateChangeFunction']);
chart.scatter.dispatch.on('elementClick', chartOptions['elementClickFunction']);
chart.scatter.dispatch.on('elementMouseout',chartOptions['elementMouseoutFn']);
chart.scatter.dispatch.on('elementMouseover',chartOptions['elementMouseoverFn']);
chartModel.dispatch.on('stateChange', chartOptions['stateChangeFunction']);
chartModel.scatter.dispatch.on('elementClick', chartOptions['elementClickFunction']);
chartModel.scatter.dispatch.on('elementDblClick', chartOptions['elementDoubleClickFunction']);
chartModel.scatter.dispatch.on('elementMouseout',chartOptions['elementMouseoutFn']);
chartModel.scatter.dispatch.on('elementMouseover',chartOptions['elementMouseoverFn']);
$(selector).on('dblclick',chartOptions['elementDblClickFunction']);
if(!($(selector).is(':visible'))) {
$(selector).find('svg').bind("refresh", function() {
d3.select($(selector)[0]).select('svg').datum(data).call(chart);
d3.select($(selector)[0]).select('svg').datum(data).call(chartModel);
});
} else {
d3.select($(selector)[0]).select('svg').datum(data).call(chart);
d3.select($(selector)[0]).select('svg').datum(data).call(chartModel);
}

nv.utils.windowResize(function(){
updateChartOnResize(selector,chart);
updateChartOnResize(selector,chartModel);
});
//Seems like in d3 chart renders with some delay so this deferred object helps in that situation,which resolves once the chart is rendered
if(chartOptions['deferredObj'] != null)
chartOptions['deferredObj'].resolve();
return chart;
return chartModel;
},function() {
if(typeof(chartOptions['onInitializingScatterChart']) == 'function') {
chartOptions['onInitializingScatterChart']();
}
$(selector).data('initialized',true);
});
}

Expand Down
3 changes: 2 additions & 1 deletion webroot/js/dashboard-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,8 @@ function getNodeStatusForSummaryPages(data,page) {

var dashboardUtils = {
sortNodesByColor: function(a,b) {
var colorPriorities = [d3Colors['green'],d3Colors['blue'],d3Colors['orange'],d3Colors['red']];
// var colorPriorities = [d3Colors['green'],d3Colors['blue'],d3Colors['orange'],d3Colors['red']];
var colorPriorities = [d3Colors['blue'],d3Colors['green'],d3Colors['orange'],d3Colors['red']];
var aColor = $.inArray(a['color'],colorPriorities);
var bColor = $.inArray(b['color'],colorPriorities);
return aColor-bColor;
Expand Down
32 changes: 18 additions & 14 deletions webroot/js/models/ScatterChartModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,14 @@ define([
var chartModel = nv.models.scatterChart()
.showDistX(false)
.showDistY(false)
// .sizeDomain([4,14])
// .sizeRange([4,14])
.sizeDomain([0.7,2])
// .sizeRange([200,1500])
.tooltipXContent(null)
.tooltipYContent(null)
.showTooltipLines(false);

var d3Scale = d3.scale.linear().range([1, 2]).domain(chartOptions['sizeMinMax']);

//Adjust the size domain to have limit on minumum bubble size
$.each(chartData, function (idx, currSeries) {
currSeries['values'] = $.each(currSeries['values'], function (idx, obj) {
obj['size'] = d3Scale(obj['size']);
});
});

chartModel.tooltipContent(chartOptions['tooltipFn']);
.showTooltipLines(false)
.tooltipContent(chartOptions['tooltipFn']);

if (chartOptions['tooltipRenderedFn'] != null)
chartModel.tooltipRenderedFn(chartOptions['tooltipRenderedFn']);
Expand All @@ -41,9 +34,15 @@ define([
chartModel.scatter.addDomainBuffer(chartOptions['addDomainBuffer']);
if (chartOptions['useVoronoi'] != null && chartModel.scatter != null)
chartModel.scatter.useVoronoi(chartOptions['useVoronoi']);
if (chartOptions['useSizeAsRadius'] != null && chartModel.scatter != null)
chartModel.scatter.useSizeAsRadius(chartOptions['useSizeAsRadius']);
if (chartOptions['sizeDomain'] != null && chartModel.scatter != null)
chartModel.scatter.sizeDomain(chartOptions['sizeDomain']);
if (chartOptions['sizeRange'] != null && chartModel.scatter != null)
chartModel.scatter.sizeRange(chartOptions['sizeRange']);

//If more than one category is displayed,enable showLegend
if (chartData.length == 1) {
if (chartData.length == 1 || chartOptions['showLegend'] == false) {
chartModel.showLegend(false);
}

Expand All @@ -56,7 +55,12 @@ define([
chartModel.yAxis.ticks(3);

chartModel.dispatch.on('stateChange', chartOptions['stateChangeFunction']);
chartModel.legend.dispatch.on('legendDblclick', function(e) {
console.info('legendDblclick');
d3.event.stopPropagation();
});
chartModel.scatter.dispatch.on('elementClick', chartOptions['elementClickFunction']);
chartModel.scatter.dispatch.on('elementDblClick', chartOptions['elementDoubleClickFunction']);
chartModel.scatter.dispatch.on('elementMouseout', chartOptions['elementMouseoutFn']);
chartModel.scatter.dispatch.on('elementMouseover', chartOptions['elementMouseoverFn']);

Expand All @@ -66,4 +70,4 @@ define([
};

return ScatterChartModel;
});
});
24 changes: 19 additions & 5 deletions webroot/js/slickgrid-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ function getDefaultGridConfig() {
initContrailGrid(dataView);
initClientSidePagination();
initGridFooter();
initDataView();
initDataView(gridConfig);
dataView.setSearchFilter(searchColumns, searchFilter);
dataView.setData(gridDataSource.data);
performSort(gridSortColumns);
Expand Down Expand Up @@ -153,7 +153,7 @@ function getDefaultGridConfig() {
}
initClientSidePagination();
initGridFooter();
initDataView();
initDataView(gridConfig);
dataView.setSearchFilter(searchColumns, searchFilter);
dataView.setData(response);
performSort(gridSortColumns);
Expand Down Expand Up @@ -193,7 +193,7 @@ function getDefaultGridConfig() {
var dataViewData = dataView.getItems();
dataView.setData([]);
initContrailGrid(dataView);
initDataView();
initDataView(gridConfig);
dataView.setSearchFilter(searchColumns, searchFilter);
initClientSidePagination();
initGridFooter();
Expand Down Expand Up @@ -750,8 +750,8 @@ function getDefaultGridConfig() {
}
});
};

function initDataView() {
function initDataView(gridConfig) {
eventHandlerMap.dataView['onDataUpdate'] = function(e, args) {
setTimeout(function() {
//Refresh the grid only if it's not destroyed
Expand All @@ -760,6 +760,20 @@ function getDefaultGridConfig() {
grid.updateRowCount();
grid.render();

//Display filtered count in grid header
if(gridConfig.header.showFilteredCntInHeader) {
var totalRowCnt,filteredRowCnt;
if(grid.getData() != null && grid.getData().getPagingInfo() != null) {
totalRowCnt = grid.getData().getItems().length;
filteredRowCnt = grid.getData().getPagingInfo()['totalRows']
}
if(totalRowCnt == filteredRowCnt) {
gridContainer.find('.grid-header-text').text(gridConfig.header.title.text + " (" + totalRowCnt + ")");
} else {
gridContainer.find('.grid-header-text').text(gridConfig.header.title.text + " (" + filteredRowCnt + " of " + totalRowCnt + ")");
}
}

//onRowCount Changed
if (args.previous != args.current) {
gridContainer.data('contrailGrid').removeGridMessage();
Expand Down

0 comments on commit c264a59

Please sign in to comment.