Skip to main content

Components

Mango ships with several built-in pages that provide core functionality for monitoring, analyzing, and managing your system. These pages use the same <ma-*> component library available for custom page development, demonstrating patterns you can reuse in your own dashboards.

Built-In Pages​

  • Date Bar -- The time range selector used across Mango pages. Controls date ranges, rollup settings, and auto-update intervals for charts and tables.
  • Events Page -- View, filter, acknowledge, and annotate system alarms and events with sortable tables and alarm-level filtering.
  • Data Point Details -- Deep-dive into a single data point with value history, statistics, charts, comments, and related events.
  • Users and Roles -- Manage user accounts, assign roles and permissions, configure alarm email notifications, and control session behavior.

Dashboard Examples and Demos​

  • Enabling Auto Scale -- Configure dashboards built with the Dashboard Designer to scale and fit any screen size using the auto-scale feature.
  • Pipes Demo -- A walkthrough of using <ma-switch-img> to build pipe segment visualizations that change color based on multi-state data point values.
  • Useful Resources -- Links to external documentation for AngularJS, Angular Material, and other tools used in Mango UI development.