gh-mirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-12-23 19:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild frontend

Browse Source
This commit is contained in:
James Cole
2021-04-09 19:35:03 +02:00
parent 95d72d065b
commit f5e5854479
73 changed files with 268 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/charts/DataConverter.vue
View File

@@ -32,20 +32,20 @@ export default {
convertChart(dataSet) {
this.dataSet = dataSet;
this.newDataSet = {
count: 0,
//count: 0,
labels: [],
datasets: []
}
this.getLabels();
this.getDataSets();
this.newDataSet.count = this.newDataSet.datasets.length;
//this.newDataSet.count = this.newDataSet.datasets.length;
return this.newDataSet;
},
colorizeBarData(dataSet) {
this.dataSet = dataSet;
this.newDataSet = {
count: 0,
//count: 0,
labels: [],
datasets: []
};
@@ -79,7 +79,7 @@ export default {
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
}
this.newDataSet.labels = this.dataSet.labels;
this.newDataSet.count = this.dataSet.count;
//this.newDataSet.count = this.dataSet.count;
for (let setKey in this.dataSet.datasets) {
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
var dataset = this.dataSet.datasets[setKey];
@@ -94,7 +94,7 @@ export default {
colorizeLineData(dataSet) {
this.dataSet = dataSet;
this.newDataSet = {
count: 0,
//count: 0,
labels: [],
datasets: []
};
@@ -128,10 +128,10 @@ export default {
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
}
this.newDataSet.labels = this.dataSet.labels;
this.newDataSet.count = this.dataSet.count;
//this.newDataSet.count = this.dataSet.count;
for (let setKey in this.dataSet.datasets) {
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
var dataset = this.dataSet.datasets[setKey];
let dataset = this.dataSet.datasets[setKey];
dataset.fill = false;
dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
this.newDataSet.datasets.push(dataset);
@@ -168,7 +168,7 @@ export default {
newSet.type = oldSet.type;
newSet.currency_symbol = oldSet.currency_symbol;
newSet.currency_code = oldSet.currency_code;
newSet.yAxisID = oldSet.yAxisID;
//newSet.yAxisID = oldSet.yAxisID;
newSet.data = [];
for (const entryLabel in oldSet.entries) {
if (oldSet.entries.hasOwnProperty(entryLabel)) {

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

@@ -79,67 +79,95 @@ export default {
return sections;
},
getDefaultOptions() {
var self = this;
return {
legend: {
display: false,
},
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
animations: false,
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
// break ticks when too long
callback: function (value, index, values) {
// date format
let dateObj = new Date(value);
let options = {year: 'numeric', month: 'long', day: 'numeric'};
let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
//console.log();
//return self.formatLabel(value, 20);
return self.formatLabel(str, 20);
}
x: {
//type: 'linear'
grid: {
display: false,
},
ticks: {
callback: function (value, index, values) {
//return this.getLabelForValue(value);
let dateObj = new Date(this.getLabelForValue(value));
let options = {year: 'numeric', month: 'long', day: 'numeric'};
let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
return str;
// // //console.log();
// // //return self.formatLabel(value, 20);
// // return self.formatLabel(str, 20);
}
}
],
yAxes: [{
display: true,
ticks: {
callback: function (tickValue) {
"use strict";
let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
},
beginAtZero: true
}
},
y: {
suggestedMin: 0
}]
},
tooltips: {
mode: 'index',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
let nrString =
new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
}
//type: 'linear'
}
}
},
// scales: {
// xAxes: [
// {
// gridLines: {
// display: false
// },
// ticks: {
// // break ticks when too long
// callback: function (value, index, values) {
// return value;
// // date format
// // let dateObj = new Date(value);
// // let options = {year: 'numeric', month: 'long', day: 'numeric'};
// // let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
// // //console.log();
// // //return self.formatLabel(value, 20);
// // return self.formatLabel(str, 20);
// }
// }
// }
// ],
// yAxes: [{
// display: true,
// ticks: {
// callback: function (tickValue) {
// "use strict";
// return tickValue;
// // let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
// // return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
// },
// beginAtZero: true
// }
//
// }]
// },
// tooltips: {
// mode: 'index',
// // callbacks: {
// // label: function (tooltipItem, data) {
// // "use strict";
// // let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
// // let nrString =
// // new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
// //
// // return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
// // }
// // }
// }
};
}

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

@@ -24,8 +24,8 @@
<h3 class="card-title">{{ $t('firefly.yourAccounts') }}</h3>
</div>
<div class="card-body">
<div v-if="!loading">
<MainAccountChart v-if="!loading && !error" :chart-data="dataCollection" :options="chartOptions"/>
<div>
<canvas id="canvas" ref="canvas" width="400" height="400"></canvas>
</div>
<div v-if="loading && !error" class="text-center">
<i class="fas fa-spinner fa-spin"></i>
@@ -33,6 +33,9 @@
<div v-if="error" class="text-center">
<i class="fas fa-exclamation-triangle text-danger"></i>
</div>
<div v-if="timezoneDifference" class="text-muted small">
{{ $t('firefly.timezone_difference', {local: localTimeZone, system: systemTimeZone}) }}
</div>
</div>
<div class="card-footer">
<a class="btn btn-default button-sm" href="./accounts/asset"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
@@ -44,35 +47,43 @@
import DataConverter from "../charts/DataConverter";
import DefaultLineOptions from "../charts/DefaultLineOptions";
import {mapGetters} from "vuex";
import * as ChartJs from 'chart.js'
ChartJs.Chart.register.apply(null, Object.values(ChartJs).filter((chartClass) => (chartClass.id)));
import {createNamespacedHelpers} from "vuex";
import MainAccountChart from "./MainAccountChart";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('dashboard/index')
export default {
name: "MainAccount",
components: {MainAccountChart},
components: {}, // MainAccountChart
data() {
return {
loading: true,
error: false,
ready: false,
dataCollection: {},
chartOptions: {}
chartOptions: {},
_chart: null,
localTimeZone: '',
systemTimeZone: '',
}
},
created() {
this.ready = true;
this.chartOptions = DefaultLineOptions.methods.getDefaultOptions();
this.localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
this.systemTimeZone = this.timezone;
},
computed: {
...mapGetters([
'start',
'end'
]),
...mapGetters('dashboard/index',['start', 'end']),
...mapGetters('root',['timezone']),
'datesReady': function () {
return null !== this.start && null !== this.end && this.ready;
},
timezoneDifference: function() {
return this.localTimeZone !== this.systemTimeZone;
}
},
watch: {
@@ -82,10 +93,10 @@ export default {
}
},
start: function () {
this.initialiseChart();
//this.initialiseChart();
},
end: function () {
this.initialiseChart();
//this.initialiseChart();
},
},
methods: {
@@ -95,20 +106,28 @@ export default {
let startStr = this.start.toISOString().split('T')[0];
let endStr = this.end.toISOString().split('T')[0];
let url = './api/v1/chart/account/overview?start=' + startStr + '&end=' + endStr;
// console.log('URL is ' + url);
axios.get(url)
.then(response => {
let chartData = DataConverter.methods.convertChart(response.data);
chartData = DataConverter.methods.colorizeLineData(chartData);
this.dataCollection = chartData;
this.loading = false;
this.drawChart();
})
.catch(error => {
// console.log('Has error!');
// console.log(error);
console.log('Has error!');
console.log(error);
this.error = true;
// console.error(error);
});
},
drawChart: function () {
this._chart = new ChartJs.Chart(this.$refs.canvas.getContext('2d'), {
type: 'line',
data: this.dataCollection,
options: this.chartOptions
}
);
}
},
}

5
frontend/src/components/dashboard/MainAccountChart.vue
View File

@@ -20,7 +20,10 @@
<script>
import {Line, mixins} from 'vue-chartjs'
//import {Line, mixins} from 'vue-chartjs'
import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js'
const {reactiveProp} = mixins

46
frontend/src/components/store/modules/root.js vendored
View File

@@ -22,7 +22,7 @@
const state = () => (
{
listPageSize: 33,
// timezone: ''
timezone: ''
}
)
@@ -32,10 +32,10 @@ const getters = {
listPageSize: state => {
return state.listPageSize;
},
// timezone: state => {
// // console.log('Wil return ' + state.listPageSize);
// return state.timezone;
// },
timezone: state => {
// console.log('Wil return ' + state.listPageSize);
return state.timezone;
},
}
// actions
@@ -53,17 +53,17 @@ const actions = {
}
);
}
// if (localStorage.timezone) {
// state.timezone = localStorage.timezone;
// context.commit('setTimezone', {timezone: localStorage.timezone});
// }
// if (!localStorage.timezone) {
// axios.get('./api/v1/configuration/app.timezone')
// .then(response => {
// context.commit('setTimezone', {timezone: response.data.data.value});
// }
// );
// }
if (localStorage.timezone) {
state.timezone = localStorage.timezone;
context.commit('setTimezone', {timezone: localStorage.timezone});
}
if (!localStorage.timezone) {
axios.get('./api/v1/configuration/app.timezone')
.then(response => {
context.commit('setTimezone', {timezone: response.data.data.value});
}
);
}
}
}
@@ -79,13 +79,13 @@ const mutations = {
}
},
// setTimezone(state, payload) {
//
// if ('' !== payload.timezone) {
// state.timezone = payload.timezone;
// localStorage.timezone = payload.timezone;
// }
// },
setTimezone(state, payload) {
if ('' !== payload.timezone) {
state.timezone = payload.timezone;
localStorage.timezone = payload.timezone;
}
},
}
export default {