Change page layout

index.html

@@ -15,61 +15,38 @@
     </div>
     <h2 class="text-center">Olympic Games Statistics Dashboard</h2>
 
-    <div class="accordion" id="olympicStatsAccordion">
+    <div class="d-flex justify-content-center mb-4">
+      <button class="btn btn-secondary me-2" id="btnCountry">Medal Distribution by Country</button>
+      <button class="btn btn-secondary me-2" id="btnTrend">Medal Trend by Country over Time</button>
+      <button class="btn btn-secondary me-2" id="btnGender">Medal Distribution by Gender</button>
+      <button class="btn btn-secondary" id="btnSport">Medal Distribution by Sport</button>
+    </div>
 
-      <div class="accordion-item">
-        <h2 class="accordion-header" id="headingOne">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
-            Medal Distribution by Country
-          </button>
-        </h2>
-        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
-          <div class="accordion-body">
-            <div class="chart-description">
-              This chart shows the distribution of medals won by different countries in the Olympic Games.
-            </div>
-            <div id="medalDistributionByCountryChart"></div>
-          </div>
-        </div>
+    <div id="medalDistributionByCountryChart" class="chart">
+      <div class="chart-description">
+        This chart shows the distribution of medals won by different countries in the Olympic Games.
       </div>
+    </div>
 
-      <div class="accordion-item">
-        <h2 class="accordion-header" id="headingTwo">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-            Medal Trend by Country over time
-          </button>
-        </h2>
-        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
-          <div class="accordion-body">
-            <div class="chart-description">
-              This chart illustrates the trend of total medals won over time, highlighting the changes in performance
-              across various Olympic Games.
-            </div>
-            <div id="medalDistributionByTimeChart"></div>
-          </div>
-        </div>
+    <div id="medalDistributionByTimeChart" class="chart">
+      <div class="chart-description">
+        This chart illustrates the trend of total medals won over time, highlighting the changes in performance across
+        various Olympic Games.
       </div>
+    </div>
 
-      <div class="accordion-item">
-        <h2 class="accordion-header" id="headingThree">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-            Medal Distribution by Gender
-          </button>
-        </h2>
-        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
-          <div class="accordion-body">
-            <div class="chart-description">
-              This chart shows the distribution of medals won over genders.
-            </div>
-            <div id="medalDistributionByGenderChart"></div>
-          </div>
-        </div>
+    <div id="medalDistributionByGenderChart" class="chart">
+      <div class="chart-description">
+        This chart shows the distribution of medals won over genders.
       </div>
+    </div>
 
+    <div id="medalDistributionBySportChart" class="chart">
+      <div class="chart-description">
+        This chart shows the distribution of medals won across different sports in the Olympic Games.
+      </div>
     </div>
+
   </div>
 
   <script type="module" src="/src/ts/main.ts"></script>

src/css/style.css

@@ -13,12 +13,15 @@ body {
   opacity: 0.8;
 }
 
-.accordion-item {
-  margin-bottom: 1em;
+.chart {
+  display: none;
+  /* Hide all charts by default */
 }
 
-.card-body {
-  background-color: white;
+.disabled {
+  background-color: #d3d3d3;
+  color: #a9a9a9;
+  cursor: not-allowed;
 }
 
 h2 {
@@ -28,4 +31,5 @@ h2 {
 .chart-description {
   margin-bottom: 15px;
   font-style: italic;
+  text-align: center;
 }
\ No newline at end of file

src/ts/main.ts

@@ -23,4 +23,48 @@ d3.csv(datasetPath).then(data => {
     pieChartHelper.setData(rawData);
     pieChartHelper.appendChart();
 
-});
\ No newline at end of file
+});
+
+// Attach event listeners to buttons
+document.addEventListener('DOMContentLoaded', () => {
+    const buttons = [
+        { id: 'btnCountry', chartId: 'medalDistributionByCountryChart' },
+        { id: 'btnTrend', chartId: 'medalDistributionByTimeChart' },
+        { id: 'btnGender', chartId: 'medalDistributionByGenderChart' },
+        { id: 'btnSport', chartId: 'medalDistributionBySportChart' }
+    ];
+
+    buttons.forEach(({ id, chartId }) => {
+        const button = document.getElementById(id);
+        if (button) {
+            button.addEventListener('click', () => showChart(chartId, button));
+        }
+    });
+});
+
+function showChart(chartId: string, button: HTMLElement) {
+    // Hide all charts
+    d3.selectAll('.chart').style('display', 'none');
+
+    // Show the selected chart
+    const selectedChart = d3.select(`#${chartId}`);
+    if (!selectedChart.empty()) {
+        selectedChart.style('display', 'block');
+    }
+
+    // Enable all buttons and disable the clicked one
+    d3.selectAll('.btn')
+        .classed('disabled', false)
+        .property('disabled', false);
+
+    // Disable the clicked button
+    d3.select(button)
+        .classed('disabled', true)
+        .property('disabled', true);
+
+    // Scroll to the end of the page
+    window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth'
+    });
+}
\ No newline at end of file