atavakoli / angular-c3-directive Goto Github PK

The data.hide property of the model should have 2-way binding, in that changes to the model should show/hide the data as expected, and clicking the legend to show/hide data should update the model & trigger a digest for Angular.

C3.js' default behavior when legend items are clicked is to toggle (hide/show), unless the altKey modifier is active, in which case all but the clicked item are hidden. This should be the default behavior here as well.

... and regenerate the chart otherwise.

Instead of adding onclick to the config object, it would be more "the Angular way" to make these expressions in the directive, so you can do things like this:

<div c3="chart" c3-data-click="dataClicked(datum, event)"
     c3-legend-click="legendClicked(id, event, default)">
</div>

angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', function($scope) {
  $scope.chart = {
    data: {
      columns: [
        ['data1', 1, 2, 3],
        ['data2', 4, 5, 6]
      ]
    }
  };

  $scope.dataClicked = function(d, event) {
    console.log(d);
    console.log(event);
  };

  $scope.legendClicked = function(id, event) {
    console.log(id);
    console.log(event);
  };
}]);