import React,  { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, Shape } from 'bizcharts';
import DataSet from '@antv/data-set';

const ds = new DataSet();
export default class Series extends Component {
	constructor(){
		super();
		this.state={
			data: [],
			cols: {},
		}
	}
	componentWillMount(){
		this.setState({
			data: [
				{ month: 'Jan', Tokyo: 7.0, London: 3.9 },
				{ month: 'Feb', Tokyo: 6.9, London: 4.2 },
				{ month: 'Mar', Tokyo: 9.5, London: 5.7 },
				{ month: 'Apr', Tokyo: 14.5, London: 8.5 },
				{ month: 'May', Tokyo: 18.4, London: 11.9 },
				{ month: 'Jun', Tokyo: 21.5, London: 15.2 },
				{ month: 'Jul', Tokyo: 25.2, London: 17.0 },
				{ month: 'Aug', Tokyo: 26.5, London: 16.6 },
				{ month: 'Sep', Tokyo: 23.3, London: 14.2 },
				{ month: 'Oct', Tokyo: 18.3, London: 10.3 },
				{ month: 'Nov', Tokyo: 13.9, London: 6.6 },
				{ month: 'Dec', Tokyo: 9.6, London: 4.8 }
			],
			cols: {
				temperature:{ alias: '销售量' },
				month: {
					alias: '横坐标',
					range:[0,1]
				}
			},
		})
	}

        render() {
		const dv = ds.createView().source(this.state.data);
		dv.transform({
			type: 'fold',
			fields: [ 'Tokyo', 'London', 'baseLine' ], // 展开字段集
			key: 'city', // key字段
			value: 'temperature', // value字段
			alias: '纵坐标',
		});
		// forceFit设置图表的宽度是否自适应
                return (
				<Chart height={400} data={dv} scale={this.state.cols} forceFit>
					<Axis name="month"/>
					<Axis name="temperature" label={{formatter: val => `${val}°C`}}/>
					<Tooltip crosshairs={{type : "y"}}/>
					<Legend/>
					<Geom type="line" position="month*temperature" size={2} color={'city'} />
				</Chart>
    );
  }

Uncaught Error: _processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn't supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal).
    at invariant (:3000/static/js/bundle.js:70163)
    at Object.value (:3000/static/js/bundle.js:79313)
    at Object._renderSubtreeIntoContainer (:3000/static/js/bundle.js:54348)
    at Object.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] (:3000/static/js/bundle.js:54331)
    at PureChart.draw (:3000/static/js/bundle.js:56414)
    at PureChart.componentDidMount (:3000/static/js/bundle.js:56204)
    at commitLifeCycles (:3000/static/js/bundle.js:81934)
    at commitAllLifeCycles (:3000/static/js/bundle.js:83103)
    at HTMLUnknownElement.callCallback (:3000/static/js/bundle.js:73676)
    at Object.invokeGuardedCallbackDev (:3000/static/js/bundle.js:73715)
    at invokeGuardedCallback (:3000/static/js/bundle.js:73572)
    at commitRoot (:3000/static/js/bundle.js:83207)
    at performWorkOnRoot (:3000/static/js/bundle.js:84139)
    at performWork (:3000/static/js/bundle.js:84088)
    at requestWork (:3000/static/js/bundle.js:83997)
    at scheduleWorkImpl (:3000/static/js/bundle.js:83880)
    at scheduleWork (:3000/static/js/bundle.js:83842)
    at scheduleTopLevelUpdate (:3000/static/js/bundle.js:84313)
    at Object.updateContainer (:3000/static/js/bundle.js:84351)
    at :3000/static/js/bundle.js:88368
    at Object.unbatchedUpdates (:3000/static/js/bundle.js:84222)
    at renderSubtreeIntoContainer (:3000/static/js/bundle.js:88367)
    at Object.render (:3000/static/js/bundle.js:88432)
    at Object../src/index.js (:3000/static/js/bundle.js:103040)
    at __webpack_require__ (:3000/static/js/bundle.js:679)
    at fn (:3000/static/js/bundle.js:89)
    at Object.0 (:3000/static/js/bundle.js:103169)
    at __webpack_require__ (:3000/static/js/bundle.js:679)
    at ./node_modules/ansi-regex/index.js.module.exports (:3000/static/js/bundle.js:725)
    at :3000/static/js/bundle.js:728

export default class PieChart extends Component {
  onclick(){
    this.setState({position:'left'});
  };
  state ={
    position:'top'
  };
  render() {
    return (
      <div className='pie-charts'>
        <div className='pie-chart'>
          {/* <Rose /> */}
          <DonutRose onclick={this.onclick.bind(this)} position={this.state.position}/>
          {/* <Sunburst /> */}
          {/* <TrPie /> */}
        </div>
      </div>
    );
  }
}

export default class PieC extends Component {
  propTypes: {
    onclick: React.PropTypes.func,
    position: React.PropTypes.string,
  };
state ={
    position:this.props.position
  };
  componentWillReceiveProps(nextProps) {
    this.setState({position:nextProps.position});
  };
  onclick(){
    this.props.onclick();
  };
  render() {
    return (
      <Chart height={window.innerHeight} data={dv} scale={cols} forceFit onClick={this.onclick.bind(this)}>
        <Coord type='polar' innerRadius={0.2} />
        <Tooltip />
        <Legend 
          position= {this.state.position}/>
        <Geom
          type="interval"
          color="year"
          position="year*percent"
          style={{lineWidth: 1,stroke: '#fff'}}
          >
        </Geom>
      </Chart>
    );
  }

dv.transform({
  type: 'fold',
  fields: ['sold', 'income'],
  key: 'category',
  value: 'value'
});
console.log(dv);
this.data = dv;
this.cols = {
  time : {}
};

<Chart
        height={this.props.height - 30}
        data={this.props.tableData.get('result').toJS()}
        forceFit
        // onPointClick={this._onClick}
      >
        <Tooltip showTitle={false} />
        <Legend
          position={legendConfig.position}
          offsetY={legendConfig.offsetY}
          offsetX={legendConfig.offsetX}
        />
        <Facet
          type={(facetConfig && facetConfig.type) || 'list'}
          fields={facetField.split(',')}
          cols={(facetConfig && facetConfig.size) || 3}
          padding={(facetConfig && facetConfig.padding) || 20}
        >
          {(view, facet) => {
            const data = facet.data;
            const dv = new DataSet()
              .createView()
              .source(data)
              .transform({
                type: 'percent',
                field: valueField,
                dimension: dimension,
                as: 'percent',
              });
            return (
              // eslint-disable-next-line no-plusplus
              <View data={dv} scale={cols} key={id++}>
                <Coord type="theta" innerRadius={0.35} />
                <Geom
                  type="intervalStack"
                  position="percent"
                  color={dimension}
                  style={{ lineWidth: 1 }}
                >
                  <Label content="percent" offset={-2} />
                </Geom>
              </View>
            );
          }}
        </Facet>
      </Chart>