All geek questions in one place

How to structure Angular with Highcharts and lots of dynamic data

I know this is a little complicated sometimes without code, but I wanted to check out some ideas on how I can structure code that grows pretty fast, and wanted to do it before it got worse :)

For this, I use Java(Spring)both the backend, Angularand Highcharts.

Basically this is a panel containing some diagrams and dynamically dependent on the user's choice. His data is also automatically updated every 15 seconds.

I have a backend in Javawhich I get this data.

In Angular, I have some functions in the controller for managing data, creating tall charts, setting a series, loading user parameters, etc. There is also a service that requests data and does some manipulation.

Now that this panel is working fine, I will need to make a similar panel, but with different content / context, but practically, with the same structure and functions.

So here it is. Today I have one service and one controller for all this, and there are a couple of DOM manipulations in the controller to make this work.

Question Can you give me some ideas on how I can structure all this code? I wanted:

  • Be able to easily test it.
  • Reusing this code for a similar panel
  • ( , , ).

, ~:

  • , , , , . , .
  • Dashboard, , mini-services, . , , - , - Highcharts.

? , -, , !

!

+4
1

- , 10 15 , .

, , .

- - . .

(function (angular) {
    var module = angular.module('pie-chart', ['my-project']);

   module.service('pieChartService', [
       'globalVariables', 'SharedDataService', '$q', '$filter', '$log', 'serverDataHelper',
       function (globalVariables, SharedDataService, $q, $filter, $log, serverDataHelper) {

           var getBaseChartData = function (chart) {

               var seriesObj = getSeriesObj(chart);

               var baseChartData = {
                   chart: {
                       type: 'pie',
                       width: 250 + 100 + 30,                      
                       height: 210,
                       style: {
                           fontFamily: "'Open Sans', sans-serif, arial;",
                       },
                       spacing: [0, 0, 0, 0]
                   },
                   title: {
                       text: ''
                   },
                   legend: {
                       align: 'right',
                       verticalAlign: 'middle',
                       layout: 'vertical',
                       itemMarginTop: 16,
                       useHTML: true, // in order to disable legend navigation
                       itemStyle: {
                           fontSize: '13px',
                           fontWeight: 'normal',
                           cursor: 'default'
                       },
                       symbolWidth: 13,
                       symbolHeight: 13,
                       symbolPadding: 11
                       width: 110,
                       y: -12
                   },
                   tooltip: {
                       backgroundColor: '#fff',
                       borderColor: '#ccc',
                       borderRadius: 3,
                       borderWidth: 1,
                   },
                   plotOptions: {
                       pie: {
                           showInLegend: true,
                           dataLabels: {
                               formatter: function () { return this.percentage > 0 ? $filter('number')(this.percentage, globalVariables.fractionSize) + '%' : ''; },
                               distance: -25,
                               color: 'white',
                               style: {
                                   fontSize: '14px',
                                   fontWeight: 'normal',
                                   textShadow: 'false'
                               }
                           },
                           center: [100, 90],
                           size: 180,
                           borderWidth: 3,
                           states: {
                               hover: {
                                   halo: {
                                       opacity: 0.75,
                                       size: 5
                                   },
                                   brightness: 0
                               }
                           },
                           point: {
                               events: {
                                   legendItemClick: function (event) { event.preventDefault(); }
                               }
                           }
                       }
                   },
                   series: seriesObj
               };
               return baseChartData;
           }

           var defaultChartSerieColors = [
               '#f8981d', //orange    
               '#6663ac', //purple 
               '#54b4c8', // blue 
               '#fecd08', // yellow 
               '#a3ca5f', // green 
               '#ef4036' // red 
           ];

           var getSeriesObj = function (chartObj) {
               var serie = {
                   data: [],
                   serverDateRanges: {
                       primary: {
                           startDate: undefined,
                           endDate: undefined
                       },
                       secondary: {
                           startDate: undefined,
                           endDate: undefined,
                       },
                   }
               };

               var series = [serie];

               jQuery.each(chartObj.Data, function (index, pointData) {

                   var point = {
                       name: pointData.Name,
                       y: pointData.Value,
                       color: defaultChartSerieColors[index],
                       Id: pointData.Id,
                       serverData: pointData
                   };
                   serie.data.push(point);
               });

               return series;
           }
           this.getPieChartData = function ($scope, url, params, chartDiff) {

               var pieChartDataPromise = serverDataHelper.getChartData(
                           url,
                           params);

               pieChartDataPromise.then(function (serverResponse) {
                   var pieChart = serverResponse.data;

                  var pieChartData = getBaseChartData(pieChart.Primary);

                   var chartData = jQuery.extend(true, {}, pieChartData);
                   chartData = jQuery.extend(true, chartData, chartDiff);

                   $scope.pieChartData = chartData;
               });

               return pieChartDataPromise;
           };
       }
    ]);
})(window.angular);

serverDataHelper. HTTP-. SharedDataService: .

pieChart.js, .

(function () {
    var module = angular.module('social.module', [
        //dependancy
    ]);

    var urls = {
        getSocialChartUrl: 'api end point'        
    };

    var socialChartDataDiff = {
        chart: {
            height: 220,
            width: 600,
            backgroundColor: 'rgba(255, 255, 255, 0.1)'
        },
        legend: {
            enabled: true,
            x: -200,
            useHTML: true,
            labelFormatter: function () {
                return '<span class="legend-title">' + this.name + '</span>' + '<span class="legend-value"> (' + this.y + ')</span>';
            },
            itemStyle: {
                cursor: 'pointer'
            }
        },
        plotOptions: {
            pie: {
                showInLegend: true,
                dataLabels: {
                    /*format: '{percentage:.2f}',*/
                    formatter: function () { return this.point.y; },
                    distance: -25,
                    color: 'white',
                    style: { "fontSize": "11px" }
                },
                borderWidth: 0,
                states: {
                    hover: {
                        halo: {
                            opacity: 0.75,
                            size: 5
                        },
                        brightness: 0
                    }
                },
                point: {
                    events: {
                        event.preventDefault(); 
                        }
                    }
                }
            }
        },
        tooltip: {
            formatter: function () {
                return this.key + ': ' + this.y;
            }
        }
    };

    module.controller('socialOnPageController', [
     '$scope', 'mcatSharedDataService', 'globalVariables', 'pieChartService', 'socialOnPageService', 'chartHelperService', '$q',
    function ($scope, mcatSharedDataService, globalVariables, pieChartService, socialOnPageService, chartHelperService, $q) {

            var params = {
                //params
            };

            var chartDataPromise = pieChartService.getPieChartData($scope, urls.getSocialChartUrl, params, socialChartDataDiff);

    }]);

})();

pieChartService .

socialChartDataDiff. . , . . , .

- - .

<mi-chart value="pieChartData" chart-obj="pieChartDataObj" is-fixed-width="true"></mi-chart>

- - .

mi-chart , , .

(function () {

    var module = angular.module('mi-chart', []);

    module.directive('miChart', ['$rootScope', function ($rootScope) {

        return {
            restrict: 'E',
            template: '<div id="chartContainer" class="chartContainer"></div>',
            scope: {
                chartData: "=value",
                chartObj: "=?"
            },
            replace: true,
            link: function ($scope, $element, $attrs) {
                $scope.$watch('chartData', function (value) {
                    if (!value) {
                        return;
                    }

                    $scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0];
                    $scope.chartObj = new Highcharts.Chart($scope.chartData);
                });
            }
        }
    }]);

})();

, .

+6

Source: https://habr.com/ru/post/1617161/

More articles:


All Articles