kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-11-18 07:38:29 +00:00
Code Issues Projects Releases Wiki Activity

Basic new dashboard.

Browse Source
This commit is contained in:
James Cole
2020-07-05 18:29:58 +02:00
parent 4d4d91bf84
commit a56cefda7d
68 changed files with 1013 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/charts/DefaultBarOptions.vue
View File

@@ -79,7 +79,6 @@
return sections;
},
getDefaultOptions() {
console.log('getDefaultOptions()');
return {
legend: {
display: false,

1
frontend/src/components/charts/DefaultLineOptions.vue
View File

@@ -79,7 +79,6 @@
return sections;
},
getDefaultOptions() {
console.log('getDefaultOptions()');
return {
legend: {
display: false,

8
frontend/src/components/transactions/SingleTransactionRow.vue → frontend/src/components/charts/DefaultPieOptions.vue
View File

@@ -1,5 +1,5 @@
<!--
- SingleTransactionRow.vue
- DefaultPieOptions.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
@@ -19,14 +19,12 @@
-->
<template>
<div>
Hello
</div>
</template>
<script>
export default {
name: "SingleTransactionRow"
name: "DefaultPieOptions"
}
</script>

17
frontend/src/components/dashboard/Dashboard.vue
View File

@@ -38,20 +38,20 @@
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-debit-chart/>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<main-debit/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-credit-chart/>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<main-credit/>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-bills-chart/>
<main-piggy-list/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-piggy-list/>
<main-bills-list/>
</div>
</div>
</div>
@@ -59,9 +59,6 @@
<script>
export default {
name: "Dashboard",
mounted() {
console.log('Dashboard mounted.')
}
name: "Dashboard"
}
</script>

2
frontend/src/components/dashboard/MainAccount.vue
View File

@@ -52,8 +52,6 @@
},
mounted() {
this.chartOptions = DefaultLineOptions.methods.getDefaultOptions();
this.loaded = false;
axios.get('./api/v1/chart/account/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {

42
frontend/src/components/dashboard/MainBillsChart.vue
View File

@@ -1,42 +0,0 @@
<!--
- MainBillsChart.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">I am a card</h3>
</div>
<div class="card-body">
<p>
I am card body
</p>
</div>
</div>
</template>
<script>
export default {
name: "MainBillsChart"
}
</script>
<style scoped>
</style>

88
frontend/src/components/dashboard/MainBillsList.vue Normal file
View File

@@ -0,0 +1,88 @@
<!--
- MainBills.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.bills') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<thead>
<tr>
<th style="width:35%;">{{ $t('list.name') }}</th>
<th style="width:40%;">{{ $t('list.amount') }}</th>
<th style="width:25%;">{{ $t('list.next_expected_match') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="bill in this.bills">
<td><a :href="'./bills/show' + bill.id" :title="bill.attributes.name">{{ bill.attributes.name }}</a></td>
<td>~{{ Intl.NumberFormat('en-US', {style: 'currency', currency: bill.attributes.currency_code}).format((bill.attributes.amount_min +
bill.attributes.amount_max) / 2) }}
</td>
<td>
<span v-for="payDate in bill.attributes.pay_dates">
{{ payDate }}<br />
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<a href="./bills" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_bills') }}</a>
</div>
</div>
</template>
<script>
export default {
name: "MainBillsList",
mounted() {
axios.get('./api/v1/bills?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.loadBills(response.data.data);
}
);
},
components: {},
methods: {
loadBills(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let bill = data[key];
let active = bill.attributes.active;
if (bill.attributes.pay_dates.length > 0 && active) {
this.bills.push(bill);
}
}
}
}
},
data() {
return {
bills: []
}
},
computed: {},
}
</script>

34
frontend/src/components/dashboard/MainCrebitChart.vue → frontend/src/components/dashboard/MainCredit.vue
View File

@@ -21,22 +21,36 @@
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">I am a card</h3>
<!-- debit = expense -->
<h3 class="card-title">{{ $t('firefly.income') }}</h3>
</div>
<div class="card-body">
<p>
I am card body
</p>
<div class="card-body table-responsive p-0">
<transaction-list-small :transactions="this.transactions" />
</div>
<div class="card-footer">
<a href="./accounts/revenue" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_deposits') }}</a>
</div>
</div>
</template>
<script>
export default {
name: "MainCrebitChart"
name: "MainCredit",
components: {},
data() {
return {
transactions: []
}
},
mounted() {
axios.get('./api/v1/transactions?type=deposit&limit=10&start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.transactions = response.data.data;
}
);
},
methods: {
},
computed: {},
}
</script>
<style scoped>
</style>

82
frontend/src/components/dashboard/MainDebit.vue Normal file
View File

@@ -0,0 +1,82 @@
<!--
- MainDebit.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<!-- debit = expense -->
<h3 class="card-title">{{ $t('firefly.expense_accounts') }}</h3>
</div>
<div class="card-body">
<div>
<main-debit-chart v-if="loaded" :styles="chartStyles" :options="chartOptions" :chart-data="chartData"></main-debit-chart>
</div>
</div>
<div class="card-footer">
<a href="./accounts/expense" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_expenses') }}</a>
</div>
</div>
</template>
<script>
import MainDebitChart from "./MainDebitChart";
import DefaultBarOptions from "../charts/DefaultBarOptions";
import DataConverter from "../charts/DataConverter";
export default {
name: "MainDebit",
components: {
MainDebitChart
},
data() {
return {
chartData: null,
loaded: false,
chartOptions: null,
}
},
mounted() {
this.chartOptions = DefaultBarOptions.methods.getDefaultOptions();
this.loaded = false;
axios.get('./api/v1/chart/account/expense?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.chartData = response.data;
this.chartData = DataConverter.methods.convertChart(this.chartData);
this.loaded = true
});
},
methods: {
},
computed: {
chartStyles() {
return {
height: '400px',
'max-height': '400px',
position: 'relative',
display: 'block',
}
}
},
}
</script>
<style scoped>
</style>

29
frontend/src/components/dashboard/MainDebitChart.vue
View File

@@ -18,25 +18,18 @@
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">I am a card</h3>
</div>
<div class="card-body">
<p>
I am card body
</p>
</div>
</div>
</template>
<script>
import {Line} from 'vue-chartjs'
export default {
name: "MainDebitChart"
name: "MainDebitChart",
extends: Line,
props: ['options', 'chartData'],
mounted() {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
</script>
<style scoped>
</style>

71
frontend/src/components/dashboard/MainPiggyList.vue
View File

@@ -21,19 +21,78 @@
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">I am a card</h3>
<h3 class="card-title">{{ $t('firefly.piggy_banks') }}</h3>
</div>
<div class="card-body">
<p>
I am card body
</p>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<thead>
<tr>
<th style="width:35%;">{{ $t('list.piggy_bank') }}</th>
<th style="width:40%;">{{ $t('list.percentage') }}</th>
<th style="width:25%;text-align: right;">{{ $t('list.amount') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="piggy in this.piggy_banks">
<td>{{ piggy.attributes.name }}
<br /><small class="text-muted">{{ piggy.attributes.object_group_title }}</small>
</td>
<td>
<div class="progress-group">
<div class="progress progress-sm">
<div class="progress-bar primary" v-if="piggy.attributes.pct < 100" :style="{'width': piggy.attributes.pct + '%'}"></div>
<div class="progress-bar bg-success" v-if="100 === piggy.attributes.pct" :style="{'width': piggy.attributes.pct + '%'}"></div>
</div>
</div>
</td>
<td style="text-align: right;">
<span class="text-success">
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.current_amount) }}
</span>
of
<span class="text-success">{{ Intl.NumberFormat('en-US', {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.target_amount) }}</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<a href="./piggy-banks" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_piggies') }}</a>
</div>
</div>
</template>
<script>
export default {
name: "MainPiggyList"
name: "MainPiggyList",
mounted() {
axios.get('./api/v1/piggy_banks')
.then(response => {
this.loadPiggyBanks(response.data.data);
}
);
},
methods: {
loadPiggyBanks(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let piggy = data[key];
if(0.0 !== parseFloat(piggy.attributes.left_to_save)) {
piggy.attributes.pct = (parseFloat(piggy.attributes.current_amount) / parseFloat(piggy.attributes.target_amount)) * 100;
this.piggy_banks.push(piggy);
}
}
}
this.piggy_banks.sort(function(a, b) {
return b.attributes.pct - a.attributes.pct;
});
}
},
data() {
return {
piggy_banks: []
}
}
}
</script>