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>
54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
import {
|
|
BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
|
|
} from 'recharts'
|
|
import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
|
|
|
|
interface BarChartProps {
|
|
data: Record<string, unknown>[]
|
|
xKey: string
|
|
yKey?: string
|
|
series?: Series[]
|
|
horizontal?: boolean
|
|
showGrid?: boolean
|
|
showLegend?: boolean
|
|
height?: number | string
|
|
className?: string
|
|
xAxisFormatter?: (value: unknown) => string
|
|
yAxisFormatter?: (value: unknown) => string
|
|
valueFormatter?: (value: number) => string
|
|
}
|
|
|
|
function BarChartComponent({
|
|
data, xKey, yKey, series, horizontal = false, showGrid = true, showLegend = false,
|
|
height = 300, className, xAxisFormatter, yAxisFormatter, valueFormatter = (v) => v.toLocaleString(),
|
|
}: BarChartProps) {
|
|
const bars = series
|
|
? series.map((s, i) => ({ dataKey: s.key, name: s.name, fill: getSeriesColor(i, s.color) }))
|
|
: yKey ? [{ dataKey: yKey, name: yKey, fill: getSeriesColor(0) }] : []
|
|
|
|
return (
|
|
<ChartContainer className={className} height={height}>
|
|
<RechartsBarChart data={data} layout={horizontal ? 'vertical' : 'horizontal'} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
|
|
{showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
|
|
{horizontal ? (
|
|
<>
|
|
<XAxis type="number" tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
|
|
<YAxis dataKey={xKey} type="category" tickFormatter={xAxisFormatter} width={80} className="text-xs fill-muted-foreground" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
|
|
<YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
|
|
</>
|
|
)}
|
|
<Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ fill: 'hsl(var(--muted) / 0.3)' }} />
|
|
{showLegend && <Legend />}
|
|
{bars.map((bar) => <Bar key={bar.dataKey} dataKey={bar.dataKey} name={bar.name} fill={bar.fill} radius={horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]} />)}
|
|
</RechartsBarChart>
|
|
</ChartContainer>
|
|
)
|
|
}
|
|
|
|
export const BarChart = BarChartComponent
|
|
export type { BarChartProps }
|