From 19665661ea5efa5009108030a3bd04707101d4d4 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 2 Jun 2025 17:49:59 -0700
Subject: [PATCH] 06-solution-bubble-chart

---
 src/components/BubbleChart.tsx | 43 ++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/components/BubbleChart.tsx b/src/components/BubbleChart.tsx
index ddb0e87..fdcb32e 100644
--- a/src/components/BubbleChart.tsx
+++ b/src/components/BubbleChart.tsx
@@ -40,8 +40,47 @@ export function BubbleChart(): ReactElement {
       title: {
         text: 'Aircraft Usage Analysis',
       },
-      series: [],
-      axes: [],
+      series: [
+        {
+          type: 'bubble',
+          xKey: 'flight_count',
+          yKey: 'total_time',
+          sizeKey: 'avg_time',
+          xName: 'Number of Flights',
+          yName: 'Total Flight Time',
+          sizeName: 'Average Flight Time',
+          title: 'Aircraft',
+          tooltip: {
+            renderer: (params) => {
+              const datum = params.datum as AircraftStats;
+              return {
+                title: datum.aircraft_id,
+                content: [
+                  `Number of Flights: ${datum.flight_count}`,
+                  `Total Time: ${datum.total_time.toFixed(1)} hours`,
+                  `Average Time: ${datum.avg_time.toFixed(1)} hours`,
+                ].join('<br />'),
+              };
+            },
+          },
+        },
+      ],
+      axes: [
+        {
+          type: 'number',
+          position: 'left',
+          title: {
+            text: 'Total Flight Time (hours)',
+          },
+        },
+        {
+          type: 'number',
+          position: 'bottom',
+          title: {
+            text: 'Number of Flights',
+          },
+        },
+      ],
       theme,
     };
   }, [aircraftStats]);