Design and Implementation of a Unified Monitoring Dashboard – A Case Study from 37 Interactive Entertainment

Monitoring and alerting provide real‑time visibility of business health by turning abstract information into graphical and data‑driven displays. Beyond Internet companies, many industries are building their own big‑data analysis and monitoring platforms.

The original monitoring wall at 37 Interactive Entertainment’s Technology Center suffered from scattered data sources (Zabbix, Nagios, custom back‑ends), inconsistent interfaces, and a lack of unified front‑end style. Initially it consisted of only four screens.

A self‑organized project team, dubbed the "Unpleasant Monitoring Wall Project," was formed to redesign the wall. After the effort, twelve monitors now display core data with a unified, high‑tech visual style.

Project timeline and management

Development started on October 11 and finished on November 23, taking just over a month. The team considers the platform a product that will continue to be iterated.

Key technical challenges

1. Backend data integration : Consolidating data from page games, mobile games, and overseas services into Elasticsearch, standardizing alert formats, and providing multi‑dimensional aggregation (e.g., geographic distribution of users).

2. Real‑time performance : Ensuring low latency so issues can be identified and resolved instantly.

3. Unified API : Designing a single API contract so the front‑end only needs to handle data format.

Front‑end innovations

• Modular JavaScript : Adopted RequireJS for module management, enabling parallel development and future extensions.

• ECharts customization : Tailored chart colors, gradients, and data presentation for a consistent visual identity.

• Performance optimizations : Refined DOM operations and implemented periodic refresh strategies to avoid memory leaks.

• 3D map visualization : Utilized HTML5, ECharts/Three.js, and other mature plugins to render a global PV map with animated 3D arcs representing user‑to‑server connections.

Design considerations

The UI adopts a “tech‑blue” palette with a black‑blue background to convey stability and futuristic aesthetics, inspired by sci‑fi movie interfaces.

Outcome

The new monitoring wall unifies data display across twelve screens, improves visual appeal, and provides a platform for the team to gain experience in data visualization and front‑end architecture. The project is now entering its second phase for further optimization based on user feedback.