1

I'm using Angular and d3 to create a dashboard application. Some important structural pieces are:

  1. A timeframe controller
  2. d3 directives (i.e. d3-choropleth for example) that are used through specific controllers.
  3. A JSON $http service that grabs data and pushes it to the individual controllers.

That's my structure so far. My question is: How should I go about implementing the timeframe functionality into the rest of my application? The value of the timeframe controller/form is stuck in it's own scope. Should I transfer the timeframe data to a global variable, and then somehow bind the variable to the JSON request service?

Here's my service:

// Service for making JSON requests
myApp.factory('requestService', function($http) {
   return {
        getDownloadsLineData: function() {
             // Return the promise
             return $http({
                        url: base_url + downloads, 
                        method: "GET",
                        // These parameters are dynamically changed by 
                        // a global timeframe control
                        params: { start: '2013-01-01',
                                end: '2013-02-01',
                                interval: 'month',
                                country: 'US',
                                location_bin: 'countries'}
                     })
                    .then(function(result) {
                        // Resolve the promise as the data
                        return result.data;
                    });
        }
   }
});

Timeframe controller:

myApp.controller('TimeframeCtrl', ['$scope',
                                   '$cookieStore',
                                   function ($scope, $cookieStore) {
                                   ...

Example of one d3 controller:

myApp.controller('DownloadsLineCtrl', ['$scope', 
                                       'requestService', 
                                       function($scope, requestService){
  $scope.title = 'Downloads over Time';
  $scope.tooltip = 'Test tooltip';
  requestService.getDownloadsLineData().then(function(data) {
        $scope.d3Data = data;
    });
}]);

1 Answer 1

1

Sounds like you need a TimeframeService.

The TimeframeController will take care of displaying the timeframe params in the view and let the usrr tweak it (I assume). Then it will save them back to the TimeframeService.

The requestService will also depend on the TimeframeService and retrieve the params for configuring the request.

BTW, if you are using $cookies to store the params, the TimeframeService should take care if that.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.