import Chart from 'chart.js/auto'
import { createElement, div, table, thead, tbody, tr, th, td } from '@laniakeasupercluster/widgets'

const rest = await fetch('http://localhost:2000/api').then(res => res.json())
document.body.appendChild(div.childs([
    div.text('航班信息'),
    table.childs([
        thead.childs([
            tr.childs([
                th.text('ID'),
                th.text('航班号'),
                th.text('航空公司'),
                th.text('起飞机场'),
                th.text('到达机场'),
                th.text('数据')
            ])
        ]),
        tbody.childs(
            rest.map(row => tr.childs([
                td.text(row.flight_id),
                td.text(row.flight_number),
                td.text(row.airline),
                td.text(row.origin),
                td.text(row.destination),
                td.text(row.shuju)
            ]))
        )
    ])
]))

const metrics = await fetch('http://localhost:2000/api/metrics').then(res => res.json())

// 创建图表
const context = createElement({
    width: 800,
    height: 200,
}, 'canvas')

document.body.appendChild(context)
new Chart(context, {
    type: 'line',
    data: {
        labels: metrics.map(row => new Date(row.date).toLocaleDateString()), // 显示日期
        datasets: [{
            label: '航班数量',
            data: metrics.map(row => row.count),         // 使用 count 作为数据
            backgroundColor: 'rgba(255, 99, 132, 0.2)',  // 曲线下方填充颜色（透明度0.2）
            borderColor: 'rgba(255, 99, 132, 1)',        // 曲线颜色
            borderWidth: 2,                              // 曲线宽度
            lineTension: 0.3,                            // 平滑曲线
            fill: true                                   // 填充曲线下方区域
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
})