Show line chart with sample data
This commit is contained in:
parent
bdc768cb27
commit
00ee710246
4
.gitignore
vendored
4
.gitignore
vendored
@ -13,3 +13,7 @@ public/hotreload
|
||||
|
||||
# tailwindcss
|
||||
public/css/tailwind.css
|
||||
|
||||
# js
|
||||
node_modules
|
||||
public/js/*.min.js
|
||||
|
||||
51
package-lock.json
generated
Normal file
51
package-lock.json
generated
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
10
package.json
Normal file
10
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
66
public/js/chart.js
Normal file
66
public/js/chart.js
Normal file
@ -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);
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@components.Figlet("random", "market")
|
||||
</small>
|
||||
<div class="text-center font-bold my-1">{ m.Question }</div>
|
||||
<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="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 }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user