Skip to content

D
DV-Project
Commit 90f05a83 authored by Almouhannad Hafez's avatar Almouhannad Hafez
Browse files
Options

Edit index page

parent c29464d5
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 2 deletions
index.html
View file @ 90f05a83
......@@ -9,6 +9,67 @@
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Olympic Games Statistics Dashboard</h2>
<div class="accordion" id="olympicStatsAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Medal Distribution by Country
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#olympicStatsAccordion">
<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="medalDistributionChart"></div>
</div>
</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 Distribution by Country
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#olympicStatsAccordion">
<div class="accordion-body">
<div class="chart-description">
This chart shows the distribution of medals won by different countries in the Olympic Games.
</div>
<canvas id="topAthletesChart"></canvas>
</div>
</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 Country
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#olympicStatsAccordion">
<div class="accordion-body">
<div class="chart-description">
This chart shows the distribution of medals won by different countries in the Olympic Games.
</div>
<canvas id="sportsParticipationChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/ts/main.ts"></script>
</body>
......
src/css/style.css
View file @ 90f05a83
......@@ -6,7 +6,7 @@ body {
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
background: #f7f7f7;
background: #f8f9fa;
}
#stacked-bar-chart-legend .legend-item :hover {
......
src/ts/charts-helpers/stacked-bar-chart-helper.ts
View file @ 90f05a83
......@@ -51,7 +51,7 @@ export class StackedBarChartHelper {
public appendChart() {
// Add div container
this.container = d3.select('body')
this.container = d3.select('#medalDistributionChart')
.append('div')
.attr('class', 'container') // bootstrap
.attr('style', 'width: fit-content;')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab