Various color fixes.

public/build/manifest.json

@@ -30,10 +30,10 @@
     "integrity": "sha384-B73JAwYNSgI4rwb14zwxigHgAkg1Ms+j6+9sJoDpiL11+VW5RjQCLfIh0RVoi0h6"
   },
   "resources/assets/v2/pages/dashboard/dashboard.js": {
-    "file": "assets/dashboard-7d4913ce.js",
+    "file": "assets/dashboard-767a50a1.js",
     "isEntry": true,
     "src": "resources/assets/v2/pages/dashboard/dashboard.js",
-    "integrity": "sha384-D/XG0fkIuVUkCWnAa6ylWQBCrMwuNJAeD65RK/ZFXnpkJvwmd9zn3IxTlqS/RyE8"
+    "integrity": "sha384-IHFHBTu2Ag0GEIYzgrhY5c1H/PQHLghtTMCJBvV4HjiQHVJ+Al1FSRX3Ro92N3NT"
   },
   "resources/assets/v2/sass/app.scss": {
     "file": "assets/app-28a195fd.css",

resources/assets/v2/pages/dashboard/accounts.js

@@ -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(this.generateOptions(cachedData));
-            this.drawChart(options);
             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, response.data);
-            window.store.set(CHART_CACHE_KEY, options);
+            this.drawChart(this.generateOptions(this.chartData));
-            this.drawChart(options);
             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);

resources/assets/v2/pages/dashboard/budgets.js

@@ -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'),
                 }
             ]
         };

resources/assets/v2/pages/dashboard/categories.js

@@ -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]);

resources/assets/v2/pages/dashboard/sankey.js

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

resources/assets/v2/support/get-colors.js

@@ -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);
+    // red.lighten(0.3).clearer(0.3);
-    green.lighten(0.3).clearer(0.3);
+    // green.lighten(0.3).clearer(0.3);
-    blue.lighten(0.3).clearer(0.3);
+    // blue.lighten(0.3).clearer(0.3);
-    orange.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, orange, blue, green, purple, yellow, grey, green];
-let allColors = [red, green, blue, orange];
 
 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;
+            let correctedIndex = Math.floor(index / 2);
-            border = new Color(allColors[currentIndex].rgbString());
+            let currentIndex = correctedIndex % allColors.length;
-            border.darken(0.4);
+            //console.log('index:' + index + ', correctedIndex:' + correctedIndex + ', currentIndex:' + currentIndex);
+            background = new Color(allColors[currentIndex].rgbString());
+            background.lighten(0.38);
+
             colors = {
-                borderColor: border.rgbString(),
+                borderColor: allColors[currentIndex].hexString(),
-                backgroundColor: allColors[currentIndex].rgbString(),
+                backgroundColor: background.hexString(),
             };
             break;
         case 'spent':
-            border = new Color(blue.rgbString());
+            background = new Color(blue.rgbString());
-            border.darken(0.4);
+            background.lighten(0.38);
+            //console.log('#9ad0f5 vs ' + background.hexString());
             colors = {
-                borderColor: border.rgbString(),
+                borderColor: blue.rgbString(),
-                backgroundColor: blue.rgbString(),
+                backgroundColor: background.rgbString(),
             };
             break;
         case 'left':
-            border = new Color(green.rgbString());
+            background = new Color(green.rgbString());
-            border.darken(0.4);
+            background.lighten(0.38);
             colors = {
-                borderColor: border.rgbString(),
+                borderColor: green.rgbString(),
-                backgroundColor: green.rgbString(),
+                backgroundColor: background.rgbString(),
             };
             break;
         case 'overspent':
-            border = new Color(red.rgbString());
+            background = new Color(red.rgbString());
-            border.darken(0.4);
+            background.lighten(0.22);
+            console.log('#ffb1c1 vs ' + background.hexString());
             colors = {
-                borderColor: border.rgbString(),
+                borderColor: red.rgbString(),
-                backgroundColor: red.rgbString(),
+                backgroundColor: background.rgbString(),
             };
             break;
     }
+    index++;
 
     if ('border' === field) {
         return colors.borderColor;