Keegan George
8863cf0c86
**This PR includes a variety of updates to the Sentiment Analysis report:** - [X] Conditionally showing sentiment reports based on `sentiment_enabled` setting - [X] Sentiment reports should only be visible in sidebar if data is in the reports - [X] Fix infinite loading of posts in drill down - [x] Fix markdown emojis showing not showing as emoji representation - [x] Drill down of posts should have URL - [x] ~~Different doughnut sizing based on post count~~ [reverting and will address in follow-up (see: `/t/146786/47`)] - [X] Hide non-functional export button - [X] Sticky drill down filter nav
76 lines
2.1 KiB
Plaintext
76 lines
2.1 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { tracked } from "@glimmer/tracking";
|
|
import Chart from "admin/components/chart";
|
|
|
|
export default class DoughnutChart extends Component {
|
|
@tracked canvasSize = null;
|
|
|
|
get config() {
|
|
const totalScore = this.args.totalScore || "";
|
|
|
|
return {
|
|
type: "doughnut",
|
|
data: {
|
|
labels: this.args.labels,
|
|
datasets: [
|
|
{
|
|
data: this.args.data,
|
|
backgroundColor: this.args.colors,
|
|
cutout: "50%",
|
|
radius: 100,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: this.args.displayLegend || false,
|
|
position: "bottom",
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
{
|
|
id: "centerText",
|
|
afterDraw: function (chart) {
|
|
const cssVarColor =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--primary-high"
|
|
) || "#000";
|
|
const cssFontSize =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--font-up-4"
|
|
) || "1.3em";
|
|
const cssFontFamily =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--font-family"
|
|
) || "sans-serif";
|
|
|
|
const { ctx, chartArea } = chart;
|
|
const centerX = (chartArea.left + chartArea.right) / 2;
|
|
const centerY = (chartArea.top + chartArea.bottom) / 2;
|
|
|
|
ctx.restore();
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillStyle = cssVarColor.trim();
|
|
ctx.font = `bold ${cssFontSize.trim()} ${cssFontFamily.trim()}`;
|
|
|
|
ctx.fillText(totalScore, centerX, centerY);
|
|
ctx.save();
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
<template>
|
|
{{#if this.config}}
|
|
<h3 class="doughnut-chart-title">{{@doughnutTitle}}</h3>
|
|
<Chart @chartConfig={{this.config}} class="admin-report-doughnut" />
|
|
{{/if}}
|
|
</template>
|
|
}
|