first

.gitignore

+**/node_modules/
+/bower_components/
+app/src/bowerlib.*
+padmauth.properties
\ No newline at end of file

.vscode/tasks.json

+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "0.1.0",
+    "command": "tsc",
+    "isShellCommand": true,
+    "args": ["-p", "."],
+    "showOutput": "silent",
+    "problemMatcher": "$tsc"
+}
\ No newline at end of file

Gruntfile.js

+
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    uglify: {
+			dist: {
+				options: {
+					banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+					sourceMap: true,
+					sourceMapName: 'dist/<%= pkg.name %>.map'
+				},      
+				src: 'dist/<%= pkg.name %>.js',
+				dest: 'dist/<%= pkg.name %>.min.js'
+			},
+      app: {
+				options: {
+					banner: '/*! lib.map <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+					sourceMap: true,
+					sourceMapName: 'app/src/lib.map'
+				},      
+				src: 'app/src/lib.js',
+				dest: 'app/src/lib.min.js'
+			}			
+    },
+    concat: {
+			dist: {
+				files: {
+					'dist/<%= pkg.name %>.js': 'src/*.js',
+					'dist/<%= pkg.name %>.css': 'src/*.css',
+				}
+			},
+			app: {
+				files: {
+					'app/src/lib.js': ['app/src/bowerlib.js', 'dist/<%= pkg.name %>.js'],
+					'app/src/lib.css': ['app/src/bowerlib.css','dist/<%= pkg.name %>.css'],
+				}
+			}			
+    },
+    cssmin: {
+    	  options: {
+    	    shorthandCompacting: false,
+    	    roundingPrecision: -1
+    	  },
+    	  dist: {
+    	    files: {
+    	    	'dist/<%= pkg.name %>.min.css': 'dist/<%= pkg.name %>.css'
+    	    }
+    	  },
+    	  app: {
+    	    files: {
+    	    	'app/src/lib.min.css': 'app/src/lib.css'
+    	    }
+    	  }
+				
+    },
+    wiredep: {
+        demo: {
+    	    includeSelf: true,	
+          src: ['demo/index.html'],
+          overrides : {
+        	  "uikit": {
+        		  "main" : [
+        		            "js/uikit.js", "js/components/notify.min.js",
+        		            "css/uikit.almost-flat.min.css", "css/components/notify.almost-flat.min.css"
+        		            ]
+        	  },
+        	  "DataTables" : {
+        		  "main" : ["media/js/jquery.dataTables.min.js", "media/js/dataTables.uikit.min.js", "media/css/jquery.dataTables.min.css", "media/css/dataTables.uikit.min.css"]
+        	  }
+          }          
+        }		
+    },
+	bower_concat: {
+	  app: {
+			dest: {
+				'js': 'app/src/bowerlib.js',
+				'css': 'app/src/bowerlib.css'
+			},
+			bowerOptions: {
+				relative: false
+			},
+			includeDev: true,
+			mainFiles: {
+				'jquery' : 'dist/jquery.min.js',	
+				'DataTables': ['media/js/jquery.dataTables.min.js', 'media/js/dataTables.uikit.min.js', 'media/css/jquery.dataTables.min.css', 'media/css/dataTables.uikit.min.css'],
+				'datatables.net-select': 'js/dataTables.select.min.js',
+				'uikit': [
+									'js/uikit.min.js', 'js/components/notify.min.js',
+									'css/uikit.almost-flat.min.css', 'css/components/notify.almost-flat.min.css'
+									]
+			},
+			dependencies: {
+				'DataTables': 'jquery',
+				'datatables.net-select': 'DataTables',
+				'uikit': 'jquery',
+				'jquery-file-upload': 'jquery'
+			}		
+	  }
+	},
+	copy: {
+		app: {
+			files: [																
+			{
+				expand: true,
+				flatten: true,
+				src: 'bower_components/**/images/*',
+				dest: 'app/images/'
+			},			
+			{
+				expand: true,
+				flatten: true,
+				src: ['bower_components/**/img/*', '!bower_components/leaflet-navigation/src/help/classic/img/**'],
+				dest: 'app/img/'
+			},			
+			{
+			   expand: true,
+			   flatten: true,
+			   src: 'bower_components/**/fonts/*',
+			   dest: 'app/fonts/' 
+			},
+			{
+				expand: true,
+				flatten: true,
+				src: 'src/images/*',
+				dest: 'app/images/'
+			}					
+			
+			]			
+		}
+		
+	},
+	clean: [
+		'app/fonts', 
+		'app/images', 
+		'app/help', 
+		'app/img', 
+		'app/src' 	
+	]
+    
+  });
+  
+
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-bower-concat');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');  
+  grunt.loadNpmTasks('grunt-contrib-cssmin');  
+  grunt.loadNpmTasks('grunt-wiredep');    
+
+  grunt.registerTask('dist', ['concat:dist', 'uglify:dist', 'cssmin:dist']);
+  grunt.registerTask('default', ['clean', 'dist', 'bower_concat:app', 'concat:app', 'uglify:app', 'cssmin:app','copy:app' ]);
+};

README.md

+# stw-padmws-graph
+
+
+## Description
+A graph display component for padmws results
+
+![](image.png)
+
+
+## Installation
+
+You will need node.js, npm and bower for demo
+
+### bower
+`bower install https://git.smhi.se/stw/stw-padmws-graph.git --save`
+
+## Demo
+
+Go to demo folder and install package.json
+
+	> npm install
+
+Start server in demo folder
+
+	> node server.js
+	Server started on http://localhost:8080...
+
+Open browser on http://localhost:8080/demo
+
+## Usage example
+
+
+		var map = L.map('map').setView([ 58.5, 19.0 ], 5);
+		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			maxZoom : 18,
+			attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
+		}).addTo(map);
+
+		var hash = new L.Hash(map);
+
+		var language = 'en';
+
+        var navLangData = {
+        	"tTitle": "Navigation",
+					"tLogin" : "Login",
+					"tLogout" : "Logout"
+        };
+
+        var navControl = new Navigation("navigation", {
+			"user" : {
+				"url" : "/demo", 
+				"access" : "test"
+			},
+			"navigation": {
+				"Link1" : "path",
+				"Link2" : "path",
+				"Link3" : "path"
+			},
+			"position": {
+				"map" : map
+			},
+			"title" : {true,
+			"search" : {
+				"url" : "search"
+			},
+			"help" : {
+				"classic" : {
+					"id" : "introduction"
+				},
+				"guide" : false,
+				"indepth" : {
+					"id" : "kde" 
+				}
+			},
+			"language" : true,
+   			"lang" : language,
+   			"langdata" : navLangData
+        });;
+
+
+### Options
+
+| Option       | Default    | Description |
+| -------------|------------|-------------|
+| `user`  | false   | activates the user link |
+| `help`  | false   | activates the help link |
+| `title`  | true   | shows a title |
+| `language`  | false   | activates the language link |
+| `search`  | null   | activates the search link |
+| `position`  | null   | activates the position link |
+| `navigation`  | null   | activates the navigation link |
+
+## Copyright and License
+
+## Contact information
+
+Tomas Pettersson tomas.pettersson@smhi.se
+
+
+## Credits and acknowledgements
+
+
+## Known bugs
+
+## Troubleshooting
+
+## Changelog
+
+

bower.json

+{
+  "name": "stw-padmws-graph",
+  "version": "0.0.1",
+  "homepage": "https://git.smhi.se/stw/stw-padmws-graph",
+  "authors": [
+    "Tomas Pettersson <tomas.pettersson@smhi.se>"
+  ],
+  "description": "A graph display component for padmws results",
+  "main": [
+    "src/stw-padmws-graph.js",
+    "src/stw-padmws-graph.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@git.smhi.se:stw/stw-padmws-graph.git"
+  },
+  "dependencies": {
+    "jquery": "latest",
+    "uikit": "latest",
+    "reqwest": "latest",
+    "moment": "latest"
+  },
+  "devDependencies": {
+  },
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components"
+  ],
+  "moduleType": [
+    "es6"
+  ]
+}

demo/index.html

+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en" style="font-size: 100%">
+<head>
+	<title>leaflet-stw-padmws-control - Demo</title>
+	<meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta http-equiv='x-dns-prefetch-control' content='on'>
+
+	<meta name='copyright' content='STW'>
+	<meta name='owner' content='STW'>
+
+  <!-- bower:css -->
+  <link rel="stylesheet" href="../bower_components/uikit/css/uikit.almost-flat.min.css" />
+  <link rel="stylesheet" href="../bower_components/uikit/css/components/notify.almost-flat.min.css" />
+  <link rel="stylesheet" href="../src/stw-padmws-graph.css" />
+  <!-- endbower -->
+</head>
+
+<body>
+
+	<!-- bower:js -->
+	<script src="../bower_components/jquery/dist/jquery.js"></script>
+	<script src="../bower_components/uikit/js/uikit.js"></script>
+	<script src="../bower_components/uikit/js/components/notify.min.js"></script>
+	<script src="../bower_components/reqwest/reqwest.js"></script>
+	<script src="../bower_components/moment/moment.js"></script>
+	<script src="../src/stw-padmws-graph.js"></script>
+	<!-- endbower -->	
+
+<script>
+
+    var graphDiv = document.createElement("DIV");
+    var graphbutton = document.createElement("BUTTON");
+    var t = document.createTextNode("Graph");
+    graphbutton.appendChild(t);
+	graphbutton.onclick = function() {
+		var language = "en";
+		var langData = {
+			"tTitle" : "Graph"
+		};
+
+		var graph = new Graph(graphDiv, { 
+				"lang" : language,
+                "langdata" :  langData
+		});
+	};
+    document.body.appendChild(graphbutton);
+
+</script>
+</body>
+</html>

demo/server.js

+var express = require('express');
+var path = require('path');
+var request = require('request');
+var bodyParser = require('body-parser');
+var fs = require('fs');
+
+var app = express();
+
+app.use(bodyParser.json()); // for parsing application/json
+app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
+
+
+app.get('/demo/graph/:id', function (req, res) {
+
+	fs.readFile(path.join(__dirname, 'data/'+req.params.id+'.json'), 'utf8', function (err,data) {
+	if (err) {
+		return console.log(err);
+	}
+		res.send(data);
+	});	
+
+});
+
+app.use('/bower_components', express.static(path.join(__dirname, '../bower_components')));
+app.use('/src', express.static(path.join(__dirname, '../src')));
+app.use('/dist', express.static(path.join(__dirname, '../dist')));
+app.use('/demo', express.static(__dirname));
+
+app.listen(8080);
+console.log('Server started on http://localhost:8080...');
\ No newline at end of file

package.json

+{
+  "name": "stw-padmws-grapth",
+  "description": "Used for demo folder.",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "express": "4.x",
+    "path": "latest",
+    "body-parser": "latest",   
+    "utf8" : "latest",  
+    "request" : "latest",  
+    "moment" : "latest"    
+  },
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-bower-concat": "^1.0.0",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^1.0.1",
+    "grunt-contrib-uglify": "^2.0.0",
+    "grunt-wiredep": "^3.0.1"
+  }
+}

src/def/moment.d.ts

+// Type definitions for Moment.js 2.8.0
+// Project: https://github.com/timrwood/moment
+// Definitions by: Michael Lakerveld <https://github.com/Lakerfield>, Aaron King <https://github.com/kingdango>, Hiroki Horiuchi <https://github.com/horiuchi>, Dick van den Brink <https://github.com/DickvdBrink>, Adi Dahiya <https://github.com/adidahiya>, Matt Brooks <https://github.com/EnableSoftware>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="moment-node.d.ts" />
+
+declare var moment: moment.MomentStatic;

src/def/reqwest.d.ts

+declare function reqwest(json: any) : void;
\ No newline at end of file

src/stw-padmws-graph.js

+/// <reference path="def/uikit.d.ts" />
+/// <reference path="def/moment.d.ts" />
+/// <reference path="def/reqwest.d.ts" />
+/// <reference path="def/jquery.dataTables.d.ts" />
+var Graph = (function () {
+    function Graph(graphDivId, options) {
+        var self = this;
+        this.lang = "en";
+        if (options.lang) {
+            this.lang = options.lang.replace(/#/g, '');
+        }
+        if (options.langdata) {
+            this.langData = options.langdata;
+        }
+        if (self.langData) {
+            self.setup(self.langData.tTitle, graphDivId);
+        }
+        else {
+            reqwest({
+                url: "lang/graph." + self.lang + ".json",
+                method: 'get',
+                type: 'json',
+                success: function (lang) {
+                    self.langData = lang;
+                    self.setup(self.langData.tTitle, graphDivId);
+                }
+            });
+        }
+    }
+    Graph.prototype.setup = function (title, graphDivId) {
+        var self = this;
+        self.graphDiv = document.getElementById(graphDivId);
+    };
+    return Graph;
+}());
+//# sourceMappingURL=stw-padmws-graph.js.map
\ No newline at end of file

src/stw-padmws-graph.js.map

+{"version":3,"file":"stw-padmws-graph.js","sourceRoot":"","sources":["stw-padmws-graph.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,wCAAwC;AACxC,yCAAyC;AACzC,mDAAmD;AAGnD;IAOI,eAAY,UAAU,EAAE,OAAO;QAC3B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC/C,CAAC;QACD,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACrC,CAAC;QAGD,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,CAAC;QAAC,IAAI,CAAC,CAAC;YACJ,OAAO,CAAC;gBACJ,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC,IAAI,GAAG,OAAO;gBACxC,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,UAAU,IAAI;oBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACrB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;gBAEjD,CAAC;aACJ,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAEO,qBAAK,GAAb,UAAc,KAAa,EAAE,UAAkB;QAC3C,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAmB,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACxE,CAAC;IACL,YAAC;AAAD,CAAC,AAtCD,IAsCC"}
\ No newline at end of file

src/stw-padmws-graph.ts

+/// <reference path="def/uikit.d.ts" />
+/// <reference path="def/moment.d.ts" />
+/// <reference path="def/reqwest.d.ts" />
+/// <reference path="def/jquery.dataTables.d.ts" />
+
+
+class Graph {
+
+    private container: HTMLElement;
+    private graphDiv: HTMLDivElement;
+    private lang: string;
+    private langData: any;
+
+    constructor(graphDivId, options) {
+        var self = this;
+        this.lang = "en";
+        if (options.lang) {
+            this.lang = options.lang.replace(/#/g, '');
+        }
+        if (options.langdata) {
+            this.langData = options.langdata;
+        }
+
+
+        if (self.langData) {
+            self.setup(self.langData.tTitle, graphDivId);
+        } else {
+            reqwest({
+                url: "lang/graph." + self.lang + ".json",
+                method: 'get',
+                type: 'json',
+                success: function (lang) {
+                    self.langData = lang;
+                    self.setup(self.langData.tTitle, graphDivId);
+
+                }
+            });
+        }
+    }
+
+    private setup(title: string, graphDivId: string) {
+        var self = this;
+        self.graphDiv = <HTMLDivElement>document.getElementById(graphDivId);
+    }
+}
\ No newline at end of file

tsconfig.json

+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "sourceMap" : true
+    },
+    "files": [
+        "src/stw-padmws-graph.ts"
+    ],    
+    "exclude": [
+        "node_modules",
+        "bower_components",
+        "demo",
+        ".git"
+    ]
+}
\ No newline at end of file