141 lines
5.2 KiB
Python
141 lines
5.2 KiB
Python
/**
|
|
@toc
|
|
|
|
@param {Object} scope (attrs that must be defined on the scope (i.e. in the controller) - they can't just be defined in the partial html). REMEMBER: use snake-case when setting these on the partial!
|
|
TODO
|
|
|
|
@param {Object} attrs REMEMBER: use snake-case when setting these on the partial! i.e. my-attr='1' NOT myAttr='1'
|
|
TODO
|
|
|
|
@dependencies
|
|
TODO
|
|
|
|
@usage
|
|
partial / html:
|
|
TODO
|
|
|
|
controller / js:
|
|
TODO
|
|
|
|
//end: usage
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
/* global Rickshaw */
|
|
|
|
angular.module('angular-rickshaw', [])
|
|
.directive('rickshaw', function($compile) {
|
|
return {
|
|
restrict: 'EA',
|
|
scope: {
|
|
options: '=rickshawOptions',
|
|
series: '=rickshawSeries',
|
|
features: '=rickshawFeatures'
|
|
},
|
|
// replace: true,
|
|
link: function(scope, element, attrs) {
|
|
function getSettings(el) {
|
|
var settings = angular.copy(scope.options);
|
|
settings.element = el;
|
|
settings.series = scope.series;
|
|
return settings;
|
|
}
|
|
|
|
var graph;
|
|
|
|
function update() {
|
|
var mainEl = angular.element(element);
|
|
mainEl.append(graphEl);
|
|
mainEl.empty();
|
|
var graphEl = $compile('<div></div>')(scope);
|
|
mainEl.append(graphEl);
|
|
var settings = getSettings(graphEl[0]);
|
|
graph = new Rickshaw.Graph(settings);
|
|
|
|
if (scope.features && scope.features.hover) {
|
|
var hoverConfig = {
|
|
graph: graph
|
|
};
|
|
hoverConfig.xFormatter = scope.features.hover.xFormatter;
|
|
hoverConfig.yFormatter = scope.features.hover.yFormatter;
|
|
hoverConfig.formatter = scope.features.hover.formatter;
|
|
var hoverDetail = new Rickshaw.Graph.HoverDetail(hoverConfig);
|
|
}
|
|
if (scope.features && scope.features.palette) {
|
|
var palette = new Rickshaw.Color.Palette({scheme: scope.features.palette});
|
|
for (var i = 0; i < settings.series.length; i++) {
|
|
settings.series[i].color = palette.color();
|
|
}
|
|
}
|
|
|
|
graph.render();
|
|
|
|
if (scope.features && scope.features.xAxis) {
|
|
var xAxisConfig = {
|
|
graph: graph
|
|
};
|
|
if (scope.features.xAxis.timeUnit) {
|
|
var time = new Rickshaw.Fixtures.Time();
|
|
xAxisConfig.timeUnit = time.unit(scope.features.xAxis.timeUnit);
|
|
}
|
|
var xAxis = new Rickshaw.Graph.Axis.Time(xAxisConfig);
|
|
xAxis.render();
|
|
}
|
|
if (scope.features && scope.features.yAxis) {
|
|
var yAxisConfig = {
|
|
graph: graph
|
|
};
|
|
if (scope.features.yAxis.tickFormat) {
|
|
yAxisConfig.tickFormat = Rickshaw.Fixtures.Number[scope.features.yAxis.tickFormat];
|
|
}
|
|
|
|
var yAxis = new Rickshaw.Graph.Axis.Y(yAxisConfig);
|
|
yAxis.render();
|
|
}
|
|
|
|
if (scope.features && scope.features.legend) {
|
|
var legendEl = $compile('<div></div>')(scope);
|
|
mainEl.append(legendEl);
|
|
|
|
var legend = new Rickshaw.Graph.Legend({
|
|
graph: graph,
|
|
element: legendEl[0]
|
|
});
|
|
if (scope.features.legend.toggle) {
|
|
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
|
|
graph: graph,
|
|
legend: legend
|
|
});
|
|
}
|
|
if (scope.features.legend.highlight) {
|
|
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
|
|
graph: graph,
|
|
legend: legend
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
scope.$watch('options', function(newValue, oldValue) {
|
|
if (!angular.equals(newValue, oldValue)) {
|
|
update();
|
|
}
|
|
});
|
|
scope.$watch('series', function(newValue, oldValue) {
|
|
if (!angular.equals(newValue, oldValue)) {
|
|
update();
|
|
}
|
|
});
|
|
scope.$watch('features', function(newValue, oldValue) {
|
|
if (!angular.equals(newValue, oldValue)) {
|
|
update();
|
|
}
|
|
});
|
|
|
|
update();
|
|
},
|
|
controller: function($scope, $element, $attrs) {
|
|
}
|
|
};
|
|
}); |