added stats

src/app.js

@@ -124,6 +124,22 @@ function showChart(selectedMonth) {
       },
     },
   });
+
+  updateStats(data.poppersData[year][month]);
+}
+
+function updateStats(breaths) {
+  const breathMonth = document.getElementById('breathMonth');
+  const breathAverage = document.getElementById('breathAverage');
+
+  let totalBreathInMonth = 0;
+  let daysCount = 0;
+  for (const [key, value] of Object.entries(breaths)) {
+    totalBreathInMonth += value.length;
+    daysCount += 1;
+  }
+  breathMonth.value = totalBreathInMonth;
+  breathAverage.value = Math.round(totalBreathInMonth / daysCount);
 }
 
 /* Внешний HTML Tooltip | Потом изменить */

src/index.html

@@ -19,7 +19,7 @@
 		<main class="p-4">
 			<div class="d-grid gap-3" style="grid-template-columns: 1fr 3fr">
 				<div class="bg-body-tertiary border rounded-3 p-3">
-					<p class="fs-5 fw-bold text-center">График</p>
+					<p class="fs-5 fw-bold text-center">Дата</p>
 					<div class="input-group mb-3">
 						<label class="input-group-text" for="yearSelect">Год</label>
 						<select class="form-select" id="yearSelect">
@@ -34,7 +34,21 @@
 					</div>
 				</div>
 				<div class="bg-body-tertiary border rounded-3 p-3">
-					<canvas id="chart"></canvas>
+					<p class="fs-5 fw-bold text-center">График</p>
+					<div class="mb-3 border-bottom">
+						<canvas id="chart"></canvas>
+					</div>
+					<p class="fs-5 fw-bold text-center">Статистика</p>
+					<div>
+						<div class="input-group mb-3">
+							<span class="input-group-text">Вдыханий за месяц</span>
+							<input id="breathMonth" type="text" class="form-control" placeholder="Загрузка..." readonly />
+						</div>
+						<div class="input-group mb-3">
+							<span class="input-group-text">Среднее количество вдыханий за сутки</span>
+							<input id="breathAverage" type="text" class="form-control" placeholder="Загрузка..." readonly />
+						</div>
+					</div>
 				</div>
 			</div>
 		</main>