How asrajavel/mf-analysis works
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: logic.js Core logic · calculator.js Calculator · util.js Utilities · index.html App shell
Components 20
Entry points
Browser entry pages for the interactive tool and documentation.
UI layer
DOM-driven interaction, selection controls, and presentation styling.
- Bootstrap · Top-level browser bootstrap and app startup.
assets/js/main.js - Core logic · Connects selections, data loading, calculations, and plotting.
assets/js/logic.js - Styles · Shared styling for the browser UI.
assets/css/main.css - Fund selector · Chooses the mutual fund to analyze.
assets/js/selectors/mfSelector.js - Index selector · Chooses the benchmark index series.
assets/js/selectors/indexSelector.js - Compare mode · Switches between mutual fund and index comparison modes.
assets/js/selectors/mfVsIndexSelector.js - Duration selector · Selects rolling analysis horizons.
assets/js/selectors/durationSelector.js - Chart type · Selects the metric or graph type to render.
assets/js/selectors/typeOfChartSelector.js
Analytics engine
Data acquisition, computation, caching, and chart rendering.
- MF fetch · Fetches mutual fund data from the external API.
assets/js/fetchFromMFApi.js - Index data · Manages benchmark index data and series preparation.
assets/index/indexDataManager.js - Calculator · Computes NAV, SIP, lumpsum, and volatility metrics.
assets/js/calculator.js - SIP cache calc · Builds reusable SIP XIRR results for rolling windows.
assets/js/sipXirrCacheCalculator.js - SIP cache · Stores cached SIP return computations.
assets/js/sipXirrCache.js - Lumpsum cache · Stores cached lumpsum return computations.
assets/js/lumpsumXirrCache.js - Chart plotter · Renders computed analysis results as charts.
assets/js/chartPlotter.js
Shared libraries
Reusable date, math, and utility helpers.
Connections 22
- 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.