version with topic and region view

.gitignore

@@ -0,0 +1 @@
+node_modules/

Web.config

@@ -1,6 +1,13 @@
-<?xml version="1.0"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
   <system.web>
-    <compilation debug="true" targetFramework="4.0"/>
+    <compilation debug="true" targetFramework="4.0" />
   </system.web>
+    <system.webServer>
+        <httpProtocol>
+            <customHeaders>
+                <add name="Content-Security-Policy" value="script-src 'self' https://apis.google.com http://localhost*" />
+            </customHeaders>
+        </httpProtocol>
+    </system.webServer>
 </configuration>

app/app.js

@@ -1,7 +1,7 @@
 (function () {
     'user strict';
 
-    angular.module('biloAtlas', ['ngRoute']);
+    angular.module('biloAtlas', ['ngRoute','nvd3']);
     /*
         .config(['$compileProvider', function ($compileProvider) {
             //Add ms-appx-web prefix to whitelist otherwise windows 10 add "unsafe:" prefix to links and breaks angularjs links

app/app.routes.js

@@ -6,16 +6,16 @@
             function($routeProvider) {
                 $routeProvider.
                 when('/', {
-                    templateUrl: 'app/views/main.html',
-                    controller: 'atlasController'
+                    templateUrl: 'app/views/main.html'
                 }).
                 when('/topic/:topicid', {
-                    templateUrl: 'app/views/topic.html',
-                    controller: 'topicController'
+                    template: '<topic-view></topic-view>',
                 }).
-                when('/region/:region', {
-                    templateUrl: 'app/views/region.html',
-                    controller: 'regionController'
+                when('/region/:regionid', {
+                    template: '<region-view></region-view>',
+                }).
+                when('/impressum', {
+                    templateUrl: 'app/views/impressum.html'
                 }).
                 otherwise({
                     redirectTo: '/'

app/components/colorbrewer-picker/colorbrewer-picker.component.html

@@ -0,0 +1,27 @@
+<div class="colorpicker colorpanel" ng-click="colorbrewerPicker.opencolors?colorbrewerPicker.opencolors=false:colorbrewerPicker.opencolors=true">
+    <div class="row">
+        <div class="col-md-11"> 
+            <span ng-repeat="c in colorbrewerPicker.schema" style="display: inline-block; height: 15px;" ng-style="{'background-color': c, 'width': (100/colorbrewerPicker.schema.length)+'%'}" >
+                &nbsp;
+            </span>
+        </div>
+        <div class="col-md-1">
+            <span class="glyphicon glyphicon-menu-down"  ng-show="!colorbrewerPicker.opencolors"></span>
+            <span class="glyphicon glyphicon-menu-up"  ng-show="colorbrewerPicker.opencolors"></span>
+        </div>
+    </div>
+</div>
+
+
+<div class="colorpickerColors" ng-show="colorbrewerPicker.opencolors"  >    
+    <div ng-repeat="(name,schemas) in colorbrewerPicker.colors">
+        <div ng-repeat="(count, cs) in schemas" ng-click="colorbrewerPicker.opencolors=false; colorbrewerPicker.schema=cs; " class="colorpanel">
+            <span ng-repeat="c in cs" style="display: inline-block; width: 15px; height: 15px;" ng-style="{'background-color': c}">
+                &nbsp;
+            </span>
+        </div>
+    </div>
+</div>   
+
+
+

app/components/colorbrewer-picker/colorbrewer-picker.component.js

@@ -0,0 +1,19 @@
+/**
+ * Created by CMatyas on 15.12.2015.
+ */
+(function(){
+    'use strict'
+
+    angular.module('biloAtlas').
+        component('colorbrewerPicker',{
+        templateUrl: 'app/components/colorbrewer-picker/colorbrewer-picker.component.html',
+        bindings: {
+            schema: '='
+        },
+        controller: function(ColorBrewer){
+            this.opencolors = false
+            this.colors = ColorBrewer.colors;
+            //this.schema = this.colors.PuBu[6];
+        }
+    });
+})();

app/components/region-view/region-view.component.html

@@ -0,0 +1,30 @@
+<div ng-repeat="topic in regionView.topics" class="topic-container">
+    <h1>{{topic.name}} in {{regionView.region}}</h1>
+    <div ng-repeat="layer in topic.layers">
+        <h2>{{layer.name}}</h2>
+        <div class="row">
+            <div class="col-md-6">
+                <p>
+                    {{layer.description}}
+                </p>
+
+                <div class="row" style="margin-left: 0">
+                    <div class="col-md-2" style="padding-left: 0">
+                        <small><b>Quelle:</b></small>
+                    </div> 
+                    <div class="col-md-10"><small>{{layer.source}}</small></div>
+
+                    <div class="col-md-2" style="padding-left: 0">
+                        <small><b>Berechnung:</b></small>
+                    </div> 
+                    <div class="col-md-10"><small>{{layer.calculation}}</small></div>
+                </div>
+            </div>
+            <div class="col-md-6 well">
+                <nvd3 options="regionView.getLayerOptions(layer.id)" data="regionView.getLayerData(layer.id)"></nvd3>
+            </div>
+        </div>
+
+
+    </div>
+</div>

app/components/region-view/region-view.component.js

@@ -0,0 +1,125 @@
+(function(){
+    'use strict'
+
+    angular.module('biloAtlas')
+    .component('regionView', {
+        templateUrl: 'app/components/region-view/region-view.component.html',
+        binding: {},
+        controller: function(RegionData, $routeParams){
+            this.topics = [];
+
+            this.options =  {
+                    chart: {
+                        type: 'lineChart',
+                        height: 250,
+                        margin : {
+                            top: 20,
+                            right: 20,
+                            bottom: 40,
+                            left: 55
+                        },
+                        x: function(d){ return d.year; },
+                        y: function(d){ return d.value; },
+                        useInteractiveGuideline: true,
+                        dispatch: {
+                            stateChange: function(e){ console.log("stateChange"); },
+                            changeState: function(e){ console.log("changeState"); },
+                            tooltipShow: function(e){ console.log("tooltipShow"); },
+                            tooltipHide: function(e){ console.log("tooltipHide"); }
+                        },
+                        xAxis: {
+                            axisLabel: 'Jahr'
+                        },
+                        yAxis: {
+                            axisLabel: '%',
+                            axisLabelDistance: -10
+                        },
+                        callback: function(chart){
+
+                        }
+                    },
+                    title: {
+                        enable: false
+                    },
+                    subtitle: {
+                        enable: false
+                    },
+                    caption: {
+                        enable: false
+                    }
+                };
+
+
+        this.getLayerData = function(id){           
+            return this.layersData[id].data;
+        }
+        this.getLayerOptions = function(id){           
+            return this.layersData[id].options;
+        }
+
+        RegionData.getRegionById($routeParams.regionid).then(function(regionTopics){
+
+
+                //Prepare data for linecharts
+                var layersData = [];
+                regionTopics.topics.forEach(function(topic){
+                    topic.layers.forEach(function(layer){
+                        var layerData = [];
+                        layerData.push({values: layer.data.map(function(d) { return {value: d.value, year: d.year}} ), key: layer.name});
+                        layerData.push({values: layer.data.map(function(d){ return {value: d.averageUF.toPrecision(2), year: d.year}; }), key: 'Oberfranken', color: '#CCC'});
+                        layersData[layer.id] = {options: getOptions(layer.name, layer.unit), data: layerData};
+                    }.bind(layersData))
+                }.bind(layersData))
+
+                this.layersData = layersData;
+                this.topics = regionTopics.topics;
+                this.region = regionTopics.region.name;
+            }.bind(this));
+
+
+        function getOptions(name, unit){
+            return  {
+                    chart: {
+                        type: 'lineChart',
+                        height: 250,
+                        margin : {
+                            top: 20,
+                            right: 20,
+                            bottom: 40,
+                            left: 55
+                        },
+                        x: function(d){ return d.year; },
+                        y: function(d){ return d.value; },
+                        useInteractiveGuideline: true,
+                        dispatch: {
+                            stateChange: function(e){ console.log("stateChange"); },
+                            changeState: function(e){ console.log("changeState"); },
+                            tooltipShow: function(e){ console.log("tooltipShow"); },
+                            tooltipHide: function(e){ console.log("tooltipHide"); }
+                        },
+                        xAxis: {
+                            axisLabel: 'Jahr'
+                        },
+                        yAxis: {
+                            axisLabel: unit,
+                            axisLabelDistance: -10
+                        },
+                        callback: function(chart){
+
+                        }
+                    },
+                    title: {
+                        enable: false
+                    },
+                    subtitle: {
+                        enable: false
+                    },
+                    caption: {
+                        enable: true,
+                        html: '<div class="chart_caption">'+name+'</div>'
+
+                    }
+                };
+        }
+        }});
+})()

app/components/regions-map/regions-map.component.html

@@ -0,0 +1,25 @@
+<div style="text-align: right; width:100%">
+    <button class="btn btn-xs"><span class="glyphicon glyphicon-zoom-in"></span></button>
+    <button class="btn btn-xs"><span class="glyphicon glyphicon-zoom-out"></span></button>
+    <button class="btn btn-xs"><span class="glyphicon glyphicon-resize-full"></span></button>
+</div>
+
+<div id="regions-map">
+    <svg></svg>
+</div>
+
+<div id="legend">
+    <colorbrewer-picker schema="schemecolors"></colorbrewer-picker>
+    <!--<div class="colors">
+        <div ng-repeat="color in regionColors" ng-style="{'background-color': color, 'width': (100/regionColors.length)+'%'}" class="legenditem"></div>
+    </div>-->
+    <div class="row"> 
+        <div class="col-md-6"><small>0</small></div>
+        <div class="col-md-6" style="text-align: right"><small>{{maxValue}}</small></div>
+    </div>
+</div>
+
+
+<div id="config">
+
+</div>