angular-plotly/src/angular-plotly.js at 657ae2f8a32685904a1597e70e004ca13ed90b2e · alonho/angular-plotly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
(function () {
    'use strict';
    angular.module('plotly', []).directive('plotly', [
        '$window',
        function ($window) {
            return {
                restrict: 'E',
                template: '<div></div>',
                scope: {
                    plotlyData: '=',
                    plotlyLayout: '=',
                    plotlyOptions: '=',
                    plotlyEvents: '=',
                    plotlyManualDataUpdate: '='
                },
                link: function (scope, element) {
                    var graph = element[0].children[0];
                    var initialized = false;

                    function subscribeToEvents(graph) {
                        scope.plotlyEvents(graph);
                    }

                    function onUpdate() {
                        //No data yet, or clearing out old data
                        if (!(scope.plotlyData)) {
                            if (initialized) {
                                Plotly.Plots.purge(graph);
                                graph.innerHTML = '';
                            }
                            return;
                        }
                        //If this is the first run with data, initialize
                        if (!initialized) {
                            initialized = true;
                            Plotly.newPlot(graph, scope.plotlyData, scope.plotlyLayout, scope.plotlyOptions);
                            if (scope.plotlyEvents) {
                                subscribeToEvents(graph);
                            }
                        }
                        graph.layout = scope.plotlyLayout;
                        graph.data = scope.plotlyData;
                        Plotly.update(graph);
                    }

                    function onResize() {
                        if (!(initialized && scope.plotlyData)) return;
                        Plotly.Plots.resize(graph);
                    }

                    scope.$watch(
                        function (scope) {
                            return scope.plotlyLayout;
                        },
                        function (newValue, oldValue) {
                            if (angular.equals(newValue, oldValue) && initialized) return;
                            onUpdate();
                        }, true);

                    if (!scope.plotlyManualDataUpdate) {
                        scope.$watch(
                            function (scope) {
                                return scope.plotlyData;
                            },
                            function (newValue, oldValue) {
                                if (angular.equals(newValue, oldValue) && initialized) return;
                                onUpdate();
                            }, true);
                    }

                    /**
                     * Listens to 'tracesUpdated' event broadcasted from controller to update plot.
                     */
                    scope.$on('tracesUpdated', function () {
                        onUpdate();
                    });

                    scope.$watch(function () {
                        return {
                            'h': element[0].offsetHeight,
                            'w': element[0].offsetWidth
                        };
                    }, function (newValue, oldValue) {
                        if (angular.equals(newValue, oldValue)) return;
                        onResize();
                    }, true);

                    angular.element($window).bind('resize', onResize);
                }
            };
        }
    ]);
})();