feat: initial project setup with implementation plan
- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
75
docs/vendor/monsterui/api_ref/docs_charts.md
vendored
Normal file
75
docs/vendor/monsterui/api_ref/docs_charts.md
vendored
Normal file
@@ -0,0 +1,75 @@
|
||||
# Charts API Reference
|
||||
|
||||
MonsterUI supports ApexCharts, a javascript library for rendering different charts like line and pie charts. See the full list of chart types here.
|
||||
|
||||
To render a chart you'll need to include the ApexChart js in your app headers like this
|
||||
|
||||
`app, rt = fast_app(hdrs=Theme.blue.headers(apex_charts=True))`
|
||||
|
||||
Then create an `ApexChart` component as shown in the examples below.
|
||||
|
||||
Generally, you should be able to take any chart from the ApexChart docs, convert the chart's options var to a python dict and plug it straight into MonsterUI's ApexChart component.
|
||||
|
||||
## Example usage
|
||||
|
||||
#### Line chart
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
[code]
|
||||
|
||||
def ex_line_chart():
|
||||
return ApexChart(
|
||||
opts={
|
||||
"chart": {"type":"line", "zoom":{"enabled": False}, "toolbar":{"show":False}},
|
||||
"series": [{"name":"Desktops", "data": [186, 305, 237, 73, 209, 214, 355]}],
|
||||
"xaxis": {"categories":["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
|
||||
},
|
||||
cls='max-w-md max-h-md'
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
#### Pie chart
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
[code]
|
||||
|
||||
def ex_pie_chart():
|
||||
return ApexChart(
|
||||
opts={
|
||||
"chart": {"type":"pie", "zoom":{"enabled": False}, "toolbar":{"show":False}},
|
||||
"series": [186, 305, 237, 73, 209, 214, 355],
|
||||
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
|
||||
},
|
||||
cls='max-w-md max-h-md'
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
### ApexChart
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
ApexChart(*, opts: Dict, cls: enum.Enum | str | tuple = (), **kws) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Apex chart component
|
||||
|
||||
**Params**
|
||||
|
||||
* `opts` ApexChart options used to render your chart (e.g. {"chart":{"type":"line"}, ...})
|
||||
|
||||
* `cls` Classes for the outer container
|
||||
|
||||
* `kws`
|
||||
|
||||
**Returns:** Div(Uk_chart(Script(...)))
|
||||
|
||||
Reference in New Issue
Block a user