From 11dc7d12d58ba4ee705d06f80c196766ce311255 Mon Sep 17 00:00:00 2001 From: aemi-dev <42325924+aemi-dev@users.noreply.github.com> Date: Thu, 5 Aug 2021 01:57:48 +0200 Subject: [PATCH] Hackathon 2021 - Timeline --- www/form/app-form.less | 39 +++++++++++++ www/form/inner.js | 121 +++++++++++++++++++++-------------------- 2 files changed, 102 insertions(+), 58 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index ad26863bb..b4dd9d1a2 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -68,6 +68,45 @@ justify-content: center; min-width: 300px; + table.cp-chart-table { + + --color: @colortheme_apps[pad]; + margin-top: 2em; + margin-right: auto; + min-width: 400px; + padding-bottom: 2rem; + width: min-content; + + tr { + min-height: 200px; + min-width: max-content; + position: relative; + } + + td { + margin: 0 auto; + min-width: 20px; + max-width: 30px; + } + + th { + position: absolute; + bottom: -1.5rem; + left: 50%; + transform: translateX(-50%); + } + + tr:not(:first-of-type):not(:last-of-type):not(:nth-of-type(5n+1)) { + th { + visibility: hidden; + } + } + + .cp-bar:not(:hover) { + color: transparent; + } + } + .cp-form-input-block { display: flex; } diff --git a/www/form/inner.js b/www/form/inner.js index 02033885e..60303f3bd 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -11,6 +11,7 @@ define([ '/common/common-hash.js', '/common/common-interface.js', '/common/common-ui-elements.js', + '/common/tippy/tippy.min.js', '/common/clipboard.js', '/common/inner/common-mediatag.js', '/common/hyperscript.js', @@ -54,6 +55,7 @@ define([ Hash, UI, UIElements, + tippy, Clipboard, MT, h, @@ -1826,10 +1828,65 @@ define([ icon: h('i.cptools.cptools-form-poll') }, }; + + var makeTimeline = APP.makeTimeline = function (answers) { + // Here for mockup purpose + Object.keys(answers).forEach(function (k) { + console.log(answers[k].time); + answers[k].time += Math.floor(Math.random() * 10 - 5) * 24 * 3600 * 1000; + console.log(answers[k].time); + }); + + var answersByTime = {}; + Object.keys(answers).forEach(function (curve) { + var obj = answers[curve]; + var key = new Date(obj.time).toLocaleDateString(); + if (!answersByTime[key]) { + answersByTime[key] = {date: obj.time, count: 1}; + } else { + answersByTime[key].count++; + } + }); + + var dates = Object.keys(answersByTime).sort(function (a, b) { + return answersByTime[a].time - answersByTime[b].time; + }); + + var maxCount = 0; + + Object.keys(answersByTime).forEach(function (date) { + var count = answersByTime[date].count; + if (count > maxCount) { + maxCount = count; + } + }); + + Object.keys(answersByTime).forEach(function (date) { + var answer = answersByTime[date]; + answer.percent = answer.count / maxCount; + answer.count = answer.count || ""; + }); + + console.log(answersByTime); + console.log(dates); + + console.log('done'); + + return Charts.table(h('tbody',dates.map(function (date) { + var count = answersByTime[date].count; + var percent = answersByTime[date].percent; + + var bar = h('td.cp-bar', { style: '--size: ' + Number(percent).toFixed(2), "data-tippy-placement": "top", title: `${count} - ${date}` }); + var dateEl = h('th', { scope: "row" }, date); + + return h('tr', bar, dateEl ); + })), ["charts-css", "cp-chart-table", "column", "data-spacing-2", "show-labels", "labels-align-center"]); + }; var renderResults = APP.renderResults = function (content, answers, showUser) { // XXX hackathon var $container = $('div.cp-form-creator-results').empty(); + if (!Object.keys(answers || {}).length) { $container.append(h('div.alert.alert-info', Messages.form_results_empty)); return; @@ -1845,6 +1902,11 @@ define([ // https://chartscss.org/charts/column/ // XXX hackathon set column colours with the cryptpad brand color in app-form.less + var heading = h('h2#cp-title', `Total answers count: ${Object.keys(answers).length}`); + $(heading).appendTo($container); + var timeline = h('div.cp-form-creator-results-timeline'); + var $timeline = $(timeline).appendTo($container); + $timeline.append(makeTimeline(answers)); var controls = h('div.cp-form-creator-results-controls'); var $controls = $(controls).appendTo($container); var exportButton = h('button.btn.btn-secondary', Messages.form_exportCSV); @@ -1979,6 +2041,7 @@ define([ } return div; }); + $results.append(els); }); if (showUser) { @@ -2642,64 +2705,6 @@ define([ var $responseMsg = $(responseMsg); var refreshResponse = function () { if (true) { return; } // XXX 4.10.0 - $responseMsg.empty(); - Messages.form_updateMsg = "Update response message"; // XXX 4.10.0 - Messages.form_addMsg = "Add response message"; // XXX 4.10.0 - Messages.form_responseMsg = "Add a message that will be displayed in the response page."; // XXX 4.10.0 - var text = content.answers.msg ? Messages.form_updateMsg : Messages.form_addMsg; - var btn = h('button.btn.btn-secondary', text); - $(btn).click(function () { - var editor; - if (!APP.responseModal) { - var t = h('textarea'); - var div = h('div', [ - h('p', Messages.form_responseMsg), - t - ]); - var cm = SFCodeMirror.create("gfm", CMeditor, t); - editor = APP.responseEditor = cm.editor; - editor.setOption('lineNumbers', true); - editor.setOption('lineWrapping', true); - editor.setOption('styleActiveLine', true); - editor.setOption('readOnly', false); - setTimeout(function () { - editor.setValue(content.answers.msg || ''); - editor.refresh(); - editor.save(); - editor.focus(); - }); - - var buttons = [{ - className: 'primary', - name: Messages.settings_save, - onClick: function () { - var v = editor.getValue(); - content.answers.msg = v.trim(0, 2000); // XXX 4.10.0 max length? - framework.localChange(); - framework._.cpNfInner.chainpad.onSettle(function () { - UI.log(Messages.saved); - refreshResponse(); - }); - }, - //keys: [] - }, { - className: 'cancel', - name: Messages.cancel, - onClick: function () {}, - keys: [27] - }]; - APP.responseModal = UI.dialog.customModal(div, { buttons: buttons }); - } else { - editor = APP.responseEditor; - setTimeout(function () { - editor.setValue(content.answers.msg || ''); - editor.refresh(); - editor.save(); - editor.focus(); - }); - } - UI.openCustomModal(APP.responseModal); - }); // $responseMsg.append(btn); // XXX 4.10.0 }; //refreshResponse();