nvd3-donut.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="nvd3-behavior.html">

<!--
An element to create donut chart using nvd3.

Example:

    <nvd3-donut
    data="[[data]]"
    height="300"
    width="400"
    auto-resize
    show-legend
    donut-ratio="0.25"></nvd3-donut>

Data Format:
```
[
  {
    "label": "label 1",
    "value": 69
  },
  {
    "label": "label 2",
    "value": 85
  }
]
```

@group NVD3 Elements
@element nvd3-donut
@demo demo/nvd3-donut.html
@hero hero.svg
-->

<dom-module id="nvd3-donut">
  <template>
    <style include="nvd3-shared-styles">
      #svg .nv-slice {
        transform: scale(1);
        transition: 0.1s ease-in-out;
      }

      #svg .nv-slice.selected {
        transform: scale(1.1);
      }

    </style>
    <!-- We need to put svg tag inside a div to set correct margins -->
    <div>
      <svg id="svg"></svg>
    </div>
  </template>

  <script>
    Polymer({
      is: 'nvd3-donut',
      behaviors: [NVD3.ChartBehavior],
      properties: {
        /**
         * NVD3 chart object.
         */
        _chart: {
          type: Object,
          value: function() {
            return nv.models.pieChart()
              .x(function(d) {
                return d[this.xProp];
              }.bind(this))
              .y(function(d) {
                return d[this.yProp];
              }.bind(this))
              .donut(true);
          }
        },

        /**
         * Configurable x-axis property key
         */
        xProp: {
          type: String,
          value: 'label'
        },

        /**
         * Configurable y-axis property key
         */
        yProp: {
          type: String,
          value: 'value'
        },

        /**
         * Configure how big you want the donut hole size to be.
         */
        donutRatio: {
          type: Number,
          value: 0.5
        },

        /**
         * Show labels for each slice
         */
        showLabels: {
          type: Boolean,
          value: false
        },

        /**
         * Whether to display the legend or not
         */
        showLegend: {
          type: Boolean,
          value: false
        },

        /**
         * Whether to increase slice radius on hover or not
         */
        growOnHover: {
          type: Boolean,
          value: false
        },

        /**
         * Text to include within the middle of a donut chart
         */
        title: {
          type: String
        },

        /**
         * Disable the tooltip
         */
        disableTooltip: {
          type: Boolean,
          value: false
        },

        /**
         * Whether the labels should be outside of donut
         */
        labelsOutside: {
          type: Boolean,
          value: false,
          observer: '_labelsOutsideChanged'
        },

        /**
        * Container for selected slices
        */
        selection: {
          type: Object,
          notify: true
        },

        /**
        * Whether possible to selected several slices
        */
        multiSelection: {
          type: Boolean,
          observer: '_multiSelectionChanged'
        },

        /**
         * NVD3 components which are used in this chart.
         * It's required for binding events.
         */
        _components: {
          type: Array,
          value: ['legend', 'pie', 'tooltip']
        }
      },
      /**
      * Fired when a slice is selected
      * @event slice-selected
      */

      observers: [
        '_setDonutRatio(donutRatio)',
        '_setTitle(title)',
        '_selectionChanged(selection.splices)'
      ],

      /**
       * Observer for setting donut ratio.
       */
      _setDonutRatio: function(donutRatio) {
        this._chart.donutRatio(this.donutRatio);
      },

      /**
       * Observer for setting title.
       */
      _setTitle: function(title) {
        this._chart.title(this.title);
      },

      /**
       * Observer for labelsOutside
       */
      _labelsOutsideChanged: function () {
        this._chart.labelsOutside(this.labelsOutside);
      },

      ready: function() {
        this._chart.pie.dispatch.on('elementClick', this._onSliceClick.bind(this));
      },

      /**
       * Listener for elementClick
       */
      _onSliceClick: function(item) {
        var previousElement = item.element.parentElement.querySelector('.nv-slice.selected');
        if (this.multiSelection) {
          if (this.selection.indexOf(item.data) > -1) {
            this.splice('selection', this.selection.indexOf(item.data), 1);
            item.element.classList.remove('selected');
          } else {
            this.push('selection', item.data);
            item.element.classList.add('selected');
          }
        } else {
          this.selection = item.data;
          if (previousElement !== null) {
            previousElement.classList.remove('selected');
          }
          item.element.classList.add('selected');
        }
      },

      /**
      * Observer for multiSelection
      */
      _multiSelectionChanged: function(newValue, oldValue) {
        if (newValue) {
          if (this.selection === undefined) {
            this.selection = [];
          } else if (!(this.selection instanceof Array)) {
            this.selection = [this.selection];
          }
        } else {
          if (this.selection instanceof Array) {
            var selectedSlices = this.svg.querySelectorAll('.nv-slice.selected'),
              i;
            for (i = 0; i < selectedSlices.length; i += 1) {
              selectedSlices[i].classList.remove('selected');
            }
            this.selection = [];
          }
        }
      },

      /**
      * Observer for selection
      */
      _selectionChanged: function() {
          this.fire('slice-selected', this.selection);
      }
    });
  </script>
</dom-module>