mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2026-01-01 03:05:09 +00:00
Expand layout
This commit is contained in:
@@ -37,106 +37,119 @@ export default () => ({
|
||||
accountList: [],
|
||||
autoConversion: false,
|
||||
chart: null,
|
||||
chartData: null,
|
||||
chartOptions: null,
|
||||
switchAutoConversion() {
|
||||
this.autoConversion = !this.autoConversion;
|
||||
setVariable('autoConversion', this.autoConversion);
|
||||
this.loadChart();
|
||||
},
|
||||
loadChart() {
|
||||
console.log('loadChart.');
|
||||
if (true === this.loading) {
|
||||
console.log('loadChart CANCELLED');
|
||||
return;
|
||||
}
|
||||
console.log('loadChart continues');
|
||||
// load chart data
|
||||
this.loading = true;
|
||||
getFreshData() {
|
||||
const dashboard = new Dashboard();
|
||||
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
|
||||
|
||||
// chart options (may need to be centralized later on)
|
||||
window.currencies = [];
|
||||
let options = {
|
||||
legend: {show: false},
|
||||
chart: {
|
||||
height: 400,
|
||||
toolbar: {tools: {zoom: false, download: false, pan: false}},
|
||||
type: 'line'
|
||||
}, series: [],
|
||||
settings: [],
|
||||
xaxis: {
|
||||
categories: [],
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
if (undefined === value) {
|
||||
return '';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if (date instanceof Date && !isNaN(date)) {
|
||||
return formatLocal(date, 'PP');
|
||||
}
|
||||
console.error('Could not parse "' + value + '", return "".');
|
||||
return ':(';
|
||||
}
|
||||
}
|
||||
}, yaxis: {
|
||||
labels: {
|
||||
formatter: function (value, index) {
|
||||
if (undefined === value) {
|
||||
return value;
|
||||
}
|
||||
if (undefined === index) {
|
||||
return value;
|
||||
}
|
||||
if (typeof index === 'object') {
|
||||
index = index.seriesIndex;
|
||||
}
|
||||
//console.log(index);
|
||||
let currencyCode = window.currencies[index] ?? 'EUR';
|
||||
return formatMoney(value, currencyCode);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// render data:
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
if (response.data.hasOwnProperty(i)) {
|
||||
let current = response.data[i];
|
||||
let entry = [];
|
||||
let collection = [];
|
||||
// use the "native" currency code and use the "native_entries" as array
|
||||
if (this.autoConversion) {
|
||||
window.currencies.push(current.native_code);
|
||||
collection = current.native_entries;
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
window.currencies.push(current.currency_code);
|
||||
collection = current.entries;
|
||||
}
|
||||
|
||||
for (const [ii, value] of Object.entries(collection)) {
|
||||
entry.push({x: format(new Date(ii), 'yyyy-MM-dd'), y: parseFloat(value)});
|
||||
}
|
||||
options.series.push({name: current.label, data: entry});
|
||||
}
|
||||
}
|
||||
if (null !== this.chart) {
|
||||
// chart already in place, refresh:
|
||||
this.chart.updateOptions(options);
|
||||
}
|
||||
if (null === this.chart) {
|
||||
this.chart = new ApexCharts(document.querySelector("#account-chart"), options);
|
||||
this.chart.render();
|
||||
}
|
||||
this.loading = false;
|
||||
this.chartData = response.data;
|
||||
this.generateOptions(this.chartData);
|
||||
this.drawChart();
|
||||
});
|
||||
}, loadAccounts() {
|
||||
console.log('loadAccounts');
|
||||
if (true === this.loadingAccounts) {
|
||||
console.log('loadAccounts CANCELLED');
|
||||
},
|
||||
generateOptions(data) {
|
||||
window.currencies = [];
|
||||
let options = {
|
||||
legend: {show: false},
|
||||
chart: {
|
||||
height: 400,
|
||||
type: 'line'
|
||||
},
|
||||
series: [],
|
||||
settings: [],
|
||||
xaxis: {
|
||||
categories: [],
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
if (undefined === value) {
|
||||
return '';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if (date instanceof Date && !isNaN(date)) {
|
||||
return formatLocal(date, 'PP');
|
||||
}
|
||||
console.error('Could not parse "' + value + '", return "".');
|
||||
return ':(';
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value, index) {
|
||||
if (undefined === value) {
|
||||
return value;
|
||||
}
|
||||
if (undefined === index) {
|
||||
return value;
|
||||
}
|
||||
if (typeof index === 'object') {
|
||||
index = index.seriesIndex;
|
||||
}
|
||||
//console.log(index);
|
||||
let currencyCode = window.currencies[index] ?? 'EUR';
|
||||
return formatMoney(value, currencyCode);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// render data:
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let current = data[i];
|
||||
let entry = [];
|
||||
let collection = [];
|
||||
// use the "native" currency code and use the "native_entries" as array
|
||||
if (this.autoConversion) {
|
||||
window.currencies.push(current.native_code);
|
||||
collection = current.native_entries;
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
window.currencies.push(current.currency_code);
|
||||
collection = current.entries;
|
||||
}
|
||||
|
||||
for (const [ii, value] of Object.entries(collection)) {
|
||||
entry.push({x: format(new Date(ii), 'yyyy-MM-dd'), y: parseFloat(value)});
|
||||
}
|
||||
options.series.push({name: current.label, data: entry});
|
||||
}
|
||||
}
|
||||
this.chartOptions = options;
|
||||
},
|
||||
loadChart() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
if (null === this.chartData) {
|
||||
this.getFreshData();
|
||||
}
|
||||
if (null !== this.chartData) {
|
||||
this.generateOptions(this.chartData);
|
||||
this.drawChart();
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
drawChart() {
|
||||
if (null !== this.chart) {
|
||||
// chart already in place, refresh:
|
||||
this.chart.updateOptions(this.chartOptions);
|
||||
}
|
||||
if (null === this.chart) {
|
||||
this.chart = new ApexCharts(document.querySelector("#account-chart"), this.chartOptions);
|
||||
this.chart.render();
|
||||
}
|
||||
},
|
||||
loadAccounts() {
|
||||
if (true === this.loadingAccounts) {
|
||||
return;
|
||||
}
|
||||
console.log('loadAccounts continues');
|
||||
this.loadingAccounts = true;
|
||||
const max = 10;
|
||||
let totalAccounts = 0;
|
||||
@@ -144,7 +157,6 @@ export default () => ({
|
||||
let accounts = [];
|
||||
Promise.all([getVariable('frontpageAccounts'),]).then((values) => {
|
||||
totalAccounts = values[0].length;
|
||||
console.log('total accounts is ' + totalAccounts);
|
||||
for (let i in values[0]) {
|
||||
let account = values[0];
|
||||
if (account.hasOwnProperty(i)) {
|
||||
@@ -186,7 +198,6 @@ export default () => ({
|
||||
if (count === totalAccounts) {
|
||||
this.accountList = accounts;
|
||||
}
|
||||
console.log('Count is now ' + count);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -196,16 +207,14 @@ export default () => ({
|
||||
},
|
||||
|
||||
init() {
|
||||
console.log('init accounts');
|
||||
Promise.all([getVariable('viewRange', '1M'), getVariable('autoConversion', false),]).then((values) => {
|
||||
console.log('from promise');
|
||||
this.autoConversion = values[1];
|
||||
// console.log(values[1]);
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
console.log('from observe end');
|
||||
this.chartData = null;
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user