82 lines
2.5 KiB
Plaintext
82 lines
2.5 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { concat } from "@ember/helper";
|
|
import { action } from "@ember/object";
|
|
import { htmlSafe } from "@ember/template";
|
|
import replaceEmoji from "discourse/helpers/replace-emoji";
|
|
import { i18n } from "discourse-i18n";
|
|
|
|
export default class Reactions extends Component {
|
|
get totalPostUsedReactions() {
|
|
return Object.values(
|
|
this.args.report.data.post_used_reactions ?? {}
|
|
).reduce((acc, count) => acc + count, 0);
|
|
}
|
|
|
|
get receivedReactions() {
|
|
return this.args.report.data.post_received_reactions ?? {};
|
|
}
|
|
|
|
@action
|
|
cleanEmoji(emojiName) {
|
|
return emojiName.replaceAll(/_/g, " ");
|
|
}
|
|
|
|
@action
|
|
computePercentage(count) {
|
|
return `${((count / this.totalPostUsedReactions) * 100).toFixed(2)}%`;
|
|
}
|
|
|
|
@action
|
|
computePercentageStyle(count) {
|
|
return htmlSafe(`width: ${this.computePercentage(count)}`);
|
|
}
|
|
|
|
<template>
|
|
<div class="rewind-report-page -post-received-reactions">
|
|
<h2 class="rewind-report-title">{{i18n
|
|
"discourse_rewind.reports.post_received_reactions.title"
|
|
}}</h2>
|
|
<div class="rewind-report-container">
|
|
{{#each-in this.receivedReactions as |emojiName count|}}
|
|
<div class="rewind-card scale">
|
|
<span class="rewind-card__emoji">{{replaceEmoji
|
|
(concat ":" emojiName ":")
|
|
}}</span>
|
|
<span class="rewind-card__data">{{count}}</span>
|
|
</div>
|
|
{{/each-in}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rewind-report-page -post-used-reactions">
|
|
<h2 class="rewind-report-title">{{i18n
|
|
"discourse_rewind.reports.post_used_reactions.title"
|
|
}}</h2>
|
|
<div class="rewind-card">
|
|
<div class="rewind-reactions-chart">
|
|
{{#each-in @report.data.post_used_reactions as |emojiName count|}}
|
|
<div class="rewind-reactions-row">
|
|
<span class="emoji">{{replaceEmoji
|
|
(concat ":" emojiName ":")
|
|
}}</span>
|
|
<span class="percentage">{{this.computePercentage count}}</span>
|
|
<div
|
|
class="rewind-reactions-bar"
|
|
style={{this.computePercentageStyle count}}
|
|
title={{count}}
|
|
></div>
|
|
</div>
|
|
{{/each-in}}
|
|
|
|
<span class="rewind-total-reactions">
|
|
{{i18n
|
|
"discourse_rewind.reports.post_used_reactions.total_number"
|
|
count=this.totalPostUsedReactions
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
}
|