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:
2025-12-27 17:37:16 +00:00
parent 852107794b
commit c0b939627b
61 changed files with 18076 additions and 0 deletions

View 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(...)))