Added very stupid box plot.

deno.json

@@ -0,0 +1 @@
+{}

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(){

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();