<!DOCTYPE html>
<html ng-app="pietest">

  <head>
    <link data-require="nvd3@1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.1.1" data-require="bootstrap-css@3.1.1" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="d3@3.3.11" data-semver="3.3.11" src="http://d3js.org/d3.v3.min.js"></script>
    <script data-require="nvd3@1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
    <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js" data-semver="3.10.0" data-require="lodash.js@*"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.2/dist/angular-nvd3.js"></script>
    <script src="https://rawgit.com/euangoddard/holder-ipsum/master/holder-ipsum.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h3>Without hack</h3>
          <nvd3 options="plainoptions" data="data" class="with-3d-shadow with-transitions"></nvd3>
          <h3>With hack</h3>
                    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>

        </div>
        <div class="col-md-6 text-warning">

        {{fluff}}

      </div>
      </div>
    </div>
  </body>

</html>

// Code goes here

var app = angular.module("pietest", ['nvd3']);

app.controller('MainCtrl', function($scope) {

  var tooltip = nv.models.tooltip();
  tooltip.duration(0);

  $scope.fluff = HolderIpsum.paragraph(4);
  $scope.data = _.map(_.range(5, 16, 2), function(o) {
    return {
      key: HolderIpsum.words(o),
      value: o
    }
  });
  $scope.plainoptions = {
    chart: {
      type: 'pieChart',
      height: 200,
      x: function(d) {
        return d.key;
      },
      y: function(d) {
        return d.value;
      },
      showLabels: false,
      transitionDuration: 500,
      legend: {
        vers: 'furious'
      },
      legendPosition: 'right'

    }
  }
  $scope.options = {
    chart: {
      type: 'pieChart',
      height: 200,
      x: function(d) {
        if (d.key.length > 30) {
          return d.key.substr(0, 30) + "...";
        } else {
          return d.key;
        }
      },
      y: function(d) {
        return d.value;
      },
      showLabels: false,
      transitionDuration: 500,
      legend: {
        vers: 'furious',
        dispatch: {
          legendMouseover: function(o) {
            if (tooltip.hidden()) {
              var data = {
                series: {
                  key: o.key,
                  value: o.value + " words",
                  color: o.color
                }
              };
              tooltip.data(data)
                .hidden(false);
            }
            tooltip.position({
              top: d3.event.pageY,
              left: d3.event.pageX
            })();
          },
          legendMouseout: function(o) {
            tooltip.hidden(true);
          }
        }
      },
      legendPosition: 'right',
      valueFormat: function(d) {
        return d + " words";
      }
    }
  };
});
/* Styles go here */