mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-12 15:35:15 +00:00
Expand layout
This commit is contained in:
James Cole
@@ -24,158 +24,176 @@ import formatMoney from "../../util/format-money.js";
|
||||
|
||||
window.budgetCurrencies = [];
|
||||
export default () => ({
|
||||
loadingChart: false,
|
||||
loading: false,
|
||||
chart: null,
|
||||
autoConversion: false,
|
||||
chartData: null,
|
||||
chartOptions: null,
|
||||
loadChart() {
|
||||
if (this.loadingChart) {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
// load chart data
|
||||
this.loadingChart = true;
|
||||
window.budgetCurrencies = [];
|
||||
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("#budget-chart"), this.chartOptions);
|
||||
this.chart.render();
|
||||
}
|
||||
},
|
||||
getFreshData() {
|
||||
const dashboard = new Dashboard();
|
||||
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
|
||||
let options = {
|
||||
legend: {show: false},
|
||||
series: [{
|
||||
name: 'Spent',
|
||||
data: []
|
||||
}, {
|
||||
name: 'Left',
|
||||
data: []
|
||||
}, {
|
||||
name: 'Overspent',
|
||||
data: []
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400,
|
||||
stacked: true,
|
||||
toolbar: {tools: {zoom: false, download: false, pan: false}},
|
||||
zoom: {
|
||||
enabled: true
|
||||
this.chartData = response.data;
|
||||
this.generateOptions(this.chartData);
|
||||
this.drawChart();
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
window.budgetCurrencies = [];
|
||||
let options = {
|
||||
legend: {show: false},
|
||||
series: [{
|
||||
name: 'Spent',
|
||||
data: []
|
||||
}, {
|
||||
name: 'Left',
|
||||
data: []
|
||||
}, {
|
||||
name: 'Overspent',
|
||||
data: []
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400,
|
||||
stacked: true,
|
||||
toolbar: {tools: {zoom: false, download: false, pan: false}},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
offsetX: -10,
|
||||
offsetY: 0
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
offsetX: -10,
|
||||
offsetY: 0
|
||||
}
|
||||
}
|
||||
}],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
borderRadius: 10,
|
||||
dataLabels: {
|
||||
total: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontWeight: 900
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
let index = 0;
|
||||
if (typeof opt === 'object') {
|
||||
index = opt.dataPointIndex; // this is the "category name + currency" index
|
||||
}
|
||||
let currencyCode = window.budgetCurrencies[index] ?? 'EUR';
|
||||
return formatMoney(val, currencyCode);
|
||||
}
|
||||
}],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
borderRadius: 10,
|
||||
dataLabels: {
|
||||
total: {
|
||||
enabled: true,
|
||||
// style: {
|
||||
// fontSize: '13px',
|
||||
// fontWeight: 900
|
||||
// },
|
||||
formatter: function (val, opt) {
|
||||
let index = 0;
|
||||
if (typeof opt === 'object') {
|
||||
index = opt.dataPointIndex; // this is the "category name + currency" index
|
||||
}
|
||||
let currencyCode = window.budgetCurrencies[index] ?? 'EUR';
|
||||
return formatMoney(val, currencyCode);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value, index) {
|
||||
|
||||
if (undefined === value) {
|
||||
return value;
|
||||
}
|
||||
if (undefined === index) {
|
||||
return value;
|
||||
}
|
||||
if (typeof index === 'object') {
|
||||
index = index.dataPointIndex; // this is the "category name + currency" index
|
||||
}
|
||||
let currencyCode = window.budgetCurrencies[index] ?? 'EUR';
|
||||
return formatMoney(value, currencyCode);
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: []
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
dataLabels: {
|
||||
formatter: function (val, opt) {
|
||||
let index = 0;
|
||||
if (typeof opt === 'object') {
|
||||
index = opt.dataPointIndex; // this is the "category name + currency" index
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value, index) {
|
||||
if (undefined === value) {
|
||||
return value;
|
||||
}
|
||||
if (undefined === index) {
|
||||
return value;
|
||||
}
|
||||
if (typeof index === 'object') {
|
||||
index = index.dataPointIndex; // this is the "category name + currency" index
|
||||
}
|
||||
let currencyCode = window.budgetCurrencies[index] ?? 'EUR';
|
||||
return formatMoney(val, currencyCode);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
for (const i in response.data) {
|
||||
if (response.data.hasOwnProperty(i)) {
|
||||
let current = response.data[i];
|
||||
// convert to EUR yes no?
|
||||
let label = current.label + ' (' + current.currency_code + ')';
|
||||
options.xaxis.categories.push(label);
|
||||
if (this.autoConversion) {
|
||||
window.budgetCurrencies.push(current.native_code);
|
||||
|
||||
// series 0: spent
|
||||
options.series[0].data.push(parseFloat(current.native_entries.spent) * -1);
|
||||
// series 1: left
|
||||
options.series[1].data.push(parseFloat(current.native_entries.left));
|
||||
// series 2: overspent
|
||||
options.series[2].data.push(parseFloat(current.native_entries.overspent));
|
||||
return formatMoney(value, currencyCode);
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
window.budgetCurrencies.push(current.currency_code);
|
||||
// series 0: spent
|
||||
options.series[0].data.push(parseFloat(current.entries.spent) * -1);
|
||||
// series 1: left
|
||||
options.series[1].data.push(parseFloat(current.entries.left));
|
||||
// series 2: overspent
|
||||
options.series[2].data.push(parseFloat(current.entries.overspent));
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: []
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
dataLabels: {
|
||||
formatter: function (val, opt) {
|
||||
let index = 0;
|
||||
if (typeof opt === 'object') {
|
||||
index = opt.dataPointIndex; // this is the "category name + currency" index
|
||||
}
|
||||
let currencyCode = window.budgetCurrencies[index] ?? 'EUR';
|
||||
return formatMoney(val, currencyCode);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (null !== this.chart) {
|
||||
// chart already in place, refresh:
|
||||
this.chart.updateOptions(options);
|
||||
for (const i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let current = data[i];
|
||||
// convert to EUR yes no?
|
||||
let label = current.label + ' (' + current.currency_code + ')';
|
||||
options.xaxis.categories.push(label);
|
||||
if (this.autoConversion) {
|
||||
window.budgetCurrencies.push(current.native_code);
|
||||
|
||||
// series 0: spent
|
||||
options.series[0].data.push(parseFloat(current.native_entries.spent) * -1);
|
||||
// series 1: left
|
||||
options.series[1].data.push(parseFloat(current.native_entries.left));
|
||||
// series 2: overspent
|
||||
options.series[2].data.push(parseFloat(current.native_entries.overspent));
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
window.budgetCurrencies.push(current.currency_code);
|
||||
// series 0: spent
|
||||
options.series[0].data.push(parseFloat(current.entries.spent) * -1);
|
||||
// series 1: left
|
||||
options.series[1].data.push(parseFloat(current.entries.left));
|
||||
// series 2: overspent
|
||||
options.series[2].data.push(parseFloat(current.entries.overspent));
|
||||
}
|
||||
|
||||
}
|
||||
if (null === this.chart) {
|
||||
this.chart = new ApexCharts(document.querySelector("#budget-chart"), options);
|
||||
this.chart.render();
|
||||
}
|
||||
this.loadingChart = false;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
this.chartOptions = options;
|
||||
},
|
||||
|
||||
|
||||
init() {
|
||||
Promise.all([getVariable('autoConversion', false),]).then((values) => {
|
||||
this.autoConversion = values[0];
|
||||
this.loadChart();
|
||||
});
|
||||
// todo the charts don't need to reload from server if the autoConversion value changes.
|
||||
window.store.observe('end', () => {
|
||||
this.chartData = null;
|
||||
this.loadChart();
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
|
||||
Reference in New Issue
Block a user