สร้าง Stat Chart Component

ติดตั้ง package

ถ้ายังไม่ได้ติดตั้ง package ชื่อ react-google-charts ล่ะก็ อย่าลืมรันคำสั่งติดตั้งให้กับโปรเจคล่ะ

npm i react-google-charts

ใช้ yarn?

yarn add react-google-charts

1. สร้าง StatChart Component

สร้างไฟล์ src/components/StatChart.js

import React, { Component } from 'react'

export default class StatChart extends Component {
    render() {
        return (
            <div>
                Chart me
            </div>
        )
    }
}

เปิดไฟล์ src/App.js

import StatChart component เข้ามาใช้งาน

import StatChart from './components/StatChart';


render() {
   //...
    <Row gutter={16}>
        <Col span={12}><MapBranch /></Col>
        <Col span={12}><StatChart/></Col>
    </Row>
    //...
}

ไฟล์เต็ม App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HeaderBar from './components/HeaderBar';
import { Layout, Menu, Row, Col } from 'antd';
import MapBranch from './components/MapBranch';
import StatChart from './components/StatChart';
const { Header, Content, Footer } = Layout;

function App() {
  return (
    <div>
      <Layout className="layout">
        <HeaderBar />
        <Content style=>
          <div
            style=>
            <Row gutter={16}>
              <Col span={12}><MapBranch /></Col>
              <Col span={12}><StatChart/></Col>
            </Row>

          </div>
        </Content>
        <Footer style=>React Redux Workshop ©2012-2019 Created by Nextflow.in.th</Footer>
      </Layout>,
    </div>
  );
}

export default App;

2. ใช้ AntDesign Component จัดหน้าตาของ StatChart

เปิดไฟล์ src/components/StatChart.js

และใช้ Card component ของ AntDesign

import React, {Component} from 'react'
import {Card} from 'antd';

export default class StatChart extends Component {
  render() {
    return (
      <div>
        <Card title="Chart" style=>
          <p>Card content</p>
        </Card>
      </div>
    )
  }
}

3. ใส่ Line Chart จากตัวอย่าง

Documentation: react-google-charts

import React, { Component } from 'react'
import { Card } from 'antd';
import Chart from 'react-google-charts';

export default class StatChart extends Component {
  
    render() {
        return (
            <div>
                <Card title="Chart" style=>
                    <Chart
                        width={'100%'}
                        height={'400px'}
                        chartType="LineChart"
                        loader={<div>Loading Chart</div>}
                        data={[
                            ['x', 'dogs'],
                            [0, 0],
                            [1, 10],
                            [2, 23],
                            [3, 17],
                            [4, 18],
                            [5, 9],
                            [6, 11],
                            [7, 27],
                            [8, 33],
                            [9, 40],
                            [10, 32],
                            [11, 35],
                        ]}
                        
                        rootProps=data-testid
                    />
                </Card>
            </div>
        )
    }
}

4. แสดง Chart แบบ Material Design

ทดสองแก้ไข props chartType เป็น Line

<Chart
    width={'100%'}
    height={'400px'}
    chartType="Line"
    >