feat: new chart based on filtering by item name

Signed-off-by: rare-magma <[email protected]>

README.md

@@ -82,9 +82,12 @@ However, if you'd like to use it offline, follow the instructions for your devic
 I receive a salary at the end of each month and around that time I create a new budget to plan the expenses/savings goals/etc.
 
 I frequently add a new expense before I purchase it so I can see the impact on the budget and prepare accordingly.
-If everything went according to plan, once I receive a new salary, I transfer the value in the `savings estimate` field to a savings account.
+If everything went according to plan, once I receive a new salary, I transfer the value in the `savings estimate` field to my bank savings account.
 
 Later, I can compare the budget with previous months to understand where the money is going by hovering the mouse/tapping on a single expense. A tooltip pops up and shows its value in percentage of revenue (see the tooltip screenshot above).
+The charts page is useful for these kinds of insighs.
+
+There I can see an overview of the evolution of several metrics such as `savings`, `revenue`, etc. If I want to narrow down the chart to a specific type of item I can search for it in the filter searchbox. If I toggle the `strict match` button then only items that are named exactly as the search value are shown in the resulting chart.
 
 ### Starting from scratch:
 

src/components/Chart/ChartTooltip.tsx

@@ -5,10 +5,21 @@ import { intlFormat, roundBig } from "../../utils";
 
 interface ChartTooltipProps {
   active?: boolean;
-  payload?: { name: string; value: number; unit: string }[];
+  payload?: {
+    name: string;
+    payload?: {
+      id: string;
+      item: string;
+      name: string;
+      type: string;
+      value: number;
+    };
+    value: number;
+    unit: string;
+  }[];
   label?: string;
-  key1?: string;
-  key2?: string;
+  key1?: string | undefined;
+  key2?: string | undefined;
 }
 
 function ChartTooltip({
@@ -19,52 +30,45 @@ function ChartTooltip({
   key2,
 }: ChartTooltipProps) {
   const { intlConfig } = useConfig();
+  const currency = intlConfig?.currency;
+  const showTooltip = active && payload?.length && currency;
+  const filteredItemName = payload?.length && payload[0].payload?.item;
+  const showMultipleLegends = showTooltip && payload.length > 1;
 
-  if (active && payload?.length && intlConfig?.currency) {
-    return (
-      <Container className="m-2">
-        <Row>{label}</Row>
-        {payload.length > 1 ? (
-          <>
-            <Row className="me-1">
-              <Col>{`${key1 ?? ""}:`}</Col>
-              <Col className="text-end fixed-width-font">
-                {`${intlFormat(
-                  roundBig(Big(payload[0].value), 2),
-                  intlConfig.currency,
-                )}`}
-              </Col>
-            </Row>
-            <Row className="me-1 flex-md-nowrap">
-              <Col>{`${key2 ?? ""}:`}</Col>
-              <Col className="text-end fixed-width-font col-md-auto">
-                {intlFormat(
-                  roundBig(Big(payload[1].value), 2),
-                  intlConfig.currency,
-                )}
-              </Col>
-            </Row>
-          </>
-        ) : (
+  const item1Value =
+    showTooltip && intlFormat(roundBig(Big(payload[0].value), 2), currency);
+  const item2Value =
+    showMultipleLegends &&
+    intlFormat(roundBig(Big(payload[1].value), 2), currency);
+
+  return showTooltip ? (
+    <Container className="m-2">
+      <Row>{label}</Row>
+      {showMultipleLegends ? (
+        <>
           <Row className="me-1">
             <Col>{`${key1 ?? ""}:`}</Col>
-            {key1 === "goal" ? (
-              <Col className="text-end fixed-width-font">{`${payload[0].value}%`}</Col>
-            ) : (
-              <Col className="text-end fixed-width-font">
-                {`${intlFormat(
-                  roundBig(Big(payload[0].value), 2),
-                  intlConfig.currency,
-                )}`}
-              </Col>
-            )}
+            <Col className="text-end fixed-width-font">{item1Value}</Col>
           </Row>
-        )}
-      </Container>
-    );
-  }
-
-  return null;
+          <Row className="me-1 flex-md-nowrap">
+            <Col>{`${key2 ?? ""}:`}</Col>
+            <Col className="text-end fixed-width-font col-md-auto">
+              {item2Value}
+            </Col>
+          </Row>
+        </>
+      ) : (
+        <Row className="me-1">
+          <Col>{`${key1 ?? filteredItemName}:`}</Col>
+          {key1 === "goal" ? (
+            <Col className="text-end fixed-width-font">{`${payload[0].value}%`}</Col>
+          ) : (
+            <Col className="text-end fixed-width-font">{item1Value}</Col>
+          )}
+        </Row>
+      )}
+    </Container>
+  ) : null;
 }
 
 export default ChartTooltip;

src/components/ChartsPage/ChartsPage.css

@@ -0,0 +1,4 @@
+.filter-search {
+  border-radius: 0.375rem;
+  border-radius: 0.375rem;
+}