Skip to content

Commit

Permalink
Merge pull request #2177 from WikiWatershed/tt/compare-view-revamp-tr…
Browse files Browse the repository at this point in the history 
…55-water-quality-charts-table

Compare View Revamp: TR-55 Water Quality Charts and Table

Connects #2076
  • Loading branch information
@rajadain
rajadain committed Aug 24, 2017
2 parents 02af0ef + 85a3820 commit 0184de4
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 19 deletions.
60 changes: 60 additions & 0 deletions src/mmw/js/src/compare/models.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ var ChartRowModel = Backbone.Model.extend({
legendItems: null,
values: [],
unit: '',
unitLabel: '',
precipitation: null,
},
});
Expand All @@ -34,6 +35,7 @@ var ChartRowsCollection = Backbone.Collection.extend({
var update = _.bind(this.update, this);

this.scenarios = options.scenarios;
this.aoiVolumeModel = options.aoiVolumeModel;

this.scenarios.forEach(function(scenario) {
scenario.get('results').on('change', update);
Expand Down Expand Up @@ -75,6 +77,31 @@ var Tr55RunoffCharts = ChartRowsCollection.extend({
}
});

var Tr55QualityCharts = ChartRowsCollection.extend({
update: function() {
var aoivm = this.aoiVolumeModel,
results = this.scenarios.map(function(scenario) {
return scenario.get('results')
.findWhere({ name: 'quality' })
.get('result');
});

this.forEach(function(chart) {
var name = chart.get('name'),
values = _.map(results, function(result) {
var measures = result.quality.modified,
load = _.find(measures, { measure: name }).load;

return aoivm.getLoadingRate(load);
});

chart.set({
values: values,
});
});
}
});

var TableRowModel = Backbone.Model.extend({
defaults: {
name: '',
Expand All @@ -96,6 +123,7 @@ var TableRowsCollection = Backbone.Collection.extend({
var update = _.bind(this.update, this);

this.scenarios = attrs.scenarios;
this.aoiVolumeModel = attrs.aoiVolumeModel;

this.scenarios.forEach(function(scenario) {
scenario.get('results').on('change', update);
Expand Down Expand Up @@ -128,6 +156,35 @@ var Tr55RunoffTable = TableRowsCollection.extend({
}
});

var Tr55QualityTable = TableRowsCollection.extend({
update: function() {
var aoivm = this.aoiVolumeModel,
results = this.scenarios.map(function(scenario) {
return scenario.get('results')
.findWhere({ name: 'quality' })
.get('result');
}),
get = function(key) {
return function(result) {
var measures = result.quality.modified,
load = _.find(measures, { measure: key }).load;

return aoivm.getLoadingRate(load);
};
},
tss = _.map(results, get('Total Suspended Solids')),
tn = _.map(results, get('Total Nitrogen')),
tp = _.map(results, get('Total Phosphorus')),
rows = [
{ name: "Total Suspended Solids", unit: "kg/ha", values: tss },
{ name: "Total Nitrogen" , unit: "kg/ha", values: tn },
{ name: "Total Phosphorus" , unit: "kg/ha", values: tp },
];

this.reset(rows);
}
});

var TabModel = Backbone.Model.extend({
defaults: {
name: '',
Expand Down Expand Up @@ -158,6 +215,9 @@ var WindowModel = Backbone.Model.extend({

module.exports = {
ControlsCollection: ControlsCollection,
ChartRowModel: ChartRowModel,
Tr55QualityTable: Tr55QualityTable,
Tr55QualityCharts: Tr55QualityCharts,
Tr55RunoffTable: Tr55RunoffTable,
Tr55RunoffCharts: Tr55RunoffCharts,
TabsCollection: TabsCollection,
Expand Down
92 changes: 73 additions & 19 deletions src/mmw/js/src/compare/views.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ var _ = require('lodash'),
models = require('./models'),
modelingModels = require('../modeling/models'),
modelingViews = require('../modeling/views'),
tr55Models = require('../modeling/tr55/models'),
PrecipitationView = require('../modeling/controls').PrecipitationView,
modConfigUtils = require('../modeling/modificationConfigUtils'),
compareWindowTmpl = require('./templates/compareWindow.html'),
Expand Down Expand Up @@ -51,17 +52,22 @@ var CompareWindow2 = Marionette.LayoutView.extend({
},

onShow: function() {
this.tabRegion.show(new TabPanelsView({
collection: this.model.get('tabs'),
}));
var tabPanelsView = new TabPanelsView({
collection: this.model.get('tabs'),
}),
showSectionsView = _.bind(this.showSectionsView, this);

tabPanelsView.on('renderTabs', showSectionsView);

this.tabRegion.show(tabPanelsView);
this.inputsRegion.show(new InputsView({
model: this.model,
}));
this.scenariosRegion.show(new ScenariosRowView({
collection: this.model.get('scenarios'),
}));

this.showSectionsView();
showSectionsView();
},

showSectionsView: function() {
Expand Down Expand Up @@ -94,8 +100,12 @@ var TabPanelView = Marionette.ItemView.extend({
role: 'tab',
},

events: {
'click': 'selectTab',
modelEvents: {
'change': 'render',
},

triggers: {
'click': 'tab:clicked',
},

onRender: function() {
Expand All @@ -105,17 +115,24 @@ var TabPanelView = Marionette.ItemView.extend({
this.$el.removeClass('active');
}
},

selectTab: function(e) {
// TODO: Make this select the tab

e.preventDefault();
return false;
},
});

var TabPanelsView = Marionette.CollectionView.extend({
childView: TabPanelView,

onChildviewTabClicked: function(view) {
if (view.model.get('active')) {
// Active tab clicked. Do nothing.
return;
}

this.collection.findWhere({ active: true })
.set({ active: false });

view.model.set({ active: true });

this.triggerMethod('renderTabs');
},
});

var InputsView = Marionette.LayoutView.extend({
Expand Down Expand Up @@ -152,10 +169,14 @@ var InputsView = Marionette.LayoutView.extend({
},

setChartView: function() {
this.ui.chartButton.addClass('active');
this.ui.tableButton.removeClass('active');
this.model.set({ mode: models.constants.CHART });
},

setTableView: function() {
this.ui.chartButton.removeClass('active');
this.ui.tableButton.addClass('active');
this.model.set({ mode: models.constants.TABLE });
},
});
Expand Down Expand Up @@ -252,7 +273,8 @@ var ChartRowView = Marionette.ItemView.extend({
var chartDiv = this.model.get('chartDiv'),
chartEl = document.getElementById(chartDiv),
name = this.model.get('name'),
label = 'Level (' + this.model.get('unit') + ')',
label = this.model.get('unitLabel') +
' (' + this.model.get('unit') + ')',
colors = this.model.get('seriesColors'),
stacked = name.indexOf('Hydrology') > -1,
yMax = stacked ? this.model.get('precipitation') : null,
Expand Down Expand Up @@ -565,7 +587,9 @@ var CompareModificationsView = Marionette.ItemView.extend({

function getTr55Tabs(scenarios) {
// TODO Account for loading and error scenarios
var runoffTable = new models.Tr55RunoffTable({ scenarios: scenarios }),
var aoi = App.currentProject.get('area_of_interest'),
aoiVolumeModel = new tr55Models.AoiVolumeModel({ areaOfInterest: aoi }),
runoffTable = new models.Tr55RunoffTable({ scenarios: scenarios }),
runoffCharts = new models.Tr55RunoffCharts([
{
key: 'combined',
Expand All @@ -587,6 +611,7 @@ function getTr55Tabs(scenarios) {
},
],
unit: 'cm',
unitLabel: 'Level',
},
{
key: 'et',
Expand All @@ -595,6 +620,7 @@ function getTr55Tabs(scenarios) {
seriesColors: ['#C2D33C'],
legendItems: null,
unit: 'cm',
unitLabel: 'Level',
},
{
key: 'runoff',
Expand All @@ -603,6 +629,7 @@ function getTr55Tabs(scenarios) {
seriesColors: ['#CF4300'],
legendItems: null,
unit: 'cm',
unitLabel: 'Level',
},
{
key: 'inf',
Expand All @@ -611,12 +638,39 @@ function getTr55Tabs(scenarios) {
seriesColors: ['#F8AA00'],
legendItems: null,
unit: 'cm',
unitLabel: 'Level',
}
], { scenarios: scenarios }),
// TODO Calculate Water Quality table
qualityTable = [],
// TODO Calculate Water Quality charts
qualityCharts = [];
qualityTable = new models.Tr55QualityTable({
scenarios: scenarios,
aoiVolumeModel: aoiVolumeModel,
}),
qualityCharts = new models.Tr55QualityCharts([
{
name: 'Total Suspended Solids',
chartDiv: 'tss-chart',
seriesColors: ['#389b9b'],
legendItems: null,
unit: 'kg/ha',
unitLabel: 'Loading Rate',
},
{
name: 'Total Nitrogen',
chartDiv: 'tn-chart',
seriesColors: ['#389b9b'],
legendItems: null,
unit: 'kg/ha',
unitLabel: 'Loading Rate',
},
{
name: 'Total Phosphorus',
chartDiv: 'tp-chart',
seriesColors: ['#389b9b'],
legendItems: null,
unit: 'kg/ha',
unitLabel: 'Loading Rate',
}
], { scenarios: scenarios, aoiVolumeModel: aoiVolumeModel });

return new models.TabsCollection([
{
Expand Down
20 changes: 20 additions & 0 deletions src/mmw/js/src/core/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@ function renderCompareMultibarChart(chartEl, name, label, colors, stacked, yMax,
minBarWidth: 120,
maxBarWidth: 150,
},
yTickFormat = stacked ? '0.1f' : yFormat(),
chart = nv.models.multiBarChart(),
svg = makeSvg(chartEl),
$svg = $(svg);
Expand All @@ -335,6 +336,24 @@ function renderCompareMultibarChart(chartEl, name, label, colors, stacked, yMax,
chart.width(chartEl.offsetWidth);
}

function yFormat() {
var getYs = function(d) { return _.map(d.values, 'y'); },
nonZero = function(x) { return x > 0; },
ys = _(data).map(getYs).flatten().filter(nonZero).value(),
minY = Math.min.apply(null, ys);

if (minY > 1) {
return '0.1f';
}

// Count decimal places to most significant digit, up to 4
for (var i = 0; minY < 1 && i < 4; i++) {
minY *= 10;
}

return '0.0' + i + 'f';
}

nv.addGraph(function() {
chart.showLegend(false)
.showControls(false)
Expand All @@ -349,6 +368,7 @@ function renderCompareMultibarChart(chartEl, name, label, colors, stacked, yMax,

chart.yAxis
.axisLabel(label)
.tickFormat(d3.format(yTickFormat))
.showMaxMin(false);

chart.tooltip.enabled(true);
Expand Down

0 comments on commit 0184de4

Please sign in to comment.