feat(overview): Grid layout & Leaderboard

database-playground · Oct 3, 2024 · fa0a655 · fa0a655
1 parent 0fa37f0
commit fa0a655
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 12 deletions.
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -323,3 +323,28 @@ ul.credit {
     transition: opacity 300ms;
   }
 }
+
+.app-overview-dashboard {
+  display: grid;
+  gap: 3rem;
+  grid-template:
+    "hello-text          hello-text          hello-text   hello-text" auto
+    "weekly-metrics      weekly-metrics      leaderboard  leaderboard" 1fr
+    "historic-statistics historic-statistics leaderboard  leaderboard" 1fr;
+
+  &__hello-text {
+    grid-area: hello-text;
+  }
+
+  &__weekly-metrics {
+    grid-area: weekly-metrics;
+  }
+
+  &__historic-statistics {
+    grid-area: historic-statistics;
+  }
+
+  &__leaderboard {
+    grid-area: leaderboard;
+  }
+}
diff --git a/src/Controller/OverviewCardsController.php b/src/Controller/OverviewCardsController.php
@@ -170,6 +170,14 @@ public function eventDailyChart(
                 ],
             ],
         ]);
+        $chart->setOptions([
+            'scales' => [
+                'y' => [
+                    'beginAtZero' => true,
+                    'min' => 0,
+                ],
+            ],
+        ]);
 
         return $this->render('overview/cards/events_daily_chart.html.twig', [
             'chart' => $chart,

diff --git a/templates/overview/index.html.twig b/templates/overview/index.html.twig
@@ -4,45 +4,49 @@
 {% block title %}學習概況{% endblock %}
 
 {% block app %}
-    <section class="hello-text mb-5">
+<main class="app-overview-dashboard">
+    <section class="app-overview-dashboard__hello-text">
         <h2 class="display-4">哈囉，{{ app.user.name }} 👋</h2>
         <p class="lead">這些是你最近的表現 ↓</p>
     </section>
 
-    <section class="week-overview mb-5">
+    <section class="app-overview-dashboard__weekly-metrics">
         <h3 class="mb-3">每週學習概況</h3>
 
-        <div class="week-overview__main row gutter-2">
-            <div class="col-4">
+        <div class="row gutter-2">
+            <div class="col-6">
                 <div class="week-overview__cards vstack gap-1">
                     <turbo-frame id="solved_questions" src="{{ path('app_overview_cards_solved_questions') }}"></turbo-frame>
                     <turbo-frame id="points" src="{{ path('app_overview_cards_points') }}"></turbo-frame>
                     <turbo-frame id="level" src="{{ path('app_overview_cards_level') }}"></turbo-frame>
                 </div>
             </div>
-            <div class="col-8">
-                <p>WIP: Chart</p>
+            <div class="col-6">
+                <turbo-frame id="events_daily_chart" src="{{ path('app_overview_cards_events_daily_chart') }}"></turbo-frame>
             </div>
         </div>
     </section>
 
-    <section class="historic-statistics mb-5">
+    <section class="app-overview-dashboard__historic-statistics">
         <h3 class="mb-3">學習歷程</h3>
 
         <div class="historic-statistics__main row gutter-2">
-            <div class="col-4">
+            <div class="col-6">
                 <div class="historic-statistics__cards vstack gap-1">
                     <turbo-frame id="solved_questions" src="{{ path('app_overview_cards_solved_questions') }}"></turbo-frame>
                     <turbo-frame id="events_count" src="{{ path('app_overview_cards_events_count') }}"></turbo-frame>
                     <turbo-frame id="questions_count" src="{{ path('app_overview_cards_questions_count') }}"></turbo-frame>
                 </div>
             </div>
-            <div class="col-4">
+            <div class="col-6">
                 <turbo-frame id="events_history" src="{{ path('app_overview_cards_events_history') }}"></turbo-frame>
             </div>
-            <div class="col-4">
-                <turbo-frame id="events_daily_chart" src="{{ path('app_overview_cards_events_daily_chart') }}"></turbo-frame>
-            </div>
         </div>
     </section>
+
+    <section class="app-overview-dashboard__leaderboard">
+        <h3 class="mb-3">週排行榜</h3>
+
+    </section>
+</main>
 {% endblock %}