From 0a48b53dc88cfff309aa206adcec94182f2db9e2 Mon Sep 17 00:00:00 2001
From: didier amyot <didier.amyot@gmail.com>
Date: Tue, 21 Nov 2023 10:10:18 -0500
Subject: [PATCH] Added very stupid box plot.

---
 deno.json     |  1 +
 src/client.ts | 61 ++++++++++++++++++++++++++++++++++++++++++++++-----
 src/server.ts | 36 +++++++++++++++++-------------
 3 files changed, 77 insertions(+), 21 deletions(-)
 create mode 100644 deno.json

diff --git a/deno.json b/deno.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/deno.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/client.ts b/src/client.ts
index ba4987f..a7127da 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,11 +1,9 @@
 // @deno-types="https://esm.sh/@types/mithril@2.2.4"
 import m from "https://esm.sh/mithril@2.2.2"
 import {verifyAuth} from "./auth.ts";
-import {Ballot, BallotTally, Question, QuestionTally} from "./shared.ts";
-
+import {Ballot, BallotTally, Question} from "./shared.ts";
 
 let ballots: Ballot[] = [];
-
 function isAdmin(): boolean{
     return  window.localStorage.getItem("isAdmin") === 'true';
 }
@@ -165,6 +163,51 @@ class PasscodeView implements m.ClassComponent<unknown> {
     }
 }
 
+class StupidBoxPlotView implements m.ClassComponent<unknown>{
+    vegaLightSchema(lower, q1, media, q3, upper){
+        return {
+            "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+            "data": {
+            "values": [{
+                lower, q1, media, q3, upper
+            }]
+        },
+            "layer": [
+            {
+                "mark": {"type": "rule"},
+                "encoding": {
+                    "x": {"field": "lower", "type": "quantitative","scale": {"zero": false}, "title": null},
+                    "x2": {"field": "upper"}
+                }
+            },
+            {
+                "mark": {"type": "bar", "size": 14},
+                "encoding": {
+                    "x": {"field": "q1", "type": "quantitative"},
+                    "x2": {"field": "q3"},
+                }
+            },
+            {
+                "mark": {"type": "tick", "color": "white", "size": 14},
+                "encoding": {
+                    "x": {"field": "median", "type": "quantitative"}
+                }
+            },
+        ]
+        }
+
+    }
+
+    oncreate(vnode){
+        const shema = this.vegaLightSchema(30, 50, 55, 60, 72);
+        window.vegaEmbed( vnode.dom, shema)
+    }
+    view(){
+
+        return m("div", "hello wprld")
+    }
+}
+
 class ResultView implements m.ClassComponent<unknown>{
     ballotTallies: BallotTally[] = [];
     allowedToView = true;
@@ -211,11 +254,17 @@ class ResultView implements m.ClassComponent<unknown>{
         const rowData = Array.from(this.getResultRowData(bts));
         return m('tbody', rowData.map(data => m("tr", this.userCell(data.userId), data.data.map(d => m("td", d))) ));
     }
+    stupidBoxPlots(ballotTallies: BallotTally[]): m.Attributes {
+        return m('tbody',
+            m('tr', m('td'),
+                ballotTallies.flatMap(bt => bt.questionsTally).map(qt => m('td', m(StupidBoxPlotView, {questionTally: qt})))));
+    }
 
-    resultTables(fakeResults: BallotTally[]): m.Attributes {
+    resultTables(ballotTallies: BallotTally[]): m.Attributes {
         return m('table.table.is-fullwidth.is-bordered',
-            [this.resultTablesHeaders(fakeResults),
-             this.resultBody(fakeResults)])
+            [this.resultTablesHeaders(ballotTallies),
+             this.resultBody(ballotTallies),
+             this.stupidBoxPlots(ballotTallies)])
     }
 
     view(){
diff --git a/src/server.ts b/src/server.ts
index 766433a..af0e430 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -17,21 +17,6 @@ const clientBundle = createBundle(
 );
 
 
-router.get("/", (context) => {
-    context.response.body = `
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>title</title>
-        <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
-    </head>
-    <body>
-      <script type="module" src="client.js"></script>
-    </body>
-    </html>
-    `;
-});
 
 type IndexPrefix = ["soevs", "v1"];
 
@@ -210,6 +195,27 @@ router.get("/client.js", async (context): Promise<void> => {
     context.response.type = "application/javascript";
 });
 
+router.get("/", (context) => {
+    context.response.body = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>title</title>
+        <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/vega@5.26.1"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
+        <!-- Import vega-embed -->
+        <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.23.0"></script>
+    </head>
+    <body>
+      <script type="module" src="client.js"></script>
+    </body>
+    </html>
+    `;
+});
+
+
 
 
 const app = new Application();