more

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,12 +41,31 @@ 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">
+          <thead>
+            <tr>
+              <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>
+          </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)
@@ -52,6 +74,7 @@ export default class ActivityCalendar extends Component {
                 {{/each}}
               </tr>
             {{/each}}
+          </tbody>
         </table>
       </div>
     </div>

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 class="emoji">{{replaceEmoji
-              <span>{{this.computePercentage count}}</span>
+                  (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>

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;

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;
+}

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);
+    background: var(--tertiary-600);
-    height: 50px;
+    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;
   }
 }