Files
Egutierrez 5a824c2eee initial: mirror of @fn_library from fn_registry
75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00

1.8 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
line_chart component ts ui 1.0.0 impure LineChart(props: LineChartProps): JSX.Element Gráfico de líneas @mantine/charts con multi-series, 5 tipos de curva, líneas de referencia y tooltips.
chart
line
visualization
mantine
component
ui
chart_container_ts_ui
ChartSeries_ts_ui
false
@mantine/charts
@mantine/core
Componente LineChart que renderiza gráfico de líneas multi-series con curvas customizables y líneas de referencia false
frontend/functions/ui/line_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
name type required description
series Series[] false Series de datos
name type required description
curveType 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' false Tipo de curva (default monotone)
name type required description
referenceLines Array<{ y: number; label?: string; color?: string }> false Líneas de referencia horizontales
false react
default
https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library MIT frontend/src/components/ui/charts/line-chart.tsx

Ejemplo

<LineChart
  data={salesData}
  xKey="month"
  series={[
    { key: "revenue", name: "Revenue", color: "#3b82f6" },
    { key: "cost", name: "Cost", color: "#ef4444" },
  ]}
  zoomable
  showLegend
/>