สร้าง 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

// ใช้ snippet rfc ได้
import React from 'react'

export default function StatChart() {
    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 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-2020 Created by Nextflow.in.th</Footer>
      </Layout>,
    </div>
  );
}

export default App;

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

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

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

import React from 'react'
import { Card } from 'antd'

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

3. ใส่ Line Chart

Documentation: react-google-charts

import React from 'react'
import { Card } from 'antd'
// import Chart component
import Chart from "react-google-charts";

export default function StatChart() {

    return (
        <div>
            <Card title="Chart" style=>
                {/* Use chart component   */}
                <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"
    >