Files
fn_registry/frontend/functions/ui/bar_chart.md
T
egutierrez 5f4f1f7508 docs: params/output semántico en 506 funciones para composabilidad
Añade campos params y output al frontmatter YAML de las 506 funciones del registry.
Cada parámetro tiene descripción semántica (qué representa, unidades, rango típico)
y cada función describe qué produce su output. Permite a agentes razonar sobre
cadenas de composición (ej: prices → log_return → sharpe_ratio) sin leer código.
2026-04-05 18:45:16 +02:00

1.9 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, 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 output tested tests test_file_path file_path props emits has_state framework variant source_repo source_license source_file
bar_chart component ts ui 1.1.0 impure BarChart(props: BarChartProps): JSX.Element Gráfico de barras Recharts con multi-series, orientación horizontal/vertical, tooltips temáticos y bordes redondeados.
chart
bar
visualization
recharts
component
ui
cn_ts_core
chart_container_ts_ui
get_series_color_ts_core
ChartSeries_ts_ui
false
recharts
Componente JSX que renderiza un gráfico de barras vertical u horizontal con multi-series y tooltips temáticos false
frontend/functions/ui/bar_chart.tsx
name type required description
data Record<string, unknown>[] true Array de datos
name type required description
xKey string true Key del eje X/categoría
name type required description
horizontal boolean false Orientación horizontal
name type required description
series Series[] false Series de datos para multi-series
false react
vertical
horizontal
https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library MIT frontend/src/components/ui/charts/bar-chart.tsx

Ejemplo

<BarChart data={data} xKey="category" yKey="sales" showLegend />
<BarChart data={data} xKey="name" series={series} horizontal />

Notas

En modo horizontal=true: el layout de Recharts es 'vertical', YAxis recibe dataKey={xKey} con type="category" (categorías en eje Y), XAxis recibe type="number" (valores en eje X). El radius de las barras se ajusta a [0, 4, 4, 0] para redondear la punta derecha. Este intercambio de ejes es obligatorio — sin él las barras horizontales no se renderizan.