react-stockcharts MACD

//formular

MACD Line: (12-day EMA - 26-day EMA)

Signal Line: 9-day EMA of MACD Line

MACD Histogram: MACD Line - Signal Line

----------------------------------------------------------
//interpretation

MACD Line > 0 => stock rose 12 days ago, greater MACD => sharper gain 12 days ago

MACD line < 0 => stock drop 12 days ago, less MACD => sharper lose 12 days ago

MACD line > 0 for a long period => bullish market

MACD line < 0 for a long period => bearish market

MACD line cross signal line => MACD turns downwards
if market is bullish also => selling signal

MACD line cross signal line => MACD turns upwards
if market is bearish also => buying signal

-------------------------------
//HistoryGraph.js

import React, { useState, useEffect } from 'react';
import Kaji from './Kaji'
import HeikinAshi from './Heikin'
import CandleStickChartWithMACDIndicator from './MACD'
import { Menu } from 'antd';

function HistoryGraph(props) {
    const { open, close, high, low, adjclose, volume, date } = props
    const [data, setdata] = useState(null)
    const [menu_select, setmenu_select] = useState('macd')

    useEffect(() => {
        if (adjclose) {
            let ohlc = []
            let i = 0
            while (i < adjclose.length) {
                //old date format %m/%d/%Y
                const old_date = date[i].split('/')
                ohlc.push(
                    {
                        'open': open[i],
                        'close': close[i],
                        'volume': volume[i],
                        'high': high[i],
                        'low': low[i],
                        //new date format y,m,d
                        'date': new Date(parseInt(old_date[2]), parseInt(old_date[0]) - 1, old_date[1])
                    }
                )
                i++
            }
            setdata(ohlc)
        }
    }, [props])

    const menuClick = (e) => {
        setmenu_select(e.key)
    }

    return (
        <div>
            <Menu onClick={(e) => menuClick(e)} selectedKeys={[menu_select]} mode="horizontal">
                <Menu.Item key="kagi">
                    Kagi
        </Menu.Item>
                <Menu.Item key="heikin">
                    Heikin
        </Menu.Item>
                <Menu.Item key="macd">
                    MACD
        </Menu.Item>
            </Menu>
            {data && menu_select == 'kagi' ?
                <Kaji data={data} width={1000} ratio={1} type='svg'></Kaji>
                : null}
            {data && menu_select == 'heikin' ?
                <HeikinAshi data={data} width={1000} ratio={1} type='svg'></HeikinAshi>
                : null}
            {data && menu_select == 'macd' ?
                <CandleStickChartWithMACDIndicator data={data} width={1000} ratio={1} type='svg'></CandleStickChartWithMACDIndicator>
                : null}
        </div>
    );
}

export default HistoryGraph;

--------------------------------------
//MACD.js

https://github.com/rrag/react-stockcharts/blob/master/docs/lib/charts/CandleStickChartWithMACDIndicator.js

reference:
https://school.stockcharts.com/doku.php?id=technical_indicators:moving_average_convergence_divergence_macd
http://chuanshuoge2.blogspot.com/2020/01/react-stockchart-kagi.html