PivotTable

JmiXIII · Nov 24, 2022 · 6e7b753 · 6e7b753
1 parent 7519368
commit 6e7b753
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 0 deletions.
diff --git a/pivottable/.eslintrc.yml b/pivottable/.eslintrc.yml
@@ -0,0 +1,15 @@
+env:
+  browser: true
+  es2021: true
+extends: 'eslint:recommended'
+overrides: []
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+globals:
+  grist: "readonly"
+  $: "readonly"
+rules: {
+  semi: [2, "always"],
+  no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]
+}
diff --git a/pivottable/Readme.md b/pivottable/Readme.md
@@ -0,0 +1,11 @@
+# PivotTable custom widget for Grist
+
+This widget builds a [pivot table](https://pivottable.js.org/examples/) from the source data.
+
+Just setting its url gives a pivot table without any row / column definition.
+
+The settings may be adjusted by passing url parameters, for example (with data similar to [this example](https://pivottable.js.org/examples/mps_agg.html)):
+
+```
+https://path/to/pivottable?rows=Party,Province&cols=Gender&aggregatorName=Average&rendererName=Col Heatmap
+```
diff --git a/pivottable/index.html b/pivottable/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <title>Stats</title>
+    <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.16.3/plotly-basic.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/d3_renderers.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/plotly_renderers.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/export_renderers.min.js"></script>
+  </head>
+  <body>
+    <div id="table"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/pivottable/index.js b/pivottable/index.js
@@ -0,0 +1,57 @@
+window.onerror = (err) => {
+  console.trace();
+  alert(String(err));
+};
+
+grist.ready({
+  requiredAccess: 'read table'
+});
+
+const urlParams = new URLSearchParams(window.location.search);
+const rows = urlParams.get('rows')?.split(',');
+const cols = urlParams.get('cols')?.split(',');
+const vals = urlParams.get('vals')?.split(',');
+const aggregatorName = urlParams.get('aggregatorName');
+const rendererName = urlParams.get('rendererName');
+
+function wavg (n) {
+  if (!n) { return; }
+  n = n.filter(([note]) => typeof (note) === 'number');
+  if (n.length) { return n.map(([note, coef]) => note * coef).reduce((a, b) => a + b) / n.map(([_note, coef]) => coef).reduce((a, b) => a + b); }
+}
+
+function weightedAverage ([val, coef]) {
+  return (_data, _rowKey, _colKey) => ({
+    values: [],
+    push: function (rec) { this.values.push([rec[val], rec[coef]]); },
+    value: function () { return wavg(this.values); },
+    format: function (x) { return (Math.round(x * 100) / 100).toFixed(2); },
+    numInputs: 2
+  });
+}
+
+const aggregators = {
+  'Weighted Average': weightedAverage
+};
+
+grist.onRecords(rec => {
+  console.log(rec);
+  $('#table').pivotUI(
+    rec,
+    {
+      rows,
+      cols,
+      vals,
+      aggregatorName,
+      rendererName,
+      aggregators: $.extend(aggregators, $.pivotUtilities.aggregators),
+      renderers: $.extend(
+        $.pivotUtilities.renderers,
+        $.pivotUtilities.plotly_renderers,
+        $.pivotUtilities.d3_renderers,
+        $.pivotUtilities.export_renderers
+      )
+    },
+    true
+  );
+});