added charts
This commit is contained in:
parent
656e665ad7
commit
53942471a5
9 changed files with 53 additions and 50 deletions
|
|
@ -75,7 +75,6 @@
|
|||
default = pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
air # live go app reloading
|
||||
corepack # npm install for the web folder
|
||||
dart-sass
|
||||
go
|
||||
gopls
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@ templ dashboard() {
|
|||
<title>Dashboard</title>
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: -20px">
|
||||
<div class="c-crust col card mx-auto cr-all">
|
||||
<div class="c-s0 d-flex w-full cr-top">
|
||||
<div class="c-crust col card mx-auto cr-all d-flex-col">
|
||||
<div class="c-s0 d-flex w-100 cr-top">
|
||||
<i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
|
||||
<span class="mx-auto my-auto c-text">Income/Expenses</span>
|
||||
<i class="my-auto c-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="my-auto mx-2 w-75">
|
||||
<div class="h-100">
|
||||
<div class="w-50 h-100">
|
||||
<canvas
|
||||
class="chartjs-chart"
|
||||
data-chart-endpoint="/web/dashboard/expenditure_chart"
|
||||
|
|
@ -24,7 +25,7 @@ templ dashboard() {
|
|||
|
||||
</div>
|
||||
<div class="c-crust col card mx-auto cr-all">
|
||||
<div class="c-s0 d-flex w-full cr-top">
|
||||
<div class="c-s0 d-flex w-100 cr-top">
|
||||
<i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
|
||||
<i class="my-auto c-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
|
||||
</div>
|
||||
|
|
|
|||
28
web/package-lock.json
generated
28
web/package-lock.json
generated
|
|
@ -1,28 +0,0 @@
|
|||
{
|
||||
"name": "web",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"chart.js": "^4.4.1"
|
||||
}
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
|
||||
"integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=7"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"chart.js": "^4.4.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,7 @@ func WebRouter() http.Handler {
|
|||
r.Get("/web/transaction_table_rows", getTransactions)
|
||||
r.Get("/web/dashboard/expenditure_chart", getExpenditureChart)
|
||||
r.Get("/hello", getHello)
|
||||
r.Handle("/chart.js/*", http.StripPrefix("/chart.js/", http.FileServer(http.Dir("web/node_modules/chart.js/"))))
|
||||
r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
|
||||
return r
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ $directions: (
|
|||
"b": "bottom"
|
||||
);
|
||||
|
||||
|
||||
|
||||
@each $size, $val in $sizes {
|
||||
.m-#{$size} {
|
||||
margin: $val;
|
||||
|
|
@ -53,18 +55,36 @@ $directions: (
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-75 {
|
||||
width: 75%;
|
||||
}
|
||||
.w-50 {
|
||||
width: 50%;
|
||||
$w_h_sizes: (
|
||||
'25': 25%,
|
||||
'50': 50%,
|
||||
'75': 75%,
|
||||
'80': 80%,
|
||||
'100': 100%,
|
||||
'auto': auto,
|
||||
);
|
||||
|
||||
// Loop through the sizes and generate classes
|
||||
@each $name, $value in $w_h_sizes {
|
||||
.h-#{$name} {
|
||||
height: $value;
|
||||
}
|
||||
|
||||
.w-#{$name} {
|
||||
width: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.d-flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
.cr-all {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
|
||||
function fill_charts() {
|
||||
const style = getComputedStyle(document.body);
|
||||
const red_color = style.getPropertyValue("--pf-red");
|
||||
const green_color = style.getPropertyValue("--pf-green");
|
||||
document.querySelectorAll(".chartjs-chart").forEach(function (el) {
|
||||
var url = el.dataset.chartEndpoint;
|
||||
var type = el.dataset.chartType;
|
||||
|
|
@ -17,18 +20,29 @@ function fill_charts() {
|
|||
data: {
|
||||
labels: jsonData.labels,
|
||||
datasets: [{
|
||||
data: jsonData.data
|
||||
data: jsonData.data,
|
||||
backgroundColor: [
|
||||
green_color,
|
||||
red_color,
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
new Chart(el, config)();
|
||||
new Chart(el, config);
|
||||
}).catch(error => {
|
||||
console.error("Unable to set up chart: ", error)
|
||||
});
|
||||
|
|
|
|||
1
web/static/feather.min.js.map
Normal file
1
web/static/feather.min.js.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -58,6 +58,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script type="module" src="/static/index.js"></script>
|
||||
<script type="module">
|
||||
import {register_handlers, fill_charts, trigger_table_animation} from "/static/index.js";
|
||||
|
|
@ -65,7 +66,6 @@
|
|||
feather.replace();
|
||||
htmx.onLoad(function (element) {
|
||||
if (element.localName === "tr") {
|
||||
console.log(element);
|
||||
trigger_table_animation();
|
||||
} else {
|
||||
fill_charts();
|
||||
|
|
|
|||
Loading…
Reference in a new issue