mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-08-09 15:19:10 +02:00
167 lines
No EOL
4.1 KiB
HTML
167 lines
No EOL
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Prefab</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
|
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
|
<script id="prefab:initial-data" type="application/json">{
|
|
"$prefab": {
|
|
"version": "0.2"
|
|
},
|
|
"view": {
|
|
"cssClass": "pf-app-root",
|
|
"type": "Div",
|
|
"children": [
|
|
{
|
|
"cssClass": "gap-4 p-6",
|
|
"let": {
|
|
"data": "{{ region == 'south' ? south : region == 'west' ? west : north }}"
|
|
},
|
|
"type": "Column",
|
|
"children": [
|
|
{
|
|
"cssClass": "gap-4 items-center",
|
|
"type": "Row",
|
|
"children": [
|
|
{
|
|
"cssClass": "w-40",
|
|
"name": "region",
|
|
"type": "Select",
|
|
"size": "default",
|
|
"disabled": false,
|
|
"required": false,
|
|
"invalid": false,
|
|
"children": [
|
|
{
|
|
"type": "SelectOption",
|
|
"value": "north",
|
|
"label": "North",
|
|
"selected": false,
|
|
"disabled": false
|
|
},
|
|
{
|
|
"type": "SelectOption",
|
|
"value": "south",
|
|
"label": "South",
|
|
"selected": false,
|
|
"disabled": false
|
|
},
|
|
{
|
|
"type": "SelectOption",
|
|
"value": "west",
|
|
"label": "West",
|
|
"selected": false,
|
|
"disabled": false
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"cssClass": "ml-auto",
|
|
"name": "show_target",
|
|
"value": false,
|
|
"type": "Switch",
|
|
"size": "default",
|
|
"disabled": false,
|
|
"required": false
|
|
},
|
|
{
|
|
"cssClass": "text-sm text-muted-foreground",
|
|
"content": "Show target",
|
|
"type": "Text"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "BarChart",
|
|
"data": "{{ data }}",
|
|
"series": [
|
|
{
|
|
"dataKey": "sales",
|
|
"label": "Sales"
|
|
}
|
|
],
|
|
"xAxis": "month",
|
|
"height": 200,
|
|
"stacked": false,
|
|
"horizontal": false,
|
|
"barRadius": 4,
|
|
"showLegend": true,
|
|
"showTooltip": true,
|
|
"animate": true,
|
|
"showGrid": true,
|
|
"showYAxis": true,
|
|
"yAxisFormat": "auto"
|
|
},
|
|
{
|
|
"type": "Condition",
|
|
"cases": [
|
|
{
|
|
"when": "{{ show_target }}",
|
|
"children": [
|
|
{
|
|
"type": "Metric",
|
|
"label": "Q1 Target",
|
|
"value": "$75,000"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"state": {
|
|
"region": "north",
|
|
"north": [
|
|
{
|
|
"month": "Jan",
|
|
"sales": 22000
|
|
},
|
|
{
|
|
"month": "Feb",
|
|
"sales": 25500
|
|
},
|
|
{
|
|
"month": "Mar",
|
|
"sales": 24200
|
|
}
|
|
],
|
|
"south": [
|
|
{
|
|
"month": "Jan",
|
|
"sales": 5800
|
|
},
|
|
{
|
|
"month": "Feb",
|
|
"sales": 6400
|
|
},
|
|
{
|
|
"month": "Mar",
|
|
"sales": 5600
|
|
}
|
|
],
|
|
"west": [
|
|
{
|
|
"month": "Jan",
|
|
"sales": 6000
|
|
},
|
|
{
|
|
"month": "Feb",
|
|
"sales": 6000
|
|
},
|
|
{
|
|
"month": "Mar",
|
|
"sales": 5600
|
|
}
|
|
],
|
|
"show_target": true
|
|
}
|
|
}</script>
|
|
</body>
|
|
</html> |