"
@@ -3549,17 +3549,154 @@
},
{
"cell_type": "markdown",
- "id": "ad606199",
+ "id": "626d7354",
"metadata": {},
"source": [
- "## export -"
+ "### Apex Charts\n",
+ "FrankenUI supports [ApexCharts](https://franken-ui.dev/docs/2.0/chart-introduction) which is a javascript [library](https://apexcharts.com/) for rendering charts. \n",
+ "\n",
+ "ApexCharts supports many different chart types like line charts, scatter plots and bar charts. See the full list [here](https://apexcharts.com/javascript-chart-demos/).\n",
+ "\n",
+ "To render a simple line chart we need to include the ApexChart [js](https://cdn.jsdelivr.net/npm/franken-ui@2.0.0/dist/js/chart.iife.js) in our app headers and then generate the following html.\n",
+ "\n",
+ "```html\n",
+ "\n",
+ " \n",
+ " \n",
+ " \n",
+ "
\n",
+ "```"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "4cab7bd6",
+ "metadata": {},
+ "source": [
+ "Let's create a simple component that will take a dictionary that describes the chart and create the html shown above."
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "id": "124849e8",
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "#| export\n",
+ "def ApexChart(*, \n",
+ " opts:Dict, # ApexChart options used to render your chart (e.g. {\"chart\":{\"type\":\"line\"}, ...})\n",
+ " cls: Enum | str | tuple = (), # Classes for the outer container\n",
+ " **kws, # Additional args for the outer container\n",
+ " )->FT: # Div(Uk_chart(Script(...)))\n",
+ " \"Apex chart component\"\n",
+ " js=NotStr(f\"\")\n",
+ " return Div(Uk_chart(js), cls=stringify(cls), **kws)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "4bf68297",
+ "metadata": {},
+ "source": [
+ "Let's render a simple line chart example."
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "id": "08c8c968",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/markdown": [
+ "```html\n",
+ "\n",
+ "
\n",
+ "\n",
+ "```"
+ ],
+ "text/plain": [
+ "div((uk-chart(('',),{}),),{'class': 'max-w-md max-h-md'})"
+ ]
+ },
+ "execution_count": null,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "chart = ApexChart(\n",
+ " opts={\n",
+ " \"chart\": {\"type\": \"line\", \"zoom\": {\"enabled\": False}, \"toolbar\": {\"show\": False}},\n",
+ " \"series\":[{\"name\": \"Desktops\", \"data\": [186, 305, 237, 73, 209, 214, 355]}],\n",
+ " \"xaxis\": {\"categories\":[\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"]}\n",
+ " },\n",
+ " cls='max-w-md max-h-md'\n",
+ ")\n",
+ "chart"
]
},
{
"cell_type": "code",
"execution_count": null,
+ "id": "1158ce84",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ " "
+ ],
+ "text/plain": [
+ ""
+ ]
+ },
+ "execution_count": null,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "Show(chart)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "36e36f28",
+ "metadata": {},
+ "source": [
+ "To include the ApexChart js in your app headers set `apex_charts=True` like this\n",
+ "\n",
+ "`app, rt = fast_app(hdrs=Theme.blue.headers(apex_charts=True))`"
+ ]
+ },
+ {
+ "cell_type": "markdown",
"id": "e05a5ad6",
"metadata": {},
+ "source": [
+ "## export -"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "id": "909c1b2f",
+ "metadata": {},
"outputs": [],
"source": [
"#|hide\n",