Renderers

Overview #

edgeSuite uses standardized renderers across its core Visualizations. These renderers handle how data is presented. edgeSuite supports the following base renderers:

Color Renderer Defines color on different elements within a Visualization.
Date Renderer Provides formatting options for the date values.
Icon Renderer Defines graphical elements used to represent values in data.
Number Renderer Provides formatting options for numeric values
Text Renderer Defines font styles within a Visualization.
Gauge Renderer Defines gauge elements used to represent numeric values in data.
Image Source Renderer Available only in the Table Visualization. Converts image source strings (either URLs or data:image strings) into rendered images.

Static vs. Derived Renderers #

Renderers support the notion of static or derived.

Static #

Static renderers are used to apply the same properties to all records. This ensures a consistent visual presentation regardless of what is in the data. Date and Number are examples of static renderers.

Derived #

Derived renderers allow values in the data to alter presentation. ColorIcon, and Text support derived renderers as well as static renderers.

For example, it is rare that you want the same icon to be presented for each row of in a table or each list item within a list. Users typically want an icon to change based on a value in the underlying data, to either uniquely identify the record, or convey status for the record. Derived renderers allow a value within a record to be evaluated by rules, which determine which icon should be used.

The “Derived” option uses a concept called Rule Sets, which is just a collection of rules. Rule Sets map values in data to a specific presentation, and are used to determining how those values get rendered. See Rule Sets for more information.

Label Options Inside of Renderers #

Labels provide context for values inside of visualizations. The presence of label options will vary based on visualization type. For example:

  • Table visualizations
    Tables have column headers which act as labels for values in that column. As a result, table renderers do not expose options for labels inside of cells.
  • List visualizations
    List visualizations do not have column headers, and sometimes values inside list items require some context to be understood. The list’s item renderer allows for an optional “label”, which is positioned next to a value to provide context.