egutierrez
aea2131dcb
- card: variantes default/borderless/ghost con ring condicional - kpi_card: props unit, action, chart y delta con label/suffix personalizable - sparkline: prop colors para colores por barra en variant bar - bar_chart: radius condicional según orientación horizontal/vertical Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1.8 KiB
1.8 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 | |||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| bar_chart | component | typescript | 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. |
|
|
|
false |
|
false | frontend/functions/ui/bar_chart.tsx |
|
false | react |
|
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.