antd-table-pie

antd-table-pie

description

Combine table & pie chart to create a interactive component. The dataSource of antd table is computed from echarts' pie option. You can set the table columns config by passing columnConfigArr prop to the reactPie component.

usage

Passing the option prop for Pie Chart & columnConfigArr prop for the antd table and it works.

example

import React, { Component } from 'react'
import ReactPie from 'react-table-pie'

const colorArr = ['#FCD55B', '#7FC3FF', '#68C991', '#B4ACF7',
  '#FF89C6', '#FC9BA4', '#FFB436', '#42A2F1', '#B7E386', '#717ACC', '#9E744F']

/**
 * echarts option config
 * only support pie chart of echarts now
 * more config on http://echarts.baidu.com/option.html#title
 */
const option = {
  title: {
    text: 'access origin of xxx.com',
    subtext: 'purely fictional',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'right',
    show: false,
    data: ['direct call', 'mail', 'advertisement', 'video advertisement', 'search engine']
  },
  color: colorArr,
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'direct call', price: 5 },
        { value: 310, name: 'mail' },
        { value: 234, name: 'advertisement' },
        { value: 135, name: 'video advertisement' },
        { value: 1548, name: 'search engine' }
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

/**
 * columns config
 * title {String}
 * dataIndex {String}
 * clickable {Boolean}
 * dataDep {Boolean} if the key of props exists in data, the column appear, or disappear
 */
const columnConfigArr = [
  {
    title: 'category',
    dataIndex: 'name',
    clickable: true
  },
  {
    title: 'number',
    dataIndex: 'value'
  },
  {
    title: 'price',
    dataIndex: 'price',
    dataDep: true
  }
]


export  default class ReactPieContainer extends Component {
  render() {
    return (
      <div className="pie-container">
        <ReactPie
          option={option}
          columnConfigArr={columnConfigArr}
        />
      </div>
    )
  }
}

TODO

• line chart support