Allow sunbursts to have children (uber#479)

docs/markdown/sunburst.md

@@ -99,6 +99,10 @@ Each point consists of following properties:
 Type: `boolean`
 Simple boolean on whether or not to show the root node of the tree.
 
+#### children (optional)
+Type: `react components`
+Sunburst can accept react components as children if you wish to to annotate your diagram.
+
 #### animation (optional)
 Type: `boolean|Object`
 Please refer to [Animation](animation.md) doc for more information.

showcase/sunbursts/basic-sunburst.js

@@ -22,9 +22,15 @@ import React from 'react';
 
 import Sunburst from 'sunburst';
 import {EXTENDED_DISCRETE_COLOR_RANGE} from 'theme';
+import {LabelSeries} from 'index';
 
 import D3FlareData from '../treemap/d3-flare-example.json';
 
+const LABEL_STYLE = {
+  fontSize: '8px',
+  textAnchor: 'middle'
+};
+
 /**
  * Recursively work backwards from highlighted node to find path of valud nodes
  * @param {Object} node - the current node being considered
@@ -68,11 +74,12 @@ const decoratedData = updateData(D3FlareData, false);
 export default class BasicSunburst extends React.Component {
   state = {
     pathValue: false,
-    data: decoratedData
+    data: decoratedData,
+    finalValue: 'SUNBURST'
   }
 
   render() {
-    const {data, pathValue} = this.state;
+    const {data, finalValue, pathValue} = this.state;
     return (
       <div className="basic-sunburst-example-wrapper">
         <Sunburst
@@ -85,12 +92,14 @@ export default class BasicSunburst extends React.Component {
               return res;
             }, {});
             this.setState({
+              finalValue: path[path.length - 1],
               pathValue: path.join(' > '),
               data: updateData(decoratedData, pathAsMap)
             });
           }}
           onValueMouseOut={() => this.setState({
             pathValue: false,
+            finalValue: false,
             data: updateData(decoratedData, false)
           })}
           style={{
@@ -101,7 +110,11 @@ export default class BasicSunburst extends React.Component {
           colorType="literal"
           data={data}
           height={300}
-          width={350}/>
+          width={350}>
+          {finalValue && <LabelSeries data={[
+            {x: 0, y: 0, label: finalValue, style: LABEL_STYLE}
+          ]} />}
+        </Sunburst>
         <div className="basic-sunburst-example-path-name">{pathValue}</div>
       </div>
     );

src/sunburst/index.js

@@ -75,6 +75,7 @@ class Sunburst extends React.Component {
     const {
       animation,
       className,
+      children,
       data,
       height,
       hideRootNode,
@@ -101,6 +102,7 @@ class Sunburst extends React.Component {
           data: animation ? mappedData.map(row => ({...row, parent: null, children: null})) : mappedData,
           _data: animation ? mappedData : null
         }}/>
+        {children}
       </XYPlot>
     );
   }

tests/components/sunburst-tests.js

@@ -67,7 +67,7 @@ test('Sunburst: Empty', t => {
 test('Sunburst: Flare Demo', t => {
   const $ = mount(<BasicSunburst />);
   t.equal($.find('.rv-xy-plot__series--arc path').length, 251, 'should find the right number of children');
-
+  t.equal($.text(), 'SUNBURST', 'should find the correct text inside of the chart');
   // check hover state
   t.deepEqual($.state().pathValue, false, 'should initially find no hover path');
   $.find('.rv-xy-plot__series--arc path').at(200).simulate('mouseover');