# asrajavel/mf-analysis architecture

> Architecture diagram of the GitHub repository asrajavel/mf-analysis, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-20). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/asrajavel/mf-analysis
- Repository: https://github.com/asrajavel/mf-analysis

## Overview

1. **Project shape**
   - This is a **static, browser-only single-page analysis tool** for mutual funds and market indices.
   - The main runtime is the browser; there is **no backend service** and no persistent server-side state.

2. **Entry points**
   - `index.html` is the application shell for the interactive tool.
   - `wiki.html` is a separate static documentation page that explains the graph types and investment scenarios.

3. **UI and presentation layer**
   - `assets/css/main.css` contains the shared styling.
   - The UI is likely built from plain HTML + JavaScript rather than a front-end framework, so the architectural boundary is lightweight DOM-driven interaction.

4. **Application orchestration**
   - `assets/js/main.js` is the top-level bootstrap/orchestration file.
   - `assets/js/logic.js` appears to hold the core coordination logic that connects user selections, data retrieval, calculations, and chart rendering.

5. **User input / control subsystem**
   - The `assets/js/selectors/` folder contains the selection components that drive analysis parameters:
     - `mfSelector.js` for mutual fund selection
     - `indexSelector.js` for index selection
     - `mfVsIndexSelector.js` for comparison mode
     - `durationSelector.js` for rolling period selection
     - `typeOfChartSelector.js` for chart type selection
   - These selectors define the main interaction boundary: the user chooses what to compare and over which time horizon.

6. **Market data acquisition**
   - `assets/js/fetchFromMFApi.js` is the network-facing module that fetches mutual fund data from an external API.
   - `assets/index/indexDataManager.js` suggests a dedicated path for index series/data normalization, separating benchmark data from mutual fund data.
   - This is the only clear external data boundary in the repo; once fetched, data is processed locally in the browser.

7. **Computation engine**
   - `assets/js/calculator.js` is the core analytics layer for deriving the different graph outputs.
   - The repo supports NAV, SIP rolling returns, SIP rolling absolute value, lumpsum rolling returns, lumpsum rolling absolute value, and standard deviation metrics.
   - The calculator layer likely transforms raw time series into rolling-window outputs for 1-, 3-, 5-, and 10-year periods.

8. **Return and XIRR support**
   - `assets/js/libraries/xirr.js` provides internal rate of return calculations.
   - `assets/js/sipXirrCache.js`, `assets/js/lumpsumXirrCache.js`, and `assets/js/sipXirrCacheCalculator.js` indicate that expensive return computations are cached and reused, which matters because rolling-window analysis can be compute-heavy.

9. **Visualization layer**
   - `assets/js/chartPlotter.js` is responsible for rendering the analytical results as graphs.
   - The charting boundary is separate from the calculation boundary: raw series are computed first, then passed to the plotter for display.

10. **Data flow**
   - Typical flow is: **user selection → selector state → orchestration logic → data fetch / index load → calculation and caching → chart rendering**.
   - This keeps acquisition, analytics, and visualization decoupled enough to support multiple chart types over the same underlying data.

11. **Shared utility layer**
   - `assets/js/libraries/moment.js` handles date/time manipulation, which is important for rolling-period calculations and NAV history alignment.
   - `assets/js/libraries/util.js` likely contains generic helpers reused across selectors, data processing, and plotting.

12. **Architectural boundary summary**
   - The repository is organized around three main runtime concerns:
     - **Input/UI**: selectors and HTML pages
     - **Analytics**: fetch, compute, cache
     - **Presentation**: chart plotting and styling
   - This design supports the repo’s privacy model: all analysis happens locally in the browser, and only market data needs to be fetched from outside.

Main entry points: [`assets/js/logic.js`](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/logic.js) (Core logic), [`assets/js/calculator.js`](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/calculator.js) (Calculator), [`assets/js/libraries/util.js`](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/util.js) (Utilities), [`index.html`](https://github.com/asrajavel/mf-analysis/blob/main/index.html) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry points"]
  node_index_html["App shell<br/>html entry<br/>[index.html]"]
  node_wiki_html["Wiki page<br/>html docs<br/>[wiki.html]"]
end

subgraph group_ui["UI layer"]
  node_main_js["Bootstrap<br/>orchestrator<br/>[main.js]"]
  node_logic_js["Core logic<br/>coordination<br/>[logic.js]"]
  node_main_css["Styles<br/>presentation css<br/>[main.css]"]
  node_mf_selector["Fund selector<br/>input control<br/>[mfSelector.js]"]
  node_index_selector["Index selector<br/>input control<br/>[indexSelector.js]"]
  node_compare_selector["Compare mode<br/>input control"]
  node_duration_selector["Duration selector<br/>input control"]
  node_chart_type_selector["Chart type<br/>input control"]
end

subgraph group_analytics["Analytics engine"]
  node_fetch_api["MF fetch<br/>data acquisition<br/>[fetchFromMFApi.js]"]
  node_index_manager["Index data<br/>data normalization"]
  node_calculator["Calculator<br/>analytics engine<br/>[calculator.js]"]
  node_sip_cache_calc["SIP cache calc<br/>cache compute"]
  node_sip_cache["SIP cache<br/>result cache<br/>[sipXirrCache.js]"]
  node_lumpsum_cache["Lumpsum cache<br/>result cache"]
  node_chart_plotter["Chart plotter<br/>visualization<br/>[chartPlotter.js]"]
end

subgraph group_libs["Shared libraries"]
  node_moment_lib["Dates<br/>date library<br/>[moment.js]"]
  node_xirr_lib["XIRR math<br/>finance library<br/>[xirr.js]"]
  node_util_lib["Utilities<br/>helper library<br/>[util.js]"]
end

node_index_html -->|"loads"| node_main_js
node_index_html -->|"styles"| node_main_css
node_wiki_html -->|"styles"| node_main_css
node_main_js -->|"starts"| node_logic_js
node_logic_js -->|"reads"| node_mf_selector
node_logic_js -->|"reads"| node_index_selector
node_logic_js -->|"reads"| node_compare_selector
node_logic_js -->|"reads"| node_duration_selector
node_logic_js -->|"reads"| node_chart_type_selector
node_logic_js -->|"fetches"| node_fetch_api
node_logic_js -->|"loads"| node_index_manager
node_logic_js -->|"calculates"| node_calculator
node_calculator -->|"uses"| node_sip_cache_calc
node_sip_cache_calc -->|"stores"| node_sip_cache
node_calculator -->|"uses"| node_lumpsum_cache
node_calculator -->|"calls"| node_xirr_lib
node_calculator -->|"dates"| node_moment_lib
node_calculator -->|"helpers"| node_util_lib
node_logic_js -->|"renders"| node_chart_plotter
node_chart_plotter -->|"dates"| node_moment_lib
node_fetch_api -->|"helpers"| node_util_lib
node_index_manager -->|"helpers"| node_util_lib

click node_index_html "https://github.com/asrajavel/mf-analysis/blob/main/index.html"
click node_wiki_html "https://github.com/asrajavel/mf-analysis/blob/main/wiki.html"
click node_main_js "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/main.js"
click node_logic_js "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/logic.js"
click node_main_css "https://github.com/asrajavel/mf-analysis/blob/main/assets/css/main.css"
click node_mf_selector "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/mfSelector.js"
click node_index_selector "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/indexSelector.js"
click node_compare_selector "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/mfVsIndexSelector.js"
click node_duration_selector "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/durationSelector.js"
click node_chart_type_selector "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/typeOfChartSelector.js"
click node_fetch_api "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/fetchFromMFApi.js"
click node_index_manager "https://github.com/asrajavel/mf-analysis/blob/main/assets/index/indexDataManager.js"
click node_calculator "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/calculator.js"
click node_sip_cache_calc "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/sipXirrCacheCalculator.js"
click node_sip_cache "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/sipXirrCache.js"
click node_lumpsum_cache "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/lumpsumXirrCache.js"
click node_chart_plotter "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/chartPlotter.js"
click node_moment_lib "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/moment.js"
click node_xirr_lib "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/xirr.js"
click node_util_lib "https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/util.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html,node_wiki_html toneBlue
class node_main_js,node_logic_js,node_main_css,node_mf_selector,node_index_selector,node_compare_selector,node_duration_selector,node_chart_type_selector toneAmber
class node_fetch_api,node_index_manager,node_calculator,node_sip_cache_calc,node_sip_cache,node_lumpsum_cache,node_chart_plotter toneMint
class node_moment_lib,node_xirr_lib,node_util_lib toneRose
```

## Components

### Entry points

Browser entry pages for the interactive tool and documentation.

- [App shell](https://github.com/asrajavel/mf-analysis/blob/main/index.html): html entry · Main single-page application shell. · `index.html`
- [Wiki page](https://github.com/asrajavel/mf-analysis/blob/main/wiki.html): html docs · Static documentation page for graph types and scenarios. · `wiki.html`

### UI layer

DOM-driven interaction, selection controls, and presentation styling.

- [Bootstrap](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/main.js): orchestrator · Top-level browser bootstrap and app startup. · `assets/js/main.js`
- [Core logic](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/logic.js): coordination · Connects selections, data loading, calculations, and plotting. · `assets/js/logic.js`
- [Styles](https://github.com/asrajavel/mf-analysis/blob/main/assets/css/main.css): presentation css · Shared styling for the browser UI. · `assets/css/main.css`
- [Fund selector](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/mfSelector.js): input control · Chooses the mutual fund to analyze. · `assets/js/selectors/mfSelector.js`
- [Index selector](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/indexSelector.js): input control · Chooses the benchmark index series. · `assets/js/selectors/indexSelector.js`
- [Compare mode](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/mfVsIndexSelector.js): input control · Switches between mutual fund and index comparison modes. · `assets/js/selectors/mfVsIndexSelector.js`
- [Duration selector](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/durationSelector.js): input control · Selects rolling analysis horizons. · `assets/js/selectors/durationSelector.js`
- [Chart type](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/selectors/typeOfChartSelector.js): input control · Selects the metric or graph type to render. · `assets/js/selectors/typeOfChartSelector.js`

### Analytics engine

Data acquisition, computation, caching, and chart rendering.

- [MF fetch](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/fetchFromMFApi.js): data acquisition · Fetches mutual fund data from the external API. · `assets/js/fetchFromMFApi.js`
- [Index data](https://github.com/asrajavel/mf-analysis/blob/main/assets/index/indexDataManager.js): data normalization · Manages benchmark index data and series preparation. · `assets/index/indexDataManager.js`
- [Calculator](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/calculator.js): analytics engine · Computes NAV, SIP, lumpsum, and volatility metrics. · `assets/js/calculator.js`
- [SIP cache calc](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/sipXirrCacheCalculator.js): cache compute · Builds reusable SIP XIRR results for rolling windows. · `assets/js/sipXirrCacheCalculator.js`
- [SIP cache](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/sipXirrCache.js): result cache · Stores cached SIP return computations. · `assets/js/sipXirrCache.js`
- [Lumpsum cache](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/lumpsumXirrCache.js): result cache · Stores cached lumpsum return computations. · `assets/js/lumpsumXirrCache.js`
- [Chart plotter](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/chartPlotter.js): visualization · Renders computed analysis results as charts. · `assets/js/chartPlotter.js`

### Shared libraries

Reusable date, math, and utility helpers.

- [Dates](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/moment.js): date library · Date and time handling for rolling-period analysis. · `assets/js/libraries/moment.js`
- [XIRR math](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/xirr.js): finance library · Internal rate of return calculations. · `assets/js/libraries/xirr.js`
- [Utilities](https://github.com/asrajavel/mf-analysis/blob/main/assets/js/libraries/util.js): helper library · Shared utility helpers used across the app. · `assets/js/libraries/util.js`

## Connections

- App shell → Bootstrap: loads · The app shell loads the browser bootstrap.
- App shell → Styles: styles · The app shell uses the shared stylesheet.
- Wiki page → Styles: styles · Documentation page shares the same stylesheet.
- Bootstrap → Core logic: starts · Bootstrap hands control to the coordination layer.
- Core logic → Fund selector: reads · Core logic consumes mutual fund selection state.
- Core logic → Index selector: reads · Core logic consumes index selection state.
- Core logic → Compare mode: reads · Core logic uses comparison mode selection.
- Core logic → Duration selector: reads · Core logic uses rolling horizon selection.
- Core logic → Chart type: reads · Core logic uses chart type selection.
- Core logic → MF fetch: fetches · Loads mutual fund market data when needed.
- Core logic → Index data: loads · Loads and normalizes benchmark index data.
- Core logic → Calculator: calculates · Delegates metric computation to the analytics engine.
- Calculator → SIP cache calc: uses · Rolling SIP outputs are prepared through cache computation.
- SIP cache calc → SIP cache: stores · Computed SIP returns are cached for reuse.
- Calculator → Lumpsum cache: uses · Lumpsum outputs can be served from cached results.
- Calculator → XIRR math: calls · Return calculations rely on XIRR math.
- Calculator → Dates: dates · Rolling-window math depends on date handling.
- Calculator → Utilities: helpers · Shared helpers support analytics computations.
- Core logic → Chart plotter: renders · Computed results are passed to the chart layer.
- Chart plotter → Dates: dates · Charting and axis formatting depend on date utilities.
- MF fetch → Utilities: helpers · Fetch and transformation code uses shared helpers.
- Index data → Utilities: helpers · Benchmark data management uses shared helpers.