New charts

Author: patrickfreyer

flights/stats.html

@@ -64,6 +64,48 @@ <h3>Distance by Companion</h3>
                 <canvas id="companion-chart"></canvas>
             </div>
         </div>
+        
+        <div class="chart-container">
+            <h3>Cumulative Distance Over Time</h3>
+            <div class="chart-wrapper">
+                <canvas id="cumulative-chart"></canvas>
+            </div>
+        </div>
+        
+        <div class="chart-container">
+            <h3>Distance by Month</h3>
+            <div class="chart-wrapper">
+                <canvas id="monthly-chart"></canvas>
+            </div>
+        </div>
+        
+        <div class="chart-container">
+            <h3>Top 10 Airports Over Time</h3>
+            <div class="chart-wrapper">
+                <canvas id="airports-timeline-chart"></canvas>
+            </div>
+        </div>
+        
+        <div class="chart-container">
+            <h3>Flight Distance Distribution</h3>
+            <div class="chart-wrapper">
+                <canvas id="distance-distribution-chart"></canvas>
+            </div>
+        </div>
+        
+        <div class="chart-container">
+            <h3>Travel by Occasion</h3>
+            <div class="chart-wrapper">
+                <canvas id="occasion-chart"></canvas>
+            </div>
+        </div>
+        
+        <div class="chart-container">
+            <h3>Flight Frequency by Year</h3>
+            <div class="chart-wrapper">
+                <canvas id="frequency-chart"></canvas>
+            </div>
+        </div>
     </div>
 
     <div class="detailed-stats">
@@ -180,7 +222,7 @@ <h3>Most Frequent Airlines</h3>
 
     .charts-section {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
         gap: 2rem;
         margin-bottom: 4rem;
     }