From c62efa48194dd332cd17ec8579a0d735cd7fea61 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Fri, 20 Dec 2024 15:39:07 -0600
Subject: [PATCH] more

---
 .../components/reports/activity-calendar.gjs  | 45 ++++++++++++++-----
 .../components/reports/reactions.gjs          |  9 ++--
 .../stylesheets/common/activity-calendar.scss |  6 +++
 assets/stylesheets/common/index.scss          |  5 +++
 .../common/post-used-reactions.scss           | 35 +++++++++++++--
 5 files changed, 83 insertions(+), 17 deletions(-)

diff --git a/assets/javascripts/discourse/components/reports/activity-calendar.gjs b/assets/javascripts/discourse/components/reports/activity-calendar.gjs
index b2a6b8a..993ae5a 100644
--- a/assets/javascripts/discourse/components/reports/activity-calendar.gjs
+++ b/assets/javascripts/discourse/components/reports/activity-calendar.gjs
@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
+import { and, eq } from "truth-helpers";
 import concatClass from "discourse/helpers/concat-class";
 
 const ROWS = 7;
@@ -7,6 +8,8 @@ const COLS = 53;
 
 export default class ActivityCalendar extends Component {
   get rowsArray() {
+    console.log(this.args.report.data);
+
     const data = this.args.report.data;
     let rowsArray = [];
 
@@ -38,20 +41,40 @@ export default class ActivityCalendar extends Component {
   <template>
     <div class="rewind-report-page -activity-calendar">
       <div class="rewind-card">
+        <h3>Activity Calendar</h3>
         <table class="rewind-calendar">
-          {{#each this.rowsArray as |row|}}
+          <thead>
             <tr>
-              {{#each row as |cell|}}
-                <td
-                  data-date={{cell.date}}
-                  class={{concatClass
-                    "rewind-calendar-cell"
-                    (this.computeClass cell.post_count)
-                  }}
-                ></td>
-              {{/each}}
+              <td colspan="5" class="activity-header-cell">Jan</td>
+              <td colspan="4" class="activity-header-cell">Feb</td>
+              <td colspan="4" class="activity-header-cell">Mar</td>
+              <td colspan="5" class="activity-header-cell">Apr</td>
+              <td colspan="4" class="activity-header-cell">May</td>
+              <td colspan="4" class="activity-header-cell">Jun</td>
+              <td colspan="5" class="activity-header-cell">Jul</td>
+              <td colspan="4" class="activity-header-cell">Aug</td>
+              <td colspan="5" class="activity-header-cell">Sep</td>
+              <td colspan="4" class="activity-header-cell">Oct</td>
+              <td colspan="4" class="activity-header-cell">Nov</td>
+              <td colspan="4" class="activity-header-cell">Dec</td>
             </tr>
-          {{/each}}
+          </thead>
+          <tbody>
+            {{#each this.rowsArray as |row|}}
+              <tr>
+                {{#each row as |cell|}}
+                  <td
+                    data-date={{cell.date}}
+                    title={{cell.date}}
+                    class={{concatClass
+                      "rewind-calendar-cell"
+                      (this.computeClass cell.post_count)
+                    }}
+                  ></td>
+                {{/each}}
+              </tr>
+            {{/each}}
+          </tbody>
         </table>
       </div>
     </div>
diff --git a/assets/javascripts/discourse/components/reports/reactions.gjs b/assets/javascripts/discourse/components/reports/reactions.gjs
index ae66352..db3b8fb 100644
--- a/assets/javascripts/discourse/components/reports/reactions.gjs
+++ b/assets/javascripts/discourse/components/reports/reactions.gjs
@@ -42,8 +42,10 @@ export default class Reactions extends Component {
         <div class="rewind-reactions-chart">
           {{#each-in @report.data.post_used_reactions as |emojiName count|}}
             <div class="rewind-reactions-row">
-              <span>{{replaceEmoji (concat ":" emojiName ":")}}</span>
-              <span>{{this.computePercentage count}}</span>
+              <span class="emoji">{{replaceEmoji
+                  (concat ":" emojiName ":")
+                }}</span>
+              <span class="percentage">{{this.computePercentage count}}</span>
               <div
                 class="rewind-reactions-bar"
                 style={{this.computePercentageStyle count}}
@@ -51,7 +53,8 @@ export default class Reactions extends Component {
             </div>
           {{/each-in}}
 
-          <span class="rewind-total-reactions">Total number of reactions:
+          <span class="rewind-total-reactions">Percentage of total number of
+            reactions:
             {{this.totalPostUsedReactions}}</span>
         </div>
       </div>
diff --git a/assets/stylesheets/common/activity-calendar.scss b/assets/stylesheets/common/activity-calendar.scss
index c2ceaa9..804dd1a 100644
--- a/assets/stylesheets/common/activity-calendar.scss
+++ b/assets/stylesheets/common/activity-calendar.scss
@@ -7,6 +7,12 @@
     }
   }
 
+  .activity-header-cell {
+    font-size: 10px;
+    font-weight: normal;
+    text-align: left;
+  }
+
   .rewind-calendar-cell {
     height: 10px;
     width: 10px;
diff --git a/assets/stylesheets/common/index.scss b/assets/stylesheets/common/index.scss
index 6560dd3..da9a1c2 100644
--- a/assets/stylesheets/common/index.scss
+++ b/assets/stylesheets/common/index.scss
@@ -4,3 +4,8 @@
 @import "post-received-reactions";
 @import "post-used-reactions";
 @import "activity-calendar";
+
+.rewind h3 {
+  font-size: var(--font-down-1);
+  text-align: left;
+}
diff --git a/assets/stylesheets/common/post-used-reactions.scss b/assets/stylesheets/common/post-used-reactions.scss
index 354c1c4..e9321c3 100644
--- a/assets/stylesheets/common/post-used-reactions.scss
+++ b/assets/stylesheets/common/post-used-reactions.scss
@@ -1,20 +1,49 @@
 .rewind-report-page.-post-used-reactions {
   display: flex;
   gap: 1em;
+  width: 50%;
+
+  .rewind-card {
+    width: 100%;
+  }
 
   .rewind-reactions-chart {
     display: flex;
     flex-direction: column;
-    gap: 1em;
+    width: 100%;
   }
 
   .rewind-reactions-row {
     display: flex;
     gap: 1em;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px solid var(--primary-low);
+    padding: 0.5em 0;
+  }
+
+  .emoji {
+    height: 25px;
+    width: 25px;
+  }
+
+  .percentage {
+    font-weight: normal;
+    font-family: monospace;
+    font-size: 16px;
   }
 
   .rewind-reactions-bar {
-    background: var(--tertiary);
-    height: 50px;
+    background: var(--tertiary-600);
+    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    height: 25px;
+    border-radius: 2px;
+  }
+
+  .rewind-total-reactions {
+    font-size: 12px;
+    font-weight: normal;
+    margin-top: 1em;
+    margin-left: auto;
   }
 }