Skip to content

Commit

Permalink
Add compare view multibar chart
Browse files Browse the repository at this point in the history 
- add chart row views & collection
- add compareChartRow template
- structure charts data in `getTR55Tabs` function
- create renderCompareMultibarChart function
- format data & other arguments properly in addChart fn
- style compare charts to match scenario cards in title
  • Loading branch information
Kelly Innes committed Aug 9, 2017
1 parent ee7ce2b commit 6ce8300
Show file tree
Hide file tree
Showing 6 changed files with 298 additions and 73 deletions.
22 changes: 21 additions & 1 deletion src/mmw/js/src/compare/models.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@ var Backbone = require('../../shim/backbone'),
var CHART = 'chart',
TABLE = 'table';

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

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

var TableRowModel = Backbone.Model.extend({
defaults: {
name: '',
Expand All @@ -23,13 +38,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 +58,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 +69,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 +81,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
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
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>
145 changes: 136 additions & 9 deletions src/mmw/js/src/compare/views.js
View file
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(s) {
if (s.attributes.name === 'runoff' && !s.attributes.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,51 @@ 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,
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);
},
});

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

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

function getTr55Tabs(scenarios) {
function formatTr55CompareData(scenarios) {
// TODO Account for loading and error scenarios
var runoffTable = [
{
Expand Down Expand Up @@ -472,8 +534,74 @@ function getTr55Tabs(scenarios) {
})
},
],
// TODO Make Runoff charts
runoffCharts = [],
runoffCharts = [
{
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;
}),
},
{
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;
}),
},
{
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;
}),
},
{
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;
}),
}
],
// TODO Calculate Water Quality table
qualityTable = [],
// TODO Calculate Water Quality charts
Expand Down Expand Up @@ -577,15 +705,14 @@ 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(
Expand Down
Loading

0 comments on commit 6ce8300

Please sign in to comment.