<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Power BI Layout</title>
    <link rel="stylesheet" href="./style/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/topojson.v3.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
    <div id="heading-container">
        <h1 class="heading">PowerBI</h1>
    </div>
    <div id="super">
        <div id="container">
            <div class="dashboard">

                <!-- map chart  -->
                <div class="box intermission border-1">
                    <div id="map"></div>
                    <div id="button-container">
                        <button onclick="updateMap(2019)" class="button-17">2019</button>
                        <button onclick="updateMap(2021)" class="button-17">2021</button>
                    </div>
                    <span class="stylespan">Ozone Depletion</span>
                </div>


                <nav class="box border-2">
                    <div id="typewriter"></div>
                </nav>

                <!-- <div class="box plot-lover border-3">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut fugiat retiis adipisci quae vero nemo!
                </div> -->

                <!-- radar chart  -->
                <aside class="box small-lover border-4">
                    <canvas id="myRadarChart"></canvas>
                    <!-- <span class="stylespan">Air Quality Index</span> -->
                </aside>

                <!-- multi Bar Chart  -->
                <section class="box ease-in border-5">
                    <canvas id="multiBarChart"></canvas>
                    <span class="stylespan">Weather Change</span>
                </section>

                <!-- Pollution Chart  -->
                <aside class="box zoog-out border-6">
                    <canvas id="coldWeatherChart"></canvas>
                    <span class="stylespan">Pollution Level</span>
                </aside>

                <!-- horizontal bar chart -->
                <div class="box interstice border-7">
                    <div id="chart-container"></div>
                    <div id="buttons-container">
                        <button id="btn-2019" class="button-17">2019</button>
                        <button id="btn-2021" class="button-17">2021</button>
                    </div>
                    <span class="stylespan">Heat Index</span>
                </div>

                <section class="box controls border-8">
                    <!-- Country Dropdown -->
                    <!-- <label for="countrySelect">Select Country:</label> -->

                    <!-- Year Buttons -->
                    <div class="buttonGroup">
                        <select id="countrySelect" class="dropdown">
                            <option value="USA">USA</option>
                            <option value="India">India</option>
                            <option value="China">China</option>
                            <option value="Brazil">Brazil</option>
                            <option value="Germany">Germany</option>
                            <option value="Russia">Russia</option>
                            <option value="Australia">Australia</option>
                            <option value="Canada">Canada</option>
                            <option value="Japan">Japan</option>
                            <option value="South Africa">South Africa</option>
                            <option value="United Kingdom">United Kingdom</option>
                        </select>

                        <button onclick="loadData('2019')" id="button19" class="button-17">2019</button>
                        <button onclick="loadData('2021')" id="button20" class="button-17">2021</button>
                    </div>

                    <div id="chart_div" style="width: 200px; height: 200px;"></div>
                    <span class="stylespan">Pollution Level</span>
                </section>


            </div>
        </div>
    </div>
    </div>
    <script src="./src/multiBarChart.js"></script>
    <script src="./src/coldweatherring.js"></script>
    <script src="./src/choropleth.js"></script>
    <script src="./src/barchartrace.js"></script>
    <script src="./src/linebharchart.js"></script>
    <script src="./src/radarchart.js"></script>
    <script src="./src/gauge.js"></script>
    <script src="./src/typewriter.js"></script>
</body>

</html>