server_table/src/Chart.tsx

import {
  PieChart, Pie, ResponsiveContainer, Tooltip, Cell
} from 'recharts';
import * as React from 'react';
import * as _ from 'lodash';
import { Container, Title } from 'bloomer';
const randomColor = require('randomcolor');
import * as Papa from 'papaparse';


export class Chart extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = { data: [] };
    const loaded = (results: any) => {
      const local = this;
      local.setState({
        headers: results.meta.fields,
        data: results.data,
      });
    }
    Papa.parse(this.props.csvFile, {
      header: true,
      download: true,
      skipEmptyLines: true,
      dynamicTyping: true,
      complete: loaded
    });
  }
  public render() {
    const data = this.state.data;
    const countMap = _.countBy(data, (o: any) => _.get<any>(o, this.props.chartColumn))
    const chartData = _.map(_.keys(countMap), (k: any) => {
      return {
        name: this.props.chartColumn + ' ' + k,
        value: countMap[k],
      }
    })
    return (
      <Container>
        <Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
        <ResponsiveContainer width="100%" height={200}>
          <PieChart>
            <Pie data={chartData} dataKey='value' outerRadius={100}>
              {
                chartData.map((_0, _1) => <Cell key={_1} fill={randomColor()} />)
              }
            </Pie>
            <Tooltip />
          </PieChart>
        </ResponsiveContainer>
      </Container>
    )
  }
}