From 2d405b5a32655c0f861a8dd7c09fc624b108f439 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Wed, 4 Aug 2021 15:31:57 +0530
Subject: [PATCH] add more annotations indicating what type of chart should be
 used

---
 www/common/inner/charts.js | 11 ++++++++++-
 www/form/inner.js          | 24 +++++++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/www/common/inner/charts.js b/www/common/inner/charts.js
index b0c48f761..a50939530 100644
--- a/www/common/inner/charts.js
+++ b/www/common/inner/charts.js
@@ -4,14 +4,23 @@ define([
 ], function (h) {
     var Charts = {};
 
+    Charts.table = function (content, classes) {
+        var classString = Array.isArray(classes)? '.' + classes.join('.'): '';
+        return h('table' + classString, content);
+    };
+
     Charts.columns = function (rows) {
-        return h('table.charts-css.column.show-heading', [
+        return Charts.table([
             //h('caption', "Front-End Developer Salary"),
             h('tbody', rows.map(function (n) {
                 return h('tr', h('td', {
                     style: '--size: ' + (n / 100),
                 }, n));
             })),
+        ], [
+            'charts-css',
+            'column',
+            'show-heading',
         ]);
     };
 
diff --git a/www/form/inner.js b/www/form/inner.js
index 40bbd8fcc..6ff0ccded 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -954,7 +954,7 @@ define([
         },
     };
 
-    var TYPES = { // XXX insert useful charts for each of type of answer
+    var TYPES = { // XXX hackathon insert useful charts for each of type of answer
         input: {
             defaultOpts: {
                 type: 'text'
@@ -988,9 +988,11 @@ define([
                     reset: function () { $tag.val(''); }
                 };
             },
-            printResults: function (answers, uid) { // XXX each question format has a 'printResults' method
+            printResults: function (answers, uid) { // XXX hackathon each question format has a 'printResults' method
                 var results = [];
                 var empty = 0;
+                // XXX hackathon charts for text inputs are only useful if we tally duplicated answers
+                // XXX hackathon use horizontal bar charts https://chartscss.org/charts/bar/
                 Object.keys(answers).forEach(function (author) { // TODO deduplicate these?
                     var obj = answers[author];
                     var answer = obj.msg[uid];
@@ -1057,6 +1059,9 @@ define([
             printResults: function (answers, uid) {
                 var results = [];
                 var empty = 0;
+                // XXX hackathon like text inputs, charts are only useful if we tally duplicates
+                // (or if there are duplicates)
+                // https://chartscss.org/charts/bar/
                 Object.keys(answers).forEach(function (author) { // TODO deduplicate these
                     var obj = answers[author];
                     var answer = obj.msg[uid];
@@ -1124,6 +1129,7 @@ define([
 
             },
             printResults: function (answers, uid) {
+                // XXX hackathon radio https://chartscss.org/charts/bar/
                 var results = [];
                 var empty = 0;
                 var count = {};
@@ -1218,6 +1224,7 @@ define([
 
             },
             printResults: function (answers, uid, form) {
+                // XXX hackathon multiradio https://chartscss.org/components/stacked/
                 var structure = form[uid];
                 if (!structure) { return; }
                 var opts = structure.opts || TYPES.multiradio.defaultOpts;
@@ -1335,6 +1342,7 @@ define([
 
             },
             printResults: function (answers, uid) {
+                // XXX hackathon multiradio https://chartscss.org/components/stacked/
                 var results = [];
                 var empty = 0;
                 var count = {};
@@ -1443,6 +1451,9 @@ define([
 
             },
             printResults: function (answers, uid, form) {
+                // XXX hackathon
+                // stacked: https://chartscss.org/components/stacked/
+                // or multiple bars: https://chartscss.org/charts/bar/#multiple-datasets
                 var structure = form[uid];
                 if (!structure) { return; }
                 var opts = structure.opts || TYPES.multicheck.defaultOpts;
@@ -1585,6 +1596,8 @@ define([
 
             },
             printResults: function (answers, uid, form) {
+                // XXX hackathon sortable list
+                // bars again? https://chartscss.org/charts/bar/
                 var opts = form[uid].opts || TYPES.sort.defaultOpts;
                 var l = (opts.values || []).length;
                 var results = [];
@@ -1710,6 +1723,7 @@ define([
 
             },
             printResults: function (answers, uid, form, content) {
+                // XXX hackathon: not really anything to do here?
                 var opts = form[uid].opts || TYPES.poll.defaultOpts;
                 var _answers = getBlockAnswers(answers, uid);
 
@@ -1755,7 +1769,7 @@ define([
         },
     };
 
-    var renderResults = APP.renderResults = function (content, answers, showUser) { // XXX
+    var renderResults = APP.renderResults = function (content, answers, showUser) { // XXX hackathon
         var $container = $('div.cp-form-creator-results').empty();
 
         if (!Object.keys(answers || {}).length) {
@@ -1769,6 +1783,10 @@ define([
             DiffMd.apply(DiffMd.render(content.answers.msg), $desc, APP.common);
         }
 
+        // XXX hackathon display answer times as column bar chart with first and last date indicated
+        // https://chartscss.org/charts/column/
+        // XXX hackathon set column colours with the cryptpad brand color in app-form.less
+
         var controls = h('div.cp-form-creator-results-controls');
         var $controls = $(controls).appendTo($container);
         var exportButton = h('button.btn.btn-secondary', Messages.form_exportCSV);