From 8d5221e6e8a047555b307b846a8f419a8f4b7a8b Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Wed, 18 Aug 2021 09:56:48 +0530
Subject: [PATCH] include bar graphs for multi* form answers

---
 www/form/app-form.less | 29 ++++++++++++++++++----
 www/form/inner.js      | 55 +++++++-----------------------------------
 2 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index 06b1c331e..781b8161d 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -532,8 +532,30 @@
                 background: @cp_form-bg2;
                 &:not(:last-child) { margin-bottom: 1px; }
             }
-            .cp-form-results-type-radio {
+
+            .cp-form-results-cell() {
+                border: 1px solid @cp_form-border;
+                display: table-cell;
+                padding: 5px 10px;
+                background: @cp_form-bg2;
+            }
+
+            .cp-form-results-type-multiradio-data {
+                .cp-mr-q {
+                    font-weight: bold;
+                    padding: 5px 10px;
+                    .cp-form-results-cell();
+                }
+                &:not(:first-child) {
+                    .cp-mr-q {
+                        margin-top: 15px;
+                    }
+                }
+            }
+
+           .cp-form-results-type-radio {
                 display: table;
+                width: 100%;
                 .cp-form-results-type-multiradio-data {
                     display: flex;
                     flex-flow: column;
@@ -542,10 +564,7 @@
                     display: table-row;
                     border: 1px solid @cp_form-border;
                     & > span {
-                        border: 1px solid @cp_form-border;
-                        display: table-cell;
-                        padding: 5px 10px;
-                        background: @cp_form-bg2;
+                        .cp-form-results-cell();
                         &.cp-value {
                             min-width: 200px;
                         }
diff --git a/www/form/inner.js b/www/form/inner.js
index 089db8b57..ad89ada26 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1255,7 +1255,7 @@ define([
                 };
 
             },
-            printResults: function (answers, uid, form) {
+            printResults: function (answers, uid, form, content) {
                 // results multiradio
                 var structure = form[uid];
                 if (!structure) { return; }
@@ -1263,6 +1263,7 @@ define([
                 var results = [];
                 var empty = 0;
                 var count = {};
+                var showBars = Boolean(content);
                 Object.keys(answers).forEach(function (author) {
                     var obj = answers[author];
                     var answer = obj.msg[uid];
@@ -1293,34 +1294,13 @@ define([
                         return h('div.cp-form-results-type-radio-data', [
                             h('span.cp-value', res),
                             h('span.cp-count', itemCount),
-                            //barGraphic((itemCount / max) * 100)
+                            showBars? barGraphic((itemCount / max)): undefined,
                         ]);
                     });
                     results.push(h('div.cp-form-results-type-multiradio-data', [
                         h('span.cp-mr-q', q),
                         h('span.cp-mr-value', values)
                     ]));
-                    return;
-/*
-                    var table = Charts.table([
-                        h('caption', {
-                            style: 'color: var(--msg-color)',
-                        }, q),
-                        h('tbody', Object.keys(c).map(function (res) {
-                            return Charts.row(res, c[res] / max, c[res]);
-                        })),
-                    ], [
-                        'charts-css',
-                        'bar',
-                        'show-heading',
-                        'show-data-on-hover',
-                        'show-labels',
-                    ]);
-
-                    results.push(h('div.cp-form-results-type-multiradio-data', {
-                        style: 'width: 100%',
-                    }, table));
-*/
                 });
                 results.push(getEmpty(empty));
 
@@ -1509,7 +1489,7 @@ define([
                 };
 
             },
-            printResults: function (answers, uid, form) {
+            printResults: function (answers, uid, form, content ) {
                 // results multicheckbox
                 var structure = form[uid];
                 if (!structure) { return; }
@@ -1517,6 +1497,7 @@ define([
                 var results = [];
                 var empty = 0;
                 var count = {};
+                var showBars = Boolean(content);
                 Object.keys(answers).forEach(function (author) {
                     var obj = answers[author];
                     var answer = obj.msg[uid];
@@ -1544,35 +1525,17 @@ define([
                     var c = count[q_uid];
 
                     var values = Object.keys(c).map(function (res) {
+                        var val = c[res];
                         return h('div.cp-form-results-type-radio-data', [
                             h('span.cp-value', res),
-                            h('span.cp-count', c[res])
+                            h('span.cp-count', val),
+                            showBars? barGraphic(val / max) : undefined,
                         ]);
                     });
                     results.push(h('div.cp-form-results-type-multiradio-data', [
                         h('span.cp-mr-q', q),
-                        h('span.cp-mr-value', values)
+                        h('span.cp-mr-value', values),
                     ]));
-/*
-                    var table = Charts.table([
-                        h('caption', {
-                            style: 'color: var(--msg-color)',
-                        }, q),
-                        h('tbody', Object.keys(c).map(function (res) {
-                            return Charts.row(res, c[res] / max, c[res]);
-                        })),
-                    ], [
-                        'charts-css',
-                        'bar',
-                        'show-heading',
-                        'show-data-on-hover',
-                        'show-labels',
-                    ]);
-
-                    results.push(h('div.cp-form-results-type-multiradio-data', {
-                        style: 'width: 100%',
-                    }, table));
-*/
                 });
                 results.push(getEmpty(empty));