nvd3-sunburst.html

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

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

Example:

    <nvd3-sunburst
      data="[[data]]"
      height="100"
      width="400"
      auto-resize>
    </nvd3-sunburst>

Data Format:
```
[{
  "name": "flare",
  "children": [
      {
          "name": "analytics",
          "children": [
              {
                  "name": "cluster",
                  "children": [
                      {"name": "AgglomerativeCluster", "size": 3938},
                      {"name": "CommunityStructure", "size": 3812},
                      {"name": "HierarchicalCluster", "size": 6714},
                      {"name": "MergeEdge", "size": 743}
                  ]
              },
              {
                  "name": "graph",
                  "children": [
                      {"name": "BetweennessCentrality", "size": 3534},
                      {"name": "LinkDistance", "size": 5731},
                      {"name": "MaxFlowMinCut", "size": 7840},
                      {"name": "ShortestPaths", "size": 5914},
                      {"name": "SpanningTree", "size": 3416}
                  ]
              },
              {
                  "name": "optimization",
                  "children": [
                      {"name": "AspectRatioBanker", "size": 7074}
                  ]
              }
          ]
      },
      {
          "name": "animate",
          "children": [
              {"name": "Easing", "size": 17010},
              {"name": "FunctionSequence", "size": 5842},
              {
                  "name": "interpolate",
                  "children": [
                      {"name": "ArrayInterpolator", "size": 1983},
                      {"name": "ColorInterpolator", "size": 2047},
                      {"name": "DateInterpolator", "size": 1375},
                      {"name": "Interpolator", "size": 8746},
                      {"name": "MatrixInterpolator", "size": 2202},
                      {"name": "NumberInterpolator", "size": 1382},
                      {"name": "ObjectInterpolator", "size": 1629},
                      {"name": "PointInterpolator", "size": 1675},
                      {"name": "RectangleInterpolator", "size": 2042}
                  ]
              },
              {"name": "ISchedulable", "size": 1041},
              {"name": "Parallel", "size": 5176},
              {"name": "Pause", "size": 449},
              {"name": "Scheduler", "size": 5593},
              {"name": "Sequence", "size": 5534},
              {"name": "Transition", "size": 9201},
              {"name": "Transitioner", "size": 19975},
              {"name": "TransitionEvent", "size": 1116},
              {"name": "Tween", "size": 6006}
          ]
      }
  ]
}]
```

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

<dom-module id="nvd3-sunburst">
  <template>
    <style include="nvd3-shared-styles"></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-sunburst',
      behaviors: [NVD3.ChartBehavior],
      properties: {
        /**
         * NVD3 chart object.
         */
        _chart: {
          type: Object,
          value: function() {
            return nv.models.sunburstChart();
          }
        },
        mode: {
          type: String,
          value: 'count',
          observer: 'modeChanged'
        },

        /**
         * NVD3 components which are used in this chart.
         * It's required for binding events.
         */
        _components: {
          type: Array,
          value: ['sunburst', 'tooltip']
        }
      },
      modeChanged: function(newvalue) {
        if (this._chart) {
          this._chart.mode(newvalue);
        }
      }
    });
  </script>
</dom-module>