Forem: Sutanto Ong, S.E., M.Fin

Building a Real-Time Market Anomaly Dashboard with Vue3, Element Plus, and Java

Sutanto Ong, S.E., M.Fin — Wed, 11 Mar 2026 10:27:21 +0000

In the financial markets, the difference between a successful trade and a painful loss often comes down to data processing speed and visualization. As a finance professional operating in the Southeast Asian markets, I regularly track institutional capital flows. One of the most critical anomalies we look for is structural divergence—when retail investors are buying a stock based on positive news, but foreign institutional funds are quietly selling.

To track this efficiently across hundreds of equities, relying on standard retail trading terminals is not enough. My team and I required a custom, full-stack operations recording and archiving platform.

Here is a look at the architecture we use to build our internal "Smart Money" tracking dashboard, and the logic behind it.

The Problem: Detecting the Divergence Trap
During the annual dividend season, companies announce high payout ratios. Retail investors rush in (creating a price spike), but institutions often use this liquidity to exit their positions and convert local currency back to US Dollars.

To detect this, our system needs to ingest daily market data and calculate a specific boolean flag:

Condition A: Stock Price is UP (Retail Buying)

Condition B: Net Foreign Volume is NEGATIVE (Institutional Selling)

When A + B are true simultaneously, the dashboard triggers an "Anomaly Alert."

The Tech Stack
We opted for a robust, enterprise-grade stack to handle the data processing and provide a clean, institutional-grade user interface.

The Backend: Java
Data ingestion and logic processing are handled by Java. Financial data APIs can be messy, with rate limits and inconsistent JSON structures. Java provides the strict typing and multithreading capabilities needed to pull end-of-day settlement data, calculate the net foreign flow (Foreign Buy Volume - Foreign Sell Volume), and store the historical records in our database for archiving.
The Frontend: Vue3 + Element Plus
For the user interface, we needed something lightweight but capable of rendering complex data tables and charts without performance degradation.
We utilize Vue3 for its Composition API, which makes handling real-time data streams much cleaner. For the UI component library, we integrated Element Plus. Its data tables, pagination, and date-based viewing components are perfectly suited for financial operations checklists and historical data archiving.

The Core Logic (Pseudo-Implementation)
On the backend, the core anomaly detection runs a simple but effective validation against the daily dataset:

public class FlowAnalyzer {

public boolean detectInstitutionalExit(MarketData data) {
    double priceChange = data.getClosingPrice() - data.getPreviousClose();
    long netForeignFlow = data.getForeignBuyVolume() - data.getForeignSellVolume();

    // If price is up but foreign funds are pulling out, trigger alert
    if (priceChange > 0 && netForeignFlow < 0) {
        return true;
    }
    return false;
}

}

Once processed, this data is exposed via a REST API to our Vue3 frontend, where it populates an Element Plus data grid, highlighting the anomalous tickers in red for our operations team to review.

Why This Matters for Developers
Financial engineering is not exclusively about high-frequency algorithmic trading built in C++. Much of the edge in modern finance comes from building reliable, full-stack archiving and monitoring tools that allow human analysts to see the truth hidden beneath the noise.

By utilizing accessible frameworks like Vue3 and Java, developers can build powerful operations dashboards that bring institutional-level clarity to complex datasets.

Disclaimer: This article is strictly for educational purposes focusing on software architecture and data analysis. It does not constitute financial or investment advice.

Why I Focus on the Payout Ratio When the Market Index Bleeds

Sutanto Ong, S.E., M.Fin — Tue, 03 Mar 2026 09:03:12 +0000

I spent this Tuesday, March 3, 2026, watching my trading terminal flash a lot of red. The Jakarta Composite Index (JKSE) took a rather steep dive, closing down 2.66%. On days like this, it is incredibly easy to let market psychology dictate your mood.

However, my reaction today was surprisingly calm. My calmness doesn't come from ignoring the market; it comes from changing what I choose to measure.

The Divergence on the Board

While the broader index was dragging down most portfolios, I noticed something that validated my entire approach for this month. The coal companies I have been observing—specifically PTBA and ADRO—actually closed the day in the green. In a sea of selling pressure, they acted as life rafts.

The reason is simple. We are entering the Annual General Meeting (AGM) season. The market knows that these specific companies generate massive amounts of free cash flow, and more importantly, they have a history of actually distributing it.

When a stock like BBRI announces its upcoming AGM for April 10, the abstract concept of a stock price transforms into a tangible timeline for cash distribution.

My Personal Metric: The Payout Ratio

I have stopped trying to guess whether the index will recover tomorrow or drop further by Friday. It is an exhausting and ultimately futile exercise. Instead, I spend my time reading through 2025 financial statements and calculating historical payout ratios.

If I can reasonably estimate that a company is going to pay out 75% or 85% of its earnings to shareholders as a dividend, my entire perspective on a "market crash" changes. If the underlying business is still generating revenue, a drop in the stock price simply means my potential yield on cost goes up.

Today was a harsh reminder for many investors that capital gains are never guaranteed. But it was also a reassuring day for those of us who prioritize cash flow. When you anchor your strategy to actual dividends rather than market sentiment, a 2.66% index drop stops being a crisis and starts becoming a mathematical calculation.

Why Your Trading Bot Failed on Dec 30: A Lesson in Data Outliers

Sutanto Ong, S.E., M.Fin — Tue, 30 Dec 2025 08:50:44 +0000

Hello Dev community, Sutanto Ong here.

As we close out the 2025 trading year, I want to talk about Data Hygiene in financial modeling.

Today, December 30, the Jakarta market (JKSE) dropped -0.41% to 8,609. Yesterday, it rallied. If you are training a Machine Learning model on this week's data, you are likely introducing significant bias.

The "Window Dressing" Noise Yesterday's price action was artificial—driven by institutions marking up portfolio values for year-end reporting. Today's price action (Net Foreign Sell ~Rp728B) is the mean reversion.

If your algorithm treats Dec 29-30 as "normal market behavior," your backtest will fail in January.

Signal: Low.

Noise: High.

The "Clean" Data Points When traditional market data is corrupted by institutional flows, I look for decentralized signals.

Bitcoin ($87,246): This price is retail-driven and 24/7. It holds the $87k level regardless of banking holidays.

Gold (~$4,375): A global macro variable, less affected by local Jakarta fund flows.

My Code for 2026: I am adjusting my weights. I am reducing the significance of "End-of-Month" price data in my models due to the "Window Dressing" effect observed this week. Instead, I am increasing the weight of FDI Flows and Currency Stability (USD/IDR at 16,778) as leading indicators for the new "Fiscal Dominance" regime.

Takeaway: Don't just ingest data. Understand the incentives generating the data. Happy coding and Happy New Year.

https://www.hebitalwealthcollege.com/

Why I Hard-Code "Sleep Mode" into My Trading Logic on Christmas Eve

Sutanto Ong, S.E., M.Fin — Wed, 24 Dec 2025 09:36:06 +0000

Hello Dev community, Sutanto here.

I usually write about Fintech infrastructure and market data analysis. But today, December 24, I want to talk about an "edge case" in financial algorithms: Holiday Liquidity Hazards.

As a former Investment Director who now focuses on data-driven decision-making, I often get asked by developers building trading bots: "Should I let my bot run 24/7?"

The answer, especially today, is NO.

The Bug in the System: Low Liquidity Even though the Indonesian Stock Exchange (IDX) is open today and the NYSE is open until 1:00 PM ET, the quality of the data is poor.

Slippage: With institutional desks empty, the spread between Bid and Ask widens. Your algorithm might execute a "Buy" at a price significantly higher than fair value.

False Signals: Low volume means "noise" looks like "trend." Yesterday, the JKSE index drifted to 8,584. An RSI indicator might scream "Oversold," but it’s not oversold—it’s just empty.

The "Human" Exception Handling In software engineering, we write try...catch blocks to handle errors. In financial engineering, the ultimate error handler is the human operator knowing when to stop.

If you are back-testing a strategy, you will often see that excluding holiday weeks improves your Sharpe Ratio (risk-adjusted return).

My Commit for Today: if (date == "2025-12-24") { execute_trade = false; return "Go_Home"; }

We spend all year optimizing code for speed (latency). Today, optimize for downtime. Gold ($4,495) and Bitcoin ($86,879) will still be there tomorrow.

Happy Holidays to all the devs pushing code today.
https://www.hebitalwealthcollege.com/