- {Object.keys(answers).map((i) => (
+ {answersKeys.map((i) => (
-
{i}: {answers[i]}
@@ -108,6 +174,69 @@ export default class AnswerPrinter extends Component {
},
];
+ const data = {
+ labels: answersKeys,
+ datasets: [
+ {
+ label: "# Of respondents",
+ data: answersKeys.map((i) => answers[i]),
+ backgroundColor: answersKeys.map((i, index) => {
+ const j = answersKeys.length - index;
+ if (j < 10 && j >= 0) {
+ return color.firstTemColors(j);
+ }
+ return color.string2Hex(i);
+ }),
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ title: {
+ display: false,
+ text: "Number of valids respondents",
+ },
+ legend: {
+ display: true,
+ position: "right",
+ },
+ tooltip: {
+ callbacks: {
+ label: function ({ dataset, parsed }) {
+ const total = dataset.data.reduce((acc, i) => (acc += i), 0);
+ const percentage = parseFloat(
+ ((parsed / total) * 100).toFixed(2)
+ );
+
+ return `${parsed} (${percentage}%)` || "";
+ },
+ title: function (context) {
+ return context[0].label;
+ },
+ },
+ },
+ },
+ };
+
+ areas.push({
+ key: "Chart",
+ content: (
+
+
+
+ ),
+ });
+
return (
diff --git a/src/plugins/color.js b/src/plugins/color.js
new file mode 100644
index 0000000..f8e4554
--- /dev/null
+++ b/src/plugins/color.js
@@ -0,0 +1,52 @@
+const color = {
+ firstTemColors(i) {
+ const colors = [
+ "#084887",
+ "#dc3912",
+ "#3366cc",
+ "#7F2CCB",
+ "#5D2E46",
+ "#A62639",
+ "#F58A07",
+ "#3454D1",
+ "#34D1BF",
+ ];
+ return colors[i];
+ },
+ colorContrast(bgColor, lightColor, darkColor) {
+ var color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+ var r = parseInt(color.substring(0, 2), 16); // hexToR
+ var g = parseInt(color.substring(2, 4), 16); // hexToG
+ var b = parseInt(color.substring(4, 6), 16); // hexToB
+ return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;
+ },
+ string2Hex(str) {
+ switch (str.toLowerCase()) {
+ case "positive":
+ return "#66c333";
+ case "negative":
+ return "#ca3030";
+ case "neutral":
+ return "#285488";
+ case "unclassified":
+ return "#e3e3e4";
+ }
+
+ return `#${this.intToRGB(this.hashCode(str))}`;
+ },
+ hashCode(str) {
+ str = str || "";
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ return hash;
+ },
+ intToRGB(i) {
+ let c = (i & 0x00ffffff).toString(16).toUpperCase();
+
+ return "00000".substring(0, 6 - c.length) + c;
+ },
+};
+
+export default color;
diff --git a/src/questions/groupsInAnswer.js b/src/questions/groupsInAnswer.js
index 85e6cc9..39aa1fb 100644
--- a/src/questions/groupsInAnswer.js
+++ b/src/questions/groupsInAnswer.js
@@ -22,6 +22,7 @@ const groupsInAnswer = {
weight: 9,
answers: {
printStyle: "summarize",
+ showChart: "Dognut",
},
};
export default groupsInAnswer;