fix: chart color loop (#1041)

Author: severinlandolt

src/components/chart-elements/common/utils.ts

@@ -6,7 +6,7 @@ export const constructCategoryColors = (
 ): Map<string, Color | string> => {
   const categoryColors = new Map<string, Color | string>();
   categories.forEach((category, idx) => {
-    categoryColors.set(category, colors[idx]);
+    categoryColors.set(category, colors[idx % colors.length]);
   });
   return categoryColors;
 };

src/stories/chart-elements/helpers/testData.tsx

@@ -1520,48 +1520,107 @@ export const simpleBaseChartData = [
     "Successful Payments": 3000,
     "This is an edge case": 100000000,
     Test: 5000,
+    Category1: 1000,
+    Category2: 2000,
+    Category3: 3000,
+    Category4: 4000,
+    Category5: 5000,
+    Category6: 6000,
+    Category7: 7000,
+    Category8: 8000,
+    Category9: 9000,
+    Category10: 10000,
+    Category11: 11000,
+    Category12: 12000,
+    Category13: 13000,
+    Category14: 14000,
+    Category15: 15000,
+    Category16: 16000,
+    Category17: 17000,
+    Category18: 18000,
+    Category19: 19000,
+    Category20: 20000,
   },
   {
     month: "Feb 21",
     Sales: 3000,
     "Successful Payments": 2000,
     "This is an edge case": 100000000,
     Test: 5000,
+    Category1: 950,
+    Category2: 1950,
+    Category3: 2950,
+    Category4: 3950,
+    Category5: 4950,
+    Category6: 5950,
+    Category7: 6950,
+    Category8: 7950,
+    Category9: 8950,
+    Category10: 9950,
+    Category11: 10950,
+    Category12: 11950,
+    Category13: 12950,
+    Category14: 13950,
+    Category15: 14950,
+    Category16: 15950,
+    Category17: 16950,
+    Category18: 17950,
+    Category19: 18950,
+    Category20: 19950,
   },
   {
     month: "Mar 21",
     Sales: 2000,
     "Successful Payments": 1700,
     "This is an edge case": 100000000,
     Test: 5000,
+    Category1: 900,
+    Category2: 1900,
+    Category3: 2900,
+    Category4: 3900,
+    Category5: 4900,
+    Category6: 5900,
+    Category7: 6900,
+    Category8: 7900,
+    Category9: 8900,
+    Category10: 9900,
+    Category11: 10900,
+    Category12: 11900,
+    Category13: 12900,
+    Category14: 13900,
+    Category15: 14900,
+    Category16: 15900,
+    Category17: 16900,
+    Category18: 17900,
+    Category19: 18900,
+    Category20: 19900,
   },
   {
     month: "Apr 21",
     Sales: 2780,
     "Successful Payments": 2500,
     "This is an edge case": 100000000,
     Test: 5000,
-  },
-  {
-    month: "May 21",
-    Sales: 1890,
-    "Successful Payments": 1890,
-    "This is an edge case": 100000000,
-    Test: 5000,
-  },
-  {
-    month: "Jun 21",
-    Sales: 2390,
-    "Successful Payments": 2000,
-    "This is an edge case": 100000000,
-    Test: 5000,
-  },
-  {
-    month: "Jul 21",
-    Sales: 3490,
-    "Successful Payments": 3000,
-    "This is an edge case": 100000000,
-    Test: 5000,
+    Category1: 1000,
+    Category2: 2000,
+    Category3: 3000,
+    Category4: 4000,
+    Category5: 5000,
+    Category6: 6000,
+    Category7: 7000,
+    Category8: 8000,
+    Category9: 9000,
+    Category10: 10000,
+    Category11: 11000,
+    Category12: 12000,
+    Category13: 13000,
+    Category14: 14000,
+    Category15: 15000,
+    Category16: 16000,
+    Category17: 17000,
+    Category18: 18000,
+    Category19: 19000,
+    Category20: 20000,
   },
 ];