Files
fn_registry/frontend/functions/ui/sparkline.md
T
egutierrez dc78d8fea3 feat: funciones frontend React/TS — componentes UI, hooks Wails, charts y tipos
Componentes React reutilizables: card, dialog, tabs, select, alert, badge, button, input, label,
skeleton, tooltip, progress_bar, page_header, form_field, settings_page, crud_page, analytics_page,
dashboard_layout. Charts: area, bar, line, sparkline, kpi_card, chart_container.
Hooks Wails: use_wails_query, use_wails_mutation, use_wails_stream, use_wails_event, use_animated_canvas.
Funciones core: cn, format_compact, chart_colors, get_series_color, wails_cache, theme_config_to_colors.
Tipos: chart_series, wails_ipc, theme_config, component_variants.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 20:55:34 +02:00

1.6 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports tested tests test_file_path file_path props emits has_state framework variant source_repo source_license source_file
sparkline component typescript ui 1.0.0 impure Sparkline(props: SparklineProps): JSX.Element Mini gráfico inline SVG puro (sin Recharts) con variantes line, area y bar. Para KPI cards y tablas.
sparkline
chart
inline
svg
component
ui
visualization
cn_typescript_core
false
react
false
frontend/functions/ui/sparkline.tsx
name type required description
data number[] true Array de valores numéricos
name type required description
variant 'line' | 'area' | 'bar' false Tipo de visualización
name type required description
color string false Color del gráfico
name type required description
width number false Ancho en px (default 80)
name type required description
height number false Alto en px (default 24)
false react
line
area
bar
https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library MIT frontend/src/components/ui/sparkline.tsx

Ejemplo

<Sparkline data={[10, 25, 15, 40, 30, 55]} variant="area" color="#22c55e" />
<Sparkline data={[5, 3, 8, 1, 9]} variant="bar" width={60} height={20} />

Notas

SVG puro — sin dependencia de Recharts. Ideal para inline en tablas y cards.