import React, {Component} from 'react';

import Plot from "react-plotly.js";

// Not using TypeScript, as plotly is not TypeScript :(

class MultiLinePlotWrapper extends Component {
    render() {
        let layout = {};

        if (this.props.grid_scan === true) {
            layout = {
                xaxis: {
                    title: {text: this.props.xaxis},
                    showgrid: false,
                    range: [0, this.props.range_x]
                },
                yaxis: {
                    title: {text: this.props.yaxis},
                    // autorange: "reversed",
                    showgrid: false,
                    range: [0, this.props.range_y]
                },
                uirevision: true
            }
        } else {
            layout = {
                xaxis: {
                    title: {text: this.props.xaxis},
                    showgrid: true,
                    autorange: true,
                    range: undefined
                },
                yaxis: {
                    title: {text: this.props.yaxis},
                    autorange: true,
                    showgrid: true,
                    range: undefined
                },
                uirevision: true
            }
        }

        console.log(layout);
        return <Plot
            style={{width: "100%", height: "100%"}}
            data={this.props.data}
            layout={layout}
            config = {{responsive: true}}
        />;

    }
}

export default MultiLinePlotWrapper;