Skip to main content

Design Guide

Introduction​

This guide outlines best practices and key concepts for configuring Irys, a powerful model-driven visualization platform. Irys allows you to create dynamic, data-rich dashboards and navigation structures based on your asset model.

Key Concepts​

  1. Model-Driven Visualizations: All visualizations in Irys are driven by the asset model created in Irys Frame. The reasons for this are:
    • Simplify displaying heterogenous data
    • Reduce repetitive tasks, you should only need to define the data once
    • Make it easier to build and maintain a large number of dashboards
  2. Configuration-Based Displays: Irys uses a hierarchical (tree) structure to configure visualizations. While this approach is more abstract than a drag-and-drop configuration, the reasons for this are:
    • Build advanced functionality such as dynamically generating pages, components, lists based on asset data.
    • Allow for a greater level of flexiblity where capabilities can be reused in many interesting ways, for example a KPI card can be used by itself, it can be dynamically generated based on a group of assets, or it can be dynamically generated based on a group of assets and displayed on a map. This same KPI component has formulas built in to change the color of the card, and these formulas and color changing capabilities will be usable on other components such as trends, gauges, etc.
    • Responsive web design to re-order and re-size components based on the screen size
    • Automatically optimize dashboards for mobile

Step-by-Step Configuration Process​

  1. Plan Your Structure: Sketch out your desired dashboard layout and navigation structure.

  2. Set Up Navigation: Configure your top-level Views, ViewGroups, and ViewTabs.

  3. Create Layouts: Use Cards and Groups to organize your page layouts.

  4. Add Visualization Components: Populate your layouts with appropriate data visualization components.

  5. Configure Data Mapping: Set Asset Name fields or filters at appropriate levels to pipe data into the displays.

  6. Review and Refine: Test your configuration, ensuring all components are displaying correctly and data is mapping as expected.

Design Principles​

  1. Drill Down: Start at a high level overview and create a navigation structure for progressively more detail.

  2. Reusability: Leverage the dynamic generation of components using the filter with ViewGroup to create page templates for many similar assets.

Structuring Your Configuration​

1. Navigation​

Pages (#View)​

  • Use the View component to create new pages.
  • Set the Path field to specify the exact URL for the page.

Left Side Navigation Grouping (#ViewGroup)​

  • Use ViewGroup to create expandable groups of dynamically generated pages.
  • Set a Filter to determine which assets create links in the sidebar.

Top Navigation Tabs (#ViewTab)​

  • Use ViewTab to create top tab navigation.
  • Add child pages under the ViewTab for each desired tab.

2. Layout​

Cards​

  • Use Card components to group related information.
  • Adjust width, height, and padding fields for customization.

Groups​

  • Use Group components to organize cards or other components.
  • Set display to column or row for vertical or horizontal stacking.
  • Use justify to align child components.

3. Data Visualization Components​

Choose from various components like:

  • Trend and BarChart for time-series data
  • Spark for compact trend visualization
  • KPI for key performance indicators
  • RadialGauge for gauge-style displays

4. Lists and Tiles​

Use List and Tile components with child elements like ListItem, ListSpark, and ListBar to create dynamic, data-driven tables.

Rules of Data Mapping​

Use the hierarchy in your data model to dynamically create dashboards, here are some simple rules:

  1. Data flows to child components
  2. Data can be a single asset selected by Asset Name, or a collection of assets (grouped by a filter)
  3. Filtering takes into account the data from the parent
  4. Data mapping is very flexible, so you can overwrite data at the child level when needed.

Conclusion​

Effective Irys configuration requires a good understanding of your asset model, clear visualization goals, and strategic use of Irys's hierarchical configuration system. By following these guidelines and leveraging Irys's powerful features, you can create intuitive, data-rich dashboards that provide valuable insights into your operations.

Refer to the specific component documentation for detailed configuration options and best practices for each component type.