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 @@ ...@@ -9,6 +9,67 @@
</head> </head>
<body> <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> <script type="module" src="/src/ts/main.ts"></script>
</body> </body>
......
src/css/style.css
View file @ 90f05a83
...@@ -6,7 +6,7 @@ body { ...@@ -6,7 +6,7 @@ body {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
overflow-x: hidden; overflow-x: hidden;
background: #f7f7f7; background: #f8f9fa;
} }
#stacked-bar-chart-legend .legend-item :hover { #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 { ...@@ -51,7 +51,7 @@ export class StackedBarChartHelper {
public appendChart() { public appendChart() {
// Add div container // Add div container
this.container = d3.select('body') this.container = d3.select('#medalDistributionChart')
.append('div') .append('div')
.attr('class', 'container') // bootstrap .attr('class', 'container') // bootstrap
.attr('style', 'width: fit-content;') .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