Skip to content

Commit

Permalink
select color attribute (where colors set) #4
Browse files Browse the repository at this point in the history
  • Loading branch information
tmfrnz committed Dec 8, 2016
1 parent 5fc4407 commit d45231c
Show file tree
Hide file tree
Showing 15 changed files with 155 additions and 36 deletions.
9 changes: 8 additions & 1 deletion app/components/app/AppView.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ define([
// out view events
setOutView: "setOutView",
recordSelect: "recordSelect",
colorColumnChanged: "colorColumnChanged",

// map view events
mapViewUpdated: "mapViewUpdated",
Expand Down Expand Up @@ -451,7 +452,7 @@ define([
this.model.setColumns(new ColumnCollection(this.model.get("columnConfig")))

// replace auto values (generate from actual record values where not explicitly set)
_.each(this.model.get("columnCollection").byColumn('values','auto').byColumn("type","categorical").models,function(columm){
_.each(this.model.get("columnCollection").byAttribute('values','auto').byAttribute("type","categorical").models,function(columm){
var values = this.model.getRecords().getValuesForColumn(columm.get('queryColumn'))
columm.set("values",{
"values":values,
Expand Down Expand Up @@ -650,6 +651,12 @@ define([
})
},

colorColumnChanged : function(e,args){
this.model.getRouter().queryUpdate({
colorby:args.column
})
},

// map view events
mapViewUpdated : function(e,args){
//console.log('AppView.mapViewUpdated')
Expand Down
2 changes: 1 addition & 1 deletion app/components/app/filters/FiltersView.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ define([
}


var columnCollection = this.model.get("columnCollection").byColumn("filterable")
var columnCollection = this.model.get("columnCollection").byAttribute("filterable")

this.$el.html(_.template(template)({
t:this.model.getLabels(),
Expand Down
4 changes: 3 additions & 1 deletion app/components/app/out/OutView.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ define([
el:this.$(componentId),
model: new TableModel({
labels: this.model.getLabels(),
columnCollection: this.model.get("columnCollection").byColumn("table"),
columnCollection: this.model.get("columnCollection").byAttribute("table"),
columnGroupCollection: this.model.get("columnGroupCollection"),
active: false,
recordId:""
Expand All @@ -104,6 +104,7 @@ define([
labels: this.model.getLabels(),
config:this.model.getMapConfig(),
layerCollection:this.model.getLayers(),
columnCollection: this.model.get("columnCollection"),
active: false
})
});
Expand Down Expand Up @@ -141,6 +142,7 @@ define([
}
})
}
this.views.map.model.set({outColorColumn:column})
},
toggleView:function(e){
this.$el.trigger('setOutView',{out_view:$(e.target).attr("data-view")})
Expand Down
11 changes: 9 additions & 2 deletions app/components/app/out/map/MapModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,13 @@ define([
this.options = options || {};

this.set('mapConfigured',false)
this.set("views",{})


},
getViews:function(){
return this.attributes.views
},
setLayerGroups:function(groups) {
this.set('layerGroups',groups)
},
Expand Down Expand Up @@ -77,8 +82,10 @@ define([
},
getType : function(){
return this.attributes.type
}

},
getOutColorColumn:function(){
return this.attributes.outColorColumn
},
});


Expand Down
23 changes: 22 additions & 1 deletion app/components/app/out/map/MapView.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ define([
'jquery','underscore','backbone',
'leaflet',
'esri.leaflet',
'./mapControl/MapControlView', './mapControl/MapControlModel',
'text!./map.html'
], function(
$, _, Backbone,
leaflet,
esriLeaflet,
MapControlView, MapControlModel,
template
){
var MapView = Backbone.View.extend({
Expand All @@ -16,12 +18,14 @@ define([

// set up an empty layer group for all our overlay and basemap layers
this.viewUpdating = false
this.views = this.model.getViews()

this.render()


this.listenTo(this.model, "change:active", this.handleActive);
this.listenTo(this.model, "change:view", this.handleViewUpdate);
this.listenTo(this.model, "change:outColorColumn", this.updateOutColorColumn);

this.listenTo(this.model, "change:invalidateSize",this.invalidateSize);
this.listenTo(this.model, "change:layersUpdated",this.layersUpdated);
Expand All @@ -32,9 +36,26 @@ define([
console.log('MapView.render')
this.$el.html(_.template(template)({t:this.model.getLabels()}))
this.configureMap()
this.initMapControlView()
return this
},

initMapControlView : function(){
var componentId = '#map-control'

if (this.$(componentId).length > 0) {

this.views.control = this.views.control || new MapControlView({
el:this.$(componentId),
model: new MapControlModel({
labels: this.model.getLabels(),
columnCollection:this.model.get("columnCollection")
})
});
}
},
updateOutColorColumn:function(){
this.views.control.model.set({outColorColumn:this.model.getOutColorColumn()})
},
// map configuration has been read
configureMap : function(){
//console.log('MapView.configureMap')
Expand Down
1 change: 1 addition & 0 deletions app/components/app/out/map/map.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
<span class="loading-animation hide-on-map-loaded"></span>
<div id="map-container"></div>
<div id="map-control"></div>
58 changes: 58 additions & 0 deletions app/components/app/out/map/mapControl/MapControlView.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
define([
'jquery', 'underscore', 'backbone',
'text!./mapControl.html',
'text!./mapControlColorSelect.html',
], function (
$, _, Backbone,
template,
templateColorSelect
) {

return Backbone.View.extend({
events : {
"change #select-color-attribute" : "colorColumnChanged"
},
initialize : function () {

this.render()
this.listenTo(this.model, "change:outColorColumn", this.updateOutColorColumn);

},
render: function () {
this.$el.html(_.template(template)({
t:this.model.getLabels()
}))
return this
},
update : function(){
this.$('#color-attribute-selector').html(_.template(templateColorSelect)({
options:_.map(
_.filter(
this.model.get("columnCollection").models,
function(column){
return column.get("type") === "ordinal"
|| (column.get("type") === "categorical" && typeof column.getValues().colors !== "undefined")
}),
function(column){
return {
value:column.id,
label:column.get("title"),
selected:column.get("column") === this.model.getOutColorColumn().get("column")
}
},this)
}))

},
updateOutColorColumn:function(){
// this.views.control.set({outColorColumn:this.model.getOutColorColumn()})
this.update()
},
colorColumnChanged:function(e){
e.preventDefault()
this.$el.trigger('colorColumnChanged',{column:$(e.target).val()})
},


});

});
11 changes: 11 additions & 0 deletions app/components/app/out/map/mapControl/mapControl.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
#map-control {
position: absolute;
top: 0;
bottom: 0;
right:0;
width: 200px;
overflow-y: auto;
background:white;
z-index: 1000;
display: block;
}
8 changes: 8 additions & 0 deletions app/components/app/out/map/mapControl/mapControl.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div id="map-control-header">
<h4>Map settings</h4>
</div>
<div id="map-control-marker-control">
<h5>Map marker</h5>
<p>Select attribute to colour markers by value</p>
<div id="color-attribute-selector"></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<select id="select-color-attribute"
class="form-control">
<% _.each(options,function(option){ %>
<option value="<%= option.value %>" <% if (option.selected) { %>selected<% } %> > <%= option.label %></option>
<% }) %>
</select>
18 changes: 18 additions & 0 deletions app/components/app/out/map/mapControl/mapControlModel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
define([
'jquery', 'underscore', 'backbone',
'models/ViewModel'
], function($,_, Backbone,ViewModel) {

return ViewModel.extend({
initialize : function(options){
this.options = options || {};
this.set('expanded',false)

},
getOutColorColumn:function(){
return this.attributes.outColorColumn
},
});


});
32 changes: 5 additions & 27 deletions app/config/columns.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"multiples":1,
"values":{
"values":["Geological data","Historical data","No specific method"],
"colors":["red","orange","green"]
"colors":["#9F82BC","#FABD13","#60BE8D"]
}
},
{
Expand Down Expand Up @@ -63,18 +63,6 @@
"Radiocarbon",
"Sediment Accumulation Rates",
"Stratigraphic Correlation"
],
"colors":[
"red",
"orange",
"green",
"olive",
"blue",
"purple",
"yellow",
"brown",
"pink",
"cyan"
]
}
},
Expand All @@ -95,7 +83,7 @@
"values":{
"values":["Primary","Secondary","Cultural"],
"hints":["Sedimentary","Anthropological","Geomorphic"],
"colors":["red","yellow","green"]
"colors":["#9F82BC","#FABD13","#60BE8D"]
}
},
{
Expand All @@ -116,7 +104,7 @@
"values":["Historical","Prehistoric AD","Prehistoric BC","Unusual/Unknown"],
"labels":["Historical","Prehistoric AD","Prehistoric BC","Unusual"],
"hints":["1800 and later","0 - 1800","before 0","Unknown"],
"colors":["red","orange","green","gray"]
"colors":["#9F82BC","#FABD13","#60BE8D","#aaaaaa"]
}
},
{
Expand Down Expand Up @@ -311,7 +299,7 @@
"group":"site",
"values":{
"values":["Deposit present","Deposit absent","Not applicable", "Unknown"],
"colors":["red","yellow","green","gray"]
"colors":["#9F82BC","#FABD13","#60BE8D","#aaaaaa"]
}
},
{
Expand Down Expand Up @@ -348,15 +336,6 @@
"Pyroclastic flow",
"Geyser",
"Bollide"
],
"colors":[
"red",
"yellow",
"green",
"blue",
"brown",
"orange",
"gray"
]
}
},
Expand All @@ -378,8 +357,7 @@
"group":"source",
"blanks":1,
"values":{
"values":["Inferred","Known"],
"colors":["orange","green"]
"values":["Inferred","Known"]
}
},
{
Expand Down
4 changes: 2 additions & 2 deletions app/models/ColumnCollection.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ define([
})
return new ColumnCollection(filtered);
},
byColumn:function(column,val){
byAttribute:function(att,val){
val = typeof val !== "undefined" ? val : 1
var filtered = this.filter(function(model){
return model.get(column) === val
return model.get(att) === val
&& model.get("combo") !== 1 //temp
})
return new ColumnCollection(filtered);
Expand Down
3 changes: 2 additions & 1 deletion app/models/ColumnModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ define([
return this.attributes.values
},
getColor:function(value){
if(this.get("type") === "ordinal") {
if(this.get("type") === "ordinal"
|| (this.get("type") === "categorical" && typeof this.getValues().colors !== "undefined")) {
var index = this.attributes.values.values.indexOf(value)
return this.attributes.values.colors[index]
}
Expand Down
1 change: 1 addition & 0 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import url("../../app/components/app/record/record.css");
@import url("../../app/components/app/out/out.css");
@import url("../../app/components/app/out/map/map.css");
@import url("../../app/components/app/out/map/mapControl/mapControl.css");
@import url("../../app/components/app/out/table/table.css");

.loading-animation {
Expand Down

0 comments on commit d45231c

Please sign in to comment.