colorize daily

Raais · Aug 16, 2024 · 7a65410 · 7a65410
1 parent b7cfff7
commit 7a65410
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 14 deletions.
diff --git a/src/FisaMatrix.tsx b/src/FisaMatrix.tsx
@@ -94,6 +94,7 @@ export const FisaMatrix = () => {
   const [graphType, setGraphType] = useState<"bar" | "area" | "line">("bar");
   const [aggregateType, setAggregateType] = useState<"sum" | "count">("sum");
   const [repeatsType, setRepeatsType] = useState<"repeats" | "all">("all");
+  const [colorizeDaily, setColorizeDaily] = useState<"true" | "false">("true");
 
   const [datasetOpen, setDatasetOpen] = useState<any>([]);
   const datasetRef = useRef<any>(null);
@@ -141,6 +142,11 @@ export const FisaMatrix = () => {
     if (localStorage.getItem("repeatsType")) {
       setRepeatsType(localStorage.getItem("repeatsType") as "repeats" | "all");
     }
+    if (localStorage.getItem("colorizeDaily")) {
+      setColorizeDaily(
+        localStorage.getItem("colorizeDaily") as "true" | "false"
+      );
+    }
     if (!localStorage.getItem("infoShown")) {
       modalInfo.open();
     }
@@ -471,16 +477,23 @@ export const FisaMatrix = () => {
                     series={[
                       {
                         name: "debit",
-                        data: extractDailyDebitCredit(
+                        data: colorizeDaily === "true" ? extractDailyDebitCredit(
                           trx,
                           "debited",
-                          rangeData(filterRange)
-                        ),
+                          rangeData(filterRange),
+                          categories
+                        ) : extractDailyDebitCredit(
+                          trx,
+                          "debited",
+                          rangeData(filterRange),
+                          categories
+                        ).map((el: any) => ({x: el.x, y: el.y, topCategory: el.topCategory})),
                       },
                     ]}
                     title={curr(debitAgrs[0]?.sum.toString() ?? "0", "", "")}
-                    yformat={function (val: any) {
-                      return curr(val);
+                    yformat={function (val: any, opts: any) {
+                      const cat = opts.w.config.series[0].data[opts.dataPointIndex]?.topCategory;
+                      return cat !== '_undefined_' ? `${curr(val)} [top: ${cat}]` : curr(val);
                     }}
                     selection={handleGotoDate}
                   />
@@ -499,8 +512,9 @@ export const FisaMatrix = () => {
                         data: extractDailyDebitCredit(
                           trx,
                           "credited",
-                          rangeData(filterRange)
-                        ),
+                          rangeData(filterRange),
+                          categories
+                        ).map((el: any) => ({x: el.x, y: el.y})),
                       },
                     ]}
                     title={curr(creditAgrs[0]?.sum.toString() ?? "0", "", "")}
@@ -1034,6 +1048,19 @@ export const FisaMatrix = () => {
                               <span>Graph Type</span>
                             </Flex>
                           </Tag>
+                          <Tag color="#141414">
+                            <Flex gap="middle">
+                              <Switch
+                                checked={colorizeDaily === "true"}
+                                onChange={(value) => {
+                                  setColorizeDaily(value ? "true" : "false");
+                                  localStorage.setItem("colorizeDaily", value ? "true" : "false");
+                                  //window.location.reload();
+                                }}
+                              />
+                              <span>Colorize Daily</span>
+                            </Flex>
+                          </Tag>
                         </Flex>
                       </Card>
                     </Col>

diff --git a/src/lib/fmt.ts b/src/lib/fmt.ts
@@ -25,14 +25,17 @@ export const extractDataSource = (obj: any) => {
   export const extractDailyDebitCredit = (
     obj: any,
     type: "debited" | "credited",
-    r: any
+    r: any,
+    categories: any
   ) => {
     const len = dayjs(r.to).diff(dayjs(r.from), "day");
-    const dateMap = new Map<string, number>();
+    const dateMap = new Map<string, { amount: number; category: string; categoryTotals: Map<string, number>}>();
+
     for (let i = 0; i < len; i++) {
       const date = dayjs(r.to).subtract(len - i, "day").format("DD-MM-YYYY");
-      dateMap.set(date, 0.0);
+      dateMap.set(date, { amount: 0.0, category: "_undefined_", categoryTotals: new Map<string, number>()});
     }
+
     const arr = castToArray(obj)
       .sort(
         (a: any, b: any) =>
@@ -44,17 +47,40 @@ export const extractDataSource = (obj: any) => {
           dayjs(item?.date, "DD-MM-YYYY").isAfter(r.from) &&
           dayjs(item?.date, "DD-MM-YYYY").isBefore(r.to)
       );
+
     arr.forEach((item: any) => {
       const itemDate = dayjs(item?.date, "DD-MM-YYYY").format("DD-MM-YYYY");
+      const itemCategory = item?.category ?? '_undefined_';
+      const itemAmount = parseFloat(item?.[type] ?? 0.0);
+
       if (dateMap.has(itemDate)) {
-        const newValue = (dateMap.get(itemDate) ?? 0) + parseFloat(item?.[type] ?? 0.0);
-        dateMap.set(itemDate, newValue);
+        const dateEntry = dateMap.get(itemDate)!;
+        dateEntry.amount += itemAmount;
+
+        if (type === "debited") {
+          dateEntry.categoryTotals.set(
+            itemCategory,
+            (dateEntry.categoryTotals.get(itemCategory) ?? 0) + itemAmount
+          );
+
+          dateEntry.category = [...dateEntry.categoryTotals.entries()].reduce(
+            (maxCategory, [category, total]) => total > maxCategory[1] ? [category, total] : maxCategory,
+            ["", 0]
+          )[0];
+        }
+
+        dateMap.set(itemDate, dateEntry);
       }
     });
-    const result = Array.from(dateMap.entries()).map(([date, value]) => ({
+
+    const result = Array.from(dateMap.entries()).map(([date, { amount, category }]) => ({
       x: date,
-      y: value,
+      y: amount,
+      topCategory: category,
+      fillColor: category === '_undefined_' ? '#1677ff' : categories[category]?.color ?? '#1677ff',
+      strokeColor: category === '_undefined_' ? '#1677ff' : categories[category]?.color ?? '#1677ff',
     }));
+
     return result;
   };