HyperPBI component catalog

HyperPBI 2.0 contract

Every component requires a globally unique stable id. Field Manifest aliases are resolved during preparation. Omit dataset to use powerbi, or select a named logical dataset.

uiAction, universal interaction, and safe event-specific interactions are separate and optional. External filters require a true model-column target; identity selection can follow source-row lineage.

Maturity governance

Maturity is explicit per canonical descriptor and independent of complexity. Stable records renderer, strict schema, applicable fields, Inspector metadata, valid example, responsive/empty/accessibility behavior, focused tests, and documentation evidence. Beta is implemented with an evidence gap; experimental is intentionally unstable; legacy is compatibility-only; deprecated is migration/warning-only. AI excludes legacy/deprecated and gates beta/experimental authoring.

Application patterns

kpi-row

Required: id, fields

{
  "type": "pattern",
  "pattern": "kpi-row",
  "id": "summary",
  "fields": [
    "revenue",
    "orders"
  ]
}

trend-and-breakdown

Required: id, date, measure, breakdown

{
  "type": "pattern",
  "pattern": "trend-and-breakdown",
  "id": "performance",
  "date": "month",
  "measure": "completed",
  "breakdown": "status"
}

record-explorer

Required: id, columns, details

{
  "type": "pattern",
  "pattern": "record-explorer",
  "id": "records",
  "columns": [
    "recordId",
    "status"
  ],
  "details": {
    "titleField": "recordId",
    "fields": [
      "status"
    ]
  }
}

map-and-details

Required: id

{
  "type": "pattern",
  "pattern": "map-and-details",
  "id": "locations",
  "title": "Locations"
}

Shared references

Shared properties: type, id, dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction

UI actions: clearFilters, setTab, setState, toggleState, toggleSidebar, openOverlay, closeOverlay, toggleOverlay, setStep, nextStep, previousStep, showToast, dismissToast, scrollTo, refresh.

Components

grid — Gridstable

Responsive 12-column dashboard sections

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Allowed: ariaLabel, children, className, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, gap, hidden, icon, id, interaction, interactions, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility, width

Related: flex, section

Valid 2.0 component example

{
  "type": "grid",
  "id": "grid",
  "title": "Responsive grid",
  "span": 12,
  "className": "hp-example-grid",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-grid { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "column",
  "columns": 12,
  "gap": 12,
  "children": [
    {
      "type": "kpi",
      "id": "kpi",
      "title": "Total records",
      "span": 4,
      "className": "hp-example-kpi",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-kpi { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "field": "__field_key__",
      "aggregation": "count",
      "format": "integer",
      "intent": "primary"
    },
    {
      "type": "text",
      "id": "supporting_text",
      "span": 12,
      "text": "Supporting content",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      }
    }
  ]
}

flex — Flex row/columnstable

Compact toolbars and flowing groups

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Related: grid, toolbar

Valid 2.0 component example

{
  "type": "flex",
  "id": "flex",
  "title": "Flexible content row",
  "span": 12,
  "className": "hp-example-flex",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-flex { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "row",
  "columns": 12,
  "gap": 10,
  "children": [
    {
      "type": "select",
      "id": "select",
      "title": "Status",
      "span": 4,
      "className": "hp-example-select",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-select { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "=",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Status",
      "placeholder": "Choose status",
      "defaultValue": ""
    },
    {
      "type": "searchBox",
      "id": "searchBox",
      "title": "Search",
      "span": 4,
      "className": "hp-example-searchBox",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-searchBox { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "contains",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Search",
      "placeholder": "Choose search",
      "defaultValue": ""
    }
  ]
}

split — Split layoutbeta

Two coordinated content regions

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Related: leftPanel, rightPanel

Valid 2.0 component example

{
  "type": "split",
  "id": "split",
  "title": "Split workspace",
  "span": 12,
  "className": "hp-example-split",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-split { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "row",
  "columns": 12,
  "gap": 12,
  "children": [
    {
      "type": "section",
      "id": "section",
      "title": "Summary",
      "span": 5,
      "className": "hp-example-section",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-section { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "direction": "column",
      "columns": 12,
      "gap": 8,
      "children": [
        {
          "type": "text",
          "id": "supporting_text",
          "span": 12,
          "text": "Supporting content",
          "interaction": {
            "enabled": false,
            "internalMode": "none",
            "externalMode": "none"
          }
        }
      ]
    },
    {
      "type": "section",
      "id": "section_2",
      "title": "Details",
      "span": 7,
      "className": "hp-example-section",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-section { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "direction": "column",
      "columns": 12,
      "gap": 8,
      "children": [
        {
          "type": "text",
          "id": "supporting_text_2",
          "span": 12,
          "text": "Supporting content",
          "interaction": {
            "enabled": false,
            "internalMode": "none",
            "externalMode": "none"
          }
        }
      ]
    }
  ]
}

section — Sectionstable

Named content grouping

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Related: card, collapsible

Valid 2.0 component example

{
  "type": "section",
  "id": "section",
  "title": "Operations section",
  "span": 12,
  "className": "hp-example-section",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-section { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "column",
  "columns": 12,
  "gap": 8,
  "children": [
    {
      "type": "text",
      "id": "section_content",
      "span": 12,
      "text": "Supporting content",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      }
    }
  ],
  "collapsible": true,
  "defaultCollapsed": false
}

toolbar — Toolbarstable

Compact controls above content

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Related: flex

Valid 2.0 component example

{
  "type": "toolbar",
  "id": "toolbar",
  "title": "Dashboard toolbar",
  "span": 12,
  "className": "hp-example-toolbar",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-toolbar { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "row",
  "columns": 12,
  "gap": 6,
  "children": [
    {
      "type": "select",
      "id": "select",
      "title": "Status",
      "span": 4,
      "className": "hp-example-select",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-select { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "=",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Status",
      "placeholder": "Choose status",
      "defaultValue": ""
    },
    {
      "type": "button",
      "id": "button",
      "title": "Reset",
      "span": 2,
      "className": "hp-example-button",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-button { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "label": "Reset filters",
      "action": "clearFilters"
    }
  ]
}

leftPanel — Left panelbeta

Persistent filter rail

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Compatibility: Legacy left-panel rail. Use app.sidebar or an offcanvas component for new dashboards.

Related: rightPanel, offcanvas

Valid 2.0 component example

{
  "type": "leftPanel",
  "id": "leftPanel",
  "title": "Filter panel",
  "span": 12,
  "className": "hp-example-leftPanel",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-leftPanel { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "column",
  "columns": 12,
  "gap": 8,
  "children": [
    {
      "type": "select",
      "id": "select",
      "title": "Category",
      "span": 4,
      "className": "hp-example-select",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-select { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "=",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Category",
      "placeholder": "Choose category",
      "defaultValue": ""
    },
    {
      "type": "dateRange",
      "id": "dateRange",
      "title": "Date range",
      "span": 4,
      "className": "hp-example-dateRange",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-dateRange { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "between",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Date range",
      "placeholder": "Choose date range",
      "defaultValue": ""
    }
  ],
  "width": 280,
  "collapsible": true,
  "defaultCollapsed": false
}

rightPanel — Right panelbeta

Persistent details rail

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: No
UI action: Yes

Compatibility: Legacy right-panel rail.

Related: leftPanel, offcanvas

Valid 2.0 component example

{
  "type": "rightPanel",
  "id": "rightPanel",
  "title": "Detail panel",
  "span": 12,
  "className": "hp-example-rightPanel",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-rightPanel { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "column",
  "columns": 12,
  "gap": 8,
  "children": [
    {
      "type": "detailPanel",
      "id": "detailPanel",
      "title": "Selected record",
      "span": 12,
      "className": "hp-example-detailPanel",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-detailPanel { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "selectedRow": true,
      "emptyText": "Select a record",
      "groups": [
        {
          "title": "Details",
          "fields": [
            "__field_key__"
          ]
        }
      ]
    }
  ],
  "width": 340,
  "collapsible": true,
  "defaultCollapsed": false
}

spacer — Spacerbeta

Small intentional separation

Level: advanced
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, height, hidden, icon, id, interaction, interactions, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "spacer",
  "id": "spacer",
  "title": "Vertical spacing",
  "span": 12,
  "className": "hp-example-spacer",
  "hidden": false,
  "style": {
    "height": 24,
    "minHeight": 24
  },
  "css": ".hp-example-spacer { display: block; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  }
}

divider — Dividerbeta

Subtle visual separation

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "divider",
  "id": "divider",
  "title": "Section divider",
  "span": 12,
  "className": "hp-example-divider",
  "hidden": false,
  "style": {
    "marginTop": 8,
    "marginBottom": 8
  },
  "css": ".hp-example-divider { border-color: #d8dee8; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  }
}

searchBox — Search boxstable

Search all visible row values

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Allowed: action, actionValue, ariaLabel, buttons, className, css, data, dataset, defaultValue, description, disabled, errorText, field, filter, helpText, hidden, icon, id, interaction, interactions, label, max, maxLength, min, multiple, options, orientation, placeholder, prefixIcon, prefixText, props, required, rows, size, slots, span, step, style, subtitle, suffixIcon, suffixText, targets, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "searchBox",
  "id": "searchBox",
  "title": "Search records",
  "span": 4,
  "className": "hp-example-searchBox",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-searchBox { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "contains",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Search records",
  "placeholder": "Search all records…",
  "defaultValue": "",
  "filter": {
    "operator": "contains",
    "value": ""
  }
}

textInput — Text inputbeta

Text field filtering

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "textInput",
  "id": "textInput",
  "title": "Contains text",
  "span": 4,
  "className": "hp-example-textInput",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-textInput { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "contains",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Contains text",
  "placeholder": "Enter text…",
  "defaultValue": "",
  "filter": {
    "operator": "contains",
    "value": ""
  }
}

numberInput — Number inputbeta

Numeric thresholds

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "numberInput",
  "id": "numberInput",
  "title": "Minimum amount",
  "span": 4,
  "className": "hp-example-numberInput",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-numberInput { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Minimum amount",
  "placeholder": "Choose minimum amount",
  "defaultValue": 0,
  "min": 0,
  "max": 1000000,
  "step": 100,
  "filter": {
    "operator": ">=",
    "value": 0
  }
}

slider — Sliderbeta

Bounded numeric filtering

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "slider",
  "id": "slider",
  "title": "Minimum score",
  "span": 4,
  "className": "hp-example-slider",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-slider { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Minimum score",
  "placeholder": "Choose minimum score",
  "defaultValue": 50,
  "min": 0,
  "max": 100,
  "step": 5,
  "filter": {
    "operator": ">=",
    "value": 50
  }
}

select — Selectstable

Compact categorical filtering

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Accessibility: Uses native <select> element.

Valid 2.0 component example

{
  "type": "select",
  "id": "select",
  "title": "Status",
  "span": 4,
  "className": "hp-example-select",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-select { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Status",
  "placeholder": "Choose status",
  "defaultValue": "",
  "options": [
    {
      "label": "Open",
      "value": "Open"
    },
    {
      "label": "Closed",
      "value": "Closed"
    }
  ],
  "filter": {
    "operator": "=",
    "value": ""
  }
}

multiSelect — Multi-selectstable

Filtering by several categories

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "multiSelect",
  "id": "multiSelect",
  "title": "Statuses",
  "span": 4,
  "className": "hp-example-multiSelect",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-multiSelect { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "in",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Statuses",
  "placeholder": "Choose statuses",
  "defaultValue": [],
  "multiple": true,
  "options": [
    {
      "label": "Open",
      "value": "Open"
    },
    {
      "label": "Closed",
      "value": "Closed"
    }
  ],
  "filter": {
    "operator": "in",
    "value": []
  }
}

segmentedControl — Segmented controlbeta

Two to seven high-frequency choices

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Related: buttonGroup

Valid 2.0 component example

{
  "type": "segmentedControl",
  "id": "segmentedControl",
  "title": "Priority",
  "span": 4,
  "className": "hp-example-segmentedControl",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-segmentedControl { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Priority",
  "placeholder": "Choose priority",
  "defaultValue": "",
  "options": [
    {
      "label": "High",
      "value": "High"
    },
    {
      "label": "Medium",
      "value": "Medium"
    },
    {
      "label": "Low",
      "value": "Low"
    }
  ],
  "filter": {
    "operator": "=",
    "value": ""
  }
}

toggle — Togglebeta

Boolean state or view switch

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "toggle",
  "id": "toggle",
  "title": "Active records only",
  "span": 4,
  "className": "hp-example-toggle",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-toggle { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Active records only",
  "placeholder": "Choose active records only",
  "defaultValue": false,
  "filter": {
    "operator": "=",
    "value": true
  }
}

button — Buttonstable

Clear filters or open a view

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Compatibility: Legacy action/actionValue normalized to uiAction internally. Prefer uiAction for new specs.

Valid 2.0 component example

{
  "type": "button",
  "id": "button",
  "title": "Reset filters",
  "span": 2,
  "className": "hp-example-button",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-button { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "change",
    "internalMode": "none",
    "internalScope": "all",
    "externalMode": "none",
    "selectionMode": "replace",
    "multiSelect": false,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "label": "Reset filters",
  "action": "clearFilters",
  "actionValue": ""
}

buttonGroup — Button groupbeta

Small action groups

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "buttonGroup",
  "id": "buttonGroup",
  "title": "View options",
  "span": 4,
  "className": "hp-example-buttonGroup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-buttonGroup { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "change",
    "internalMode": "none",
    "internalScope": "self",
    "externalMode": "none",
    "selectionMode": "replace",
    "multiSelect": false,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "label": "View",
  "defaultValue": "summary",
  "buttons": [
    {
      "id": "summary",
      "label": "Summary",
      "value": "summary",
      "action": "setTab"
    },
    {
      "id": "details",
      "label": "Details",
      "value": "details",
      "action": "setTab"
    }
  ]
}

filterChips — Filter chipsbeta

Visible applied-filter summary

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "filterChips",
  "id": "filterChips",
  "title": "Applied filters",
  "span": 12,
  "className": "hp-example-filterChips",
  "hidden": false,
  "style": {
    "display": "flex",
    "gap": 6,
    "minWidth": 0
  },
  "css": ".hp-example-filterChips { flex-wrap: wrap; }",
  "interaction": {
    "enabled": true,
    "trigger": "change",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  }
}

dateRange — Date rangebeta

Start/end date filtering

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "dateRange",
  "id": "dateRange",
  "title": "Reporting period",
  "span": 4,
  "className": "hp-example-dateRange",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-dateRange { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "between",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Reporting period",
  "placeholder": "Choose reporting period",
  "defaultValue": [
    "2026-01-01",
    "2026-12-31"
  ],
  "filter": {
    "operator": "between",
    "value": [
      "2026-01-01",
      "2026-12-31"
    ]
  }
}

tabs — Tabsstable

Separate overview, map, and details

Level: recommended
Required: type, id, tabs
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, tabs
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, props, size, slots, span, style, subtitle, tabs, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "tabs",
  "id": "tabs",
  "title": "Dashboard views",
  "span": 12,
  "className": "hp-example-tabs",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-tabs { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "click",
    "internalMode": "none",
    "internalScope": "self",
    "externalMode": "none",
    "selectionMode": "replace",
    "multiSelect": false,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "tabs": [
    {
      "id": "overview",
      "title": "Overview",
      "children": [
        {
          "type": "text",
          "id": "overview_content",
          "span": 12,
          "text": "Supporting content",
          "interaction": {
            "enabled": false,
            "internalMode": "none",
            "externalMode": "none"
          }
        }
      ]
    },
    {
      "id": "details",
      "title": "Details",
      "children": [
        {
          "type": "table",
          "id": "table",
          "title": "Records",
          "span": 12,
          "className": "hp-example-table",
          "hidden": false,
          "style": {
            "minWidth": 0
          },
          "css": ".hp-example-table { min-width: 0; }",
          "interaction": {
            "enabled": false,
            "internalMode": "none",
            "externalMode": "none"
          },
          "columns": [
            "__field_key__"
          ],
          "pagination": true,
          "pageSize": 25
        }
      ]
    }
  ]
}

collapsible — Collapsible sectionstable

Hide secondary content

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: Yes
UI action: Yes

Related: accordion

Valid 2.0 component example

{
  "type": "collapsible",
  "id": "collapsible",
  "title": "Optional details",
  "span": 12,
  "className": "hp-example-collapsible",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-collapsible { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "column",
  "columns": 12,
  "gap": 8,
  "children": [
    {
      "type": "text",
      "id": "collapsible_content",
      "span": 12,
      "text": "Supporting content",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      }
    }
  ],
  "collapsible": true,
  "defaultOpen": true
}

accordion — Accordionbeta

Compact grouped filters

Level: standard
Required: type, id, items
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, multiple, defaultOpenItems, items
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, defaultOpenItems, disabled, hidden, icon, id, interaction, interactions, items, multiple, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Accessibility: Supports arrow-key navigation between headers. Enter/Space toggles. Proper aria-expanded.

Compatibility: Legacy accordion with only children wraps into one item automatically.

Related: collapsible

Valid 2.0 component example

{
  "type": "accordion",
  "id": "accordion",
  "title": "Filter groups",
  "multiple": true,
  "defaultOpenItems": [
    "filters"
  ],
  "items": [
    {
      "id": "filters",
      "title": "Filters",
      "children": [
        {
          "type": "select",
          "id": "accordion_status",
          "title": "Status",
          "field": "__field_key__",
          "interaction": {
            "enabled": true,
            "trigger": "change",
            "internalMode": "filter",
            "externalMode": "auto"
          }
        }
      ]
    }
  ],
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  }
}

drawer — Drawer / slide-overlegacy

Selected-record details without leaving context

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen, position, openWhen, stateKey
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, children, className, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, gap, hidden, icon, id, interaction, interactions, openWhen, position, props, size, slots, span, stateKey, style, subtitle, title, tooltip, type, uiAction, variant, visibility, width

Compatibility: Legacy drawer. Normalized to offcanvas internally. Use offcanvas for new specs.

Related: offcanvas, filterDrawer

Valid 2.0 component example

{
  "type": "drawer",
  "id": "drawer",
  "title": "Selected record",
  "span": 12,
  "className": "hp-example-drawer",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-drawer { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "position": "right",
  "width": 360,
  "openWhen": "selectedRow",
  "stateKey": "detail_drawer_open",
  "defaultOpen": true,
  "collapsible": true,
  "children": [
    {
      "type": "detailPanel",
      "id": "detailPanel",
      "title": "Record details",
      "span": 12,
      "className": "hp-example-detailPanel",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-detailPanel { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "selectedRow": true,
      "emptyText": "Select a row",
      "groups": [
        {
          "title": "Overview",
          "fields": [
            {
              "field": "__field_key__",
              "label": "Record",
              "badge": true,
              "copyable": true,
              "format": ""
            }
          ]
        }
      ]
    }
  ]
}

filterDrawer — Filter drawerlegacy

On-demand compact filter controls

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen, position, openWhen, stateKey
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, children, className, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, gap, hidden, icon, id, interaction, interactions, openWhen, position, props, size, slots, span, stateKey, style, subtitle, title, tooltip, type, uiAction, variant, visibility, width

Compatibility: Legacy filter drawer. Use offcanvas for new specs.

Related: drawer, offcanvas

Valid 2.0 component example

{
  "type": "filterDrawer",
  "id": "filterDrawer",
  "title": "Filters",
  "span": 12,
  "className": "hp-example-filterDrawer",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-filterDrawer { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "position": "left",
  "width": 300,
  "openWhen": "always",
  "stateKey": "filter_drawer_open",
  "defaultOpen": false,
  "collapsible": true,
  "children": [
    {
      "type": "select",
      "id": "select",
      "title": "Category",
      "span": 4,
      "className": "hp-example-select",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-select { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "=",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Category",
      "placeholder": "Choose category",
      "defaultValue": ""
    },
    {
      "type": "dateRange",
      "id": "dateRange",
      "title": "Date range",
      "span": 4,
      "className": "hp-example-dateRange",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-dateRange { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "between",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Date range",
      "placeholder": "Choose date range",
      "defaultValue": ""
    }
  ]
}

steps — Stepsbeta

Sequential workflow progression

Level: standard
Required: type, id, items
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, orientation, activeStep, stateKey, clickable, items
Data interaction: Yes
UI action: Yes

Allowed: activeStep, ariaLabel, className, clickable, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, items, orientation, props, size, slots, span, stateKey, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Related: tracking

Valid 2.0 component example

{
  "type": "steps",
  "id": "steps",
  "title": "Workflow progress",
  "span": 12,
  "className": "hp-example-steps",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-steps { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "orientation": "horizontal",
  "activeStep": "review",
  "stateKey": "workflow_steps",
  "clickable": true,
  "items": [
    {
      "id": "draft",
      "label": "Draft",
      "description": "Initial preparation"
    },
    {
      "id": "review",
      "label": "Review",
      "description": "Quality check"
    },
    {
      "id": "complete",
      "label": "Complete",
      "description": "Finalized"
    }
  ]
}

stepper — Stepperlegacy

Sequential app-style flows (legacy)

Level: advanced
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen
Data interaction: Yes
UI action: Yes

Compatibility: Legacy stepper rendered as collapsible section. Use steps for real workflow progression.

Related: steps

Valid 2.0 component example

{
  "type": "stepper",
  "id": "stepper",
  "title": "Workflow step",
  "span": 12,
  "className": "hp-example-stepper",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-stepper { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "direction": "column",
  "columns": 12,
  "gap": 8,
  "children": [
    {
      "type": "infoCard",
      "id": "infoCard",
      "title": "Step instructions",
      "span": 12,
      "className": "hp-example-infoCard",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-infoCard { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "text": "Complete this step before continuing.",
      "intent": "primary"
    },
    {
      "type": "text",
      "id": "step_content",
      "span": 12,
      "text": "Supporting content",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      }
    }
  ],
  "defaultOpen": true
}

kpi — KPI cardstable

One decision-critical number

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Allowed: aggregation, ariaLabel, className, css, data, dataset, disabled, emptyText, field, format, groups, hidden, icon, id, intent, interaction, interactions, items, max, metrics, props, selectedRow, size, slots, span, style, subtitle, text, title, tooltip, type, uiAction, value, variant, visibility

Valid 2.0 component example

{
  "type": "kpi",
  "id": "kpi",
  "title": "Total value",
  "span": 3,
  "className": "hp-example-kpi",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-kpi { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "field": "__field_key__",
  "aggregation": "sum",
  "format": "currency",
  "intent": "primary"
}

metricGrid — Metric gridstable

Three to six summary metrics

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "metricGrid",
  "id": "metricGrid",
  "title": "Executive metrics",
  "span": 12,
  "className": "hp-example-metricGrid",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-metricGrid { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "metrics": [
    {
      "title": "Records",
      "aggregation": "count",
      "format": "integer",
      "intent": "primary",
      "prefix": "",
      "suffix": ""
    },
    {
      "title": "Total value",
      "field": "__measure_field_key__",
      "aggregation": "sum",
      "format": "currency",
      "intent": "success",
      "prefix": "$",
      "suffix": ""
    },
    {
      "title": "Open records",
      "field": "__field_key__",
      "aggregation": "countWhere",
      "where": {
        "field": "__category_field_key__",
        "equals": "Open"
      },
      "format": "integer",
      "intent": "warning",
      "metric": "open_records"
    }
  ]
}

infoCard — Info cardbeta

Short explanatory or record content

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "infoCard",
  "id": "infoCard",
  "title": "Record summary",
  "span": 4,
  "className": "hp-example-infoCard",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-infoCard { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "field": "__field_key__",
  "aggregation": "first",
  "format": "",
  "intent": "neutral",
  "text": "Context and guidance for this dashboard.",
  "value": "Optional static fallback"
}

statusBadge — Status badgestable

Compact status labeling

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "statusBadge",
  "id": "statusBadge",
  "title": "Current status",
  "span": 3,
  "className": "hp-example-statusBadge",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-statusBadge { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "field": "__field_key__",
  "aggregation": "first",
  "format": "",
  "intent": "success",
  "value": "Active"
}

progressBar — Progress barstable

Progress toward a target

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "progressBar",
  "id": "progressBar",
  "title": "Completion",
  "span": 4,
  "className": "hp-example-progressBar",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-progressBar { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "field": "__measure_field_key__",
  "aggregation": "first",
  "format": "percent",
  "intent": "primary",
  "value": 72,
  "max": 100
}

alert — Alertstable

Actionable exception banner

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "alert",
  "id": "alert",
  "title": "Attention required",
  "span": 12,
  "className": "hp-example-alert",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-alert { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "field": "__field_key__",
  "aggregation": "count",
  "format": "integer",
  "intent": "warning",
  "text": "Some records require review.",
  "value": "Review"
}

statList — Stat listbeta

Compact label/value summary

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "statList",
  "id": "statList",
  "title": "Record statistics",
  "span": 4,
  "className": "hp-example-statList",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-statList { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "items": [
    {
      "label": "Owner",
      "field": "__field_key__",
      "format": ""
    },
    {
      "label": "Amount",
      "field": "__measure_field_key__",
      "format": "currency"
    },
    {
      "label": "Target",
      "value": 100,
      "format": "integer"
    }
  ]
}

detailPanel — Detail panelstable

Selected-row fields, groups, badges, and copyable values

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, format, intent, metrics, value, text, items, max, selectedRow, groups, emptyText
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "detailPanel",
  "id": "detailPanel",
  "title": "Selected record",
  "span": 5,
  "className": "hp-example-detailPanel",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-detailPanel { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "selectedRow": true,
  "emptyText": "Select a table row, chart point, map feature, or timeline event.",
  "groups": [
    {
      "title": "Overview",
      "fields": [
        {
          "field": "__field_key__",
          "label": "Record",
          "badge": true,
          "copyable": true,
          "format": ""
        },
        {
          "field": "__category_field_key__",
          "label": "Category"
        }
      ]
    },
    {
      "title": "Measures",
      "fields": [
        {
          "field": "__measure_field_key__",
          "label": "Amount",
          "format": "currency",
          "copyable": true
        }
      ]
    }
  ],
  "items": [
    {
      "label": "Record",
      "field": "__field_key__"
    },
    {
      "label": "Amount",
      "field": "__measure_field_key__",
      "format": "currency"
    }
  ]
}

timeline — Timeline / activity feedbeta

Operational history and status events

Level: recommended
Required: type, id, dateField, titleField
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, dateField, titleField, categoryField, statusField, descriptionField, sortDirection, limit
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, categoryField, className, css, data, dataset, dateField, descriptionField, disabled, hidden, icon, id, interaction, interactions, limit, props, size, slots, sortDirection, span, statusField, style, subtitle, title, titleField, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "timeline",
  "id": "timeline",
  "title": "Activity timeline",
  "span": 6,
  "className": "hp-example-timeline",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-timeline { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "dateField": "__date_field_key__",
  "titleField": "__field_key__",
  "categoryField": "__category_field_key__",
  "statusField": "__status_field_key__",
  "descriptionField": "__description_field_key__",
  "sortDirection": "desc",
  "limit": 50
}

card — Cardstable

Professional content container with header

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen, padding, header, actions, footer, status
Data interaction: Yes
UI action: Yes

Allowed: actions, ariaLabel, children, className, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, footer, gap, header, hidden, icon, id, interaction, interactions, padding, props, size, slots, span, status, style, subtitle, title, tooltip, type, uiAction, variant, visibility, width

Related: section, collapsible

Valid 2.0 component example

{
  "type": "card",
  "id": "card",
  "title": "Analysis card",
  "span": 6,
  "className": "hp-example-card",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-card { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "header": {
    "title": "Performance",
    "subtitle": "Current period",
    "icon": "chart"
  },
  "padding": "compact",
  "status": {
    "intent": "primary",
    "position": "top"
  },
  "children": [
    {
      "type": "text",
      "id": "card_content",
      "span": 12,
      "text": "Supporting content",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      }
    }
  ],
  "footer": [
    {
      "type": "text",
      "id": "text",
      "title": "Footer note",
      "span": 12,
      "className": "hp-example-text",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-text { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "text": "Updated from Power BI"
    }
  ]
}

icon — Iconstable

Safe SVG icon from bundled registry

Level: standard
Required: type, id, icon
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction
Data interaction: No
UI action: Yes

Accessibility: Use ariaLabel when the icon is the only visible content.

Valid 2.0 component example

{
  "type": "icon",
  "id": "icon",
  "title": "Information icon",
  "span": 1,
  "className": "hp-example-icon",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-icon { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "icon": "info",
  "size": "md",
  "ariaLabel": "Information"
}

iconButton — Icon buttonstable

Compact accessible icon action

Level: standard
Required: type, id, icon, ariaLabel
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction
Data interaction: Yes
UI action: Yes

Accessibility: ariaLabel is required. Tooltips provide additional context.

Valid 2.0 component example

{
  "type": "iconButton",
  "id": "iconButton",
  "title": "Refresh dashboard",
  "span": 1,
  "className": "hp-example-iconButton",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-iconButton { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "icon": "refresh",
  "ariaLabel": "Refresh data",
  "variant": "ghost",
  "size": "sm",
  "uiAction": {
    "type": "showToast",
    "message": "Dashboard refreshed",
    "intent": "primary",
    "durationMs": 3000
  }
}

avatar — Avatarbeta

Identity indicator with initials

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, initials, label, shape, status
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, icon, id, initials, interaction, interactions, label, props, shape, size, slots, span, status, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "avatar",
  "id": "avatar",
  "title": "User avatar",
  "span": 1,
  "className": "hp-example-avatar",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-avatar { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "initials": "JD",
  "label": "Jane Doe",
  "size": "md",
  "shape": "circle",
  "status": "online"
}

avatarGroup — Avatar groupbeta

Stacked identity indicators

Level: standard
Required: type, id, avatars
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, avatars, max
Data interaction: No
UI action: Yes

Allowed: ariaLabel, avatars, className, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, max, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "avatarGroup",
  "id": "avatarGroup",
  "title": "Team members",
  "span": 3,
  "className": "hp-example-avatarGroup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-avatarGroup { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "avatars": [
    {
      "type": "avatar",
      "id": "avatar",
      "title": "Member 1",
      "span": 12,
      "className": "hp-example-avatar",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-avatar { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "initials": "JD",
      "size": "sm",
      "shape": "circle"
    },
    {
      "type": "avatar",
      "id": "avatar_2",
      "title": "Member 2",
      "span": 12,
      "className": "hp-example-avatar",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-avatar { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "initials": "AK",
      "size": "sm",
      "shape": "circle"
    }
  ],
  "max": 5
}

listGroup — List groupstable

Compact row list with badges and actions

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, items, source, primaryField, secondaryField, badgeField, valueField, maxItems, compact
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, badgeField, className, compact, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, items, maxItems, primaryField, props, secondaryField, size, slots, source, span, style, subtitle, title, tooltip, type, uiAction, valueField, variant, visibility

Related: dataGrid

Valid 2.0 component example

{
  "type": "listGroup",
  "id": "listGroup",
  "title": "Recent items",
  "span": 12,
  "className": "hp-example-listGroup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-listGroup { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "source": "rows",
  "primaryField": "__field_key__",
  "secondaryField": "__category_field_key__",
  "badgeField": "__status_field_key__",
  "maxItems": 10,
  "compact": false
}

dataGrid — Data gridstable

Record detail label/value layout

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, items, source, columns, selectedRow
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, columns, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, items, props, selectedRow, size, slots, source, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Related: listGroup, detailPanel

Valid 2.0 component example

{
  "type": "dataGrid",
  "id": "dataGrid",
  "title": "Record details",
  "span": 12,
  "className": "hp-example-dataGrid",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-dataGrid { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "selectedRow": true,
  "columns": 2,
  "items": [
    {
      "label": "Record",
      "field": "__field_key__",
      "copyable": true
    },
    {
      "label": "Status",
      "field": "__category_field_key__",
      "badge": true
    },
    {
      "label": "Value",
      "field": "__measure_field_key__",
      "format": "currency"
    }
  ]
}

countUp — Count-upbeta

Animated number with prefix/suffix

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, aggregation, value, prefix, suffix, duration, format
Data interaction: No
UI action: Yes

Allowed: aggregation, ariaLabel, className, css, data, dataset, disabled, duration, field, format, hidden, icon, id, interaction, interactions, prefix, props, size, slots, span, style, subtitle, suffix, title, tooltip, type, uiAction, value, variant, visibility

Accessibility: Respects prefers-reduced-motion. Animation disabled under reduced motion.

Valid 2.0 component example

{
  "type": "countUp",
  "id": "countUp",
  "title": "Total value",
  "span": 3,
  "className": "hp-example-countUp",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-countUp { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "field": "__measure_field_key__",
  "aggregation": "sum",
  "prefix": "$",
  "suffix": "",
  "duration": 2000,
  "format": "currency"
}

tracking — Trackingbeta

Compact stage progress display

Level: standard
Required: type, id, stages
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, stages, activeStage, stageField, orientation, compact
Data interaction: No
UI action: Yes

Allowed: activeStage, ariaLabel, className, compact, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, orientation, props, size, slots, span, stageField, stages, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Related: steps

Valid 2.0 component example

{
  "type": "tracking",
  "id": "tracking",
  "title": "Approval progress",
  "span": 12,
  "className": "hp-example-tracking",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-tracking { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "stages": [
    {
      "id": "submitted",
      "label": "Submitted",
      "state": "complete"
    },
    {
      "id": "review",
      "label": "In Review",
      "state": "current"
    },
    {
      "id": "approved",
      "label": "Approved",
      "state": "upcoming"
    }
  ],
  "activeStage": "review",
  "orientation": "horizontal",
  "compact": false
}

dropdown — Dropdownbeta

Compact action menu

Level: recommended
Required: type, id, items
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, trigger, items, placement, closeOnSelect
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, closeOnSelect, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, items, placement, props, size, slots, span, style, subtitle, title, tooltip, trigger, type, uiAction, variant, visibility

Accessibility: Menu roles, roving arrow-key focus, Home/End, nested-menu keys, Escape/Tab dismissal, and trigger focus restoration are supported.

Valid 2.0 component example

{
  "type": "dropdown",
  "id": "dropdown",
  "title": "Row actions",
  "span": 12,
  "className": "hp-example-dropdown",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-dropdown { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "trigger": {
    "label": "Actions",
    "icon": "dots",
    "variant": "ghost"
  },
  "items": [
    {
      "id": "view",
      "label": "View details",
      "icon": "eye",
      "action": {
        "type": "openOverlay",
        "target": "detail_modal"
      }
    },
    {
      "id": "divider",
      "divider": true
    },
    {
      "id": "delete",
      "label": "Remove",
      "icon": "trash",
      "disabled": true
    }
  ],
  "placement": "bottom-end",
  "closeOnSelect": true
}

modal — Modalbeta

Focused overlay with children

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen, backdropClose, footer
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, backdropClose, children, className, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, footer, gap, hidden, icon, id, interaction, interactions, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility, width

Accessibility: Initial focus, focus trap, Escape close, labelled dialog semantics, and trigger focus restoration are supported.

Valid 2.0 component example

{
  "type": "modal",
  "id": "modal",
  "title": "Record Details",
  "span": 12,
  "className": "hp-example-modal",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-modal { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "size": "md",
  "backdropClose": true,
  "children": [
    {
      "type": "dataGrid",
      "id": "dataGrid",
      "title": "Details",
      "span": 12,
      "className": "hp-example-dataGrid",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-dataGrid { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "items": [
        {
          "label": "Record",
          "field": "__field_key__"
        },
        {
          "label": "Value",
          "field": "__measure_field_key__",
          "format": "currency"
        }
      ]
    }
  ],
  "footer": [
    {
      "type": "button",
      "id": "button",
      "title": "Close",
      "span": 12,
      "className": "hp-example-button",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-button { min-width: 0; }",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      },
      "label": "Close",
      "uiAction": {
        "type": "closeOverlay",
        "target": "detail_modal"
      }
    }
  ]
}

offcanvas — Offcanvasbeta

Slide-over panel for details/filters

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen, position, openWhen, stateKey, backdrop, backdropClose
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, backdrop, backdropClose, children, className, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, gap, hidden, icon, id, interaction, interactions, openWhen, position, props, size, slots, span, stateKey, style, subtitle, title, tooltip, type, uiAction, variant, visibility, width

Accessibility: Uses dialog semantics, managed focus, Escape/backdrop close, an accessible close button, and internal scrolling.

Related: drawer, filterDrawer, modal

Valid 2.0 component example

{
  "type": "offcanvas",
  "id": "offcanvas",
  "title": "Filters",
  "span": 12,
  "className": "hp-example-offcanvas",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-offcanvas { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "position": "left",
  "width": 320,
  "openWhen": "state",
  "stateKey": "filter_offcanvas",
  "children": [
    {
      "type": "select",
      "id": "select",
      "title": "Category",
      "span": 4,
      "className": "hp-example-select",
      "hidden": false,
      "style": {
        "minWidth": 0
      },
      "css": ".hp-example-select { min-width: 0; }",
      "interaction": {
        "enabled": true,
        "trigger": "auto",
        "internalMode": "filter",
        "internalScope": "all",
        "externalMode": "auto",
        "field": "__field_key__",
        "operator": "=",
        "selectionMode": "replace",
        "multiSelect": true,
        "showSelector": false,
        "clearOnSecondClick": false
      },
      "field": "__field_key__",
      "label": "Category",
      "placeholder": "Choose category",
      "defaultValue": ""
    }
  ]
}

popover — Popoverbeta

Rich tooltip with actions

Level: standard
Required: type, id, trigger, children
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, children, direction, columns, gap, width, collapsible, defaultCollapsed, defaultOpen, trigger, placement, closeOnOutsideClick, closeOnEscape, showArrow
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, children, className, closeOnEscape, closeOnOutsideClick, collapsible, columns, css, data, dataset, defaultCollapsed, defaultOpen, direction, disabled, gap, hidden, icon, id, interaction, interactions, placement, props, showArrow, size, slots, span, style, subtitle, title, tooltip, trigger, type, uiAction, variant, visibility, width

Accessibility: Uses role=dialog, managed focus, Escape/outside dismissal, ARIA trigger relationships, and focus restoration.

Valid 2.0 component example

{
  "type": "popover",
  "id": "popover",
  "title": "Help popover",
  "span": 1,
  "className": "hp-example-popover",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-popover { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "trigger": {
    "label": "?",
    "icon": "info"
  },
  "children": [
    {
      "type": "text",
      "id": "popover_content",
      "span": 12,
      "text": "Supporting content",
      "interaction": {
        "enabled": false,
        "internalMode": "none",
        "externalMode": "none"
      }
    }
  ]
}

emptyState — Empty statestable

Placeholder when no data is available

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, description, primaryAction, secondaryAction, compact
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, compact, css, data, dataset, description, disabled, hidden, icon, id, interaction, interactions, primaryAction, props, secondaryAction, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "emptyState",
  "id": "emptyState",
  "title": "No data available",
  "span": 12,
  "className": "hp-example-emptyState",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-emptyState { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "icon": "info",
  "description": "No records match the current filters.",
  "primaryAction": {
    "type": "clearFilters"
  },
  "compact": false
}

placeholder — Placeholderstable

Skeleton loading indicator

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, lines, placeholderVariant
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, lines, placeholderVariant, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Accessibility: Uses aria-hidden. Respects prefers-reduced-motion.

Valid 2.0 component example

{
  "type": "placeholder",
  "id": "placeholder",
  "title": "Loading content",
  "span": 12,
  "className": "hp-example-placeholder",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-placeholder { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "lines": 4,
  "placeholderVariant": "text"
}

spinner — Spinnerstable

Inline or centered loading indicator

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, label, inline
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, icon, id, inline, interaction, interactions, label, props, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Accessibility: Uses role=status with accessible label.

Valid 2.0 component example

{
  "type": "spinner",
  "id": "spinner",
  "title": "Loading data",
  "span": 12,
  "className": "hp-example-spinner",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-spinner { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "label": "Loading records...",
  "inline": false
}

textarea — Text areabeta

Multi-line text input

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Accessibility: Associated label via generated ID.

Valid 2.0 component example

{
  "type": "textarea",
  "id": "textarea",
  "title": "Notes",
  "span": 4,
  "className": "hp-example-textarea",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-textarea { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Notes",
  "placeholder": "Enter notes...",
  "defaultValue": "",
  "rows": 4,
  "maxLength": 500
}

checkbox — Checkboxbeta

Single boolean toggle

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "checkbox",
  "id": "checkbox",
  "title": "Include inactive",
  "span": 12,
  "className": "hp-example-checkbox",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-checkbox { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Include inactive records",
  "defaultValue": false
}

checkboxGroup — Checkbox groupbeta

Multiple choice selection

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "checkboxGroup",
  "id": "checkboxGroup",
  "title": "Categories",
  "span": 12,
  "className": "hp-example-checkboxGroup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-checkboxGroup { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "in",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__category_field_key__",
  "label": "Select categories",
  "options": [
    {
      "label": "Category A",
      "value": "A"
    },
    {
      "label": "Category B",
      "value": "B"
    }
  ],
  "multiple": true,
  "defaultValue": []
}

radioGroup — Radio groupbeta

Single choice from options

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "radioGroup",
  "id": "radioGroup",
  "title": "Priority",
  "span": 12,
  "className": "hp-example-radioGroup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-radioGroup { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "label": "Priority level",
  "options": [
    {
      "label": "High",
      "value": "High"
    },
    {
      "label": "Medium",
      "value": "Medium"
    },
    {
      "label": "Low",
      "value": "Low"
    }
  ],
  "defaultValue": "Medium"
}

inputGroup — Input groupbeta

Input with safe prefix/suffix

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, field, label, placeholder, min, max, step, multiple, defaultValue, options, targets, filter, action, actionValue, buttons, description, helpText, errorText, required, orientation, rows, maxLength, prefixText, prefixIcon, suffixText, suffixIcon
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "inputGroup",
  "id": "inputGroup",
  "title": "Search with icon",
  "span": 12,
  "className": "hp-example-inputGroup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-inputGroup { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "filter",
    "internalScope": "all",
    "externalMode": "auto",
    "field": "__field_key__",
    "operator": "contains",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": false
  },
  "field": "__field_key__",
  "placeholder": "Search...",
  "prefixIcon": "search",
  "suffixText": "items"
}

barChart — Bar chartstable

Ranked category comparison

Level: recommended
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, height, hidden, icon, id, initOptions, interaction, interactions, maxDataRows, measure, options, pointSize, props, setOption, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility, x, y

Valid 2.0 component example

{
  "type": "barChart",
  "id": "barChart",
  "title": "Value by category",
  "span": 6,
  "className": "hp-example-barChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-barChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "axis",
      "formatter": "{b}: {c}"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "xAxis": {
      "axisLabel": {
        "rotate": 0,
        "hideOverlap": true
      }
    },
    "series": [
      {
        "type": "bar",
        "barMaxWidth": 42,
        "label": {
          "show": false
        }
      }
    ]
  }
}

horizontalBarChart — Horizontal barstable

Long category labels

Level: recommended
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "horizontalBarChart",
  "id": "horizontalBarChart",
  "title": "Ranked categories",
  "span": 6,
  "className": "hp-example-horizontalBarChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-horizontalBarChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "axis",
      "formatter": "{b}: {c}"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "yAxis": {
      "axisLabel": {
        "width": 120,
        "overflow": "truncate"
      }
    },
    "series": [
      {
        "type": "bar",
        "barMaxWidth": 32,
        "label": {
          "show": true,
          "position": "right"
        }
      }
    ]
  }
}

lineChart — Line chartstable

Time or ordered trends

Level: recommended
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "lineChart",
  "id": "lineChart",
  "title": "Trend over time",
  "span": 6,
  "className": "hp-example-lineChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-lineChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "axis"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "series": [
      {
        "type": "line",
        "smooth": true,
        "showSymbol": false,
        "connectNulls": true
      }
    ]
  }
}

areaChart — Area chartstable

Trend plus magnitude

Level: standard
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "areaChart",
  "id": "areaChart",
  "title": "Volume trend",
  "span": 6,
  "className": "hp-example-areaChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-areaChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "axis",
      "formatter": "{b}: {c}"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "series": [
      {
        "type": "line",
        "smooth": true,
        "areaStyle": {
          "opacity": 0.24
        },
        "showSymbol": false
      }
    ]
  }
}

pieChart — Pie chartbeta

Few-part composition only

Level: standard
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "pieChart",
  "id": "pieChart",
  "title": "Category share",
  "span": 6,
  "className": "hp-example-pieChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-pieChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "item",
      "formatter": "{b}: {c} ({d}%)"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "series": [
      {
        "type": "pie",
        "radius": "72%",
        "label": {
          "show": true,
          "formatter": "{b}: {d}%"
        }
      }
    ]
  }
}

donutChart — Donut chartbeta

Few-part composition with central space

Level: standard
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "donutChart",
  "id": "donutChart",
  "title": "Category distribution",
  "span": 6,
  "className": "hp-example-donutChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-donutChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "item",
      "formatter": "{b}: {c} ({d}%)"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "series": [
      {
        "type": "pie",
        "radius": [
          "46%",
          "72%"
        ],
        "avoidLabelOverlap": true
      }
    ]
  }
}

scatterChart — Scatter chartbeta

Relationship between two measures

Level: standard
Required: type, id, x, y
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "scatterChart",
  "id": "scatterChart",
  "title": "Measure relationship",
  "span": 6,
  "className": "hp-example-scatterChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-scatterChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "x": "__x_measure_field_key__",
  "y": "__y_measure_field_key__",
  "pointSize": "__size_measure_field_key__",
  "height": 340,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false
  },
  "options": {
    "tooltip": {
      "trigger": "item"
    },
    "xAxis": {
      "name": "X measure",
      "scale": true
    },
    "yAxis": {
      "name": "Y measure",
      "scale": true
    },
    "series": [
      {
        "type": "scatter",
        "emphasis": {
          "focus": "series"
        }
      }
    ]
  }
}

gauge — Gaugebeta

Single target attainment

Level: standard
Required: type, id, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "gauge",
  "id": "gauge",
  "title": "Target attainment",
  "span": 4,
  "className": "hp-example-gauge",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-gauge { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "measure": "__measure_field_key__",
  "aggregation": "avg",
  "height": 300,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false
  },
  "options": {
    "series": [
      {
        "type": "gauge",
        "min": 0,
        "max": 100,
        "progress": {
          "show": true,
          "width": 14
        },
        "axisLine": {
          "lineStyle": {
            "width": 14
          }
        },
        "detail": {
          "formatter": "{value}%"
        }
      }
    ]
  }
}

heatmap — Heatmapbeta

Dense intensity comparison

Level: standard
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Valid 2.0 component example

{
  "type": "heatmap",
  "id": "heatmap",
  "title": "Category intensity",
  "span": 6,
  "className": "hp-example-heatmap",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-heatmap { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "height": 320,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "useDirtyRect": false
  },
  "setOption": {
    "notMerge": true,
    "lazyUpdate": false,
    "silent": false
  },
  "options": {
    "animation": true,
    "tooltip": {
      "trigger": "axis",
      "formatter": "{b}: {c}"
    },
    "legend": {
      "show": true,
      "bottom": 0
    },
    "grid": {
      "left": 48,
      "right": 20,
      "top": 32,
      "bottom": 52,
      "containLabel": true
    },
    "visualMap": {
      "min": 0,
      "max": 100,
      "calculable": true,
      "orient": "horizontal",
      "bottom": 0
    },
    "series": [
      {
        "type": "heatmap",
        "label": {
          "show": true
        },
        "emphasis": {
          "itemStyle": {
            "shadowBlur": 8
          }
        }
      }
    ]
  }
}

comboChart — Combo chartbeta

Compare bar and line measures on shared categories

Level: recommended
Required: type, id, category, series
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize, series
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, height, hidden, icon, id, initOptions, interaction, interactions, maxDataRows, measure, options, pointSize, props, series, setOption, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility, x, y

Accessibility: Each series/category point maps back to its source rows.

Related: barChart, lineChart

Valid 2.0 component example

{
  "type": "comboChart",
  "id": "comboChart",
  "title": "Actual vs. target",
  "span": 8,
  "className": "hp-example-comboChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-comboChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "series": [
    {
      "field": "__measure_field_key__",
      "label": "Actual",
      "chartType": "bar",
      "aggregation": "sum",
      "axis": "left"
    },
    {
      "field": "__target_measure_field_key__",
      "label": "Target",
      "chartType": "line",
      "aggregation": "sum",
      "axis": "left"
    },
    {
      "field": "__rate_measure_field_key__",
      "label": "Completion",
      "chartType": "line",
      "aggregation": "avg",
      "axis": "right",
      "format": "percent"
    }
  ],
  "height": 340,
  "options": {
    "legend": {
      "top": 0
    },
    "animation": true
  }
}

waterfallChart — Waterfall chartbeta

Explain positive and negative contributions to a total

Level: recommended
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize, showStart, showEnd, positiveIntent, negativeIntent, totalIntent
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, height, hidden, icon, id, initOptions, interaction, interactions, maxDataRows, measure, negativeIntent, options, pointSize, positiveIntent, props, setOption, showEnd, showStart, size, slots, span, style, subtitle, title, tooltip, totalIntent, type, uiAction, variant, visibility, x, y

Valid 2.0 component example

{
  "type": "waterfallChart",
  "id": "waterfallChart",
  "title": "Budget variance",
  "span": 6,
  "className": "hp-example-waterfallChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-waterfallChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "showStart": true,
  "showEnd": true,
  "positiveIntent": "success",
  "negativeIntent": "danger",
  "totalIntent": "primary",
  "height": 320
}

sankeyChart — Sankey chartbeta

Show weighted flow between stages

Level: standard
Required: type, id, sourceField, targetField
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize, sourceField, targetField, valueField, orientation, nodeAlign
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, height, hidden, icon, id, initOptions, interaction, interactions, maxDataRows, measure, nodeAlign, options, orientation, pointSize, props, setOption, size, slots, sourceField, span, style, subtitle, targetField, title, tooltip, type, uiAction, valueField, variant, visibility, x, y

Accessibility: Node and edge clicks retain distinct row bindings; accompany dense flows with a table when exact values matter.

Valid 2.0 component example

{
  "type": "sankeyChart",
  "id": "sankeyChart",
  "title": "Work order flow",
  "span": 8,
  "className": "hp-example-sankeyChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-sankeyChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "sourceField": "__source_field_key__",
  "targetField": "__target_field_key__",
  "valueField": "__measure_field_key__",
  "aggregation": "sum",
  "orientation": "horizontal",
  "nodeAlign": "justify",
  "height": 380
}

treemapChart — Treemap chartbeta

Explore hierarchical contribution

Level: standard
Required: type, id, pathFields, valueField
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize, pathFields, valueField, labelField, maxDepth
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, height, hidden, icon, id, initOptions, interaction, interactions, labelField, maxDataRows, maxDepth, measure, options, pathFields, pointSize, props, setOption, size, slots, span, style, subtitle, title, tooltip, type, uiAction, valueField, variant, visibility, x, y

Accessibility: Every hierarchy node maps to the contributing source rows.

Valid 2.0 component example

{
  "type": "treemapChart",
  "id": "treemapChart",
  "title": "Cost hierarchy",
  "span": 8,
  "className": "hp-example-treemapChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-treemapChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "pathFields": [
    "__department_field_key__",
    "__program_field_key__",
    "__project_field_key__"
  ],
  "valueField": "__measure_field_key__",
  "aggregation": "sum",
  "labelField": "__project_field_key__",
  "maxDepth": 3,
  "height": 380
}

funnelChart — Funnel chartbeta

Compare ordered process stages

Level: standard
Required: type, id, category, measure
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize, sort, gap
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, gap, height, hidden, icon, id, initOptions, interaction, interactions, maxDataRows, measure, options, pointSize, props, setOption, size, slots, sort, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility, x, y

Accessibility: Labels include stage values and percentages.

Valid 2.0 component example

{
  "type": "funnelChart",
  "id": "funnelChart",
  "title": "Project pipeline",
  "span": 6,
  "className": "hp-example-funnelChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-funnelChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "aggregation": "sum",
  "sort": "descending",
  "gap": 3,
  "height": 340
}

radarChart — Radar chartbeta

Compare multivariate profiles

Level: advanced
Required: type, id, indicators
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize, groupField, indicators
Data interaction: Yes
UI action: Yes

Allowed: aggregation, ariaLabel, category, className, css, data, dataset, disabled, groupField, height, hidden, icon, id, indicators, initOptions, interaction, interactions, maxDataRows, measure, options, pointSize, props, setOption, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility, x, y

Valid 2.0 component example

{
  "type": "radarChart",
  "id": "radarChart",
  "title": "Team performance",
  "span": 6,
  "className": "hp-example-radarChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-radarChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "groupField": "__category_field_key__",
  "indicators": [
    {
      "field": "__safety_measure_field_key__",
      "label": "Safety",
      "max": 100
    },
    {
      "field": "__quality_measure_field_key__",
      "label": "Quality",
      "max": 100
    },
    {
      "field": "__schedule_measure_field_key__",
      "label": "Schedule",
      "max": 100
    }
  ],
  "height": 360
}

smallMultiples — Small multiplesbeta

Repeat one comparison across a split field

Level: recommended
Required: type, id, splitField, chart
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, splitField, chart, maxPanels, sharedScale, height
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, chart, className, css, data, dataset, disabled, height, hidden, icon, id, interaction, interactions, maxPanels, props, sharedScale, size, slots, span, splitField, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "smallMultiples",
  "id": "smallMultiples",
  "title": "Regional comparisons",
  "span": 12,
  "className": "hp-example-smallMultiples",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-smallMultiples { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "splitField": "__split_field_key__",
  "maxPanels": 6,
  "sharedScale": true,
  "height": 200,
  "chart": {
    "type": "barChart",
    "id": "small_multiple_chart",
    "title": "Value by category",
    "span": 12,
    "className": "hp-example-barChart",
    "hidden": false,
    "style": {
      "minWidth": 0
    },
    "css": ".hp-example-barChart { min-width: 0; }",
    "interaction": {
      "enabled": true,
      "trigger": "auto",
      "internalMode": "highlight",
      "internalScope": "self",
      "externalMode": "auto",
      "selectionMode": "replace",
      "multiSelect": true,
      "showSelector": false,
      "clearOnSecondClick": true
    },
    "category": "__category_field_key__",
    "measure": "__measure_field_key__",
    "aggregation": "sum",
    "height": 200,
    "maxDataRows": 30000,
    "initOptions": {
      "renderer": "canvas",
      "useDirtyRect": false
    },
    "setOption": {
      "notMerge": true,
      "lazyUpdate": false,
      "silent": false
    },
    "options": {
      "animation": true,
      "tooltip": {
        "trigger": "axis",
        "formatter": "{b}: {c}"
      },
      "legend": {
        "show": true,
        "bottom": 0
      },
      "grid": {
        "left": 48,
        "right": 20,
        "top": 32,
        "bottom": 52,
        "containLabel": true
      }
    }
  }
}

table — Detail tablestable

Row-level investigation and export-ready detail

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, engine, columns, pagination, pageSize, search, resizableColumns, maxRows, stickyHeader, density, striped, hover, showRowCount, pageSizeOptions, rowActions, emptyState
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, columns, css, data, dataset, density, disabled, emptyState, engine, hidden, hover, icon, id, interaction, interactions, maxRows, pageSize, pageSizeOptions, pagination, props, resizableColumns, rowActions, search, showRowCount, size, slots, span, stickyHeader, striped, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Accessibility: Row actions use safe UiAction. Column resizing prevents row selection while active.

Compatibility: Tabulator engine is not bundled. engine:'tabulator' is normalized to native.

Related: matrix

Valid 2.0 component example

{
  "type": "table",
  "id": "table",
  "title": "Record details",
  "span": 12,
  "className": "hp-example-table",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-table { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": true,
    "clearOnSecondClick": true
  },
  "engine": "native",
  "columns": [
    {
      "field": "__field_key__",
      "title": "Record",
      "width": 180,
      "format": "",
      "hozAlign": "left",
      "conditional": [
        {
          "operator": "=",
          "value": "Critical",
          "color": "#991b1b",
          "background": "#fee2e2"
        }
      ]
    },
    {
      "field": "__measure_field_key__",
      "title": "Amount",
      "width": 120,
      "format": "currency",
      "hozAlign": "right",
      "conditional": [
        {
          "operator": ">=",
          "value": 1000,
          "color": "#166534",
          "background": "#dcfce7"
        }
      ]
    }
  ],
  "pagination": true,
  "pageSize": 25,
  "search": true,
  "resizableColumns": true,
  "maxRows": 1000,
  "stickyHeader": true
}

matrix — Matrix / pivotstable

Summarized row-by-column comparison

Level: recommended
Required: type, id, rows, values
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, rows, columns, values, showTotals, heatmap, maxRows
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, columns, css, data, dataset, disabled, heatmap, hidden, icon, id, interaction, interactions, maxRows, props, rows, showTotals, size, slots, span, style, subtitle, title, tooltip, type, uiAction, values, variant, visibility

Related: table

Valid 2.0 component example

{
  "type": "matrix",
  "id": "matrix",
  "title": "Category matrix",
  "span": 12,
  "className": "hp-example-matrix",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-matrix { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "rows": [
    "__category_field_key__",
    "__field_key__"
  ],
  "columns": [
    "__column_field_key__"
  ],
  "values": [
    {
      "field": "__measure_field_key__",
      "title": "Total amount",
      "aggregation": "sum",
      "format": "currency"
    },
    {
      "title": "Records",
      "aggregation": "count",
      "format": "integer"
    }
  ],
  "showTotals": true,
  "heatmap": true,
  "maxRows": 200
}

map — Mapbeta

Values-only Power BI fields need independent layer datasets/bindings or practical public ArcGIS REST layers authored in Map Studio

Level: recommended
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, engine, view, basemap, layers, layerGroups, bookmarks, search, legend, layerPanel, toolbar, settings, height
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, basemap, bookmarks, className, css, data, dataset, disabled, engine, height, hidden, icon, id, interaction, interactions, layerGroups, layerPanel, layers, legend, props, search, settings, size, slots, span, style, subtitle, title, toolbar, tooltip, type, uiAction, variant, view, visibility

Compatibility: Legacy one-layer Runtime Config bindings remain supported. New 2.0 maps use explicit layer dataset and source.bindings properties.

Related: offcanvas, dataGrid

Valid 2.0 component example

{
  "type": "map",
  "id": "map",
  "title": "Locations",
  "span": 12,
  "className": "hp-example-map",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-map { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "height": 420,
  "view": {
    "center": [
      29.75,
      -95.35
    ],
    "zoom": 10,
    "fitMode": "data"
  },
  "basemap": {
    "type": "none"
  },
  "search": {
    "enabled": true,
    "placeholder": "Search for a place or address",
    "zoom": 16,
    "showResultMarker": true,
    "clearMarkerOnClose": false
  },
  "legend": {
    "defaultOpen": false
  },
  "layerGroups": [
    {
      "id": "operations",
      "name": "Operations",
      "visible": true,
      "order": 0
    }
  ],
  "bookmarks": [
    {
      "id": "home_view",
      "label": "Home view",
      "center": [
        29.75,
        -95.35
      ],
      "zoom": 10
    }
  ],
  "layers": [
    {
      "id": "powerbi_locations",
      "name": "Locations",
      "dataset": "powerbi",
      "groupId": "operations",
      "source": {
        "type": "powerbi",
        "bindings": {
          "latitude": "__latitude_field_key__",
          "longitude": "__longitude_field_key__"
        }
      },
      "renderer": {
        "type": "simple",
        "symbol": {
          "shape": "circle",
          "fillColor": "#2563eb",
          "outlineColor": "#1d4ed8",
          "size": 7
        }
      },
      "popup": {
        "enabled": true,
        "title": "{{__field_key__}}",
        "fields": [
          {
            "field": "__field_key__",
            "fieldSource": "powerbi",
            "label": "Location"
          }
        ]
      },
      "tooltip": {
        "enabled": true,
        "fields": [
          {
            "field": "__field_key__",
            "fieldSource": "powerbi",
            "label": "Location"
          }
        ]
      },
      "interaction": {
        "enabled": true,
        "trigger": "click",
        "internalMode": "highlight",
        "externalMode": "selection",
        "selectionMode": "replace",
        "multiSelect": true
      }
    }
  ],
  "layerPanel": {
    "visible": true,
    "defaultOpen": false,
    "allowViewerReorder": true,
    "allowViewerOpacity": true,
    "allowViewerLabels": true
  },
  "toolbar": {
    "visible": true,
    "home": true,
    "layers": true,
    "legend": true,
    "search": true,
    "clearSelection": true,
    "zoomToSelection": true,
    "bookmarks": true
  },
  "settings": {
    "showLayerControl": true,
    "showLegend": true
  }
}

text — Textstable

Safe plain text

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, text, repeat
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, icon, id, interaction, interactions, props, repeat, size, slots, span, style, subtitle, text, title, tooltip, type, uiAction, variant, visibility

Valid 2.0 component example

{
  "type": "text",
  "id": "text",
  "title": "Text content",
  "span": 12,
  "className": "hp-example-text",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-text { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "text": "Plain text content for the dashboard."
}

markdown — Markdownstable

Structured explanatory content

Level: standard
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, text, repeat
Data interaction: No
UI action: Yes

Valid 2.0 component example

{
  "type": "markdown",
  "id": "markdown",
  "title": "Markdown content",
  "span": 12,
  "className": "hp-example-markdown",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-markdown { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "text": "## Dashboard notes\n\n- Current period\n- Key operational context\n\n**Field:** {{__field_key__}}"
}

html — Sanitized HTMLbeta

Branded static content

Level: advanced
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, html, repeat
Data interaction: No
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, html, icon, id, interaction, interactions, props, repeat, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, visibility

Accessibility: HTML is sanitized with DOMPurify. No scripts, iframes, or event handlers allowed.

Valid 2.0 component example

{
  "type": "html",
  "id": "html",
  "title": "Formatted content",
  "span": 12,
  "className": "hp-example-html",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-html { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "html": "<section class=\"summary\"><strong>Summary</strong><span>{{__field_key__}}</span></section>",
  "slots": {
    "header": "<span>Header content</span>",
    "footer": "<small>Updated from Power BI data</small>"
  }
}

custom — Custom HTML/CSSbeta

Safe app-like cards, lists, and slicers

Level: advanced
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, html, text, repeat
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, css, data, dataset, disabled, hidden, html, icon, id, interaction, interactions, props, repeat, size, slots, span, style, subtitle, text, title, tooltip, type, uiAction, variant, visibility

Accessibility: Custom HTML is sanitized. Repeat rows support keyboard interaction.

Related: html, listGroup, card

Valid 2.0 component example

{
  "type": "custom",
  "id": "custom",
  "title": "Interactive record list",
  "span": 12,
  "className": "hp-example-custom",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-custom { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "click",
    "internalMode": "none",
    "internalScope": "self",
    "externalMode": "filter",
    "field": "__field_key__",
    "operator": "=",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "html": "<header><strong>Records</strong></header>",
  "repeat": {
    "source": "rows",
    "as": "row",
    "limit": 100,
    "template": "<span>{{__field_key__}}</span><small>{{__category_field_key__}}</small>",
    "distinctBy": "__field_key__",
    "sortBy": "__field_key__",
    "sortDirection": "asc"
  },
  "slots": {
    "empty": "<p>No records available.</p>",
    "footer": "<small>Select a record to filter the report.</small>"
  },
  "data": {
    "variant": "compact-list"
  },
  "interactions": {
    "onClick": {
      "action": "selectWhere",
      "where": {
        "op": "=",
        "left": {
          "field": "__field_key__"
        },
        "right": {
          "valueFromRow": "__field_key__"
        }
      }
    }
  }
}

svg — Declarative SVGstable

Animated KPI cards, diagrams, gauges, pictorial marks, and schematics

Level: recommended
Required: type, id, viewBox, elements
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, viewBox, width, height, preserveAspectRatio, role, description, elements, dataContext, motion, performance
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, css, data, dataContext, dataset, description, disabled, elements, height, hidden, icon, id, interaction, interactions, motion, performance, preserveAspectRatio, props, role, size, slots, span, style, subtitle, title, tooltip, type, uiAction, variant, viewBox, visibility, width

Accessibility: ariaLabel is recommended. Interactive marks are keyboard focusable and respond to Enter and Space. Motion respects the configured reduced-motion policy.

Related: svgMarkup, gauge, progressBar

Valid 2.0 component example

{
  "type": "svg",
  "id": "svg",
  "title": "Animated progress",
  "span": 6,
  "className": "hp-example-svg",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-svg { min-width: 0; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "viewBox": "0 0 800 240",
  "height": 240,
  "ariaLabel": "Completion progress",
  "description": "A data-bound progress track and value label.",
  "dataContext": {
    "mode": "aggregate"
  },
  "motion": {
    "enabled": true,
    "reducedMotion": "respect-system",
    "maxConcurrentAnimations": 12
  },
  "elements": [
    {
      "type": "defs",
      "children": [
        {
          "type": "linearGradient",
          "id": "progressGradient",
          "x1": 0,
          "y1": 0,
          "x2": 1,
          "y2": 0,
          "children": [
            {
              "type": "stop",
              "offset": "0%",
              "stopColor": "var(--hp-primary)"
            },
            {
              "type": "stop",
              "offset": "100%",
              "stopColor": "var(--hp-success)"
            }
          ]
        }
      ]
    },
    {
      "type": "rect",
      "id": "track",
      "x": 40,
      "y": 120,
      "width": 720,
      "height": 22,
      "rx": 11,
      "fill": "var(--hp-muted)"
    },
    {
      "type": "rect",
      "id": "progress",
      "x": 40,
      "y": 120,
      "width": {
        "bind": "__measure_field_key__",
        "scale": {
          "type": "linear",
          "domain": [
            0,
            100
          ],
          "range": [
            0,
            720
          ],
          "clamp": true
        }
      },
      "height": 22,
      "rx": 11,
      "fill": "url(#progressGradient)",
      "animation": {
        "preset": "progress-fill",
        "durationMs": 1000,
        "easing": "ease-out"
      }
    },
    {
      "type": "text",
      "x": 40,
      "y": 82,
      "text": {
        "template": "{{__measure_field_key__}}%"
      },
      "fontSize": 28,
      "fontWeight": 700
    }
  ]
}

svgMarkup — Sanitized SVG markupbeta

Strictly sanitized raw SVG when declarative SVG cannot express the design

Level: advanced
Required: type, id, svg
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, viewBox, width, height, preserveAspectRatio, role, description, svg, dataContext, motion, performance
Data interaction: Yes
UI action: Yes

Allowed: ariaLabel, className, css, data, dataContext, dataset, description, disabled, height, hidden, icon, id, interaction, interactions, motion, performance, preserveAspectRatio, props, role, size, slots, span, style, subtitle, svg, title, tooltip, type, uiAction, variant, viewBox, visibility, width

Accessibility: The component wrapper supplies accessible image semantics; include title/desc content in the SVG where useful.

Related: svg

Valid 2.0 component example

{
  "type": "svgMarkup",
  "id": "svgMarkup",
  "title": "Sanitized raw SVG",
  "span": 6,
  "className": "hp-example-svgMarkup",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-status { opacity: 1; }",
  "interaction": {
    "enabled": false,
    "internalMode": "none",
    "externalMode": "none"
  },
  "viewBox": "0 0 400 160",
  "height": 160,
  "ariaLabel": "Operating status",
  "description": "Advanced sanitized SVG markup example.",
  "svg": "<svg viewBox=\"0 0 400 160\" role=\"img\"><defs><linearGradient id=\"statusGradient\"><stop offset=\"0%\" stop-color=\"#2563eb\"/><stop offset=\"100%\" stop-color=\"#16a34a\"/></linearGradient></defs><rect id=\"statusTrack\" x=\"20\" y=\"50\" width=\"360\" height=\"40\" rx=\"20\" fill=\"url(#statusGradient)\"/><text x=\"200\" y=\"76\" text-anchor=\"middle\" fill=\"white\">{{__field_key__}}</text></svg>"
}

advancedChart — Advanced EChartsexperimental

JSON-only ECharts escape hatch for uncommon configurations not represented by a first-class HyperPBI chart

Level: advanced
Required: type, id
Key properties: dataset, title, subtitle, span, className, hidden, props, style, css, slots, data, visibility, interactions, interaction, ariaLabel, icon, variant, size, disabled, tooltip, uiAction, height, maxDataRows, initOptions, setOption, options, category, measure, aggregation, x, y, pointSize
Data interaction: Yes
UI action: Yes

Accessibility: ECharts options are recursively sanitized. JavaScript functions, event handlers, executable markup, and external URLs are blocked.

Valid 2.0 component example

{
  "type": "advancedChart",
  "id": "advancedChart",
  "title": "Advanced ECharts dashboard",
  "span": 12,
  "className": "hp-example-advancedChart",
  "hidden": false,
  "style": {
    "minWidth": 0
  },
  "css": ".hp-example-advancedChart { min-width: 0; }",
  "interaction": {
    "enabled": true,
    "trigger": "auto",
    "internalMode": "highlight",
    "internalScope": "self",
    "externalMode": "auto",
    "selectionMode": "replace",
    "multiSelect": true,
    "showSelector": false,
    "clearOnSecondClick": true
  },
  "category": "__category_field_key__",
  "measure": "__measure_field_key__",
  "x": "__x_measure_field_key__",
  "y": "__y_measure_field_key__",
  "pointSize": "__size_measure_field_key__",
  "height": 420,
  "maxDataRows": 30000,
  "initOptions": {
    "renderer": "canvas",
    "devicePixelRatio": 2,
    "useDirtyRect": false,
    "useCoarsePointer": true,
    "pointerSize": 44,
    "locale": "EN"
  },
  "setOption": {
    "notMerge": false,
    "lazyUpdate": false,
    "silent": false,
    "replaceMerge": [
      "series"
    ]
  },
  "options": {
    "aria": {
      "enabled": true
    },
    "title": {
      "text": "Advanced analysis",
      "left": "center"
    },
    "tooltip": {
      "trigger": "axis",
      "formatter": "{b}: {c}"
    },
    "legend": {
      "type": "scroll",
      "bottom": 0
    },
    "toolbox": {
      "show": true,
      "feature": {
        "dataZoom": {},
        "restore": {},
        "saveAsImage": {}
      }
    },
    "dataZoom": [
      {
        "type": "inside",
        "start": 0,
        "end": 100
      },
      {
        "type": "slider",
        "bottom": 28
      }
    ],
    "grid": {
      "left": 52,
      "right": 24,
      "top": 56,
      "bottom": 86,
      "containLabel": true
    },
    "xAxis": {
      "type": "category",
      "axisLabel": {
        "hideOverlap": true
      }
    },
    "yAxis": {
      "type": "value",
      "splitLine": {
        "show": true
      }
    },
    "visualMap": {
      "show": false,
      "min": 0,
      "max": 100
    },
    "series": [
      {
        "type": "bar",
        "encode": {
          "x": "__category_field_key__",
          "y": "__measure_field_key__"
        },
        "emphasis": {
          "focus": "series"
        },
        "markLine": {
          "data": [
            {
              "type": "average",
              "name": "Average"
            }
          ]
        }
      },
      {
        "type": "line",
        "encode": {
          "x": "__category_field_key__",
          "y": "__measure_field_key__"
        },
        "smooth": true,
        "showSymbol": false
      }
    ]
  }
}