<!DOCTYPE html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<style>
    th {
        color: white
    }
    table,
    td {
        border: 1px solid #333;
    }

    thead,
    tfoot{
        background-color: #333;
        color: #fff
    }

    .container {
        display: flex;
        flex-direction: row;
        overflow-x: scroll; /* 横スクロールを追加 */
    }

    .table-container {
        flex-grow: 1;
    }

    .table_sticky {
        display: block;
        overflow-y: scroll;
        height: calc(100vh/2);
        border: 1px solid;
        border-collapse: collapse;
    }

    .table_sticky thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgb(31, 44, 184);
        border-top: #ffffff;
    }

    /* 新たに追加 */
    .graph-container {
        position: sticky;
        top: 0;
        width: 11100px; /* グラフの横幅を設定 */
        padding-left: 10px; /* 左側に余白を設定 */
        margin-left: 10px; /* 左側に余白を設定 */
        z-index: 1; /* 表よりも前面に表示 */
    }

    /* 折れ線グラフのコンテナの高さを固定 */
    #lineGraph {
        width: 100%; /* グラフの横幅を100%に設定 */
    }

    /* 新たに追加 */
    .text-below-graph {
        margin-top: 10px; /* テキストとグラフの間の余白を設定 */
        text-align: center; /* テキストを中央揃えにする */
    }
</style>
<body>
    <div class="container">
        <!-- 表を表示するコンテナ -->
        <div class="table-container">
            <table class="table_sticky">
                <thead>
                    <tr>
                        <th>日付</th>
                        <th>株価</th>
                    </tr>
                </thead>
                <tbody>
                    {% for index, day in enumerate(days) %}
                    <tr>
                        <td>{{ day }}</td>
                        <td>{{ fiber_values[index] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- 折れ線グラフを表示するコンテナ -->
        <div class="graph-container">
            <div id="lineGraph"></div>
            <!-- グラフの下にテキストを追加 -->
            <div class="text-below-graph">
                求められたモデル式: 
                <math xmlns="http://www.w3.org/1998/Math/MathML">
                    <mrow>
                        <mi>y</mi>
                        <mo>=</mo>
                        <mn>1.43042</mn>
                        <mo>+</mo>
                        <mo>-0.53014</mo>
                        <mo>(</mo>
                        <msup>
                            <mi>x</mi>
                            <mrow>
                                <mo>-</mo>
                                <mn>0.85541</mn>
                            </mrow>
                        </msup>
                        <mo>×</mo>
                        <msup>
                            <mi>x</mi>
                            <mrow>
                                <mo>-</mo>
                                <mn>0.99983</mn>
                            </mrow>
                        </msup>
                        <mo>)</mo>
                        <mo>+</mo>
                        <mn>1.13</mn>
                        <mo>(</mo>
                        <msup>
                            <mi>x</mi>
                            <mrow>
                                <mo>-</mo>
                                <mn>0.118</mn>
                            </mrow>
                        </msup>
                        <mo>×</mo>
                        <msup>
                            <mi>x</mi>
                            <mn>0.61717</mn>
                        </msup>
                        <mo>)</mo>
                    </mrow>
                </math>
                
                
                
                
                
                
                
                
            </div>
        </div>
    </div>
    <script>
        // 日付とFiberの値のデータを取得
        var days = {{ days|tojson }};
        var fiberValues = {{ fiber_values|tojson }};

        var trace1 = {
            x: days,
            y: fiberValues,
            mode: 'lines',
            name: '株価'
        };

        var layout = {
            title: '時系列変化',
            xaxis: {title: '日付'},
            yaxis: {title: '株価'}
        };

        var data = [trace1];
        Plotly.newPlot('lineGraph', data, layout);
    </script>
</body>
</html>
