grafiek aantal gebakken en aantal besteld

src/main.v

@@ -99,6 +99,30 @@ fn (mut app App) get_last_delivered() ![]Person {
 	}!
 }
 
+fn (mut app App) get_ordered_per_hour() ![]PerHour {
+	people := sql app.db {
+		select from Person
+	}!
+
+	grouped := arrays.group_by(people, fn (p Person) string {
+		return '${p.order_time.hour}:${int(p.order_time.minute / 30) * 30} ${p.order_time.day}/${p.order_time.month}'
+	})
+
+	max_per_hour := arrays.max(grouped.values().map(it.len)) or { 1 } + 10
+
+	mut grouped_arr := maps.to_array(grouped, fn [max_per_hour] (k string, v []Person) PerHour {
+		return PerHour{
+			t: v[0].order_time
+			label: k
+			amount: v.len
+			percentage: int(v.len * 100 / max_per_hour)
+			color: (if v[0].order_time.hour % 2 == 0 { 'green' } else { 'red' })
+		}
+	})
+	grouped_arr.sort(a.t < b.t)
+	return grouped_arr
+}
+
 fn (mut app App) get_finished_per_hour() ![]PerHour {
 	people := sql app.db {
 		select from Person where status == 3
@@ -234,6 +258,10 @@ pub fn (mut app App) home() vweb.Result {
 		app.set_status(400, '')
 		return app.text('${err}')
 	}
+	ordered_per_hour := app.get_ordered_per_hour() or {
+		app.set_status(400, '')
+		return app.text('${err}')
+	}
 	// pannenkoek per uur
 	ppu := app.get_ppu() or {
 		app.set_status(400, '')

src/templates/home.html

@@ -192,7 +192,7 @@
                 <div class="col m12">
                     <div class="tui-window red-168">
                         <fieldset class="tui-fieldset">
-                            <h2>Aantal bestelde 🥞</h2>
+                            <h2>Aantal gebakken 🥞</h2>
                             <div class="tui-chart-vertical" style="width: 100%; height: 200px;">
                                 <div class="tui-chart-display">
                                     @for ph in finished_per_hour
@@ -213,6 +213,28 @@
                                 </div>
                             </div>
                         </fieldset>
+                        <fieldset class="tui-fieldset">
+                            <h2>Aantal bestelde 🥞</h2>
+                            <div class="tui-chart-vertical" style="width: 100%; height: 200px;">
+                                <div class="tui-chart-display">
+                                    @for ph in ordered_per_hour
+                                    <div class="tui-chart-value @ph.color-168" style="height: @{ph.percentage}%;">
+                                        @ph.amount</div>
+                                    @end
+                                </div>
+                                <!-- <div class="tui-chart-y-axis">
+                                    <div class="tui-chart-legend">100%</div>
+                                    <div class="tui-chart-legend">75%</div>
+                                    <div class="tui-chart-legend">50%</div>
+                                    <div class="tui-chart-legend">25%</div>
+                                </div> -->
+                                <div class="tui-chart-x-axis">
+                                    @for ph in finished_per_hour
+                                    <div class="tui-chart-legend">@ph.label</div>
+                                    @end
+                                </div>
+                            </div>
+                        </fieldset>
                     </div>
                 </div>
             </div>