FANI Market Session Visualizer

High‑fidelity market dashboards that turn raw trading data into ready‑to‑publish social media cards and reports.

---

About the Project

This repository implements a set of production‑ready visualizations for a brokerage / fin‑tech analytics service based on a real client task.
The goal was to reproduce 6 Figma layouts pixel‑perfectly and transform market data into static PNG dashboards that can be used in reports, landing pages, and social media.

Who is this for?

• Brokerages & trading platforms that need automated, branded market recap cards.
• Analytics / research teams preparing daily or weekly PDF reports.
• Fin‑tech founders & data engineers looking for reference implementations of non‑trivial financial visualizations in Python.

The original task (see task.txt) came from an existing microservice (visualizer-service), and this repo isolates the visualization logic into a clean, portfolio‑friendly format.

---

Key Features

• 🚀 Six production‑grade dashboards
  US and RF main sessions, MOEX index movers, sector treemap, top‑10 volume and “>5% movers” – all fully coded, not screenshots.

• 🤖 Data‑driven rendering
  Each chart is driven by typed data models (dataclasses) that mirror the upstream service contracts (sessions, candles, sectors, volumes, movers).

• 📊 Financial‑grade charts
  Custom candlestick charts with volume bars, dynamic axis labels, treemap sector layout, and percent‑based horizontal histograms.

• 🎨 Pixel‑precise layout from Figma
  Manual positioning, shadows, rounded cards and typography matching the design system (Inter font family).

• ⚙️ Configurable and reusable API
  Each visualization exposes a single generate_*_report(...) function that accepts domain models and returns a ready‑to‑use PNG.

---

Tech Stack

• Language

  • Python 3.10+

• Libraries

  • Pillow (PIL) – low‑level image creation, drawing primitives, fonts, and effects.
  • pandas – convenient data handling for candlestick time series.
  • Standard library: dataclasses, typing, datetime, math, random.

• Design Assets

  • Inter font family (resources/fonts)
  • Icon set for commodities (resources/icons)

---

Project Structure

FANI/
├─ chart_1.py          # US main session result card
├─ chart_2.py          # RF (MOEX) main session result card
├─ chart_3.py          # Top‑10 stocks by trading volume
├─ chart_4.py          # MOEX index stocks change histogram
├─ chart_5.py          # Weekly sector performance treemap
├─ chart_6.py          # Price moves above 5% (leaders up/down)
├─ resources/
│  ├─ fonts/
│  │  ├─ Inter_18pt-Medium.ttf
│  │  ├─ Inter_18pt-Regular.ttf
│  │  └─ Inter_18pt-SemiBold.ttf
│  └─ icons/
│     ├─ icon_btc.png
│     ├─ icon_gold.png
│     └─ icon_oil.png
├─ task.txt            # Original Russian technical specification
├─ requirements.txt    # Python dependencies
├─ LICENSE             # MIT license
└─ README.md           # This file

Note: Fonts and icons are loaded from the resources directory; there is no external network dependency at runtime.

---

Getting Started

Prerequisites

• Python 3.10+
• pip (or any compatible package manager)

Installation

git clone https://github.com/nickalymov/market-session-visualizer.git
cd market-session-visualizer

python -m venv .venv
source .venv/bin/activate      # On Windows: .venv\Scripts\activate

pip install -r requirements.txt

There is no database or external API required – demo data for each chart is generated in the if __name__ == "__main__": block of each script.

Environment variables

No environment variables are strictly required.
If you want to wire these visualizations into another service, a typical .env might look like:

FANI_OUTPUT_DIR=./out
FANI_ENV=production

You can then read these values in your orchestration layer before calling the generate_*_report functions.

---

Usage

Each script is self‑contained and can be run directly. The public API of each chart is a single generate_*_report(...) function.

1. US Main Session – chart_1.py

python chart_1.py

• Core function: generate_us_session_report(sp500_data, nasdaq_data, commodities_data, filename="out/us_session_report.png")
• Output: out/us_session_report.png – indices S&P500 & NASDAQ, candlestick chart with volumes, and commodities (gold, oil, bitcoin).

Placeholder for GitHub visuals:

2. RF Main Session (MOEX) – chart_2.py

python chart_2.py

• Core function: generate_rf_session_report(moex_data, info_data, growth_leaders, fall_leaders, filename="out/rf_session_report.png")
• Output: out/rf_session_report.png – IMOEX card with big typography, FX rates, bond/volatility indices and leaders of growth/fall.

Placeholder:

3. Top‑10 by Trading Volume – chart_3.py

python chart_3.py

• Core function: generate_top_10_volume_report(stocks, filename="out/top10_volume_report.png")
• Output: out/top10_volume_report.png – ranking list with fixed‑scale volume bars, average markers and explanatory footnotes.

Placeholder:

4. MOEX Index Stock Changes – chart_4.py

python chart_4.py

• Core functions:
  • draw_bar_chart(...) – internal helper for gainers/losers columns.
  • generate_moex_report(gainers_data, losers_data, filename="out/moex_index_changes_report.png")
• Output: out/moex_index_changes_report.png – two synchronized histograms for leaders of growth and fall, with shared axis and notes.

Placeholder:

5. Sector Performance Treemap – chart_5.py

python chart_5.py

• Core function: generate_sector_report(sectors, filename="out/sector_performance_report.png")
• Output: out/sector_performance_report.png – treemap by sector index (e.g. MOEXFN, MOEXOG) with weekly change and visual emphasis by color.

Placeholder:

6. Significant Moves > 5% – chart_6.py

python chart_6.py

• Core functions:
  • generate_significant_moves_report(data, filename="out/significant_moves_report.png")
  • generate_random_price_moves() – helper to create demo input.
• Output: out/significant_moves_report.png – two cards for “leaders up” and “leaders down”, with bar length proportional to % move.

Placeholder:

You can replace the random demo data in each __main__ block with real market data, as long as you instantiate the same dataclasses.

---

Business Story: From Task to Result

• Task: Implement 6 visualizations from Figma for an existing market analytics microservice (visualizer-service, viz_task branch), using strictly defined data models (SessionSummaryDto, CandleDto, PriceMoveEvent, StockVolume, SectorPerformance, etc.).
• Solution: Each original service (US session, RF session, volume, MOEX change, sector stats, >5% moves) was re‑implemented here as a pure‑Python image generator with clean API and reusable domain models.
• Result: The client can now plug these generators into their backend, feed them with live market data and automatically publish consistent, branded PNG dashboards.

This repository is focused on readability, reusability and portfolio value – so code is thoroughly commented in English and assets are organized for easy reuse.

---

Contact

If you want a similar visualization system or need help turning your Figma analytics dashboards into code, feel free to reach out:

• FL.ru – Project portfolio
• Telegram – @nickalymov
• GitHub – nickalymov

I’m open to freelance work, consulting and long‑term product collaborations in trading, analytics and data‑driven products.