dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more chart visualizations, brand colors

This commit is contained in:
ansuz 2021-08-04 20:27:45 +05:30
parent 73acfd9b42
commit 53ba25b5b0
5 changed files with 179 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/src/less2/include/charts.less Normal file
View File

@ -0,0 +1,10 @@
.charts_main() {
&.bar {
td {
margin-top: 0.25em;
background: @cryptpad_color_brand_fade !important;
color: @cryptpad_color_grey_100 !important; //text_col !important;
font-weight: bold;
}
}
}

18
www/common/inner/charts.js
View File

@ -15,7 +15,7 @@ define([
h('tbody', rows.map(function (n) {
return h('tr', h('td', {
style: '--size: ' + (n / 100),
}, n));
}, h('span.data', n)));
})),
], [
'charts-css',
@ -24,10 +24,18 @@ define([
]);
};
Charts.row = function (text, count) {
return h('tr', h('td', {
style: '--size: ' + count,
}, text));
Charts.row = function (text, count, data) {
return h('tr', [
h('th', {
scope: 'row',
}, text),
h('td', {
style: '--size: ' + count,
}, [
//text,
typeof(data) !== 'undefined'? h('span.data', data): text,
])
]);
};
// table.charts-css.bar.reverse

4
www/form/app-form.less
View File

@ -1,6 +1,7 @@
@import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) '../../customize/src/less2/include/avatar.less';
@import (reference) '../../customize/src/less2/include/charts.less';
&.cp-app-form {
@form_input-width: 400px;
@ -797,5 +798,8 @@
}
}
.charts-css {
.charts_main();
}
}

126
www/form/inner.js
View File

@ -955,6 +955,10 @@ define([
},
};
var arrayMax = function (A) {
return Array.isArray(A)? Math.max.apply(null, A): NaN;
};
var TYPES = { // XXX hackathon insert useful charts for each of type of answer
input: {
defaultOpts: {
@ -1001,7 +1005,7 @@ define([
Util.inc(tally, answer);
});
var counts = Util.values(tally);
var max = Math.max.apply(null, counts);
var max = arrayMax(counts);
if (max < 2) { // there are no duplicates, so just return text
Object.keys(answers).forEach(function (author) {
@ -1020,14 +1024,9 @@ define([
// there are duplicates, so return a bar chart
var rows = []; // XXX
Object.keys(tally).forEach(function (answer) {
console.error('answer: %s, count: %s', answer, tally[answer]);
rows.push(Charts.row(answer, tally[answer] / max));
rows.push(Charts.row(answer, tally[answer] / max, tally[answer]));
});
if (empty) { // XXX
rows.push(row('XXX empty', empty));
}
var table = Charts.table([
//h('caption', ''), // XXX
h('tbody', rows)
@ -1035,9 +1034,14 @@ define([
'charts-css',
'bar',
'show-heading',
'show-labels',
'show-data-on-hover',
]);
return h('div.cp-form-results-type-text', table);
return h('div.cp-form-results-type-text', [
table,
empty? getEmpty(empty): undefined,
]);
},
icon: h('i.cptools.cptools-form-text')
},
@ -1177,11 +1181,11 @@ define([
});
var counts = Util.values(count);
var max = Math.max.apply(null, counts);
var max = arrayMax(counts);
var rows = [];
Object.keys(count).forEach(function (text) {
rows.push(Charts.row(text, count[text] / max));
rows.push(Charts.row(text, count[text] / max, count[text]));
});
var table = Charts.table([
@ -1189,7 +1193,9 @@ define([
], [
'charts-css',
'bar',
'show-labels',
//'show-heading',
'show-data-on-hover',
]);
return h('div.cp-form-results-type-radio', {
style: 'width: 100%',
@ -1301,9 +1307,39 @@ define([
Util.inc(c, res);
});
});
Object.keys(count).forEach(function (q_uid) {
var max = 0;
var count_keys = Object.keys(count);
count_keys.forEach(function (q_uid) {
var counts = Object.values(count[q_uid]);
counts.push(max);
max = arrayMax(counts);
});
count_keys.forEach(function (q_uid) {
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
var table = Charts.table([
h('caption', {
style: 'color: var(--msg-color)', // XXX light/dark modes
}, 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));
/*
var values = Object.keys(c).map(function (res) {
return h('div.cp-form-results-type-radio-data', [
h('span.cp-value', res),
@ -1314,10 +1350,13 @@ define([
h('span.cp-mr-q', q),
h('span.cp-mr-value', values)
]));
*/
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', results);
return h('div.cp-form-results-type-radio', {
style: 'width: 100%',
}, results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
@ -1400,7 +1439,7 @@ define([
},
printResults: function (answers, uid) {
// XXX hackathon multiradio https://chartscss.org/components/stacked/
// XXX hackathon radio https://chartscss.org/charts/bar/
var results = [];
var empty = 0;
var count = {};
@ -1509,7 +1548,7 @@ define([
},
printResults: function (answers, uid, form) {
// XXX hackathon
// XXX hackathon multicheck
// stacked: https://chartscss.org/components/stacked/
// or multiple bars: https://chartscss.org/charts/bar/#multiple-datasets
var structure = form[uid];
@ -1531,9 +1570,38 @@ define([
});
});
});
Object.keys(count).forEach(function (q_uid) {
var max = 0;
var count_keys = Object.keys(count);
count_keys.forEach(function (q_uid) {
var counts = Object.values(count[q_uid]);
counts.push(max);
max = arrayMax(counts);
});
count_keys.forEach(function (q_uid) {
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
var table = Charts.table([
h('caption', {
style: 'color: var(--msg-color)', // XXX light/dark modes
}, 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));
/*
var values = Object.keys(c).map(function (res) {
return h('div.cp-form-results-type-radio-data', [
h('span.cp-value', res),
@ -1544,10 +1612,13 @@ define([
h('span.cp-mr-q', q),
h('span.cp-mr-value', values)
]));
*/
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', results);
return h('div.cp-form-results-type-radio', {
style: 'width: 100%',
}, results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
@ -1670,6 +1741,29 @@ define([
Util.inc(count, el, score);
});
});
var counts = Util.values(count);
var max = arrayMax(counts);
var rows = [];
Object.keys(count).forEach(function (text) {
rows.push(Charts.row(text, count[text] / max, count[text]));
});
var table = Charts.table([
h('tbody', rows),
], [
'charts-css',
'bar',
'show-labels',
'show-data-on-hover',
//'show-heading',
]);
return h('div.cp-form-results-type-radio', {
style: 'width: 100%',
}, table);
var sorted = Object.keys(count).sort(function (a, b) {
return count[b] - count[a];
});

44
www/test/inner.js
View File

@ -13,16 +13,56 @@ define([
};
var data = [
25, 58, 0, 96, 79,
25, 58, 5, 96, 79,
23, 75, 13, 44, 29,
65, 80, 30, 47, 22,
7, 62, 64, 46, 21,
29, 31, 76, 65, 61,
78, 58, 12, 90, 98,
37, 75, 92, 74, 16,
0, 52, 42, 71, 19
17, 52, 42, 71, 19
];
append(h('h1', 'Charts'));
append(h('hr'));
var cell = (function () {
var i = 0;
return function () {
var val = data[i++];
return h('td', {
style: '--size: ' + (val / 100),
}, val);
};
}());
var multirow = function (n) {
var cells = [];
while (n--) {
cells.push(cell());
}
return h('tr', {
style: 'margin: 15px',
}, cells);
};
append(wrap(Charts.table([
h('tbody', [
multirow(4),
multirow(4),
multirow(4),
multirow(4),
]),
], [
'charts-css',
'bar',
'multiple',
])));
append(h('hr'));
append(wrap(Charts.columns([ 40, 60, 75, 90, 100])));
append(wrap(Charts.columns(data.slice(20))));
});