🚀 How I Built a Frontend-Only Telemetry Dashboard with React & EdgeOne Pages

Unifying JSON Telemetry Formats into a Visual Dashboard

🧠 Overview

In this tutorial, I’ll walk you through how I built and deployed a telemetry unifier dashboard entirely in the browser using React + TypeScript + Chart.js, hosted on Tencent Cloud EdgeOne Pages.

You’ll learn:

• How to handle multiple telemetry data formats using TypeScript
• Unify and visualize telemetry in charts and tables (client-side)
• Deploy the frontend to EdgeOne Pages (no backend required)

🎯Problem Statement

In real-world industrial IoT environments, telemetry data often arrives in multiple inconsistent JSON formats — especially across different devices or vendors.

We focused on a peculiar case with two turbine generators at NTPC-Korba:

Turbine TG-01 emits flat JSON with UNIX timestamps (milliseconds)

Turbine TG-02 sends nested JSON with ISO-8601 timestamps

This difference makes it difficult for site data engineers to:

Visualize telemetry trends reliably

Perform comparative analysis

Monitor for preventive or breakdown maintenance

Sample JSONs:

`// TG01
{
"deviceID": "tg01-ntpc-korba",
"deviceType": "TurbineGenerator",
"location": "india/chhattisgarh/ntpc-korba/power-block-1",
"timestamp": 1724490540000,
"startTime": 1724486400000,
"endTime": 1724490540000,
"operationStatus": "shutdown",
"temp": 49,
"vibration": 5.2
}

`---

// TG02
{
"device": {
"id": "tg02-ntpc-korba",
"type": "TurbineGenerator"
},
"startTime": "2024-08-24T08:00:00Z",
"endTime": "2024-08-24T09:23:00Z",
"timestamp": "2024-08-24T09:23:00Z",
"country": "india",
"state": "chhattisgarh",
"plant": "ntpc-korba",
"block": "power-block-2",
"data": {
"status": "overheating",
"temperature": 49,
"vibration": 7.6
}
}


My goal was to:

• Upload multiple JSON files with different schemas
• Convert them into a unified telemetry structure
• Visualize the unified data with filters, charts, and export options.

🔧 Tech Stack

Layer	Tool / Library
Frontend	React, TypeScript, Chart.js
Backend	None (Fully Frontend-Based)
Database	Browser Memory (in-memory)
Hosting	Tencent EdgeOne Pages

📁 Unifying JSON Telemetry Data in the Browser with TypeScript**

There is no Flask or server-side backend involved.

The app uses TypeScript functions to:

• Detect which telemetry format is uploaded
• Normalize both formats into a unified schema
• Store and display data in tables and visual charts.

Key function: unifyTelemetryData()

export function unifyTelemetryData(rawData) {
if (isFile1Format(rawData)) {
// Handle TG01
} else {
// Handle TG02
}
}


Data is loaded using FileReader and parsed in the browser:

reader.readAsText(file);

📊 Building the Dashboard UI

I used React + Chart.js to create a clean dashboard with:

• ✅ Upload JSON files
• 📈 Line chart (Temperature over time)
• 📊 Bar chart (Status vs Temp)
• 🔍 Filter: device ID, temperature range, status
• 📥 Export as CSV Everything runs in the browser — no page reload, no backend API calls

🌍 Hosting on EdgeOne Pages (Frontend)

🔨 Step-by-Step:

1. Build React App
   npm run build

2. Create edgeone.yaml
   This file configures EdgeOne Pages to deploy the build directory.
   name: telemetry-dashboard
buildCommand: npm run build
outputDirectory: build

3. Connect GitHub Repo to EdgeOne Pages

• Go to EdgeOne Pages Console
• Click Create Site
• Choose GitHub and select your repo
• Point to main branch and /build folder.

1. Deploy

EdgeOne will automatically run the build and serve it over CDN.

📥 Upload Flow (Recap)

• 🗂 User uploads two JSON files
• 🧠 Data unified inside browser using TypeScript
• 📉 Charts update with unified data
• 📤 User can filter & download as CSV

🎁 Final Thoughts

The Kepler Plan challenge inspired me to build something both technically interesting and visually clean.

Tencent EdgeOne Pages proved to be the ideal platform for:

• 📦 Lightweight app hosting
• 🌍 Fast global delivery
• ✅ No backend ops overhead

📎 Resources

My Github Repo: (https://github.com/Soum1989/telemetry-unifier-kepler)
EdgeOne Pages Docs: (https://cloud.tencent.com/document/product/1709)
🧠 Learn more about Tencent Kepler Plan: (https://trtc.io/blog/details/tencent-kepler-plan)
🎥 Watch on YouTube:
(https://youtu.be/hUB1RP0Du2g)

💬 Want to Try It?

Visit the deployed app here:
(https://telemetry-unifier-kepler.edgeone.app/)

`

`