From ecee2f2a4637dd9969f641260b5ef961b622e659 Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzy.is>
Date: Mon, 9 Sep 2024 01:58:09 +0200
Subject: [PATCH] Load chart data from db

---
 package.json                     |  4 ++--
 public/js/chart.js               | 17 +++++++------
 server/router/handler/market.go  | 41 +++++++++++++++++++++++++++++++-
 server/router/pages/market.templ | 10 ++++++--
 types/types.go                   |  5 ++++
 5 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 53666b2..01fa038 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "scripts": {
-    "build": "esbuild public/js/chart.js --bundle --minify --outfile=public/js/bundle.min.js"
+    "build": "esbuild public/js/chart.js --bundle --minify --outfile=public/js/chart.min.js"
   },
   "dependencies": {
     "chart.js": "^4.4.4",
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "dayjs": "^1.11.13"
   }
-}
+}
\ No newline at end of file
diff --git a/public/js/chart.js b/public/js/chart.js
index 116f1e0..c6f7c3b 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -18,14 +18,13 @@ Chart.register(
 
 const element = document.getElementById('chart')
 
-// TODO: get data from server
-const yes = [
-  { x: new Date('2024-01-01'), y: 20 },
-  { x: new Date('2024-02-01'), y: 41 },
-  { x: new Date('2024-03-01'), y: 53 }
-]
 
-const no = yes.map(({ x, y }) => ({ x, y: 100 - y }))
+function transformPoint({ X, Y }) {
+  return { x: new Date(X), y: Y * 100 }
+}
+
+const no = JSON.parse($("#chart-data").getAttribute("chart-data-p0")).map(transformPoint)
+const yes = JSON.parse($("#chart-data").getAttribute("chart-data-p1")).map(transformPoint)
 
 const config = {
   type: 'line',
@@ -35,7 +34,7 @@ const config = {
         data: yes,
         backgroundColor: '#149e613d',
         borderColor: '#149e613d',
-        borderWidth: 5,
+        borderWidth: 3,
         tension: 0, // draw straight lines instead of bezier curves
         pointStyle: false
       },
@@ -43,7 +42,7 @@ const config = {
         data: no,
         backgroundColor: '#f5395e3d',
         borderColor: '#f5395e3d',
-        borderWidth: 5,
+        borderWidth: 3,
         tension: 0,
         pointStyle: false
       }
diff --git a/server/router/handler/market.go b/server/router/handler/market.go
index 6a6fc9b..73a1238 100644
--- a/server/router/handler/market.go
+++ b/server/router/handler/market.go
@@ -113,6 +113,9 @@ func HandleMarket(sc context.Context) echo.HandlerFunc {
 			quote1   = types.MarketQuote{}
 			uQ0      int
 			uQ1      int
+			rows     *sql.Rows
+			p0       []types.MarketPoint
+			p1       []types.MarketPoint
 			err      error
 		)
 
@@ -172,6 +175,38 @@ func HandleMarket(sc context.Context) echo.HandlerFunc {
 			return err
 		}
 
+		if rows, err = db.QueryContext(ctx, ""+
+			"SELECT created_at, quote(b, q0, q1, 1) AS p0, quote(b, q1, q0, 1) AS p1 "+
+			"FROM ( "+
+			"  SELECT "+
+			"  m.lmsr_b AS b, o.created_at, "+
+			"  COALESCE(SUM(quantity) FILTER(WHERE o.outcome = 0) OVER (ORDER BY o.created_at ASC), 0) AS q0, "+
+			"  COALESCE(sum(quantity) filter(where o.outcome = 1) over (order by o.created_at ASC), 0) AS q1 "+
+			"  FROM markets m "+
+			"  JOIN orders o ON o.market_id = m.id "+
+			"  JOIN invoices i ON i.id = o.invoice_id "+
+			"  WHERE m.id = $1 AND i.confirmed_at IS NOT NULL "+
+			") AS o "+
+			"UNION "+
+			"SELECT m.created_at, quote(m.lmsr_b, 0, 0, 1) AS p0, quote(m.lmsr_b, 0, 0, 1) AS p1 "+
+			"FROM markets m "+
+			"ORDER BY created_at", id); err != nil {
+			return err
+		}
+
+		for rows.Next() {
+			var (
+				createdAt time.Time
+				_p0       float64
+				_p1       float64
+			)
+			if err = rows.Scan(&createdAt, &_p0, &_p1); err != nil {
+				return err
+			}
+			p0 = append(p0, types.MarketPoint{X: createdAt, Y: _p0})
+			p1 = append(p1, types.MarketPoint{X: createdAt, Y: _p1})
+		}
+
 		total = lmsr.Quote(l.B, l.Q1, l.Q2, int(q))
 		quote0 = types.MarketQuote{
 			Outcome:    0,
@@ -188,7 +223,11 @@ func HandleMarket(sc context.Context) echo.HandlerFunc {
 			Reward:     float64(q) - total,
 		}
 
-		return pages.Market(m, quote0, quote1, uQ0, uQ1).Render(context.RenderContext(sc, c), c.Response().Writer)
+		return pages.Market(
+			m,
+			p0, p1,
+			quote0, quote1,
+			uQ0, uQ1).Render(context.RenderContext(sc, c), c.Response().Writer)
 	}
 }
 
diff --git a/server/router/pages/market.templ b/server/router/pages/market.templ
index d24def1..969fc62 100644
--- a/server/router/pages/market.templ
+++ b/server/router/pages/market.templ
@@ -7,7 +7,7 @@ import (
 )
 
 // TODO: Add countdown? Use or at least show somewhere precise timestamps?
-templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int, uQ1 int) {
+templ Market(m types.Market, p0 []types.MarketPoint, p1 []types.MarketPoint, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int, uQ1 int) {
 	<html>
 		@components.Head()
 		<body
@@ -20,8 +20,14 @@ templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int
 				<div class="text-center font-bold my-1 mt-3">{ m.Question }</div>
 				<div class="text-center text-muted my-1">{ humanize.Time(m.EndDate) }</div>
 				<div class="text-center text-muted my-1"></div>
+				<div
+					class="none"
+					id="chart-data"
+					chart-data-p0={ templ.JSONString(p0) }
+					chart-data-p1={ templ.JSONString(p1) }
+				></div>
 				<div class="flex justify-center w-full max-h-64 my-3"><canvas id="chart"></canvas></div>
-				<script src="/js/bundle.min.js"></script>
+				<script src="/js/chart.min.js"></script>
 				<blockquote class="p-4 mb-4 border-s-4 border-muted">
 					if m.Description != "" {
 						{ m.Description }
diff --git a/types/types.go b/types/types.go
index 58b3b94..a6d8309 100644
--- a/types/types.go
+++ b/types/types.go
@@ -50,3 +50,8 @@ type MarketQuote struct {
 	TotalPrice float64
 	Reward     float64
 }
+
+type MarketPoint struct {
+	X time.Time
+	Y float64
+}