import * as React from 'react';
import JqxChart, { IChartProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';

const App = () => {
    const months: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    const source: any = React.useMemo(() => ({
        datafields: [
            { name: 'Date' },
            { name: 'S&P 500' },
            { name: 'NASDAQ' }
        ],
        datatype: "csv",
        url: 'nasdaq_vs_sp500.txt'
    }), []);

    const dataAdapter = React.useMemo(() => (
        new jqx.dataAdapter(source, {
            async: false,
            autoBind: true,
            loadError: (xhr: any, status: any, error: any) => {
                alert('Error loading "' + source.url + '" : ' + error);
            }
        })
    ), [source]);

    const padding = React.useMemo(() => ({ left: 10, top: 5, right: 10, bottom: 5 }), []);
    const seriesGroups = React.useMemo(() => ([
        {
            series: [
                { dataField: 'S&P 500', displayText: 'S&P 500' },
                { dataField: 'NASDAQ', displayText: 'NASDAQ' }
            ],
            type: 'line'
        }
    ]), []);

    const titlePadding = React.useMemo(() => ({ left: 50, top: 0, right: 0, bottom: 10 }), []);
    const valueAxis = React.useMemo(() => ({
        tickMarks: { color: '#BCBCBC' },
        title: { text: 'Daily Closing Price<br>' },
        visible: true
    }), []);

    const xAxis = React.useMemo(() => ({
        baseUnit: 'month',
        dataField: 'Date',
        formatFunction: (value: any) => {
            return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
        },
        gridLines: {
            color: '#BCBCBC',
            interval: 3,
            visible: true
        },
        labels: {
            angle: -45,
            offset: { x: 0, y: -25 },
            rotationPoint: 'topright'
        },
        maxValue: '01-01-2015',
        minValue: '01-01-2014',
        tickMarks: {
            color: '#BCBCBC',
            interval: 1,
            visible: true
        },
        type: 'date',
        unitInterval: 1,
        valuesOnTicks: true
    }), [months]);

    return (
        <JqxChart
            style={{ width: '850px', height: '500px' }}
            title="U.S. Stock Market Index Performance"
            description="NASDAQ Composite compared to S&P 500"
            showLegend={true}
            enableAnimations={true}
            padding={padding}
            titlePadding={titlePadding}
            source={dataAdapter}
            xAxis={xAxis}
            valueAxis={valueAxis}
            seriesGroups={seriesGroups}
            colorScheme="scheme04"
        />
    );
};

export default App;