discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-07 14:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Jordan Vidrine 2024-12-20 15:39:07 -06:00
parent 409367588a
commit c62efa4819
5 changed files with 83 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/javascripts/discourse/components/reports/activity-calendar.gjs
View File

@ -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>

9
assets/javascripts/discourse/components/reports/reactions.gjs
View File

@ -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>

6
assets/stylesheets/common/activity-calendar.scss
View File

@ -7,6 +7,12 @@
}
}
.activity-header-cell {
font-size: 10px;
font-weight: normal;
text-align: left;
}
.rewind-calendar-cell {
height: 10px;
width: 10px;

5
assets/stylesheets/common/index.scss
View File

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

35
assets/stylesheets/common/post-used-reactions.scss
View File

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