Redesign plugin (#60)

New pages:
* Portfolio: show portfolio performance, value and allocation
* Performance: compare performance with other groups and commodities
* Returns: show returns (IRR or TWR) in a heatmap, yearly and over periods
* Dividends: group dividends by stock and month/year

New toolbar:
* support investment selection based on defined groups, currencies and accounts.
* support selecting the operating currency
* support selecting predefined date ranges (3M/6M/YTD/1Y/3Y/5Y/MAX)

.editorconfig

@@ -12,5 +12,8 @@ max_line_length = 120
 [*.html]
 indent_size = 2
 
+[*.{ts,tsx}]
+indent_size = 2
+
 [Makefile]
 indent_style = tab

Makefile

@@ -11,6 +11,7 @@ deps-py:
 	uv sync
 
 deps-py-update:
+	uv pip list --outdated
 	uv lock --upgrade
 
 deps: deps-js deps-py
@@ -30,23 +31,32 @@ test-js:
 test-js-update:
 	cd frontend; LANG=en npm run test -- -u
 
-test: test-js
+test-py:
+	uv run pytest
+
+test: test-js test-py
 
 ## Utils
 run:
 	cd example; uv run fava example.beancount
 
-run-debug:
-	cd example; uv run fava --debug example.beancount
+dev:
+	cd frontend; npx concurrently --names fava,esbuild "cd ../example; PYTHONUNBUFFERED=1 LOGLEVEL=debug uv run fava --debug example.beancount" "npm:watch"
+
+beangrow:
+	cd example; uv run beangrow-returns example.beancount beangrow.pbtxt reports
 
 lint:
 	cd frontend; npx tsc --noEmit
-	uv run mypy src/fava_portfolio_returns/__init__.py
-	uv run pylint src/fava_portfolio_returns/__init__.py
+	cd frontend; npm run lint
+	uv run mypy src/fava_portfolio_returns
+	uv run pylint src/fava_portfolio_returns
 
 format:
-	cd frontend; npx prettier -w . ../src/fava_portfolio_returns/templates/*.css
-	uv run black src/fava_portfolio_returns/__init__.py
+	-cd frontend; npm run lint:fix
+	cd frontend; npx prettier -w ../src/fava_portfolio_returns/templates/*.css
+	-uv run ruff check --fix
+	uv run ruff format .
 	find example -name '*.beancount' -exec uv run bean-format -c 59 -o "{}" "{}" \;
 
 ci:
@@ -55,8 +65,4 @@ ci:
 	make run &
 	make test
 	make format
-
-	# https://github.com/astral-sh/uv/issues/7533
-	git restore uv.lock
-
 	git diff --exit-code

README.md

@@ -4,8 +4,12 @@
 
 fava-portfolio-returns shows portfolio returns in the [Fava](https://github.com/beancount/fava) web interface. It leverages [beangrow](https://github.com/beancount/beangrow) to calculate the portfolio returns.
 
-[![Overview](frontend/tests/e2e/__image_snapshots__/report_overview.png)](frontend/tests/e2e/__image_snapshots__/report_overview.png)
-[![Report](frontend/tests/e2e/__image_snapshots__/report_vht.png)](frontend/tests/e2e/__image_snapshots__/report_vht.png)
+[![Portfolio](frontend/tests/e2e/__image_snapshots__/portfolio.png)](frontend/tests/e2e/__image_snapshots__/portfolio.png)
+[![Performance](frontend/tests/e2e/__image_snapshots__/performance.png)](frontend/tests/e2e/__image_snapshots__/performance.png)
+[![Returns](frontend/tests/e2e/__image_snapshots__/returns.png)](frontend/tests/e2e/__image_snapshots__/returns.png)
+[![Dividends](frontend/tests/e2e/__image_snapshots__/dividends.png)](frontend/tests/e2e/__image_snapshots__/dividends.png)
+[![Cash Flows](frontend/tests/e2e/__image_snapshots__/cash_flows.png)](frontend/tests/e2e/__image_snapshots__/cash_flows.png)
+[![Groups](frontend/tests/e2e/__image_snapshots__/groups.png)](frontend/tests/e2e/__image_snapshots__/groups.png)
 
 ## Installation
 ```
@@ -28,11 +32,7 @@ Enable this plugin in Fava by adding the following lines to your ledger:
 ## Building from Source
 Run `make build-js` to compile the frontend. The compiled and bundled code will be placed in `src/fava_portfolio_returns/FavaPortfolioReturns.js`.
 
-You can run `make watch-js` to automatically rebuild the frontend for any changes.
-
-## Contributing
-The goal of this Fava extension is to display beangrow reports in the browser.
-Please implement calculation changes or additions in the [beangrow](https://github.com/beancount/beangrow) repository, and any user interface changes in this repository.
+Run `make dev` to start a development server and automatically rebuild the frontend for any changes.
 
 ## Related Projects
 * [Fava Portfolio Summary](https://github.com/PhracturedBlue/fava-portfolio-summary)

example/example.beancount

@@ -5,6 +5,7 @@
 * Options
 
 option "operating_currency" "USD"
+option "operating_currency" "EUR"
 plugin "beancount.plugins.implicit_prices"
 
 1980-05-12 custom "fava-option" "language" "en"

frontend/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
+    ],
+    env: {
+        commonjs: true,
+        es6: true,
+        jest: true,
+        node: true,
+        browser: true,
+    },
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+    rules: {
+        "react/react-in-jsx-scope": "off",
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+                caughtErrorsIgnorePattern: "^_",
+            },
+        ],
+    },
+};

frontend/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-organize-imports"]
+}

frontend/jest-puppeteer.config.js

@@ -4,8 +4,11 @@ module.exports = {
             width: 1680,
             height: 1000,
         },
-        headless: "new",
+        headless: true,
         // chrome sandbox does not work inside container
         args: ["--no-sandbox"],
+
+        // debug
+        // dumpio: true,
     },
 };

frontend/jest.config.js

@@ -1,4 +1,8 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
 module.exports = {
     preset: "jest-puppeteer",
     snapshotSerializers: ["jest-serializer-html"],
+    transform: {
+        "^.+.tsx?$": ["ts-jest", {}],
+    },
 };