chart experiments

2021-08-04 13:26:40 +05:30 · 2021-08-04 13:26:40 +05:30 · 9ecb9e4cd6
parent 98df612eb4
commit 9ecb9e4cd6
4 changed files with 66 additions and 0 deletions
--- a/www/common/common-charts.js
+++ b/www/common/common-charts.js
@ -0,0 +1,25 @@
+define([
+    '/common/hyperscript.js',
+
+], function (h) {
+    var Charts = {};
+
+    Charts.columns = function (rows) {
+        return h('table.charts-css.column.show-heading', [
+            //h('caption', "Front-End Developer Salary"),
+            h('tbody', rows.map(function (n) {
+                return h('tr', h('td', {
+                    style: '--size: ' + (n / 100),
+                }, n));
+            })),
+        ]);
+    };
+
+    // table.charts-css.bar.reverse
+    // Charts.bars
+
+
+
+
+    return Charts;
+});
--- a/www/lib/chart/charts.min.css
+++ b/www/lib/chart/charts.min.css
--- a/www/test/index.html
+++ b/www/test/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-main="/test/inner.js" src="/bower_components/requirejs/require.js?ver=2.3.6"></script>
+    <link href="/lib/chart/charts.min.css" rel="stylesheet" type="text/css">
+</head>
+<body>
--- a/www/test/inner.js
+++ b/www/test/inner.js
@ -0,0 +1,29 @@
+define([
+    '/common/hyperscript.js',
+    '/common/common-charts.js',
+    '/common/common-util.js',
+], function (h, Charts, Util) {
+    var wrap = function (content) {
+        return h('div', {
+            style: 'height: 500px; width: 500px; padding: 15px; border: 1px solid #222; margin: 15px;'
+        }, content);
+    };
+
+    var append = function (el) {
+        document.body.appendChild(el);
+    };
+
+    var data = [
+        25, 58, 0, 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
+    ];
+
+    append(wrap(Charts.columns([ 40, 60, 75, 90, 100])));
+    append(wrap(Charts.columns(data.slice(20))));
+});