shibao/cannery
1
2
Fork 1
Code Issues 15 Pull Requests Projects 1 Releases 38 Wiki Activity

add graph to range page

Browse Source
This commit is contained in:
shibao
2022-11-09 21:04:57 -05:00
parent 1f017ced4a
commit ba8d7988b3
11 changed files with 221 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/js/app.js
View File

@ -26,6 +26,7 @@ import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view'
import topbar from '../vendor/topbar'
import MaintainAttrs from './maintain_attrs'
import ShotLogChart from './shot_log_chart'
import Alpine from 'alpinejs'
const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
@ -36,7 +37,7 @@ const liveSocket = new LiveSocket('/live', Socket, {
}
},
params: { _csrf_token: csrfToken },
hooks: { MaintainAttrs }
hooks: { MaintainAttrs, ShotLogChart }
})
// alpine.js

83
assets/js/shot_log_chart.js Normal file
View File

@ -0,0 +1,83 @@
import { Chart, Title, Tooltip, Legend, LineController, LineElement, PointElement, TimeScale, LinearScale } from 'chart.js'
import 'chartjs-adapter-date-fns'
Chart.register(Title, Tooltip, Legend, LineController, LineElement, PointElement, TimeScale, LinearScale)
export default {
initalizeChart (el) {
const data = JSON.parse(el.dataset.chartData)
this.el.chart = new Chart(el, {
type: 'line',
data: {
datasets: [{
label: el.dataset.label,
data: data.map(({ date, count, labels }) => ({
labels,
x: date,
y: count
})),
backgroundColor: el.dataset.color,
borderColor: el.dataset.color,
fill: true,
borderWidth: 4
}]
},
options: {
elements: {
point: {
radius: 7,
hoverRadius: 10
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20
}
},
tooltip: {
displayColors: false,
callbacks: {
label: ({ raw: { labels } }) => labels
}
}
},
scales: {
y: {
beginAtZero: true,
stacked: true,
grace: '15%',
ticks: {
padding: 15
}
},
x: {
type: 'time',
time: {
unit: 'day'
}
}
},
transitions: {
show: {
animations: {
x: {
from: 0
}
}
},
hide: {
animations: {
x: {
to: 0
}
}
}
}
}
})
},
mounted () { this.initalizeChart(this.el) },
updated () { this.initalizeChart(this.el) }
}

44
assets/package-lock.json generated
View File

@ -8,6 +8,9 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"alpinejs": "^3.10.2",
"chart.js": "^3.9.1",
"chartjs-adapter-date-fns": "^2.0.0",
"date-fns": "^2.29.3",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
@ -3166,6 +3169,19 @@
"node": ">=4"
}
},
"node_modules/chart.js": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
},
"node_modules/chartjs-adapter-date-fns": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
"integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
"peerDependencies": {
"chart.js": "^3.0.0"
}
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -3850,6 +3866,18 @@
"node": ">=8.0.0"
}
},
"node_modules/date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -12537,6 +12565,17 @@
"supports-color": "^5.3.0"
}
},
"chart.js": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
},
"chartjs-adapter-date-fns": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
"integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
"requires": {}
},
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -13025,6 +13064,11 @@
"css-tree": "^1.1.2"
}
},
"date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

5
assets/package.json
View File

@ -2,7 +2,7 @@
"repository": {},
"description": " ",
"license": "MIT",
"engines":{
"engines": {
"node": "18.12.1",
"npm": "8.19.2"
},
@ -15,6 +15,9 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"alpinejs": "^3.10.2",
"chart.js": "^3.9.1",
"chartjs-adapter-date-fns": "^2.0.0",
"date-fns": "^2.29.3",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",