document.addEventListener("DOMContentLoaded", function () {
    showTable('build', buildings);
    let tableIsDisplayed = true;
    tableVisibilityButton.addEventListener("click", () => {
        if (tableIsDisplayed) {
            clearTable('build')
            tableVisibilityButton.innerHTML = "Показать таблицу";
        } else {
            showTable('build', buildings);
            tableVisibilityButton.innerHTML = "Скрыть таблицу";
        }
        tableIsDisplayed = !tableIsDisplayed;
    })
    updateGraph();
    drawButton.addEventListener("click", () => {
        clearGraph();
        updateGraph();
    });

});


function updateGraph() {
    const keyX = ["Год","Страна"][getOX()];
    const yAxis = getOY();
    errorDisplay.hidden = yAxis.length!=0
    drawGraph(buildings,keyX, yAxis.includes(0),yAxis.includes(1));

}


function getOX() {
    return Number(document.querySelector("input[name=\"OX\"]:checked").value);
}

function getOY() {
    return d3.map(document.querySelectorAll("input[name=\"OY\"]:checked"),
        (x) => Number(x.value));
}

function clearGraph(){
    d3.select("svg").selectAll('*').remove();
}