import React, { Component } from "react";
import { Container, Navbar, Row } from "react-bootstrap";
import Plot from "react-plotly.js";
import { HCard } from "./HCard";

class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <Container className="flex-fill flex-row">
                <Container className="flex-fill border d-flex flex-column">
                    <Row className="justify-content-center my-2">
                        <HCard title="Test" content="Hello"></HCard>
                    </Row>

                    <Row className="flex-grow-1 border-top">
                        <Plot
                            data={[
                                {
                                    x: [1, 2, 3],
                                    y: [2, 4, 6],
                                    type: 'scatter',
                                    mode: 'lines+markers',
                                },
                            ]}
                            layout={{ dragmode: "pan", autosize: true }}
                            config={{
                                scrollZoom: true,
                                displayModeBar: false,
                                responsive: true,
                            }}
                            style={{ width: '100%', height: '100%' }}
                        />
                    </Row>
                </Container>
            </Container>
        )
    }
}

export default App;