feat(*): Improve styling of chart

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@types/chart.js": "^2.9.37",
         "chart.js": "^4.1.0",
+        "chroma-js": "^2.4.2",
         "html-webpack-plugin": "^5.5.0",
         "react-dev-utils": "^12.0.1",
         "webpack-manifest-plugin": "^5.0.0",
@@ -3328,6 +3329,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -13442,6 +13448,11 @@
         }
       }
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@types/chart.js": "^2.9.37",
     "chart.js": "^4.1.0",
+    "chroma-js": "^2.4.2",
     "html-webpack-plugin": "^5.5.0",
     "react-dev-utils": "^12.0.1",
     "webpack-manifest-plugin": "^5.0.0",

src/generateCharts.ts

@@ -1,5 +1,6 @@
 import { transactions } from "./bankData";
 import Chart from 'chart.js/auto';
+import * as chroma from 'chroma-js';
 
 export default function generateCharts(): void {
     // const filter: Filter = { year: 2022, category: 'Eating out', excludeIncome: true};
@@ -41,6 +42,13 @@ function getChartData(transactions: BankTransaction[], filters: { year?: number,
     };
   }
 
+  // Generate a color scale using the chroma-js library, with the number of colors equal to the number of categories
+  const categories = new Set<string>();
+  for (const transaction of transactions) {
+    categories.add(transaction.category);
+  }
+  const colorScale = chroma.scale('Spectral').mode('hsl').colors(categories.size);
+  
   // Filter the transactions based on the specified filters
   const filteredTransactions = transactions.filter(transaction => {
     if (filters.year && transaction.dateYear !== filters.year) {
@@ -90,40 +98,32 @@ function getChartData(transactions: BankTransaction[], filters: { year?: number,
   };
 
   // Add a dataset for each category
-  const categories: { [key: string]: string } = {};
+  let i = 0;
-  for (const year in groupedTransactions) {
+  categories.forEach((category: string) => {
-    for (let index = 0; index < groupedTransactions[year].length; index++) {
+    chartData.datasets.push({
-      const transaction = groupedTransactions[year][index];
+      label: category,
-      if (!categories[transaction.category]) {
+      data: [],
-        categories[transaction.category] = getRandomColor();
+      backgroundColor: colorScale[i % colorScale.length],  // Use a color from the color scale,
-        chartData.datasets.push({
+      borderColor: 'black',
-          label: transaction.category,
+      borderWidth: 2
-          data: [],
+    });
-          backgroundColor: categories[transaction.category]
+    i++;
-        });
+  });
-      }
-    }
-    console.log('here');
 
-    // Populate the chart data with the transaction amounts
+  // Populate the chart data with the transaction amounts
-    for (const year in groupedTransactions) {
+  for (const key of Object.keys(groupedTransactions)) {
-      chartData.labels.push(year);
+    chartData.labels.push(key);
-      for (let i = 0; i < chartData.datasets.length; i++) {
+    const transactions = groupedTransactions[key];
-        chartData.datasets[i].data.push(0);
+    for (let i = 0; i < chartData.datasets.length; i++) {
-      }
+      chartData.datasets[i].data.push(0);
-      for (const transaction of groupedTransactions[year]) {
+      for (const transaction of transactions) {
-        for (let i = 0; i < chartData.datasets.length; i++) {
+        if (transaction.category === chartData.datasets[i].label) {
-          if (chartData.datasets[i].label === transaction.category) {
+          chartData.datasets[i].data[chartData.labels.length - 1] += transaction.amount;
-            chartData.datasets[i].data[chartData.labels.length - 1] += transaction.amount;
-            break;
-          }
         }
       }
     }
-
-
-  
-    return chartData;
   }
+
+  return chartData;
 }
   

src/types/chartData.ts

@@ -3,6 +3,8 @@ type ChartData = {
     datasets: {
       label: string;
       backgroundColor: string;
+      borderColor: string;
+      borderWidth: number;
       data: number[];
     }[];
 };