Configuration Options

• Depth per Layer: Adjustable ring depth (range: 20px - 150px, default: 60px)
• Orbit Controls: Toggle between Enabled/Disabled for interactive navigation
• Background Color: Customizable 3D scene background (default: #0a0a15)

Data Format

JSON Structure

The component accepts hierarchical data in JSON format with the following properties:

json

{

  "name": "Parent Category",

  "value": 100,

  "color": "#FFF",

  "children": [

    {

      "name": "Child Category",

      "value": 50,

      "color": "#FF0000",

      "children": [

        {

          "name": "Grandchild",

          "value": 25

        }

      ]

    }

  ]

}

Required Properties

• name (String): Display label for the segment
• value (Number): Numeric value determining segment size
• children (Array, optional): Nested objects following the same structure

Optional Properties

• color (String): Hex color code for the segment (e.g., "#FFA726")
• If color is omitted, the component auto-generates a color for that segment

Configuration

Depth per Layer

• Purpose: Controls vertical spacing between hierarchy rings
• Range: 20px - 150px
• Default: 60px
• Impact: Larger values increase ring separation, improving readability for deep hierarchies

Enable Orbit Controls

• Options: Enabled / Disabled
• Default: Enabled
• Purpose: Toggles 3D rotation and panning interactions
• Use Case: Disable for static displays or embedded dashboards

Background Color

• Format: Hex color code (e.g., #0a0a15)
• Default: Dark navy (#0a0a15)
• Purpose: Sets the 3D scene background color

Implementation Guide

Basic Usage

1. Add the component to your OutSystems screen
2. Prepare your data in the required JSON format
3. Pass the data to the component's input parameter