egutierrez
97a3c84625
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind. Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind. Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.) y MantineProvider como wrapper estándar del sistema de temas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { LineChart as MantineLineChart } from '@mantine/charts'
|
|
import { Paper } from '@mantine/core'
|
|
import { type Series, getSeriesColor } from './chart_container'
|
|
|
|
type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'
|
|
|
|
interface LineChartProps {
|
|
data: Record<string, unknown>[]
|
|
xKey: string
|
|
yKey?: string
|
|
series?: Series[]
|
|
curveType?: CurveType
|
|
showGrid?: boolean
|
|
showLegend?: boolean
|
|
showDots?: boolean
|
|
height?: number
|
|
xAxisFormatter?: (value: unknown) => string
|
|
yAxisFormatter?: (value: unknown) => string
|
|
valueFormatter?: (value: number) => string
|
|
referenceLines?: Array<{ y: number; label?: string; color?: string }>
|
|
}
|
|
|
|
function LineChartComponent({
|
|
data, xKey, yKey, series, curveType = 'monotone', showGrid = true, showLegend = false,
|
|
showDots = true, height = 300, xAxisFormatter, yAxisFormatter,
|
|
valueFormatter = (v) => v.toLocaleString(), referenceLines = [],
|
|
}: LineChartProps) {
|
|
const chartSeries = series
|
|
? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
|
|
: yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
|
|
|
|
const refLines = referenceLines.map((ref) => ({
|
|
y: ref.y,
|
|
label: ref.label || '',
|
|
color: ref.color || 'gray.6',
|
|
}))
|
|
|
|
return (
|
|
<Paper p="md">
|
|
<MantineLineChart
|
|
h={height}
|
|
data={data}
|
|
dataKey={xKey}
|
|
series={chartSeries}
|
|
curveType={curveType}
|
|
gridAxis={showGrid ? 'xy' : 'none'}
|
|
withLegend={showLegend}
|
|
withTooltip
|
|
withDots={showDots}
|
|
valueFormatter={valueFormatter}
|
|
referenceLines={refLines}
|
|
xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
|
|
yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
|
|
/>
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
export const LineChart = LineChartComponent
|
|
export type { LineChartProps, CurveType }
|