Add charts visualization

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "chart.js": "^3.2.0",
     "date-fns": "^2.21.1",
     "gh-pages": "^3.1.0",
     "node-sass": "^5.0.0",

src/components/Btn/style.sass

@@ -26,11 +26,12 @@
     background-color: #bee2aa
   &--negative
     background-color: #e2aaaa
+  &--neutral
+    background-color: #afd4ff
+  &--unclassified
+    background-color: #ffe7ce
   &--active
-    border-color: #3a84d8
-    // & >  .c-btn__background
-    //   background-color: rgba(25, 132, 255, .29)
-    //   display: inline
+    border-color: #0d2e57
   &:hover
     & > .c-btn__background
       background: rgba(0,0,0,.2)

src/components/Chart/index.js

@@ -0,0 +1,20 @@
+import { Component, createRef } from "react";
+
+import Chartjs from "chart.js/auto";
+
+export default class Chart extends Component {
+  chartRef = createRef();
+
+  componentDidMount() {
+    const myChartRef = this.chartRef.current.getContext("2d");
+    new Chartjs(myChartRef, {
+      type: this.props.type,
+      data: this.props.data,
+      options: this.props.options,
+    });
+  }
+
+  render() {
+    return <canvas style={{ height: "auto" }} ref={this.chartRef}></canvas>;
+  }
+}

src/contracts/AnswerPrinter.js

@@ -4,6 +4,8 @@ import AnswerClassifier from "../plugins/AnswerClassifier";
 import analyser from "sentiment-ptbr";
 import key from "../plugins/key";
 
+import color from "../plugins/color";
+import Chart from "../components/Chart";
 export default class AnswerPrinter extends Component {
   valids = [];
   invalids = [];
@@ -36,26 +38,90 @@ export default class AnswerPrinter extends Component {
         ? this.classifier.groupByCategories(type.key, this.valids)
         : items;
     const areas = [];
-    Object.keys(sets).forEach((set) => {
+    const answersKeys = Object.keys(sets);
+    answersKeys.forEach((set) => {
       const content = item(sets[set]);
       areas.push({
         key: `${set}: ${sets[set].length}`,
         color: set.toLowerCase(),
         content,
       });
     });
+
+    if (answersKeys.length > 1) {
+      const data = {
+        labels: answersKeys,
+        datasets: [
+          {
+            maxBarThickness: 24,
+            label: false,
+            data: answersKeys.map((i) => sets[i].length),
+            backgroundColor: answersKeys.map((i, index) => {
+              return color.string2Hex(i);
+            }),
+          },
+        ],
+      };
+      const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: false,
+            text: "Number of valids respondents",
+          },
+          legend: {
+            display: false,
+            position: "right",
+          },
+          tooltip: {
+            callbacks: {
+              label: function ({ dataset, parsed }) {
+                const total = dataset.data.reduce((acc, i) => (acc += i), 0);
+                const percentage = parseFloat(
+                  ((parsed.y / total) * 100).toFixed(2)
+                );
+
+                return `${parsed.y} (${percentage}%)` || "";
+              },
+              title: function (context) {
+                return context[0].label;
+              },
+            },
+          },
+        },
+      };
+
+      areas.push({
+        key: "Chart",
+        content: (
+          <div
+            style={{
+              maxWidth: "600px",
+              width: "100%",
+              margin: "0 auto",
+              position: "relative",
+              overflow: "auto",
+            }}
+          >
+            <Chart type={"bar"} data={data} options={options}></Chart>
+          </div>
+        ),
+      });
+    }
     return <Suitable areas={areas} start-closed></Suitable>;
   }
 
   summaryAnswer(answers, maxText, minText) {
-    const max = Object.keys(answers).reduce(
+    const answersKeys = Object.keys(answers);
+    const max = answersKeys.reduce(
       (acc, key) => {
         return answers[key] > acc.total ? { key, total: answers[key] } : acc;
       },
       { total: 0 }
     );
 
-    const min = Object.keys(answers).reduce(
+    const min = answersKeys.reduce(
       (acc, key) => {
         return answers[key] < acc.total || acc.total === 0
           ? { key, total: answers[key] }
@@ -98,7 +164,7 @@ export default class AnswerPrinter extends Component {
         key: "Compiled data",
         content: (
           <ul>
-            {Object.keys(answers).map((i) => (
+            {answersKeys.map((i) => (
               <li key={key(`ctst-${i}`)}>
                 {i}: {answers[i]}
               </li>
@@ -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: (
+        <div
+          style={{
+            maxWidth: "600px",
+            width: "100%",
+            margin: "0 auto",
+            position: "relative",
+            overflow: "auto",
+          }}
+        >
+          <Chart type={"pie"} data={data} options={options}></Chart>
+        </div>
+      ),
+    });
+
     return (
       <div>
         <Suitable areas={areas} />

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;

src/questions/groupsInAnswer.js

@@ -22,6 +22,7 @@ const groupsInAnswer = {
   weight: 9,
   answers: {
     printStyle: "summarize",
+    showChart: "Dognut",
   },
 };
 export default groupsInAnswer;