An introduction into creating reusable chart components in AngularJS and D3

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="charts.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div class="main">
      <app>
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                  Filter
                              <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
              <a role="menuitem" tabindex="-1" ng-click="main.update(1)">All</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" ng-click="main.update(2)">Filter A</a>
            </li>
              <li role="presentation">
              <a role="menuitem" tabindex="-1" ng-click="main.update(3)">Filter B</a>
            </li>
          </ul>
        </div>
        <chart id="chart" data-data="main.data" data-config="main.config">
          <bars config-key="bars"></bars>
          <axis position="left" config-key="bar"></axis>
          <axis position="bottom" config-key="foo"></axis>
        </chart>
      </app>
    </div>
  </body>

</html>

angular.module('app', ['charts']);

angular.module('app')
  .directive('app', function() {
    return {
      controller: MainController,
      controllerAs: 'main',
      bindToController: true
    }
  });

function MainController() {

  var all = [
    {x: 'a',y: 20}, 
    {x: 'b', y: 14}, 
    {x: 'c', y: 12}, 
    {x: 'd', y: 19}, 
    {x: 'e', y: 18}, 
    {x: 'f', y: 15}, 
    {x: 'g', y: 10}, 
    {x: 'h', y: 14}
  ];
  
  var filteredA = [
    {x: 'a',y: 9}, 
    {x: 'b', y: 5}, 
    {x: 'c', y: 6}, 
    {x: 'd', y: 12}, 
    {x: 'e', y: 10}, 
    {x: 'f', y: 7}, 
    {x: 'g', y: 4}, 
    {x: 'h', y: 9}
  ];
  
  var filteredB = [
    {x: 'a',y: 11}, 
    {x: 'b', y: 9}, 
    {x: 'c', y: 6}, 
    {x: 'd', y: 7}, 
    {x: 'e', y: 8}, 
    {x: 'f', y: 8}, 
    {x: 'g', y: 6}, 
    {x: 'h', y: 5}
  ];

  this.config = {
    title: 'y',
    margin: {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    width: 500,
    height: 500,
    bars: {
      onEnter: function(config) {
        this.duration(1000)
          .attr('opacity', 0);
      },
      onTransition: function(config) {
        this.duration(1000)
          .attr('opacity', 1)
          .attr("x", function(d) {
            return config.x(d.x);
          })
          .attr("width", config.x.rangeBand())
          .attr("y", function(d) {
            return config.y(d.y);
          })
          .attr("height", function(d) {
            return config.height - config.y(d.y);
          });
      },
      onExit: function(config) {
        this.duration(1000)
          .attr('opacity', 0);
      }
    }
  };

  this.update = function(id) {
    if (id == 1) {
      this.data = all;
    } else if (id == 2 ){
      this.data = filteredA;
    } else if (id == 3) {
      this.data = filteredB;
    }
  };

  // init
  this.data = all;
}

.main {
  padding: 20px;
}
.bar {
  fill: steelblue;
}
.bar: hover {
  fill: brown;
}
.axis {
  font: 12px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.x.axis path {
  display: none;
}
ul.dropdown-menu li a {
  cursor: pointer;
}

# An introduction into reusable chart components in AngularJS and D3

This example consists of a **<chart>** component that composes a **<bar>** as well as two **<axis>** components.

var charts = angular.module('charts', []);

charts.directive('chart', function() {
  return {
    replace: true,
    controller: ChartController,
    controllerAs: 'ctrl',
    bindToController: true,
    link: function($scope, element, attrs, ctrl) {

      function getDefaultConfig() {
        var margin = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 40
        },
          width = 500 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom,
          config = {};

        config.margin = margin;
        config.height = height;
        config.width = width;

        return config;
      }

      var config = $scope.ctrl.config = angular.extend(getDefaultConfig(), $scope.ctrl.config || {});
      var svg = config.svg = d3.select(element[0]).append("svg")
        .attr("width", config.width + config.margin.left + config.margin.right)
        .attr("height", config.height + config.margin.top + config.margin.bottom)
        .append("g")
        .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");


      config.x = d3.scale.ordinal().rangeRoundBands([0, config.width], .05);
      config.y = d3.scale.linear().range([config.height, 0]);
      config.axisX = svg.append("g").attr("class", "x axis");
      config.axisY = svg.append("g").attr("class", "y axis");

      function notify() {
        var data = $scope.ctrl.data || {};

        config.xAxis = d3.svg.axis()
          .scale(config.x)
          .orient("bottom");

        config.yAxis = d3.svg.axis()
          .scale(config.y)
          .orient("left");

        config.x.domain(data.map(function(d) {
          return d.x;
        }));
        config.y.domain([0, d3.max(data, function(d) {
          return d.y;
        })]);

        ctrl.notify({
          data: data,
          config: config
        });
      }

      $scope.$watch('ctrl.data', notify);
    },
    scope: {
      data: '=',
      config: '='
    }
  };
});

function ChartController() {

  var elements = [];

  this.addListener = function(observer) {
    elements.push(observer)
  };

  this.removeListener = function(observer) {
    var index = elements.indexOf(observer);

    if (index) {
      elements.splice(index, 1)
    }
  };

  this.notify = function(message) {
    for (var i = elements.length - 1; i >= 0; i--) {
      elements[i](message)
    }
  };
}

charts.directive('bars', ['ChartTransitions',
  function(ChartTransitions) {
    return {
      require: '^chart',
      scope: {},
      link: function($scope, element, attrs, ctrl) {

        var key = attrs.configKey || 'undefined';
        var transition = function(config) {
          this.duration(1000)
            .attr('opacity', 1)
            .attr("x", function(d) {
              return config.x(d.x);
            })
            .attr("width", config.x.rangeBand())
            .attr("y", function(d) {
              return config.y(d.y);
            })
            .attr("height", function(d) {
              return config.height - config.y(d.y);
            });
        };

        var exit = function(config) {
          this.duration(1000).remove();
        };

        var enter = function(config) {
          this.duration(1000).attr('opacity', 0);
        };

        function update(data) {
          var config = data.config,
            data = data.data;

          var bars = config.svg.selectAll(".bar")
            .data(data);

          var entered = bars.enter().append("rect")
            .attr('class', 'bar')
            .attr('opacity', 0);

          var transitions = {};
          transitions.onEnter = (config[key] && config[key].onEnter) ? config[key].onEnter : enter;
          transitions.onTransition = (config[key] && config[key].onTransition) ? config[key].onTransition : transition;
          transitions.onExit = (config[key] && config[key].onExit) ? config[key].onExit : exit;

          ChartTransitions.transition(entered, bars, transitions, config);
        }

        ctrl.addListener(update.bind(this));
      }
    };
  }
]);


charts.directive('axis', function() {
  return {
    require: '^chart',
    scope: {
      position: '@'
    },
    link: function($scope, element, attrs, ctrl) {

      function update(data) {
        var config = data.config,
          data = data.data;
        var transition = config.svg.transition().duration(1000).transition();

        if (attrs.position === 'bottom') {
          transition.selectAll("g.x.axis")
            .attr("transform", "translate(0," + config.height + ")")
            .call(config.xAxis);
        } else if (attrs.position === 'left') {
          transition.selectAll("g.y.axis")
            .call(config.yAxis);
        }
      }

      ctrl.addListener(update.bind(this));
    }
  };
});

charts.service('ChartTransitions', function() {

  this.transition = function(entering, chart, transitions, config) {
    var onEnter = entering.transition();
    var transition = chart.transition();
    var exit = chart.exit();
    var onExit = exit.transition();

    if (transitions.onEnter) onEnter.call(transitions.onEnter.bind(onEnter, config));
    if (transitions.onTransition) transition.call(transitions.onTransition.bind(transition, config));
    if (transitions.onExit) onExit.call(transitions.onExit.bind(onExit, config));
  };
});