Energy Analytics Dashboard

Overview

Customer-facing analytics portal for an AI-powered energy optimisation platform targeting commercial real estate portfolios. The application gives facility managers and sustainability officers a real-time view of energy consumption, AI-driven savings, and regulatory compliance across their entire building estate — from portfolio level down to individual device measurement points.

Architecture

React SPA (custom Webpack — no meta-framework)
  ├── OpenAPI-generated TypeScript client
  │     └── Energy Platform REST API (IoT device telemetry)
  │
  ├── Analytics module
  │     └── Recharts — adaptive multi-axis trend charts
  │           dynamic X-tick rotation · dual Y-axis scaling
  │
  ├── GEG Compliance module (German Building Energy Act)
  │     └── Document management · structured PDF downloads
  │
  └── Auth module
        └── 2FA flow · DE/EN i18n (i18next) · Mitt event bus

Org tree: Portfolio → Building → Floor → Device → Measurement

Key Contributions

• Custom Webpack setup (no meta-framework) giving fine-grained control over code splitting, chunking strategy, and bundle analysis — critical for a data-heavy SPA
• Generated a fully typed TypeScript client from OpenAPI specs, enforcing strict contract alignment between frontend and backend across every API call
• Developed adaptive multi-axis trend charts (Recharts) with dynamic X-tick rotation logic that calculates optimal angle and interval from viewport width at runtime
• Worked on the multi-tenant organisation hierarchy with a tree-view navigator for drilling into building portfolios down to individual device measurement points
• GEG (German Building Energy Act) compliance reporting section with structured document management and downloadable regulatory documents
• 2FA authentication flow, dark/light theme switching, DE/EN localisation (i18next), and a typed Mitt event emitter for global UI state

Code Examples

export const xTickParams = (numValues: number | undefined) => {
  if (!numValues)
    return { angle: 0, margin: 10, interval: 0, space: 0, bottom: 0, dx: 0, dy: 0 } as const;

  const parentElement = document.querySelector("main") || document.querySelector("body");
  const width = parentElement?.clientWidth || 400;
  const space = width / numValues;

  if (space < 27)
    return { bottom: 70, angle: -90, margin: 40, interval: Math.round(27 / space), dx: -5, dy: -32, space } as const;
  if (space < 40)
    return { bottom: 70, angle: -90, margin: 40, interval: 0, dx: -5, dy: -32, space } as const;
  if (space < 100)
    return { bottom: 55, angle: -40, margin: 36, interval: 0, dx: 0, dy: -28, space } as const;

  return { bottom: 15, angle: 0, margin: 10, interval: 0, dx: 0, dy: 0, space } as const;
};

// In TrendsChart component — recalculates on resize:
const [xTick, setXTick] = useState(xTickParams(chartData?.length));

useEffect(() => {
  const handleResize = debounce(() => setXTick(xTickParams(chartData?.length)), 100);
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, [chartData?.length]);

Tech Stack