Elements

42 / 59 · Generative

Portfolio overview

A holdings summary combining key facts, an axis-labeled bar chart, and a table of positions.

Portfolio overview
Total value
$128,430
Today
+2.4%
Positions
12

Performance

200,000
150,000
100,000
50,000
0
Mon
Tue
Wed
Thu
Fri
SymbolSharesPriceValue
ACME40$182.10$7,284.00
GLBX25$94.55$2,363.75
NORT15$310.20$4,653.00

Prices delayed by 15 minutes. See the disclosure for details.

Installation

npm install @assistant-ui/react-generative-ui

Usage

import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";

<div data-aui-theme="elements">
  {renderGenerativeUI(spec, library, { status: "done" })}
</div>

Spec

Data
{
  "$type": "Card",
  "title": "Portfolio overview",
  "children": [
    {
      "$type": "Row",
      "$key": "facts",
      "gap": 6,
      "children": [
        {
          "$type": "Fact",
          "$key": "value",
          "label": "Total value",
          "value": "$128,430"
        },
        {
          "$type": "Fact",
          "$key": "change",
          "label": "Today",
          "value": "+2.4%"
        },
        {
          "$type": "Fact",
          "$key": "positions",
          "label": "Positions",
          "value": "12"
        }
      ]
    },
    {
      "$type": "Header",
      "$key": "chart-header",
      "text": "Performance",
      "size": "sm"
    },
    {
      "$type": "Chart",
      "$key": "chart-bar",
      "variant": "bar",
      "showAxis": true,
      "data": [
        {
          "label": "Mon",
          "value": 120400
        },
        {
          "label": "Tue",
          "value": 121800
        },
        {
          "label": "Wed",
          "value": 119600
        },
        {
          "label": "Thu",
          "value": 124200
        },
        {
          "label": "Fri",
          "value": 128430
        }
      ]
    },
    {
      "$type": "Table",
      "$key": "holdings",
      "columns": [
        {
          "label": "Symbol"
        },
        {
          "label": "Shares"
        },
        {
          "label": "Price"
        },
        {
          "label": "Value"
        }
      ],
      "rows": [
        [
          "ACME",
          40,
          "$182.10",
          "$7,284.00"
        ],
        [
          "GLBX",
          25,
          "$94.55",
          "$2,363.75"
        ],
        [
          "NORT",
          15,
          "$310.20",
          "$4,653.00"
        ]
      ]
    },
    {
      "$type": "Markdown",
      "$key": "footnote",
      "value": "Prices delayed by 15 minutes. See the [disclosure](/legal/disclosure) for details."
    }
  ]
}

Component vocabulary →