Expand layout

This commit is contained in:
James Cole
2023-08-06 18:33:29 +02:00
parent e1915e365a
commit 551408b801
20 changed files with 869 additions and 481 deletions

View File

@@ -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();
});