Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compare View: TR-55 Runoff Charts #2123

Closed
wants to merge 1 commit into from
Closed

Compare View: TR-55 Runoff Charts #2123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion src/mmw/js/src/compare/models.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,22 @@ var Backbone = require('../../shim/backbone'),
var CHART = 'chart',
TABLE = 'table';

var ChartRowModel = Backbone.Model.extend({
defaults: {
name: '',
chartDiv: '',
seriesColors: [],
legendItems: null,
values: [],
unit: '',
precipitation: null,
},
});

var ChartRowsCollection = Backbone.Collection.extend({
model: ChartRowModel,
});

var TableRowModel = Backbone.Model.extend({
defaults: {
name: '',
Expand All @@ -23,13 +39,15 @@ var TabModel = Backbone.Model.extend({
name: '',
active: false,
table: null, // TableRowsCollection
charts: null, // ChartRowCollection
},

initialize: function(attrs) {
Backbone.Model.prototype.initialize.apply(this, arguments);

this.set({
table: new TableRowsCollection(attrs.table),
charts: new ChartRowsCollection(attrs.charts),
});
},
});
Expand All @@ -41,7 +59,7 @@ var TabsCollection = Backbone.Collection.extend({
var WindowModel = Backbone.Model.extend({
defaults: {
controls: null, // ModelPackageControlsCollection
mode: TABLE, // or CHART
mode: CHART, // or TABLE
scenarios: null, // ScenariosCollection
tabs: null, // TabsCollection
},
Expand All @@ -52,6 +70,7 @@ var WindowModel = Backbone.Model.extend({
this.set({
controls: new ControlsCollection(attrs.controls),
tabs: new TabsCollection(attrs.tabs),
scenarios: attrs.scenarios,
});
},

Expand All @@ -63,6 +82,8 @@ var WindowModel = Backbone.Model.extend({
});

module.exports = {
ChartRowModel: ChartRowModel,
ChartRowsCollection: ChartRowsCollection,
TableRowModel: TableRowModel,
TableRowsCollection: TableRowsCollection,
TabModel: TabModel,
Expand Down
20 changes: 20 additions & 0 deletions src/mmw/js/src/compare/templates/compareChartRow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div class="compare-scenario-row-description compare-chart-row-description">
<h2>
{{ name }}
</h2>
{% if legendItems %}
<div>
{% for item in legendItems %}
<div>
<span class="scenario-badge" id={{ item.badgeId }}></span>
{{ item.name }}
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="compare-scenario-row-content-container">
<div class="compare-scenario-row-content">
<div class="compare-bar-chart" id={{ chartDiv }}></div>
</div>
</div>
60 changes: 0 additions & 60 deletions src/mmw/js/src/compare/templates/compareWindow2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,64 +31,4 @@ <h2>Scenarios</h2>
</div>
</div>
<div class="compare-sections">
<div class="compare-section">
<div class="compare-scenario-row-description">
<h2>Combined Hydrology</h2>
<ul>
<li>Evapotranspiration</li>
<li>Runoff</li>
<li>Infiltration</li>
</ul>
</div>
<div class="compare-scenario-row-content-container">
<div class="compare-scenario-row-content">
<div class="compare-scenario-samplechartplaceholder"></div>
</div>
</div>
</div>
<div class="compare-section">
<div class="compare-scenario-row-description">
<h2>Combined Hydrology</h2>
<ul>
<li>Evapotranspiration</li>
<li>Runoff</li>
<li>Infiltration</li>
</ul>
</div>
<div class="compare-scenario-row-content-container">
<div class="compare-scenario-row-content">
<div class="compare-scenario-samplechartplaceholder"></div>
</div>
</div>
</div>
<div class="compare-section">
<div class="compare-scenario-row-description">
<h2>Evapotranspiration</h2>
</div>
<div class="compare-scenario-row-content-container">
<div class="compare-scenario-row-content">
<div class="compare-scenario-samplechartplaceholder"></div>
</div>
</div>
</div>
<div class="compare-section">
<div class="compare-scenario-row-description">
<h2>Runoff</h2>
</div>
<div class="compare-scenario-row-content-container">
<div class="compare-scenario-row-content">
<div class="compare-scenario-samplechartplaceholder"></div>
</div>
</div>
</div>
<div class="compare-section">
<div class="compare-scenario-row-description">
<h2>Infiltration</h2>
</div>
<div class="compare-scenario-row-content-container">
<div class="compare-scenario-row-content">
<div class="compare-scenario-samplechartplaceholder"></div>
</div>
</div>
</div>
</div>
167 changes: 154 additions & 13 deletions src/mmw/js/src/compare/views.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var _ = require('lodash'),
App = require('../app'),
coreModels = require('../core/models'),
coreViews = require('../core/views'),
chart = require('../core/chart.js'),
models = require('./models'),
modelingModels = require('../modeling/models'),
modelingViews = require('../modeling/views'),
Expand All @@ -16,6 +17,7 @@ var _ = require('lodash'),
compareTabPanelTmpl = require('./templates/compareTabPanel.html'),
compareInputsTmpl = require('./templates/compareInputs.html'),
compareScenarioItemTmpl = require('./templates/compareScenarioItem.html'),
compareChartRowTmpl = require('./templates/compareChartRow.html'),
compareTableRowTmpl = require('./templates/compareTableRow.html'),
compareScenariosTmpl = require('./templates/compareScenarios.html'),
compareScenarioTmpl = require('./templates/compareScenario.html'),
Expand All @@ -36,7 +38,7 @@ var CompareWindow2 = Marionette.LayoutView.extend({
},

modelEvents: {
'change:mode': 'showSectionsView',
'change:mode change:tabs': 'showSectionsView',
},

regions: {
Expand All @@ -46,6 +48,18 @@ var CompareWindow2 = Marionette.LayoutView.extend({
sectionsRegion: '.compare-sections',
},

initialize: function() {
var self = this;
this.model.get('scenarios').forEach(function(scenario) {
scenario.get('results').on('change', function(r) {
if (r.get('name') === 'runoff' && !r.get('polling')) {
self.model.set('tabs', new models.TabsCollection(
formatTr55CompareData(self.model.get('scenarios'))));
}
});
});
},

onShow: function() {
this.tabRegion.show(new TabPanelsView({
collection: this.model.get('tabs'),
Expand All @@ -62,8 +76,11 @@ var CompareWindow2 = Marionette.LayoutView.extend({

showSectionsView: function() {
if (this.model.get('mode') === models.constants.CHART) {
// TODO: Show Chart View
this.sectionsRegion.empty();
this.sectionsRegion.show(new ChartView({
collection: this.model.get('tabs')
.findWhere({ active: true })
.get('charts'),
}));
} else {
this.sectionsRegion.show(new TableView({
collection: this.model.get('tabs')
Expand Down Expand Up @@ -163,6 +180,53 @@ var ScenariosRowView = Marionette.CollectionView.extend({
childView: ScenarioItemView,
});

var ChartRowView = Marionette.ItemView.extend({
model: models.ChartRowModel,
className: 'compare-chart-row',
template: compareChartRowTmpl,

onAttach: function() {
this.addChart();
},

addChart: function() {
var chartDiv = this.model.get("chartDiv"),
chartEl = document.getElementById(chartDiv),
name = this.model.get("name"),
label = "Level (" + this.model.get("unit") + ")",
colors = this.model.get("seriesColors"),
stacked = name.indexOf("Hydrology") > -1,
precipitation = this.model.get("precipitation"),
values = this.model.get("values"),
data = stacked ? ["et", "runoff", "inf"].map(function(key) {
return {
key: key,
values: values.map(function(value, index) {
return {
x: "Series " + index,
y: value[key],
};
})
};
}) : [{
key: name,
values: values.map(function(value, index) {
return {
x: 'Series ' + index,
y: value,
};
}),
}];

chart.renderCompareMultibarChart(chartEl, name, label, colors, stacked,
data, precipitation);
},
});

var ChartView = Marionette.CollectionView.extend({
childView: ChartRowView,
});

var TableRowView = Marionette.ItemView.extend({
className: 'compare-table-row',
template: compareTableRowTmpl,
Expand Down Expand Up @@ -437,7 +501,18 @@ var CompareModificationsView = Marionette.ItemView.extend({
}
});

function getTr55Tabs(scenarios) {
function getPrecipitationFromScenarios(scenarios) {
return scenarios
.findWhere({ active: true })
.get('inputs')
.findWhere({ name: 'precipitation' });
}

function formatTr55CompareData(scenarios) {
// Convert value from inches to centimeters
var precipitation = getPrecipitationFromScenarios(scenarios)
.get('value') * 2.54;

// TODO Account for loading and error scenarios
var runoffTable = [
{
Expand Down Expand Up @@ -472,8 +547,78 @@ function getTr55Tabs(scenarios) {
})
},
],
// TODO Make Runoff charts
runoffCharts = [],
runoffCharts = [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rajadain Was there a reason for all the arrays/objects in this function to not be actual models?
Why doesn't this return aTabsCollection?

{
name: "Combined Hydrology",
chartDiv: "combined-hydrology-chart",
seriesColors: ['#F8AA00', '#CF4300', '#C2D33C'],
legendItems: [
{
name: "Evapotranspiration",
badgeId: "evapotranspiration-badge",
},
{
name: "Runoff",
badgeId: "runoff-badge",
},
{
name: "Infiltration",
badgeId: "infiltration-badge",
},
],
unit: "cm",
// TODO: adjust values for combined hydrology
values: scenarios.map(function(s) {
return s.get('results')
.findWhere({ name: "runoff" })
.get('result')
.runoff.modified;
}),
precipitation: precipitation,
},
{
name: "Evapotranspiration",
chartDiv: "evapotranspiration-chart",
seriesColors: ['#C2D33C'],
legendItems: null,
unit: "cm",
values: scenarios.map(function(s) {
return s.get('results')
.findWhere({ name: "runoff" })
.get('result')
.runoff.modified.et;
}),
precipitation: precipitation,
},
{
name: "Runoff",
chartDiv: "runoff-chart",
seriesColors: ['#CF4300'],
legendItems: null,
unit: "cm",
values: scenarios.map(function(s) {
return s.get('results')
.findWhere({ name: "runoff" })
.get('result')
.runoff.modified.runoff;
}),
precipitation: precipitation,
},
{
name: "Infiltration",
chartDiv: "infiltration-chart",
seriesColors: ['#F8AA00'],
legendItems: null,
unit: "cm",
values: scenarios.map(function(s) {
return s.get('results')
.findWhere({ name: "runoff" })
.get('result')
.runoff.modified.inf;
}),
precipitation: precipitation,
}
],
// TODO Calculate Water Quality table
qualityTable = [],
// TODO Calculate Water Quality charts
Expand Down Expand Up @@ -577,21 +722,17 @@ function showCompare() {
var model_package = App.currentProject.get('model_package'),
isTr55 = model_package === modelingModels.TR55_PACKAGE,
scenarios = getCompareScenarios(isTr55),
tabs = isTr55 ? getTr55Tabs(scenarios) : getGwlfeTabs(scenarios),
tabs = isTr55 ? formatTr55CompareData(scenarios) : getGwlfeTabs(scenarios),
controls = isTr55 ? [{ name: 'precipitation' }] : [],
compareModel = new models.WindowModel({
controls: controls,
tabs: tabs,
scenarios: scenarios,
});

compareModel.set({ scenarios: scenarios });

if (isTr55) {
// Set compare model to have same precipitation as active scenario
compareModel.addOrReplaceInput(
scenarios.findWhere({ active: true })
.get('inputs')
.findWhere({ name: 'precipitation' }));
compareModel.addOrReplaceInput(getPrecipitationFromScenarios(scenarios));
}

App.rootView.compareRegion.show(new CompareWindow2({
Expand Down
Loading