xtal-sip
Version:
Dynamically "water" a custom element tag with the necessary dependencies to sprout the tag from an inert seedling to a thing of beauty.
76 lines (69 loc) • 3.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>xtal-frappe-chart demo</title>
<!-- Use experimental import maps -->
<script defer src="https://cdn.jsdelivr.net/npm/es-module-shims@0.2.0/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"xtal-element/": "https://cdn.jsdelivr.net/npm/xtal-element@0.0.83/",
"trans-render/": "https://cdn.jsdelivr.net/npm/trans-render@0.0.131/",
"frappe-charts/": "https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/",
"xtal-insert-json": "https://cdn.jsdelivr.net/npm/xtal-json-merge@0.2.37/xtal-insert-json.js",
"xtal-json-editor": "https://cdn.jsdelivr.net/npm/xtal-json-editor@0.0.39/xtal-json-editor.js",
"p-d": "https://cdn.jsdelivr.net/npm/p-et-alia@0.0.46/p-d.js",
"xtal-frappe-chart": "https://cdn.jsdelivr.net/npm/xtal-frappe-chart@0.0.44/xtal-frappe-chart.js"
}
}
</script>
<script type="module-shim">
import '../xtal-sip.js';
</script>
</head>
<body>
<div>
<h3>Basic xtal-frappe-chart demo</h3>
<h4>Important instructions: set attribute "load" on xtal-frappe-chart to see the chart load.</h4>
<xtal-sip>
<script nomodule>["xtal-frappe-chart[load]", "xtal-insert-json", "xtal-json-editor", "p-d"]</script>
</xtal-sip>
<xtal-insert-json input="[]">
<script type="application/json">
[
{
"title": "My Awesome Chart",
"data": {
"labels": ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
"datasets": [
{
"name": "Some Data", "color": "light-blue",
"values": [25, 40, 30, 35, 8, 52, 17, -4]
},
{
"name": "Another Set", "color": "violet",
"values": [25, 50, -10, 15, 18, 32, 27, 14]
},
{
"name": "Yet Another", "color": "blue",
"values": [15, 20, -3, -15, 58, 12, -17, 37]
}
]
},
"type": "bar",
"height": 250,
"isNavigable": true
}
]
</script>
</xtal-insert-json>
<p-d on="merged-prop-changed" prop="data" val="target.value"></p-d>
<xtal-frappe-chart></xtal-frappe-chart>
<p-d on="selected-element-changed" prop="input" val="target.value"></p-d>
<xtal-json-editor options="{}" height="300px"></xtal-json-editor>
</div>
</body>
</html>