mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2026-10-25 22:50:16 -05:00
Clean up chart.
This commit is contained in:
James Cole committed
1 parent
a5ce46bcdd
commit
9554080fe0
4 files changed
+137
-4
No files matched your search
@@ -29,7 +29,7 @@ $(function () {
|
||||
|
||||
function drawChart() {
|
||||
"use strict";
|
||||
lineChart(accountFrontpageUrl, 'accounts-chart');
|
||||
// lineChart(accountFrontpageUrl, 'accounts-chart');
|
||||
|
||||
if (billCount > 0) {
|
||||
multiCurrencyPieChart('chart/bill/frontpage', 'bills-chart');
|
||||
|
||||
@@ -25,6 +25,9 @@ import boxes from "./boxes.js";
|
||||
import Alpine from "alpinejs";
|
||||
import Get from '../../api/model/piggy-bank/get.js';
|
||||
import formatMoney from "../../util/format-money.js";
|
||||
import {getVariable} from "../../store/get-variable.js";
|
||||
import {drawMultiCurrencyChart} from "../../shared/draw-chart.js";
|
||||
import format from "../../util/format.js";
|
||||
|
||||
let index = function () {
|
||||
return {
|
||||
@@ -33,6 +36,16 @@ let index = function () {
|
||||
init() {
|
||||
this.loadPiggyBanks();
|
||||
console.log("Dashboard");
|
||||
getVariable("anonymous").then((value) => {
|
||||
let start = new Date(store.get('start'));
|
||||
let end = new Date(store.get('end'));
|
||||
drawMultiCurrencyChart(
|
||||
"line",
|
||||
"api/v1/chart/account/overview?period=1D&start=" + format(start,"yyyy-LL-dd") + "&end=" + format(end,"yyyy-LL-dd"),
|
||||
"accounts-chart",
|
||||
value,
|
||||
);
|
||||
});
|
||||
},
|
||||
loadPiggyBanks() {
|
||||
this.downloadPiggyBanks(1);
|
||||
@@ -42,14 +55,16 @@ let index = function () {
|
||||
for(let i =0;i<response.data.data.length;i++){
|
||||
if(Object.hasOwn(response.data.data, i)){
|
||||
let current = response.data.data[i];
|
||||
let currentAmount = null === current.attributes.current_amount ? '0': current.attributes.current_amount;
|
||||
let targetAmount = null === current.attributes.target_amount ? '0': current.attributes.target_amount;
|
||||
let piggy = {
|
||||
id: current.id,
|
||||
name: current.attributes.name,
|
||||
percentage: null === current.attributes.percentage ? 0 : parseInt(current.attributes.percentage),
|
||||
amount: formatMoney(current.attributes.current_amount, current.attributes.currency_code) + ' / ' + formatMoney(current.attributes.target_amount, current.attributes.currency_code)
|
||||
amount: formatMoney(currentAmount, current.attributes.currency_code) + ' / ' + formatMoney(targetAmount, current.attributes.currency_code)
|
||||
};
|
||||
if(null === current.attributes.target_amount) {
|
||||
piggy.amount = formatMoney(current.attributes.current_amount, current.attributes.currency_code) + ' / ∞';
|
||||
piggy.amount = formatMoney(currentAmount, current.attributes.currency_code) + ' / ∞';
|
||||
}
|
||||
|
||||
this.piggyBanks.push(piggy);
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
import Chart from "chart.js/auto";
|
||||
import formatMoney from "../util/format-money.js";
|
||||
import i18next from "i18next";
|
||||
import format from "date-fns/format";
|
||||
|
||||
let defaultChartOptions = {
|
||||
elements: {
|
||||
@@ -53,12 +54,127 @@ let defaultChartOptions = {
|
||||
},
|
||||
};
|
||||
|
||||
export function drawMultiCurrencyChart(type, url, holder, anonymous) {
|
||||
if ("line" === type) {
|
||||
drawMultiCurrencyLineChart(url, holder, anonymous);
|
||||
}
|
||||
}
|
||||
export function drawSingleCurrencyChart(type, url, holder, anonymous) {
|
||||
if ("line" === type) {
|
||||
drawSingleCurrencyLineChart(url, holder, anonymous);
|
||||
}
|
||||
}
|
||||
|
||||
function drawMultiCurrencyLineChart(url, holder, anonymous) {
|
||||
document.getElementById(holder).classList.remove("general-chart-error");
|
||||
window.axios.get(url).then((response) => {
|
||||
let all = response.data;
|
||||
let options = { ...defaultChartOptions };
|
||||
let data = {
|
||||
datasets: [],
|
||||
labels: [],
|
||||
};
|
||||
let axes = {};
|
||||
// collect all Y axes from the data.
|
||||
for (let i = 0; i < all.length; i++) {
|
||||
if(Object.hasOwn(all, i)) {
|
||||
let current = all[i];
|
||||
// take the labels from index 0.
|
||||
if(0 === i) {
|
||||
for(let j in current.entries) {
|
||||
if(Object.hasOwn(current.entries, j)) {
|
||||
let date = new Date(j);
|
||||
data.labels.push(format(date,i18next.t('config.month_and_day_fns')));
|
||||
}
|
||||
}
|
||||
}
|
||||
// add the dataset.
|
||||
let dataset = {
|
||||
label: current.label,
|
||||
currency_code: current.currency_code,
|
||||
data: [],
|
||||
yAxisID: 'y' + current.currency_code,
|
||||
};
|
||||
for(let j in current.entries) {
|
||||
if(Object.hasOwn(current.entries, j)) {
|
||||
dataset.data.push(current.entries[j]);
|
||||
}
|
||||
}
|
||||
data.datasets.push(dataset);
|
||||
|
||||
let currencyCode = current.currency_code;
|
||||
let axisId = 'y' + currencyCode;
|
||||
if(!Object.hasOwn(axes, axisId)) {
|
||||
axes[axisId] = {
|
||||
id: axisId,
|
||||
type: "linear",
|
||||
position: Object.keys(axes).length < 1 ? "left": 'right',
|
||||
ticks: {
|
||||
callback: function (value) {
|
||||
if (anonymous) {
|
||||
value = "0";
|
||||
}
|
||||
return formatMoney(value, currencyCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(data);
|
||||
delete options.scales.y;
|
||||
options.scales = { ...options.scales, ...axes };
|
||||
|
||||
let labelCallback = function (tooltipItem) {
|
||||
"use strict";
|
||||
let index = tooltipItem.dataIndex;
|
||||
let amount = tooltipItem.dataset.data[index];
|
||||
|
||||
let string = formatMoney(amount, tooltipItem.dataset.currency_code);
|
||||
if (anonymous) {
|
||||
string = formatMoney("0", tooltipItem.dataset.currency_code);
|
||||
}
|
||||
return tooltipItem.dataset.label + ": " + string;
|
||||
};
|
||||
|
||||
options.plugins.tooltip.callbacks.label = labelCallback;
|
||||
|
||||
if (
|
||||
typeof data === "undefined" ||
|
||||
0 === data.length ||
|
||||
(typeof data === "object" &&
|
||||
typeof data.labels === "object" &&
|
||||
0 === data.labels.length)
|
||||
) {
|
||||
let el = document.getElementById(holder).parentElement;
|
||||
el.innerHTML = "";
|
||||
el.classList.add("general-chart-error");
|
||||
el.innerText = i18next.t("firefly.no_data_for_chart");
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO colorize data?
|
||||
// if (colorData) {
|
||||
// data = colorizeData(data);
|
||||
// }
|
||||
|
||||
// lineChart
|
||||
const ctx = document.getElementById(holder).getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "line",
|
||||
data: data,
|
||||
options: options,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
let el = document.getElementById(holder).parentElement;
|
||||
el.innerHTML = "";
|
||||
el.classList.add("general-chart-error");
|
||||
el.innerText =
|
||||
i18next.t("firefly.could_not_load_chart") + " " + error;
|
||||
});
|
||||
}
|
||||
|
||||
function drawSingleCurrencyLineChart(url, holder, anonymous) {
|
||||
document.getElementById(holder).classList.remove("general-chart-error");
|
||||
window.axios
|
||||
|
||||
@@ -14,7 +14,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="accounts-chart" class="wide-chart" height="400" width="100%"></canvas>
|
||||
<div>
|
||||
<canvas id="accounts-chart" class="wide-chart" height="400" width="100%"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<a href="{{ route('accounts.index',['asset']) }}" class="btn btn-primary btn-sm"><span
|
||||
|
||||
Reference in new issue
Block a user