You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
6.5 KiB
200 lines
6.5 KiB
<!DOCTYPE HTML> |
|
<html> |
|
|
|
<head> |
|
<style type="text/css"> |
|
body, html { width:100%; height:100%; margin:0; padding:0 } |
|
#borderContainer { width:100%; height:100% } |
|
</style> |
|
|
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../themes/TreeMap.css"; |
|
@import "../themes/DrillDownUp.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
</style> |
|
|
|
<script type="text/javascript"> |
|
var djConfig = { |
|
parseOnLoad: false, |
|
async: true |
|
} |
|
</script> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"> |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
|
|
var groupByChanged, sizeByChanged, colorByChanged, |
|
thresholdChanged, neutralChanged, MyTreeMap, refreshData; |
|
|
|
require(["dojo/ready", "dojo/dom", "dojo/_base/Color", "dojo/_base/declare", "dojo/parser", |
|
"dijit/registry", |
|
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/treemap/TreeMap", |
|
"dojox/color/MeanColorModel", "dojox/data/CsvStore", "dojo/store/DataStore", |
|
"dojo/store/Observable", |
|
"dijit/form/RadioButton", "dijit/form/ComboBox", "dijit/form/Button", "dojox/treemap/Keyboard", |
|
"dojox/treemap/DrillDownUp"], |
|
function(ready, dom, Color, declare, parser, registry, BorderContainer, ContentPane, TreeMap, |
|
MeanColorModel, CsvStore, DataStore, Observable, RadioButton, ComboBox, Button, Keyboard, |
|
DrillDownUp) { |
|
|
|
var colorModel = new MeanColorModel(new Color(Color.named.green), new Color(Color.named.red)); |
|
var store = new DataStore({ store: new CsvStore({url: "freight.csv"}) }); |
|
|
|
ready(function(){ |
|
MyTreeMap = declare([TreeMap, Keyboard, DrillDownUp]); |
|
parser.parse(); |
|
var treeMap = registry.byId("treeMap"); |
|
treeMap.set("colorModel", colorModel); |
|
treeMap.set("tooltipFunc", |
|
function(data, store) { return "Total Trade:" + data["Trade"]; }); |
|
treeMap.set("store", Observable(store)); |
|
treeMap.on("change", function(){ |
|
console.log("toto"); |
|
}); |
|
}); |
|
|
|
groupByChanged = function(value){ |
|
var groupBy = null; |
|
if(dom.byId("g2").checked){ |
|
groupBy = ["Mode"]; |
|
} else if(dom.byId("g3").checked){ |
|
groupBy = ["State"]; |
|
}else if(dom.byId("g4").checked){ |
|
groupBy = ["Mode", "State"]; |
|
} |
|
var treeMap = registry.byId("treeMap"); |
|
if(groupBy != null){ |
|
treeMap.set("groupAttrs", groupBy); |
|
}else{ |
|
treeMap.set("groupAttrs", null); |
|
} |
|
} |
|
|
|
sizeByChanged = function(value){ |
|
var sizeBy = null; |
|
if(dom.byId("s2").checked){ |
|
sizeBy = "Trade"; |
|
}else if(dom.byId("s3").checked){ |
|
sizeBy = "Exports"; |
|
}else if(dom.byId("s4").checked){ |
|
sizeBy = "Imports"; |
|
} |
|
var treeMap = registry.byId("treeMap"); |
|
treeMap.set("areaAttr", sizeBy); |
|
} |
|
|
|
colorByChanged = function(value){ |
|
var colorBy = null; |
|
if(dom.byId("c2").checked){ |
|
colorBy = "Trade"; |
|
}else if(dom.byId("c3").checked){ |
|
colorBy = "Exports"; |
|
}else if(dom.byId("c4").checked){ |
|
colorBy = "Imports"; |
|
} |
|
var treeMap = registry.byId("treeMap"); |
|
treeMap.set("colorAttr", colorBy); |
|
} |
|
|
|
thresholdChanged = function(value){ |
|
var treeMap = registry.byId("treeMap"); |
|
treeMap.set("labelThreshold", value); |
|
}; |
|
|
|
neutralChanged = function(value){ |
|
var treeMap = registry.byId("treeMap"); |
|
if(value){ |
|
var newModel = new MeanColorModel(new Color(Color.named.green), new Color(Color.named.red)); |
|
newModel.computeNeutral = function(min, max, sum, values){ |
|
return sum / values.length; |
|
} |
|
treeMap.set("colorModel", newModel); |
|
}else{ |
|
treeMap.set("colorModel", colorModel); |
|
} |
|
} |
|
}); |
|
</script> |
|
|
|
</head> |
|
|
|
<body class="claro"> |
|
|
|
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer"> |
|
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center"> |
|
<div id="treeMap" dojoType="MyTreeMap" labelAttr="Name" selectionMode="multiple" |
|
style="width: 100%; height: 100%;"> |
|
</div> |
|
</div> |
|
<div dojoType="dijit.layout.ContentPane" splitter="true" region="trailing" style="width: 200px;"> |
|
<label>Group by:</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g1" checked value="none" onChange="groupByChanged" /> |
|
<label for="g1">None</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g2" value="continent" onChange="groupByChanged" /> |
|
<label for="g2">Mode</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g3" value="government" onChange="groupByChanged" /> |
|
<label for="g3">State</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="groupBy" id="g4" value="government" onChange="groupByChanged" /> |
|
<label for="g4">Mode then State</label> |
|
<br/> |
|
<br/> |
|
<br/> |
|
<label>Size by:</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s1" checked value="none" onChange="sizeByChanged" /> |
|
<label for="s1">None</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s2" onChange="sizeByChanged" /> |
|
<label for="s2">Trade</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s3" onChange="sizeByChanged" /> |
|
<label for="s3">Exports</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="sizeBy" id="s4" onChange="sizeByChanged" /> |
|
<label for="s3">Imports</label> |
|
<br/> |
|
<br/> |
|
<br/> |
|
<label>Color by:</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c1" checked value="none" onChange="colorByChanged"/> |
|
<label for="c1">None</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c2" onChange="colorByChanged" /> |
|
<label for="c2">Trade</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c3" onChange="colorByChanged" /> |
|
<label for="c3">Exports</label> |
|
<br/> |
|
<input type="radio" dojoType="dijit.form.RadioButton" name="colorBy" id="c4" onChange="colorByChanged" /> |
|
<label for="c4">Imports</label> |
|
<br/> |
|
<br/> |
|
<br/> |
|
<label>Label threshold</label> |
|
<br/> |
|
<select id="labelThreshold" dojoType="dijit.form.ComboBox" onChange="thresholdChanged"> |
|
<option selected>NaN</option> |
|
<option>1</option> |
|
<option>2</option> |
|
</select> |
|
<br/> |
|
<br/> |
|
<br/> |
|
<label>Mean/Average neutral value</label> |
|
<br/> |
|
<select id="neutral" dojoType="dijit.form.CheckBox" onChange="neutralChanged"> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
|
|
</html>
|
|
|