Re-implement existing website template (from PHP). Add all assets.

Website/wwwroot/js/directives/googleChart.js

@@ -0,0 +1,122 @@
+/* global google, angular */
+
+angular.module("robware").directive('googleChart', function() {
+	return {
+		restrict: 'E',
+		templateUrl: '/scripts/directives/templates/googleChart.html',
+		scope: {
+			data: '=',
+			headings: '=?',
+			ignore: '=?',
+			height: '='
+		},
+		link: function(scope, element, attributes) {
+			var chartLoaded = false;
+
+			if (!scope.headings)
+				scope.headings = [];
+
+			if (!scope.ignore)
+				scope.ignore = [];
+
+			var chartData, chart;
+			var chartOptions = {
+				title: attributes.title,
+				height: scope.height || 400,
+				curveType: attributes.curveType,
+				legend: {
+					position: attributes.legendPosition || 'right'
+				},
+				vAxis: {
+					title: attributes.vAxisTitle
+				},
+				backgroundColor: attributes.background || 'transparent'
+			};
+			
+			function formatToolTip(input, args) {
+				return input.replace(/{(.+?)(:.*?)?}/g, function(match, index, format) {
+					if (format)
+						format = format.slice(1);
+					if (args[index]===undefined)
+						return match;
+					if (isNumber(args[index]))
+						return args[index].toString(format, true);
+					return args[index].toString(format);
+				});
+			}
+			
+			function shouldIgnore(value){
+				return scope.ignore.indexOf(value)>-1;
+			}
+
+			function setupChart() {
+				if (!chartLoaded)
+					return;
+
+				var firstRow = scope.data[0];
+				var fields = {};
+				for (var propertyName in firstRow) {
+					if (shouldIgnore(propertyName))
+						continue;
+					
+					var datum = firstRow[propertyName];
+					var type = typeof (datum);
+					if (type === "object")
+						type = datum.constructor.name;
+					fields[propertyName] = {
+						title: scope.headings[propertyName] || propertyName,
+						type: type.toLowerCase()
+					};
+				}
+
+				chartData = new google.visualization.DataTable();
+				angular.forEach(fields, function(value) {
+					chartData.addColumn(value.type, value.title);
+					if (attributes['toolTip' + value.title.upperCaseFirst()])
+						chartData.addColumn({type: 'string', role: 'tooltip'});
+				});
+
+				angular.forEach(scope.data, function(value) {
+					var row = [];
+					angular.forEach(value, function(value2, index) {
+						if (shouldIgnore(index))
+							return;
+					
+						row.push(value2);
+						var attrIndex = 'toolTip' + index.upperCaseFirst();
+						if (attributes[attrIndex])
+							row.push(formatToolTip(attributes[attrIndex], value));
+					});
+					chartData.addRow(row);
+				});
+
+				chart = new google.visualization.LineChart(element[0]);
+				drawChart();
+			}
+
+			function drawChart() {
+				chart.draw(chartData, chartOptions);
+			}
+
+			$.getScript("https://www.google.com/jsapi", function() {
+				//google.load('visualization', '1.1', {packages: ['line'], callback:function(){
+				google.load('visualization', '1', {
+					packages: ['corechart'],
+					callback: function() {
+						chartLoaded = true;
+						setupChart();
+					}
+				});
+			});
+
+			scope.$watch("data", function(v) {
+				setupChart();
+			});
+
+			angular.element(window).bind('resize', function() {
+				drawChart();
+			});
+		}
+	};
+});
+