fix bug and push ci

.github/workflows/vite.yml

@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

src/FisaMatrix.tsx

@@ -1,3 +1,5 @@
+import * as chrono from "chrono-node";
+
 import {
   AreaChartOutlined,
   BarChartOutlined,
@@ -60,9 +62,8 @@ import {
 } from "./lib/db/models/categories";
 import { cmd_createRecords, parseCSVData } from "./lib/db/models/transactions";
 import { renderCat, salaryMonthPrompt } from "./lib/extra";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useQueries, useResultTable, useStore } from "tinybase/debug/ui-react";
-import * as chrono from "chrono-node";
 
 import { ChartCategoryAggregates } from "./components/ChartCategoryAggregates";
 import { ChartCategoryBreakdown } from "./components/ChartCategoryBreakdown";
@@ -94,6 +95,9 @@ export const FisaMatrix = () => {
   const [aggregateType, setAggregateType] = useState<"sum" | "count">("sum");
   const [repeatsType, setRepeatsType] = useState<"repeats" | "all">("all");
 
+  const [datasetOpen, setDatasetOpen] = useState<any>([]);
+  const datasetRef = useRef<any>(null);
+
   const [openStates, setOpenStates] = useState({
     modalCat: false,
     modalInfo: false,
@@ -285,6 +289,22 @@ export const FisaMatrix = () => {
     setTrxFiltered(filtered);
   };
 
+  const handleGotoDate = (_e: any, _chart: any, options: any) => {
+    const date = options.w.globals.labels[options?.dataPointIndex];
+    if (date) {
+      if (datasetOpen.length === 0) setDatasetOpen(["1"]);
+      if (datasetRef.current) {
+        const filtered = extractDataSource(trx).filter((i: any) =>
+          dayjs(i.date, "DD-MM-YYYY").isSame(dayjs(date, "DD-MM-YYYY"), "day")
+        );
+        if (filtered.length > 0) {
+          setTrxFiltered(filtered);
+          datasetRef.current.scrollIntoView();
+        }
+      }
+    }
+  };
+
   const closeModalInfo = () => {
     modalInfo.close();
     localStorage.setItem("infoShown", "true");
@@ -371,6 +391,14 @@ export const FisaMatrix = () => {
                 },
               }}
             >
+              <Button
+                onClick={() => {
+                  setDatasetOpen(datasetOpen.length > 0 ? [] : ["1"]);
+                  if (datasetRef.current) datasetRef.current.scrollIntoView();
+                }}
+              >
+                Test
+              </Button>
               <Button
                 href="https://github.com/Raais/fm"
                 target="_blank"
@@ -446,6 +474,7 @@ export const FisaMatrix = () => {
                     yformat={function (val: any) {
                       return curr(val);
                     }}
+                    selection={handleGotoDate}
                   />
                 </div>
               </Card>
@@ -470,6 +499,7 @@ export const FisaMatrix = () => {
                     yformat={function (val: any) {
                       return curr(val);
                     }}
+                    selection={handleGotoDate}
                   />
                 </div>
               </Card>
@@ -695,6 +725,11 @@ export const FisaMatrix = () => {
           </Card>
 
           <Collapse
+            ref={datasetRef}
+            activeKey={datasetOpen}
+            onChange={(keys: any) => {
+              setDatasetOpen(keys);
+            }}
             items={[
               {
                 key: "1",
@@ -723,20 +758,37 @@ export const FisaMatrix = () => {
                 children: (
                   <Flex vertical gap="middle">
                     <Flex style={{ flex: 1, justifyContent: "flex-end" }}>
-                      <AutoComplete
-                        popupMatchSelectWidth={true}
-                        style={{ width: 250 }}
-                        options={searchAutocomplete}
-                        onSelect={(value: any) => debounce(handleSearch)(value)}
-                        onSearch={(value: any) => debounce(handleSearch)(value)}
-                        size="large"
-                      >
-                        <Input.Search
-                          size="middle"
-                          allowClear
-                          placeholder="search anything"
+                      <Flex>
+                        <Button
+                          size="small"
+                          icon={
+                            <CloseOutlined style={{ color: "#77777740" }} />
+                          }
+                          type="text"
+                          onClick={() => {
+                            setTrxFiltered(null);
+                            setLastSearch(null);
+                          }}
                         />
-                      </AutoComplete>
+                        <AutoComplete
+                          popupMatchSelectWidth={true}
+                          style={{ width: 250 }}
+                          options={searchAutocomplete}
+                          onSelect={(value: any) =>
+                            debounce(handleSearch)(value)
+                          }
+                          onSearch={(value: any) =>
+                            debounce(handleSearch)(value)
+                          }
+                          size="large"
+                        >
+                          <Input.Search
+                            size="middle"
+                            allowClear
+                            placeholder="search anything"
+                          />
+                        </AutoComplete>
+                      </Flex>
                       <Flex
                         style={{
                           display: "flex",
@@ -850,7 +902,6 @@ export const FisaMatrix = () => {
                         <Button
                           type="primary"
                           onClick={() => {
-                            console.log(catName, catEmoji, catColor);
                             cmd_addCategory(store, catName, catEmoji, catColor);
                             setCatName("");
                             //setCatEmoji("");
@@ -1114,6 +1165,7 @@ export const FisaMatrix = () => {
                         </Card>
                         <Card title="Mock Data" bordered={true}>
                           <Button
+                            type="dashed"
                             onClick={() => {
                               if (extractDataSource(trx).length > 0) {
                                 message.error(

src/components/ChartDailyCredit.tsx

@@ -6,6 +6,7 @@ export const ChartDailyCredit = ({
   series,
   title,
   yformat,
+  selection,
 }: any) => {
   return (
     <Chart
@@ -24,6 +25,9 @@ export const ChartDailyCredit = ({
           sparkline: {
             enabled: true,
           },
+          events: {
+            dataPointSelection: selection,
+          }
         },
         colors: ["#00E396"],
         title: {

src/components/ChartDailyDebit.tsx

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import Chart from "react-apexcharts";
 
-export const ChartDailyDebit = ({ graphType, series, title, yformat }: any) => {
+export const ChartDailyDebit = ({ graphType, series, title, yformat, selection }: any) => {
   return (
     <Chart
       key={graphType}
@@ -19,6 +19,9 @@ export const ChartDailyDebit = ({ graphType, series, title, yformat }: any) => {
           sparkline: {
             enabled: true,
           },
+          events: {
+            dataPointSelection: selection,
+          }
         },
         colors: ["#0072ff"],
         title: {

src/lib/fmt.ts

@@ -22,18 +22,17 @@ export const extractDataSource = (obj: any) => {
     return arr;
   };
 
-export const extractDailyDebitCredit = (
+  export const extractDailyDebitCredit = (
     obj: any,
     type: "debited" | "credited",
     r: any
   ) => {
     const len = dayjs(r.to).diff(dayjs(r.from), "day");
-    const data: any[] = Array.from({ length: len }, (_, i) => ({
-      x: dayjs(r.to)
-        .subtract(len - i, "day")
-        .format("DD-MM-YYYY"),
-      y: 0.0,
-    }));
+    const dateMap = new 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);
+    }
     const arr = castToArray(obj)
       .sort(
         (a: any, b: any) =>
@@ -46,13 +45,18 @@ export const extractDailyDebitCredit = (
           dayjs(item?.date, "DD-MM-YYYY").isBefore(r.to)
       );
     arr.forEach((item: any) => {
-      const idx =
-        len - dayjs(r.to).diff(dayjs(item?.date, "DD-MM-YYYY"), "day") - 1;
-      data[idx].y += parseFloat(item?.[type] ?? 0.0);
+      const itemDate = dayjs(item?.date, "DD-MM-YYYY").format("DD-MM-YYYY");
+      if (dateMap.has(itemDate)) {
+        const newValue = (dateMap.get(itemDate) ?? 0) + parseFloat(item?.[type] ?? 0.0);
+        dateMap.set(itemDate, newValue);
+      }
     });
-
-    return data;
-};
+    const result = Array.from(dateMap.entries()).map(([date, value]) => ({
+      x: date,
+      y: value,
+    }));
+    return result;
+  };
 
 export const debitSumDataGet = ({queries}: any) => {
     let data = [];