react-stockcharts RSI and ATR

RSI formula

Once there are 14 periods of data available

Signals are considered overbought when the indicator is above 70% and oversold when the indicator is below 30%.

For example, imagine the market closed higher seven out of the past 14 days with an average gain of 1%. The remaining seven days all closed lower with an average loss of -0.8%. The calculation for the first part of the RSI would look like the following expanded calculation:

---------------------------------
ATR formula

Current ATR = [(Prior ATR x 13) + Current TR] / 14

ATR is not a directional indicator like MACD or RSI, but rather a unique volatility indicator that reflects the degree of interest or disinterest in a move. Strong moves, in either direction, are often accompanied by large ranges, or large True Ranges. This is especially true at the beginning of a move. Uninspiring moves can be accompanied by relatively narrow ranges. As such, ATR can be used to validate the enthusiasm behind a move or breakout.

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

import React, { useState, useEffect } from 'react';
import Kaji from './Kaji'
import HeikinAshi from './Heikin'
import CandleStickChartWithMACDIndicator from './MACD'
import CandleStickChartWithRSIIndicator from './RSI_ATR'
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.Item key="rsi_atr">
                    RSI ATR
        </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}
            {data && menu_select == 'rsi_atr' ?
                <CandleStickChartWithRSIIndicator data={data} width={1000} ratio={1} type='svg'></CandleStickChartWithRSIIndicator>
                : null}
        </div>
    );
}

export default HistoryGraph;

--------------------------------
//rsi_atr.js

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

reference:
https://school.stockcharts.com/doku.php?id=technical_indicators:average_true_range_atr
https://www.investopedia.com/terms/r/rsi.asp
http://chuanshuoge2.blogspot.com/2020/01/react-stockchart-kagi.html