kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-31 02:36:28 +00:00
Code Issues Projects Releases Wiki Activity

Various color fixes.

Browse Source
This commit is contained in:
James Cole
2023-08-27 18:45:06 +02:00
parent 83d94cb792
commit b2364d26ec
7 changed files with 91 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/assets/v2/pages/dashboard/accounts.js
View File

@@ -25,6 +25,7 @@ import formatMoney from "../../util/format-money.js";
import Get from "../../api/v2/model/account/get.js";
import {Chart} from 'chart.js';
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import {getColors} from "../../support/get-colors.js";
// this is very ugly, but I have no better ideas at the moment to save the currency info
// for each series.
@@ -50,8 +51,7 @@ export default () => ({
let cachedData = window.store.get(CHART_CACHE_KEY);
if (cacheValid && typeof cachedData !== 'undefined') {
let options = window.store.get(CHART_CACHE_KEY);
this.drawChart(options);
this.drawChart(this.generateOptions(cachedData));
this.loading = false;
return;
}
@@ -59,9 +59,8 @@ export default () => ({
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
this.chartData = response.data;
// cache generated options:
let options = this.generateOptions(this.chartData);
window.store.set(CHART_CACHE_KEY, options);
this.drawChart(options);
window.store.set(CHART_CACHE_KEY, response.data);
this.drawChart(this.generateOptions(this.chartData));
this.loading = false;
});
@@ -99,6 +98,10 @@ export default () => ({
dataset.yAxisID = yAxis;
dataset.data = collection;
// add colors:
//dataset.backgroundColor = getColors(null, 'background');
//dataset.borderColor = getColors(null, 'background');
// add data set to the correct Y Axis:
options.data.datasets.push(dataset);

7
resources/assets/v2/pages/dashboard/budgets.js
View File

@@ -24,6 +24,7 @@ import formatMoney from "../../util/format-money.js";
import {Chart} from 'chart.js';
import {I18n} from "i18n-js";
import {loadTranslations} from "../../support/load-translations.js";
import {getColors} from "../../support/get-colors.js";
let currencies = [];
let chart = null;
@@ -105,18 +106,24 @@ export default () => ({
data: [],
borderWidth: 1,
stack: 1,
backgroundColor: getColors('spent', 'background'),
borderColor: getColors('spent', 'border'),
},
{
label: i18n.t('firefly.left'),
data: [],
borderWidth: 1,
stack: 1,
backgroundColor: getColors('left', 'background'),
borderColor: getColors('left', 'border'),
},
{
label: i18n.t('firefly.overspent'),
data: [],
borderWidth: 1,
stack: 1,
backgroundColor: getColors('overspent', 'background'),
borderColor: getColors('overspent', 'border'),
}
]
};

4
resources/assets/v2/pages/dashboard/categories.js
View File

@@ -22,6 +22,7 @@ import Dashboard from "../../api/v2/chart/category/dashboard.js";
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import {Chart} from "chart.js";
import formatMoney from "../../util/format-money.js";
import {getColors} from "../../support/get-colors.js";
let currencies = [];
let chart = null;
@@ -104,12 +105,15 @@ export default () => ({
// loop the series and create ChartJS-compatible data sets.
let count = 0;
for (const i in series) {
console.log('series');
let yAxisID = 'y' + i;
let dataset = {
label: i,
currency_code: i,
yAxisID: yAxisID,
data: [],
// backgroundColor: getColors(null, 'background'),
// borderColor: getColors(null, 'border'),
}
for (const ii in series[i].data) {
dataset.data.push(series[i].data[ii]);

39
resources/assets/v2/pages/dashboard/sankey.js
View File

@@ -33,6 +33,7 @@ let currencies = [];
let afterPromises = false;
let chart = null;
let transactions = [];
let autoConversion = false;
let translations = {
category: null,
unknown_category: null,
@@ -82,37 +83,37 @@ function getObjectName(type, name, direction, code) {
// category 4x
if ('category' === type && null !== name && 'in' === direction) {
return translations.category + ' "' + name + '" (' + translations.in + ', ' + code + ')';
return translations.category + ' "' + name + '" (' + translations.in + (autoConversion ? ', ' + code + ')' : ')');
}
if ('category' === type && null === name && 'in' === direction) {
return translations.unknown_category + ' (' + translations.in + ', ' + code + ')';
return translations.unknown_category + ' (' + translations.in + (autoConversion ? ', ' + code + ')' : ')');
}
if ('category' === type && null !== name && 'out' === direction) {
return translations.category + ' "' + name + '" (' + translations.out + ', ' + code + ')';
return translations.category + ' "' + name + '" (' + translations.out + (autoConversion ? ', ' + code + ')' : ')');
}
if ('category' === type && null === name && 'out' === direction) {
return translations.unknown_category + ' (' + translations.out + ', ' + code + ')';
return translations.unknown_category + ' (' + translations.out + (autoConversion ? ', ' + code + ')' : ')');
}
// account 4x
if ('account' === type && null === name && 'in' === direction) {
return translations.unknown_source + ' (' + code + ')';
return translations.unknown_source + (autoConversion ? ' (' + code + ')' : '');
}
if ('account' === type && null !== name && 'in' === direction) {
return translations.revenue_account + '"' + name + '" (' + code + ')';
return translations.revenue_account + '"' + name + '"' + (autoConversion ? ' (' + code + ')' : '');
}
if ('account' === type && null === name && 'out' === direction) {
return translations.unknown_dest + ' (' + code + ')';
return translations.unknown_dest + (autoConversion ? ' (' + code + ')' : '');
}
if ('account' === type && null !== name && 'out' === direction) {
return translations.expense_account + ' "' + name + '" (' + code + ')';
return translations.expense_account + ' "' + name + '"' + (autoConversion ? ' (' + code + ')' : '');
}
// budget 2x
if ('budget' === type && null !== name) {
return translations.budget + ' "' + name + '" (' + code + ')';
return translations.budget + ' "' + name + '"' + (autoConversion ? ' (' + code + ')' : '');
}
if ('budget' === type && null === name) {
return translations.unknown_budget + ' (' + code + ')';
return translations.unknown_budget + (autoConversion ? ' (' + code + ')' : '');
}
console.error('Cannot handle: type:"' + type + '", dir: "' + direction + '"');
}
@@ -120,25 +121,25 @@ function getObjectName(type, name, direction, code) {
function getLabelName(type, name, code) {
// category
if ('category' === type && null !== name) {
return translations.category + ' "' + name + '" (' + code + ')';
return translations.category + ' "' + name + '"' + (autoConversion ? ' (' + code + ')' : '');
}
if ('category' === type && null === name) {
return translations.unknown_category + ' (' + code + ')';
return translations.unknown_category + (autoConversion ? ' (' + code + ')' : '');
}
// account
if ('account' === type && null === name) {
return translations.unknown_account + ' (' + code + ')';
return translations.unknown_account + (autoConversion ? ' (' + code + ')' : '');
}
if ('account' === type && null !== name) {
return name + ' (' + code + ')';
return name + (autoConversion ? ' (' + code + ')' : '');
}
// budget 2x
if ('budget' === type && null !== name) {
return translations.budget + ' "' + name + '" (' + code + ')';
return translations.budget + ' "' + name + '"' + (autoConversion ? ' (' + code + ')' : '');
}
if ('budget' === type && null === name) {
return translations.unknown_budget + ' (' + code + ')';
return translations.unknown_budget + (autoConversion ? ' (' + code + ')' : '');
}
console.error('Cannot handle: type:"' + type + '"');
}
@@ -193,7 +194,7 @@ export default () => ({
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
from: category,
to: translations.all_money + ' (' + currencyCode + ')',
to: translations.all_money + (this.autoConversion ? ' (' + currencyCode + ')' : ''),
amount: 0
};
}
@@ -340,7 +341,8 @@ export default () => ({
// console.log('sankey init');
transactions = [];
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
this.autoConversion = values[0];
autoConversion = values[0];
i18n = new I18n();
i18n.locale = values[1];
loadTranslations(i18n, values[1]).then(() => {
@@ -360,7 +362,6 @@ export default () => ({
// console.log('sankey after promises');
afterPromises = true;
this.autoConversion = values[0];
this.loadChart();
});

77
resources/assets/v2/support/get-colors.js
View File

@@ -23,71 +23,86 @@
import {Color} from '@kurkle/color';
// base colors for most things
let red = new Color('#dc3545'); // same as bootstrap danger
let green = new Color('#198754'); // same as bootstrap success.
let blue = new Color('#0d6efd'); // bootstrap blue.
// four other colors:
let orange = new Color('#fd7e14'); // bootstrap orange.
// base colors for most things (BORDER)
let blue = new Color('#36a2eb');
let red = new Color('#ff6384');
let green = new Color('#4bc0c0');
// four other colors
let orange = new Color('#ff9f40');
let purple = new Color('#9966ff');
let yellow = new Color('#ffcd56');
let grey = new Color('#c9cbcf');
let index = 0;
// or cycle through X colors:
if ('light' === window.theme) {
red.lighten(0.3).clearer(0.3);
green.lighten(0.3).clearer(0.3);
blue.lighten(0.3).clearer(0.3);
orange.lighten(0.3).clearer(0.3);
// red.lighten(0.3).clearer(0.3);
// green.lighten(0.3).clearer(0.3);
// blue.lighten(0.3).clearer(0.3);
// orange.lighten(0.3).clearer(0.3);
}
if ('dark' === window.theme) {
red.darken(0.3).desaturate(0.3);
green.darken(0.3).desaturate(0.3);
blue.darken(0.3).desaturate(0.3);
orange.darken(0.3).desaturate(0.3);
}
let allColors = [red, green, blue, orange];
let allColors = [red, orange, blue, green, purple, yellow, grey, green];
function getColors(type, field) {
index++;
let colors = {
borderColor: red.rgbString(),
backgroundColor: red.rgbString(),
};
let border;
let background;
switch (type) {
default:
let currentIndex = (Math.ceil(index / 2) % allColors.length) - 1;
border = new Color(allColors[currentIndex].rgbString());
border.darken(0.4);
let correctedIndex = Math.floor(index / 2);
let currentIndex = correctedIndex % allColors.length;
//console.log('index:' + index + ', correctedIndex:' + correctedIndex + ', currentIndex:' + currentIndex);
background = new Color(allColors[currentIndex].rgbString());
background.lighten(0.38);
colors = {
borderColor: border.rgbString(),
backgroundColor: allColors[currentIndex].rgbString(),
borderColor: allColors[currentIndex].hexString(),
backgroundColor: background.hexString(),
};
break;
case 'spent':
border = new Color(blue.rgbString());
border.darken(0.4);
background = new Color(blue.rgbString());
background.lighten(0.38);
//console.log('#9ad0f5 vs ' + background.hexString());
colors = {
borderColor: border.rgbString(),
backgroundColor: blue.rgbString(),
borderColor: blue.rgbString(),
backgroundColor: background.rgbString(),
};
break;
case 'left':
border = new Color(green.rgbString());
border.darken(0.4);
background = new Color(green.rgbString());
background.lighten(0.38);
colors = {
borderColor: border.rgbString(),
backgroundColor: green.rgbString(),
borderColor: green.rgbString(),
backgroundColor: background.rgbString(),
};
break;
case 'overspent':
border = new Color(red.rgbString());
border.darken(0.4);
background = new Color(red.rgbString());
background.lighten(0.22);
console.log('#ffb1c1 vs ' + background.hexString());
colors = {
borderColor: border.rgbString(),
backgroundColor: red.rgbString(),
borderColor: red.rgbString(),
backgroundColor: background.rgbString(),
};
break;
}
index++;
if ('border' === field) {
return colors.borderColor;