HighchartsFunctional.js

gistfile1.txt

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Text, View, FlatList, Button, Platform, ActivityIndicator, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';

import HighchartsReactNative from '@highcharts/highcharts-react-native'

import * as tradeActions from '../store/actions/Trade';
import Colors from '../constants/Colors';

const Home = props => {
  const [tradingInterval, setTradingInterval] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  const products = useSelector(state => state.trade.tradeValues);
  const dispatch = useDispatch();
  const chartRef = useRef(null);

  const chartOptionsConstant = {
    chart: {
      type: 'spline',
      events: {
        load: function () {
          var points = this.series[0].points;
          points[0].update({
            marker: {
              enabled: true,
            },

          });

        },


      },
    },

    title: {
      text: 'Chart',
    },
    plotOptions: {
      series: {
        shadow: false,
        marker: {
          enabled: false,
        },
      },
    },
    xAxis: {
      gridLineWidth: 1,
      type: 'datetime',
      lineColor: '#999',
      lineWidth: 1,

      title: {
        text: 'Time',
        style: {
          color: '#000',
        },
      },
    },
    yAxis: [
      {
        title: {
          text: 'Value',
        },
        gridLineWidth: 1,
        lineWidth: 1,
        opposite: true,
        plotLines: [
          {
            color: '#55c2ea',
            width: 2,
            value: products.length != 0 ? products[0][1] : 0, // Need to set this probably as a var.
            label: {
              text: products.length != 0 ? products[0][1] : 0,
              textAlign: 'left',
              verticalAlign: 'middle',
              style: {
                color: '#55c2ea',
                fontSize: 16,
                borderWidth: 1,
                backgroundColor: '#55c2ea',
                borderColor: '#55c2ea',
              },
              x: 330,
            },
          },
        ],
        accessibility: {
          enabled: true,
        },
        opposite: true,
      },
    ],
    time: {
      useUTC: false
    },
    tooltip: {
      formatter: function () {
        var d = new Date(this.x),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear(),
          hour = d.getHours(),
          min = d.getMinutes();

        if (month.length < 2)
          month = '0' + month;
        if (day.length < 2)
          day = '0' + day;

        return [year, month, day].join('-') + " " + [hour, min].join(':') + ', ' + this.y;
      }
    },

    series: [
      {
        showInLegend: false,
        color: '#FF0000',
        //data: products.slice(0, tradingInterval),
        data: (function () {
          // generate an array of random data
          var data = [], i;

          if (products.length != 0) {
            for (i = 0; i <= tradingInterval; i += 1) {
              data.push({
                x: products[i][0],
                y: products[i][1]
              });
            }
          }

          return data;
        }())
      },
    ],
  };

  //Use async and wait for wait until fretch product provide response
  const loadProduct = useCallback(async () => {
    setError(null);
    try {

      await dispatch(tradeActions.fetchOrders());

      console.log(products.length);


    } catch (error) {
      console.log(error.message);
      setError(error.message);
    }

  }, [dispatch, setIsLoading, setError])


  useEffect(() => {
    const unsubscribe = props.navigation.addListener('focus', loadProduct);

    return () => {
      unsubscribe();
    };
  }, [loadProduct]);

  useEffect(() => {
    console.log("use effect call:" + products.length);
    setTradingInterval(3);
  }, [products.length !== 0]);

  useEffect(() => {
    console.log(products.slice(0, tradingInterval));
    console.log(chartOptionsConstant.series);

  }, [tradingInterval]);


  useEffect(() => {
    setIsLoading(true);
    loadProduct().then(() => {
      setIsLoading(false);
      setInterval(function () {
        console.log("call");
        dispatch(tradeActions.fetchOrders());
      }, 60000);
    });
  }, [dispatch, loadProduct]);



  //To show loader
  if (isLoading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size='large' color={Colors.primary} />
      </View>
    );

  }

  if (error) {
    return (
      <View style={styles.centered}>
        <Text>An error occured.</Text>
        <Button title="Try Again" onPress={loadProduct} />
      </View>
    );
  }

  //Show empty screen
  if (!isLoading && products.length === 0) {
    return (
      <View style={styles.centered}>
        <Text>No product available.</Text>
        <Button title='Try Again' onPress={loadProduct} />
      </View>
    );
  }



  return (

    <View style={styles.container}>
      <HighchartsReactNative
        ref={chartRef}
        styles={styles.chart}
        options={chartOptionsConstant}
      />

      <View
        style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
        <Button
          title="3 M"
          onPress={() => {
            setTradingInterval(2);
          }}
        />
        <Button
          title="15 M"
          onPress={() => {
            setTradingInterval(15);
          }}
        />

        <Button
          title="30 M"
          onPress={() => {
            setTradingInterval(30);
          }}
        />
        <Button
          title="1 Hr"
          onPress={() => {
            setTradingInterval(60);
          }}
        />
      </View>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },

  chart: {
    height: '50%',
    width: '100%',
    backgroundColor: 'black',
  },
});

export default Home;