Updates stats chart

wasp-ai/src/client/components/BarChart.jsx

@@ -18,14 +18,17 @@ function generateLast24HoursData(projects) {
   }
   projects.forEach((project) => {
     const createdAt = new Date(project.createdAt);
+    // Difference in hours between now and when the project was created
     const bucketIndex = Math.floor(
-      (createdAt.getTime() - last24Hours.getTime()) / (60 * 60 * 1000)
+      (now.getTime() - createdAt.getTime()) / (60 * 60 * 1000)
     );
+    const reverseBucketIndex = buckets.length - bucketIndex - 1;
     // Count only projects that were created in the last 24 hours
     if (bucketIndex >= 0 && bucketIndex < 24) {
-      buckets[bucketIndex].count++;
+      buckets[reverseBucketIndex].count++;
     }
   });
+  console.log(buckets);
   return buckets;
 }
 
@@ -34,9 +37,6 @@ const margins = {
   left: 30,
 };
 
-const getLetter = (d) => d.letter;
-const getLetterFrequency = (d) => Number(d.frequency) * 100;
-
 export function BarChart({ projects, width, height, events = false }) {
   const data = useMemo(() => generateLast24HoursData(projects), [projects]);
   // bounds
@@ -72,14 +72,14 @@ export function BarChart({ projects, width, height, events = false }) {
       <rect width={width} height={height} className="fill-slate-100" rx={14} />
       <Group top={verticalMargin / 2} left={margins.left}>
         {data.map((d) => {
-          const letter = getLetter(d);
+          const dateHour = d.date.getHours();
           const barWidth = xScale.bandwidth();
-          const barHeight = yMax - (yScale(getLetterFrequency(d)) ?? 0);
-          const barX = xScale(letter);
+          const barHeight = yMax - (yScale(d.count) ?? 0);
+          const barX = xScale(dateHour);
           const barY = yMax - barHeight;
           return (
             <Bar
-              key={`bar-${letter}`}
+              key={`bar-${d.date}`}
               x={barX}
               y={barY}
               width={barWidth}

wasp-ai/src/client/pages/StatsPage.jsx

@@ -85,7 +85,7 @@ export function Stats() {
           </div>
 
           <div className="py-2 flex justify-between items-center">
-            <div class="flex items-center mb-4">
+            <div className="flex items-center mb-4">
               <input
                 id="default-checkbox"
                 type="checkbox"
@@ -96,8 +96,8 @@ export function Stats() {
                 className="w-4 h-4 text-sky-600 bg-gray-100 border-gray-300 rounded focus:ring-sky-500"
               />
               <label
-                for="default-checkbox"
-                class="ml-2 text-sm font-medium text-gray-900"
+                htmlFor="default-checkbox"
+                className="ml-2 text-sm font-medium text-gray-900"
               >
                 Filter out example apps
               </label>