From 9e707c9d4dc932d57c41093d55a55d5bfbf1d139 Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Mon, 9 Dec 2024 02:26:37 +0300
Subject: [PATCH] added stats

---
 src/app.js     | 16 ++++++++++++++++
 src/index.html | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index b45f7e0..f2f7701 100644
--- a/src/app.js
+++ b/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 | Потом изменить */
diff --git a/src/index.html b/src/index.html
index 5affebc..2160802 100644
--- a/src/index.html
+++ b/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>