Show line chart with sample data

.gitignore

@@ -13,3 +13,7 @@ public/hotreload
 
 # tailwindcss
 public/css/tailwind.css
+
+# js
+node_modules
+public/js/*.min.js

package-lock.json

@@ -0,0 +1,51 @@
+{
+  "name": "delphi.market",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "chart.js": "^4.4.4",
+        "chartjs-adapter-dayjs-4": "^1.0.4",
+        "dayjs": "^1.11.13"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
+    },
+    "node_modules/chart.js": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chartjs-adapter-dayjs-4": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
+      "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "chart.js": ">=4.0.1",
+        "dayjs": "^1.9.7"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    }
+  }
+}

package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "build": "esbuild public/js/chart.js --bundle --minify --outfile=public/js/bundle.min.js"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.4",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
+    "dayjs": "^1.11.13"
+  }
+}

public/js/chart.js

@@ -0,0 +1,66 @@
+import {
+  Chart,
+  LineController,
+  TimeScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from 'chart.js'
+import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
+
+Chart.register(
+  LineController,
+  TimeScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+);
+
+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 }))
+
+const config = {
+  type: 'line',
+  data: {
+    datasets: [
+      {
+        data: yes,
+        backgroundColor: '#149e613d',
+        borderColor: '#149e613d',
+        borderWidth: 5,
+        tension: 0, // draw straight lines instead of bezier curves
+        pointStyle: false
+      },
+      {
+        data: no,
+        backgroundColor: '#f5395e3d',
+        borderColor: '#f5395e3d',
+        borderWidth: 5,
+        tension: 0,
+        pointStyle: false
+      }
+    ]
+  },
+  options: {
+    scales: {
+      x: {
+        type: 'time',
+        time: { unit: 'month' }
+      },
+      y: {
+        min: 0,
+        max: 100
+      }
+    }
+  }
+}
+
+new Chart(element, config);

server/router/pages/components/qr.templ

@@ -13,7 +13,7 @@ templ Qr(value string, href string) {
 		>
 			<img src={ "data:image/jpeg;base64," + qrEncode(value) }/>
 		</a>
-		<small class="flex my-1 mx-auto">
+		<small class="flex my-1 mx-auto" hx-preserve>
 			<span class="block w-[188px] overflow-hidden">{ value }</span>
 			<button id="copy" class="ms-1 button w-[64px]" hx-preserve>copy</button>
 		</small>

server/router/pages/market.templ

@@ -17,12 +17,11 @@ templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int
 		>
 			@components.Nav()
 			<div id="content" class="flex flex-col">
-				<small>
+				<div class="text-center font-bold my-1 mt-3">{ m.Question }</div>
-					@components.Figlet("random", "market")
-				</small>
-				<div class="text-center font-bold my-1">{ 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="flex justify-center w-full max-h-64 my-3"><canvas id="chart"></canvas></div>
+				<script src="/js/bundle.min.js"></script>
 				<blockquote class="p-4 mb-4 border-s-4 border-muted">
 					if m.Description != "" {
 						{ m.Description }