Data Visualization

MES Production Analytics

The analytics layer of the Amway India MES — shift-aware production KPI dashboards serving 5 machine line variants, with conditional live data sync, a TV/kiosk floor display mode, and 11 custom chart components built for operational decision-making at every level of the facility.

🏢 Emphatic Sense Technologies2023

🔒 Source & live demo not available — built under NDA

About the Project

This was the visibility layer of the Amway India MES platform, purpose-built to answer what production managers asked most: what's happening on the floor right now, and what does the trend tell me? The dashboard surfaced live production KPIs, machine downtime breakdowns, and quality trend charts in a single view — and was aware of shift state, showing distinct modes for shifts yet to start, actively running, and completed.

The same dashboard architecture served five different machine line variants — Tablet Pack TP1, TP2, Personal Care, PP, and Beauty — each backed by its own microservice but sharing a unified component tree. React Query polling activates at 60-second intervals only while a shift is running and shuts off automatically when the shift ends, preventing unnecessary server load during off-hours. Historical and analytical charts use on-demand fetching. A TV/kiosk mode — driven by a Zustand global toggle — switches the entire dashboard into a high-contrast dark layout for wall-mounted floor displays.

Core Concepts

📊

Production KPI Dashboard

Tile-based live dashboard covering throughput, downtime rates, defect counts, and OEE — shift-state aware, showing SHIFT YET TO START, SHIFT RUNNING, and SHIFT ENDED modes with a last-updated timestamp and manual refresh.

📉

Downtime Analysis

Pareto charts rank the dominant causes of production loss by impact, helping maintenance teams prioritize interventions. Separate Pareto variants for raw downtime and weighted contribution.

📈

Trend & Timeline Charts

11 chart components across Chart.js and ApexCharts — grouped bar, stacked bar, comparison, timeline series, heat map, team performance, and doughnut — each matched to a specific operational question with interactive legends and time-window selectors.

🔄

Shift-Aware Live Sync

React Query polling activates at 60-second intervals when a shift is running and stops automatically when it ends. Historical and analytical charts use on-demand fetching, keeping server load proportional to actual need.

📺

TV / Kiosk Floor Mode

A Zustand-backed global toggle switches the dashboard into a high-contrast dark layout optimised for wall-mounted screens in the plant — purpose-built for the displays on the production floor.

Key Challenges & Solutions

Challenge: Consistent Dashboard Experience Across Multi-Device Environments

Ensuring a consistent and performant dashboard experience across heterogeneous devices (tablets, PCs, and TV/kiosk displays) with varying screen sizes.

✓Solution: Built a device-adaptive dashboard with conditional polling based on shift activity, memoized chart transformations, and a dedicated TV/kiosk mode — optimizing rendering behavior and layout to deliver a consistent experience across devices.

Challenge: Same Data, Different Audiences

Managers needed summary rollups while engineers needed granular breakdowns — the same underlying data had to render very differently depending on the viewer's role.

✓Solution: Built chart components as configurable display primitives accepting aggregation level, chart type, and time window as props — one component tree served both audiences without duplicating logic. Tab-level access control via usePermittedTabs further scoped which views each role could reach.

Challenge: One Architecture, Five Machine Line Variants

Five distinct production lines — Tablet Pack TP1, TP2, Personal Care, PP, and Beauty — each had its own backend microservice and operational context but needed a consistent dashboard experience.

✓Solution: Built a shared MachineLineDashboard and DashboardLayout component tree driven by a useMachineLineData hook that abstracts line-specific data fetching. Each variant mounts the same components with different API targets and shift plan context — no duplicated dashboard code across the five lines.

Tech Stack

Frontend

ReactChakraUIReact QueryZustand

Visualization

ChartJSApex Charts

Data

RESTful APIsConditional polling with React Query5 backend microservices

Impact Metrics

Chart Components Built

60s

Live Refresh During Active Shifts

Machine Line Variants

My Role

Title

Systems Engineer

Duration

May 2022 – Nov 2025

Key Responsibilities

Built the Machine Line module end-to-end — dashboard, tasks, log book, AMC, centerline, and reports
Shift-aware KPI dashboard with SHIFT YET TO START / RUNNING / ENDED lifecycle and last-updated timestamp
11 custom chart components across Chart.js and ApexCharts — Pareto, grouped bar, stacked bar, comparison, heatmap, timeline, team performance, doughnut
Conditional React Query polling: 60-second auto-refresh during active shifts, on-demand after shift end
TV/kiosk dark mode for factory floor wall displays via Zustand global toggle
Single dashboard architecture serving 5 machine line variants (TP1, TP2, PP, PC, Beauty) via shared component tree and useMachineLineData hook
Component-level tab access control via usePermittedTabs — Dashboard, Task, and LogBook tabs scoped by user role

Up Next

Six Sigma Digitization

Structured DMAIC workflow digitization for Granules India's Green Belt quality improvement program.

Next Case Study