Component Explorer

{
  "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"
      }
    }
  ]
}

{
  "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": ""
    }
  ]
}

{
  "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"
          }
        }
      ]
    }
  ]
}

{
  "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
}

{
  "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",
      "uiAction": {
        "type": "clearFilters"
      }
    }
  ]
}

{
  "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
}

{
  "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
}

{
  "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"
  }
}

{
  "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"
  }
}

{
  "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": ""
  }
}

{
  "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": ""
  }
}

{
  "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
  }
}

{
  "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
  }
}

{
  "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": ""
  }
}

{
  "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": []
  }
}

{
  "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": ""
  }
}

{
  "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
  }
}

{
  "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",
  "uiAction": {
    "type": "clearFilters"
  }
}

{
  "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"
    }
  ]
}

{
  "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
  }
}

{
  "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"
    ]
  }
}

{
  "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
        }
      ]
    }
  ]
}

{
  "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
}

{
  "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"
  }
}

{
  "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"
    }
  ]
}

{
  "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"
}

{
  "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"
    }
  ]
}

{
  "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"
}

{
  "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"
}

{
  "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
}

{
  "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"
}

{
  "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"
    }
  ]
}

{
  "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"
    }
  ]
}

{
  "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
}

{
  "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"
    }
  ]
}

{
  "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"
}

{
  "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
  }
}

{
  "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"
}

{
  "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
}

{
  "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
}

{
  "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"
    }
  ]
}

{
  "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"
}

{
  "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
}

{
  "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
}

{
  "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"
      }
    }
  ]
}

{
  "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": ""
    }
  ]
}

{
  "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"
      }
    }
  ]
}

{
  "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
}

{
  "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"
}

{
  "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
}

{
  "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
}

{
  "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
}

{
  "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": []
}

{
  "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"
}

{
  "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"
}

{
  "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
        }
      }
    ]
  }
}

{
  "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"
        }
      }
    ]
  }
}

{
  "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
      }
    ]
  }
}

{
  "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
      }
    ]
  }
}

{
  "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}%"
        }
      }
    ]
  }
}

{
  "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
      }
    ]
  }
}

{
  "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"
        }
      }
    ]
  }
}

{
  "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}%"
        }
      }
    ]
  }
}

{
  "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
          }
        }
      }
    ]
  }
}

{
  "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
  }
}

{
  "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
}

{
  "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
}

{
  "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
}

{
  "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
}

{
  "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
}

{
  "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
      }
    }
  }
}

{
  "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
  },
  "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
}

{
  "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
}

{
  "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
  }
}

{
  "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."
}

{
  "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__}}"
}

{
  "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>"
  }
}

{
  "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__"
        }
      }
    }
  }
}

{
  "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
    }
  ]
}

{
  "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>"
}

{
  "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
      }
    ]
  }
}

{
  "type": "geolibre",
  "id": "gis_workspace",
  "title": "GIS workspace",
  "span": 12,
  "heightMode": "fixed",
  "height": 520,
  "capabilityProfile": "powerbi-embedded",
  "runtime": {
    "channel": "managed",
    "panels": "open",
    "theme": "system"
  },
  "powerBi": {
    "layers": [
      {
        "id": "locations",
        "title": "Power BI locations",
        "geometry": {
          "latitudeField": "__latitude_field__",
          "longitudeField": "__longitude_field__"
        }
      }
    ],
    "selection": {
      "enabled": true,
      "externalHighlight": true,
      "maxSelectionCount": 1000
    }
  },
  "interaction": {
    "enabled": true,
    "trigger": "click",
    "internalMode": "highlight",
    "internalScope": "all",
    "externalMode": "selection",
    "selectionMode": "replace",
    "multiSelect": true
  }
}