refactor(App): simplificar a estrutura do componente e remover gráficos não utilizados
parent
0d8cd82721
commit
d0db593171
144
src/App.tsx
144
src/App.tsx
|
|
@ -8,23 +8,12 @@ import {
|
|||
} from '@/views/components/ui/card';
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/views/components/ui/chart';
|
||||
import { Progress } from '@/views/components/ui/progress';
|
||||
import { TrendingUp } from 'lucide-react';
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Line,
|
||||
LineChart,
|
||||
Pie,
|
||||
PieChart,
|
||||
XAxis,
|
||||
} from 'recharts';
|
||||
import { Bar, BarChart, CartesianGrid, Pie, PieChart, XAxis } from 'recharts';
|
||||
|
||||
import { Header } from './views/components/header';
|
||||
|
||||
|
|
@ -34,36 +23,35 @@ export const description = 'A stacked bar chart with a legend';
|
|||
export function App() {
|
||||
const stats = [
|
||||
{
|
||||
title: 'Média de Consumo (R$)',
|
||||
title: 'Protocolos criados',
|
||||
value: 'R$ 0,00',
|
||||
description: '',
|
||||
progress: 44.6,
|
||||
},
|
||||
{
|
||||
title: 'Total de KM Percorridos',
|
||||
title: 'Protocolos tramitados',
|
||||
value: '0 KM',
|
||||
description: '',
|
||||
progress: 30.6,
|
||||
},
|
||||
{
|
||||
title: 'Viagens Realizadas no Mês',
|
||||
title: 'Protocolos recebidos',
|
||||
value: '0',
|
||||
description: '',
|
||||
progress: 24.8,
|
||||
},
|
||||
];
|
||||
|
||||
const evolutionConfig = {
|
||||
price: {
|
||||
label: 'Preço',
|
||||
color: '#007cb8',
|
||||
{
|
||||
title: 'Protocolos finalizados',
|
||||
value: '0',
|
||||
description: '',
|
||||
progress: 67.2,
|
||||
},
|
||||
{
|
||||
title: 'Protocolos cancelados',
|
||||
value: '0',
|
||||
description: '',
|
||||
progress: 67.2,
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
const evolutionData = [
|
||||
{ month: 'Shell', price: 186 },
|
||||
{ month: 'Ipiranga', price: 305 },
|
||||
{ month: 'BR', price: 237 },
|
||||
];
|
||||
|
||||
const bestPricesConfig = {
|
||||
|
|
@ -106,31 +94,11 @@ export function App() {
|
|||
{ status: 'reserved', count: 15, fill: '#7cd5fd' },
|
||||
];
|
||||
|
||||
const mileageConfig = {
|
||||
company: {
|
||||
label: 'Frota Empresa',
|
||||
color: '#007cb8',
|
||||
},
|
||||
rented: {
|
||||
label: 'Frota Terceirizada',
|
||||
color: '#0ca9eb',
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
const mileageData = [
|
||||
{ month: 'Jan', company: 1200, rented: 800 },
|
||||
{ month: 'Fev', company: 1350, rented: 750 },
|
||||
{ month: 'Mar', company: 1100, rented: 900 },
|
||||
{ month: 'Abr', company: 1400, rented: 600 },
|
||||
{ month: 'Mai', company: 1250, rented: 850 },
|
||||
{ month: 'Jun', company: 1300, rented: 700 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-[18px] flex flex-col gap-6">
|
||||
<Header />
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3">
|
||||
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-2 xl:grid-cols-5">
|
||||
{stats.map((stat) => (
|
||||
<Card
|
||||
key={stat.title}
|
||||
|
|
@ -152,50 +120,6 @@ export function App() {
|
|||
</div>
|
||||
|
||||
<div className="grid gap-6 grid-cols-1 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Evolução do Consumo de Combustível</CardTitle>
|
||||
<CardDescription>
|
||||
Comparativo de preços entre os principais postos
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={evolutionConfig}>
|
||||
<LineChart
|
||||
accessibilityLayer
|
||||
data={evolutionData}
|
||||
margin={{
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent hideLabel />}
|
||||
/>
|
||||
<Line
|
||||
dataKey="price"
|
||||
type="natural"
|
||||
stroke="var(--color-price)"
|
||||
strokeWidth={2}
|
||||
dot={{
|
||||
fill: 'var(--color-price)',
|
||||
}}
|
||||
activeDot={{
|
||||
r: 6,
|
||||
}}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Postos com Melhor Preço</CardTitle>
|
||||
|
|
@ -223,42 +147,6 @@ export function App() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quilometragem Percorrida</CardTitle>
|
||||
<CardDescription>
|
||||
Total de quilômetros percorridos nos últimos meses
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={mileageConfig}>
|
||||
<BarChart accessibilityLayer data={mileageData}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
tickLine={false}
|
||||
tickMargin={10}
|
||||
axisLine={false}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
<Bar
|
||||
dataKey="company"
|
||||
stackId="a"
|
||||
fill="var(--color-company)"
|
||||
radius={[0, 0, 4, 4]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="rented"
|
||||
stackId="a"
|
||||
fill="var(--color-rented)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="flex flex-col">
|
||||
<CardHeader className="items-center pb-0">
|
||||
<CardTitle>Status dos Veículos</CardTitle>
|
||||
|
|
|
|||
Loading…
Reference in New Issue