56 / 59 · Generative
Response time
A single-series line chart with axis ticks.
500
375
250
125
0
12a
4a
8a
12p
4p
8p
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": "Response time (p50)",
"children": [
{
"$type": "Chart",
"$key": "chart",
"variant": "line",
"showAxis": true,
"data": [
{
"label": "12a",
"value": 120
},
{
"label": "4a",
"value": 98
},
{
"label": "8a",
"value": 210
},
{
"label": "12p",
"value": 340
},
{
"label": "4p",
"value": 280
},
{
"label": "8p",
"value": 190
}
]
}
]
}