From fa1828e1f431ab971f248e05a8bc30971d7a3bcb Mon Sep 17 00:00:00 2001
From: Adejumoke Adekoya <ibinolamichael1+drips@gmail.com>
Date: Thu, 24 Sep 2026 21:58:21 +0100
Subject: [PATCH] feat(analytics): geographic spread metrics and cell density
 distribution component

---
 .../analytics/CellDensityDistribution.tsx     | 40 +++++++++++++++++++
 .../analytics/GeographicSpreadMetrics.tsx     | 39 ++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 Frontend/src/components/analytics/CellDensityDistribution.tsx
 create mode 100644 Frontend/src/components/analytics/GeographicSpreadMetrics.tsx

diff --git a/Frontend/src/components/analytics/CellDensityDistribution.tsx b/Frontend/src/components/analytics/CellDensityDistribution.tsx
new file mode 100644
index 00000000..d7845a70
--- /dev/null
+++ b/Frontend/src/components/analytics/CellDensityDistribution.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface DensityBin {
+  range: string;
+  cellCount: number;
+}
+
+export interface CellDensityDistributionProps {
+  bins?: DensityBin[];
+}
+
+export const CellDensityDistribution: React.FC<CellDensityDistributionProps> = ({
+  bins = [],
+}) => {
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h3 className="text-md font-semibold mb-3 text-gray-900 dark:text-gray-100">
+        Geohash Cell Density Distribution
+      </h3>
+      <div className="space-y-2">
+        {bins.map((bin, i) => (
+          <div key={i} className="flex items-center gap-2 text-xs">
+            <span className="w-16 font-mono text-gray-500">{bin.range}</span>
+            <div className="flex-1 bg-gray-100 dark:bg-gray-800 h-4 rounded overflow-hidden">
+              <div
+                className="bg-emerald-500 h-full rounded"
+                style={{ width: `${Math.min(100, bin.cellCount * 5)}%` }}
+              />
+            </div>
+            <span className="w-8 text-right font-medium text-gray-700 dark:text-gray-300">
+              {bin.cellCount}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CellDensityDistribution;
diff --git a/Frontend/src/components/analytics/GeographicSpreadMetrics.tsx b/Frontend/src/components/analytics/GeographicSpreadMetrics.tsx
new file mode 100644
index 00000000..03beb981
--- /dev/null
+++ b/Frontend/src/components/analytics/GeographicSpreadMetrics.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+export interface SpreadMetrics {
+  totalAreaKm2: number;
+  dispersionRadiusKm: number;
+  activeBoundingBox: string;
+}
+
+export interface GeographicSpreadMetricsProps {
+  metrics?: Partial<SpreadMetrics>;
+}
+
+export const GeographicSpreadMetrics: React.FC<GeographicSpreadMetricsProps> = ({
+  metrics = {},
+}) => {
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h3 className="text-md font-semibold mb-3 text-gray-900 dark:text-gray-100">
+        Geographic Spread Metrics
+      </h3>
+      <div className="grid grid-cols-2 gap-3 text-xs">
+        <div className="p-2 bg-gray-50 dark:bg-gray-800 rounded">
+          <span className="text-gray-500 block">Coverage Area</span>
+          <span className="text-lg font-bold text-gray-800 dark:text-gray-200">
+            {metrics.totalAreaKm2 ?? 0} km²
+          </span>
+        </div>
+        <div className="p-2 bg-gray-50 dark:bg-gray-800 rounded">
+          <span className="text-gray-500 block">Dispersion Radius</span>
+          <span className="text-lg font-bold text-gray-800 dark:text-gray-200">
+            {metrics.dispersionRadiusKm ?? 0} km
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GeographicSpreadMetrics;