122 lines
3 KiB
JavaScript
122 lines
3 KiB
JavaScript
/* 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();
|
|
});
|
|
}
|
|
};
|
|
});
|
|
|