reflex-rosencharts 0.1.0__tar.gz

reflex_rosencharts-0.1.0/.gitignore

@@ -0,0 +1,19 @@
+*.db
+*.py[cod]
+.web
+assets/external/
+.states
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv
+
+# coverage
+.coverage
+htmlcov/

reflex_rosencharts-0.1.0/CONTRIBUTING.md

@@ -0,0 +1,84 @@
+# Contribuir — Receta de port (rosencharts → Reflex)
+
+Patrón **probado** (validado end-to-end con el piloto `line_chart`, compila con
+`reflex export`). Detalle de diseño en
+[`specs/technical/architecture.md`](specs/technical/architecture.md) §5.2.
+
+## Layout de assets (importante)
+
+`rx.asset("x.tsx", shared=True)` copia el archivo a
+`public/external/<módulo_python_punteado_como_dirs>/x.tsx`. Es decir, el módulo
+`reflex_rosencharts.components.line.line_chart` deja su TSX en
+`external/reflex_rosencharts/components/line/line_chart/line_chart.tsx`.
+
+Como **toda** gráfica vive en `components/<familia>/<name>.py` (asset = `<name>.tsx`),
+su TSX queda en `.../components/<familia>/<name>/<name>.tsx`, y el helper compartido
+en `.../components/helpers/client_tooltip/ClientTooltip.tsx`. Por eso la ruta relativa
+al helper es **constante para todas las gráficas**:
+
+```tsx
+import { ClientTooltip, TooltipTrigger, TooltipContent } from "../../helpers/client_tooltip/ClientTooltip";
+```
+
+## Pasos por gráfica (TDD)
+
+1. **RED** — `tests/test_<familia>.py`: la función existe, es importable, `.create(data=...)`
+   construye un `rx.Component`, y el default reproduce el ejemplo. Corre el test y velo fallar.
+2. **Copiar** `reference/rosencharts/<familia>-charts/<n>_<Name>.tsx`
+   → `reflex_rosencharts/components/<familia>/<name>.tsx`.
+3. **Parametrizar datos**: sustituir el array hardcodeado por una prop con default = ejemplo:
+   ```tsx
+   const defaultData = [ ...ejemplo original... ];
+   export function ChartName({ data = defaultData, color = "..." }: {...}) {
+     if (data.length === 0) return <div className="relative h-72 w-full" />;
+     // ... mapear/escalas a partir de `data`
+   }
+   ```
+4. **Ajustar import del helper** (sólo si usa tooltip) a la ruta constante de arriba.
+5. **Wrapper Python** (`<name>.py`):
+   ```python
+   from typing import TypedDict
+   import reflex as rx
+   from ..helpers.client_tooltip import client_tooltip_asset  # sólo si usa tooltip
+
+   class LinePoint(TypedDict):
+       date: str
+       value: float
+
+   _DEFAULT_DATA: list[LinePoint] = [ ...ejemplo... ]
+
+   client_tooltip_asset()                       # sólo si usa tooltip (lo hace viajar)
+   _PATH = rx.asset("line_chart.tsx", shared=True)
+
+   class LineChart(rx.NoSSRComponent):          # NoSSRComponent si usa portal/tooltip; rx.Component si no
+       library = f"$/public{_PATH}"
+       tag = "LineChart"                         # == nombre exportado en el TSX
+       is_default = False
+       lib_dependencies: list[str] = ["d3"]      # si el TSX importa de "d3"
+       data: rx.Var[list[LinePoint]] = rx.Var.create(_DEFAULT_DATA)
+       color: rx.Var[str] = rx.Var.create("stroke-fuchsia-400")
+
+   def line_chart(**props) -> rx.Component:
+       return LineChart.create(**props)
+   ```
+6. **Re-exportar** en `components/<familia>/__init__.py` y en `reflex_rosencharts/__init__.py`.
+7. **Entrada de galería** en `components/<familia>/gallery.py` (lista `GALLERY_ENTRIES`); el
+   registry central la recoge sin tocar archivos compartidos.
+8. **GREEN** — corre el test y velo pasar. Refactor manteniendo verde. Commit.
+
+## Reglas
+
+- Nombre Python en `snake_case`; quitar sufijo `_DIV` (técnica de render, va en el docstring).
+- `tag` debe coincidir EXACTAMENTE con el nombre `export function <Tag>` del TSX.
+- `data` vacío ⇒ render de contenedor vacío, nunca lanzar excepción.
+- Conservar variantes `dark:` de Tailwind.
+- Cada variante con campos extra define su propio `TypedDict` (ver Data Model §4).
+- Gráficas SIN tooltip: usar `rx.Component` (no NoSSR) y omitir `client_tooltip_asset()`.
+
+## Definición de Done (por gráfica)
+
+- [ ] Test TDD verde (import + render + default)
+- [ ] Wrapper + TSX parametrizado + re-export en ambos `__init__`
+- [ ] Entrada en `components/<familia>/gallery.py`
+- [ ] Compila en `reflex export`
+- [ ] Docstring con esquema de datos y snippet

reflex_rosencharts-0.1.0/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Filipe Sommer (original rosencharts)
+Copyright (c) 2026 Ernesto Crespo (reflex-rosencharts port)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

reflex_rosencharts-0.1.0/NOTICE

@@ -0,0 +1,9 @@
+reflex-rosencharts
+==================
+
+Este proyecto es un port a Reflex de "rosencharts":
+  https://github.com/Filsommer/rosenCharts
+  Copyright (c) Filsommer — Licencia MIT
+
+El código original (TSX) se conserva como referencia en reference/rosencharts/
+bajo su licencia MIT original. Las adaptaciones a Reflex se distribuyen bajo MIT.

reflex_rosencharts-0.1.0/PKG-INFO

@@ -0,0 +1,100 @@
+Metadata-Version: 2.4
+Name: reflex-rosencharts
+Version: 0.1.0
+Summary: rosencharts charts (D3 + Tailwind) ported to Reflex as Python components — 43 charts, no JS required.
+Project-URL: Homepage, https://github.com/ecrespo/reflex-rosencharts
+Project-URL: Source, https://github.com/ecrespo/reflex-rosencharts
+Project-URL: Issues, https://github.com/ecrespo/reflex-rosencharts/issues
+Author-email: Ernesto Crespo <ecrespo@gmail.com>
+License-Expression: MIT
+License-File: LICENSE
+License-File: NOTICE
+Keywords: charts,components,d3,dataviz,reflex,rosencharts,tailwind,visualization
+Classifier: Development Status :: 4 - Beta
+Classifier: Intended Audience :: Developers
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Topic :: Scientific/Engineering :: Visualization
+Classifier: Topic :: Software Development :: Libraries :: Python Modules
+Classifier: Typing :: Typed
+Requires-Python: >=3.10
+Requires-Dist: reflex>=0.9.5.post2
+Description-Content-Type: text/markdown
+
+# reflex-rosencharts
+
+Port de la librería de gráficas [**rosencharts**](https://github.com/Filsommer/rosenCharts)
+(43 componentes React/TSX con D3.js + Tailwind) a un **custom component de
+[Reflex](https://reflex.dev/)**, para usar las gráficas desde Python puro.
+
+> Estado: **43/43 gráficas implementadas** ✅ — todas con wrapper Python, TSX parametrizado,
+> ejemplo en la galería y tests. La app demo (`reflex run`) muestra las 43 con su snippet de uso.
+> Capturas en [`docs/screenshots/`](docs/screenshots/).
+
+## ¿Por qué?
+
+rosencharts no es un paquete npm: son componentes `.tsx` para copiar y pegar, con datos
+hardcodeados y estilo Tailwind. Este proyecto los envuelve como **componentes locales de Reflex**
+(`rx.asset` + `library="$/public..."`), los parametriza para recibir datos desde `rx.State`, y los
+expone como funciones Python:
+
+```python
+import reflex as rx
+import reflex_rosencharts as rxc
+
+class State(rx.State):
+    sales: list[dict] = [{"date": "2023-05-01", "value": 6}, {"date": "2023-05-02", "value": 8}]
+
+def index() -> rx.Component:
+    return rxc.line_chart(data=State.sales)
+```
+
+## Gráficas (43 en 8 familias)
+
+| Familia | Nº | Ejemplos |
+|---|---|---|
+| Area | 4 | `area_chart`, `area_chart_gradient` |
+| Bar | 12 | `bar_chart_horizontal`, `bar_chart_benchmark` |
+| Line | 8 | `line_chart`, `line_chart_multiple` |
+| Pie/Donut | 8 | `pie_chart`, `donut_chart_center_text` |
+| Scatter | 4 | `scatter_chart`, `scatter_chart_interactive` |
+| Treemap | 3 | `treemap_chart`, `treemap_chart_images` |
+| Radar | 2 | `radar_chart`, `radar_chart_rounded` |
+| Other | 2 | `bubble_chart`, `funnel_chart` |
+
+Catálogo completo y props: [`specs/api/component-api-v1.md`](specs/api/component-api-v1.md).
+
+## Desarrollo
+
+Gestionado con [uv](https://docs.astral.sh/uv/):
+
+```bash
+uv sync                 # instalar dependencias
+uv run reflex run       # arrancar la demo app / galería (las 43 gráficas)
+uv run pytest           # tests de los wrappers (TDD)
+```
+
+La **galería demo** vive en `reflex_rosencharts/reflex_rosencharts.py`: barra lateral por familia
+y una tarjeta por gráfica (gráfica renderizada con datos de ejemplo + snippet Python). Es el banco
+de pruebas visual del port.
+
+## Especificaciones (SDD)
+
+El proyecto sigue **Spec-Driven Design**. Las specs son el artefacto primario:
+
+- [PRD](specs/prd/reflex-rosencharts-prd.md) — el qué y el para quién
+- [API Spec](specs/api/component-api-v1.md) — API pública Python (funciones, props)
+- [Technical Design](specs/technical/architecture.md) — patrón de wrapping y arquitectura
+- [Data Model](specs/data-model/chart-data-schemas.md) — esquemas de datos por gráfica
+- [Implementation Plan](specs/plans/implementation-plan.md) — fases por familia
+
+El código original (referencia, solo lectura) está en [`reference/rosencharts/`](reference/rosencharts/).
+
+## Licencia y atribución
+
+MIT. Este proyecto es un port de [rosencharts](https://github.com/Filsommer/rosenCharts)
+de Filsommer (MIT). Ver [`LICENSE`](LICENSE) y [`NOTICE`](NOTICE).

reflex_rosencharts-0.1.0/README.md

@@ -0,0 +1,73 @@
+# reflex-rosencharts
+
+Port de la librería de gráficas [**rosencharts**](https://github.com/Filsommer/rosenCharts)
+(43 componentes React/TSX con D3.js + Tailwind) a un **custom component de
+[Reflex](https://reflex.dev/)**, para usar las gráficas desde Python puro.
+
+> Estado: **43/43 gráficas implementadas** ✅ — todas con wrapper Python, TSX parametrizado,
+> ejemplo en la galería y tests. La app demo (`reflex run`) muestra las 43 con su snippet de uso.
+> Capturas en [`docs/screenshots/`](docs/screenshots/).
+
+## ¿Por qué?
+
+rosencharts no es un paquete npm: son componentes `.tsx` para copiar y pegar, con datos
+hardcodeados y estilo Tailwind. Este proyecto los envuelve como **componentes locales de Reflex**
+(`rx.asset` + `library="$/public..."`), los parametriza para recibir datos desde `rx.State`, y los
+expone como funciones Python:
+
+```python
+import reflex as rx
+import reflex_rosencharts as rxc
+
+class State(rx.State):
+    sales: list[dict] = [{"date": "2023-05-01", "value": 6}, {"date": "2023-05-02", "value": 8}]
+
+def index() -> rx.Component:
+    return rxc.line_chart(data=State.sales)
+```
+
+## Gráficas (43 en 8 familias)
+
+| Familia | Nº | Ejemplos |
+|---|---|---|
+| Area | 4 | `area_chart`, `area_chart_gradient` |
+| Bar | 12 | `bar_chart_horizontal`, `bar_chart_benchmark` |
+| Line | 8 | `line_chart`, `line_chart_multiple` |
+| Pie/Donut | 8 | `pie_chart`, `donut_chart_center_text` |
+| Scatter | 4 | `scatter_chart`, `scatter_chart_interactive` |
+| Treemap | 3 | `treemap_chart`, `treemap_chart_images` |
+| Radar | 2 | `radar_chart`, `radar_chart_rounded` |
+| Other | 2 | `bubble_chart`, `funnel_chart` |
+
+Catálogo completo y props: [`specs/api/component-api-v1.md`](specs/api/component-api-v1.md).
+
+## Desarrollo
+
+Gestionado con [uv](https://docs.astral.sh/uv/):
+
+```bash
+uv sync                 # instalar dependencias
+uv run reflex run       # arrancar la demo app / galería (las 43 gráficas)
+uv run pytest           # tests de los wrappers (TDD)
+```
+
+La **galería demo** vive en `reflex_rosencharts/reflex_rosencharts.py`: barra lateral por familia
+y una tarjeta por gráfica (gráfica renderizada con datos de ejemplo + snippet Python). Es el banco
+de pruebas visual del port.
+
+## Especificaciones (SDD)
+
+El proyecto sigue **Spec-Driven Design**. Las specs son el artefacto primario:
+
+- [PRD](specs/prd/reflex-rosencharts-prd.md) — el qué y el para quién
+- [API Spec](specs/api/component-api-v1.md) — API pública Python (funciones, props)
+- [Technical Design](specs/technical/architecture.md) — patrón de wrapping y arquitectura
+- [Data Model](specs/data-model/chart-data-schemas.md) — esquemas de datos por gráfica
+- [Implementation Plan](specs/plans/implementation-plan.md) — fases por familia
+
+El código original (referencia, solo lectura) está en [`reference/rosencharts/`](reference/rosencharts/).
+
+## Licencia y atribución
+
+MIT. Este proyecto es un port de [rosencharts](https://github.com/Filsommer/rosenCharts)
+de Filsommer (MIT). Ver [`LICENSE`](LICENSE) y [`NOTICE`](NOTICE).

reflex_rosencharts-0.1.0/pyproject.toml

@@ -0,0 +1,57 @@
+[project]
+name = "reflex-rosencharts"
+version = "0.1.0"
+description = "rosencharts charts (D3 + Tailwind) ported to Reflex as Python components — 43 charts, no JS required."
+readme = "README.md"
+license = "MIT"
+license-files = ["LICENSE", "NOTICE"]
+requires-python = ">=3.10"
+authors = [{ name = "Ernesto Crespo", email = "ecrespo@gmail.com" }]
+keywords = ["reflex", "charts", "d3", "tailwind", "dataviz", "visualization", "rosencharts", "components"]
+classifiers = [
+    "Development Status :: 4 - Beta",
+    "Intended Audience :: Developers",
+    "Operating System :: OS Independent",
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "Programming Language :: Python :: 3.12",
+    "Programming Language :: Python :: 3.13",
+    "Topic :: Scientific/Engineering :: Visualization",
+    "Topic :: Software Development :: Libraries :: Python Modules",
+    "Typing :: Typed",
+]
+dependencies = [
+    "reflex>=0.9.5.post2",
+]
+
+[project.urls]
+Homepage = "https://github.com/ecrespo/reflex-rosencharts"
+Source = "https://github.com/ecrespo/reflex-rosencharts"
+Issues = "https://github.com/ecrespo/reflex-rosencharts/issues"
+
+[dependency-groups]
+dev = [
+    "playwright>=1.60.0",
+    "pytest>=9.1.0",
+    "pytest-cov>=7.1.0",
+    "twine>=5.0.0",
+]
+
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[tool.hatch.build.targets.wheel]
+# Ship the Python wrappers AND the parametrized .tsx assets they wrap.
+packages = ["reflex_rosencharts"]
+artifacts = ["*.tsx"]
+
+[tool.hatch.build.targets.sdist]
+include = [
+    "reflex_rosencharts",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "CONTRIBUTING.md",
+]

reflex_rosencharts-0.1.0/reference/rosencharts/README.md

@@ -0,0 +1,31 @@
+# Rosen - A React Charting Library
+
+A lightweight and easy-to-use charting library built with D3.js and Tailwind. Just copy-paste the code and install the required dependencies to get started!
+
+## Installation
+
+First, install D3.js by running:
+
+```sh
+npm install d3
+```
+
+If you're using TypeScript, install the D3 types as well:
+
+```sh
+npm install --save-dev @types/d3
+```
+
+## Usage
+
+Simply copy and paste the provided charting code into your project and ensure that D3.js is installed.
+
+## Features
+
+- Simple copy-paste integration
+- Uses D3.js for powerful and flexible charting
+- Works with JavaScript and TypeScript
+
+## License
+
+MIT

reflex_rosencharts-0.1.0/reflex_rosencharts/__init__.py

@@ -0,0 +1,30 @@
+"""reflex-rosencharts: port de rosencharts a componentes de Reflex.
+
+API pública (a poblar durante la implementación, ver specs/api/component-api-v1.md):
+    import reflex_rosencharts as rxc
+    rxc.line_chart(data=...)
+
+Por ahora el paquete expone el scaffold y la demo app. Las funciones de gráfica
+se irán re-exportando aquí a medida que se porten (fases F1-F7 del plan).
+"""
+
+__version__ = "0.1.0"
+
+# Public API — aggregated dynamically from each family package so that charts can be
+# ported in parallel without ever editing this shared file. Each family's __init__
+# declares __all__; we lift those names into the package namespace.
+import importlib as _importlib  # noqa: E402
+
+_FAMILIES = ["line", "area", "bar", "pie", "scatter", "treemap", "radar", "other"]
+__all__: list[str] = []
+
+for _family in _FAMILIES:
+    try:
+        _mod = _importlib.import_module(f".components.{_family}", __name__)
+    except ModuleNotFoundError:
+        continue
+    for _name in getattr(_mod, "__all__", []):
+        globals()[_name] = getattr(_mod, _name)
+        __all__.append(_name)
+
+del _importlib, _family, _FAMILIES

reflex_rosencharts-0.1.0/reflex_rosencharts/components/__init__.py

@@ -0,0 +1,5 @@
+"""Subpaquetes de componentes por familia de gráfica.
+
+Cada familia (area, bar, line, pie, radar, scatter, treemap, other) contendrá
+los wrappers de Reflex (rx.Component) + sus TSX parametrizados. Ver specs/.
+"""

reflex_rosencharts-0.1.0/reflex_rosencharts/components/area/__init__.py

@@ -0,0 +1,13 @@
+"""Componentes rosencharts: familia area."""
+
+from .area_chart import area_chart
+from .area_chart_full import area_chart_full
+from .area_chart_gradient import area_chart_gradient
+from .area_chart_semi_filled import area_chart_semi_filled
+
+__all__ = [
+    "area_chart",
+    "area_chart_full",
+    "area_chart_gradient",
+    "area_chart_semi_filled",
+]

reflex_rosencharts-0.1.0/reflex_rosencharts/components/area/area_chart.py

@@ -0,0 +1,110 @@
+"""area_chart — port of rosencharts area-charts/1_AreaChart.tsx to Reflex.
+
+Render technique: D3 ``scaleTime``/``scaleLinear`` with ``d3.area`` + ``d3.line``
+(curveMonotoneX), styled with Tailwind. Uses the shared ClientTooltip helper
+(createPortal), so the component renders client-side only (NoSSRComponent).
+
+Data schema (``AreaPoint``)::
+
+    {"date": "YYYY-MM-DD", "value": float}
+
+Example::
+
+    import reflex_rosencharts as rxc
+    rxc.area_chart(data=State.sales, color="text-purple-200 dark:text-purple-400")
+"""
+
+from typing import TypedDict
+
+import reflex as rx
+
+from ..helpers.client_tooltip import client_tooltip_asset
+
+
+class AreaPoint(TypedDict):
+    """A single point of a time series."""
+
+    date: str  # ISO date 'YYYY-MM-DD'
+    value: float
+
+
+# Default dataset == the original rosencharts example, so ``area_chart()`` with no
+# args reproduces the reference chart (Tech Design DD-002).
+_DEFAULT_DATA: list[AreaPoint] = [
+    {"date": "2023-04-30", "value": 4},
+    {"date": "2023-05-01", "value": 6},
+    {"date": "2023-05-02", "value": 8},
+    {"date": "2023-05-03", "value": 7},
+    {"date": "2023-05-04", "value": 10},
+    {"date": "2023-05-05", "value": 12},
+    {"date": "2023-05-06", "value": 10.5},
+    {"date": "2023-05-07", "value": 6},
+    {"date": "2023-05-08", "value": 8},
+    {"date": "2023-05-09", "value": 7.5},
+    {"date": "2023-05-10", "value": 6},
+    {"date": "2023-05-11", "value": 8},
+    {"date": "2023-05-12", "value": 9},
+    {"date": "2023-05-13", "value": 10},
+    {"date": "2023-05-14", "value": 17},
+    {"date": "2023-05-15", "value": 14},
+    {"date": "2023-05-16", "value": 15},
+    {"date": "2023-05-17", "value": 20},
+    {"date": "2023-05-18", "value": 18},
+    {"date": "2023-05-19", "value": 16},
+    {"date": "2023-05-20", "value": 15},
+    {"date": "2023-05-21", "value": 16},
+    {"date": "2023-05-22", "value": 13},
+    {"date": "2023-05-23", "value": 11},
+    {"date": "2023-05-24", "value": 11},
+    {"date": "2023-05-25", "value": 13},
+    {"date": "2023-05-26", "value": 12},
+    {"date": "2023-05-27", "value": 9},
+    {"date": "2023-05-28", "value": 8},
+    {"date": "2023-05-29", "value": 10},
+    {"date": "2023-05-30", "value": 11},
+    {"date": "2023-05-31", "value": 8},
+    {"date": "2023-06-01", "value": 9},
+    {"date": "2023-06-02", "value": 10},
+    {"date": "2023-06-03", "value": 12},
+    {"date": "2023-06-04", "value": 13},
+    {"date": "2023-06-05", "value": 15},
+    {"date": "2023-06-06", "value": 13.5},
+    {"date": "2023-06-07", "value": 13},
+    {"date": "2023-06-08", "value": 13},
+    {"date": "2023-06-09", "value": 14},
+    {"date": "2023-06-10", "value": 13},
+    {"date": "2023-06-11", "value": 12.5},
+]
+
+# Ship the shared helper next to this chart so the TSX's relative import resolves.
+client_tooltip_asset()
+_PATH = rx.asset("area_chart.tsx", shared=True)
+
+
+class AreaChart(rx.NoSSRComponent):
+    """Reflex wrapper around the parametrized AreaChart TSX."""
+
+    library = f"$/public{_PATH}"
+    tag = "AreaChart"
+    is_default = False
+
+    lib_dependencies: list[str] = ["d3"]
+
+    # Props
+    data: rx.Var[list[AreaPoint]] = rx.Var.create(_DEFAULT_DATA)
+    color: rx.Var[str] = rx.Var.create("text-purple-200 dark:text-purple-400")
+
+
+def area_chart(**props) -> rx.Component:
+    """Filled area chart over a time series, with a per-point tooltip.
+
+    Args:
+        data: list of ``{"date": "YYYY-MM-DD", "value": float}``. Defaults to the
+            original rosencharts example.
+        color: Tailwind ``text-*`` class for the filled area. Defaults to
+            ``"text-purple-200 dark:text-purple-400"``.
+
+    Returns:
+        A Reflex component rendering the area chart.
+    """
+    return AreaChart.create(**props)