portainer/assets/js/angular-vis.js

angular.module('ngVis', [])

    .factory('VisDataSet', function () {
        'use strict';
        return function (data, options) {
            // Create the new dataSets
            return new vis.DataSet(data, options);
        };
    })

/**
 * TimeLine directive
 */
    .directive('visTimeline', function () {
        'use strict';
        return {
            restrict: 'EA',
            transclude: false,
            scope: {
                data: '=',
                options: '=',
                events: '=',
                component: '='
            },
            link: function (scope, element, attr) {
                var timelineEvents = [
                    'rangechange',
                    'rangechanged',
                    'timechange',
                    'timechanged'
                ];

                // Declare the timeline
                var timeline = null;

                scope.$watch('data', function () {
                    // Sanity check
                    if (scope.data == null) {
                        return;
                    }

                    // If we've actually changed the data set, then recreate the graph
                    // We can always update the data by adding more data to the existing data set
                    if (timeline != null) {
                        timeline.destroy();
                    }

                    // Create the timeline object
                    timeline = new vis.Timeline(element[0]);
                    scope.component = timeline;

                    // Attach an event handler if defined
                    angular.forEach(scope.events, function (callback, event) {
                        if (timelineEvents.indexOf(String(event)) >= 0) {
                            timeline.on(event, callback);
                        }
                    });

                    // Set the options first
                    timeline.setOptions(scope.options);

                    // Add groups and items
                    if (scope.data.groups != null) {
                        timeline.setGroups(scope.data.groups);
                    }
                    if (scope.data.items != null) {
                        timeline.setItems(scope.data.items);
                    }

                    // onLoad callback
                    if (scope.events != null && scope.events.onload != null && angular.isFunction(scope.events.onload)) {
                        scope.events.onload(timeline);
                    }
                });

                scope.$watchCollection('options', function (options) {
                    if(timeline == null) {
                        return;
                    }
                    timeline.setOptions(options);
                });
            }
        };
    })


/**
 * Directive for network chart.
 */
    .directive('visNetwork', function () {
        return {
            restrict: 'EA',
            transclude: false,
            scope: {
                data: '=',
                options: '=',
                events: '=',
                component: '='
            },
            link: function (scope, element, attr) {
                var networkEvents = [
                    'rangechange',
                    'rangechanged',
                    'timechange',
                    'timechanged'
                ];

                var network = new vis.Network(element[0], scope.data, scope.options);
                scope.component = network;

                scope.$watch('data', function () {
                    // Sanity check
                    if (scope.data == null) {
                        return;
                    }

                    // If we've actually changed the data set, then recreate the graph
                    // We can always update the data by adding more data to the existing data set
//                    if (network !== undefined) {
//                        network.destroy();
                    //                   }

                    // Create the graph2d object
                    network = new vis.Network(element[0]);
                    scope.component = network;

                    // Attach an event handler if defined
                    angular.forEach(scope.events, function (callback, event) {
                        if (networkEvents.indexOf(String(event)) >= 0) {
                            network.on(event, callback);
                        }
                    });

                    // Set the options first
                    network.setOptions(scope.options);
                    network.setData(scope.data);


                    // onLoad callback
//                    if (scope.events != null && scope.events.onload != null && angular.isFunction(scope.events.onload)) {
//                        scope.events.onload(graph);
//                    }
                });

                scope.$watchCollection('options', function (options) {
                    if(network == null) {
                        return;
                    }
                    network.setOptions(options);
                });

                scope.$watch('events', function (events) {
                    angular.forEach(events, function (callback, event) {
                        if (['select', 'click', 'hoverNode', 'doubleClick'].indexOf(String(event)) >= 0) {
                            network.on(event, callback);
                        }
                    });
                });
            }
        };
    })

/**
 * Directive for graph2d.
 */
    .directive('visGraph2d', function () {
        'use strict';
        return {
            restrict: 'EA',
            transclude: false,
            scope: {
                data: '=',
                options: '=',
                events: '=',
                component: '='
            },
            link: function (scope, element, attr) {
                var graphEvents = [
                    'rangechange',
                    'rangechanged',
                    'timechange',
                    'timechanged'
                ];

                // Create the chart
                var graph = new vis.Graph2d(element[0]);
                scope.component = graph;

                scope.$watch('data', function () {
                    // Sanity check
                    if (scope.data == null) {
                        return;
                    }

                    // If we've actually changed the data set, then recreate the graph
                    // We can always update the data by adding more data to the existing data set
                    if (graph != null) {
                        graph.destroy();
                    }

                    // Create the graph2d object
                    graph = new vis.Graph2d(element[0]);
                    scope.component = graph;

                    // Attach an event handler if defined
                    angular.forEach(scope.events, function (callback, event) {
                        if (graphEvents.indexOf(String(event)) >= 0) {
                            graph.on(event, callback);
                        }
                    });

                    // Set the options first
                    graph.setOptions(scope.options);

                    // Add groups and items
                    if (scope.data.groups != null) {
                        graph.setGroups(scope.data.groups);
                    }
                    if (scope.data.items != null) {
                        graph.setItems(scope.data.items);
                    }

                    // onLoad callback
                    if (scope.events != null && scope.events.onload != null && angular.isFunction(scope.events.onload)) {
                        scope.events.onload(graph);
                    }
                });

                scope.$watchCollection('options', function (options) {
                    if(graph == null) {
                        return;
                    }
                    graph.setOptions(options);
                });
            }
        };
    })
;