Sales Performance Chart

1'use client'
2 
3import { TrendingUp } from 'lucide-react'
4import { Bar, CartesianGrid, Cell, ComposedChart, Line, ResponsiveContainer, XAxis, YAxis } from 'recharts'
5 
6import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
7import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
8 
9import { chartConfig, chartData } from "@/components/data/chart-1-data"
10 
11export function Chart1() {
12  const totalSales = chartData.reduce((sum, item) => sum + item.sales, 0)
13  const avgConversion = (chartData.reduce((sum, item) => sum + item.conversion, 0) / chartData.length).toFixed(1)
14  const currentYear = new Date().getFullYear()
15 
16  return (
17    <div className="px-6 md:px-8">
18      <Card className="w-full max-w-2xl mx-auto my-8">
19        <CardHeader className="px-6">
20          <CardTitle className="text-xl font-semibold">Sales Performance Overview</CardTitle>
21          <CardDescription>
22            Monthly sales volume and conversion rate trends for the first half of {currentYear}
23          </CardDescription>
24        </CardHeader>
25        <CardContent className="flex flex-col gap-6 px-6">
26          <div className="grid grid-cols-2 gap-4">
27            <div className="rounded-lg border bg-card p-4">
28              <div className="flex items-center justify-between">
29                <p className="text-sm font-medium text-muted-foreground">Total Sales</p>
30                <TrendingUp className="size-4 text-green-500" />
31              </div>
32              <p className="text-2xl font-bold mt-2">${totalSales.toLocaleString()}</p>
33              <p className="text-xs text-muted-foreground mt-1">Last 6 months</p>
34            </div>
35 
36            <div className="rounded-lg border bg-card p-4">
37              <div className="flex items-center justify-between">
38                <p className="text-sm font-medium text-muted-foreground">Avg Conversion</p>
39                <span className="size-2 rounded-full bg-primary animate-pulse" />
40              </div>
41              <p className="text-2xl font-bold mt-2">{avgConversion}%</p>
42              <p className="text-xs text-muted-foreground mt-1">Conversion rate</p>
43            </div>
44          </div>
45 
46          <div className="w-full">
47            <ChartContainer config={chartConfig} className="h-75 w-full">
48              <ResponsiveContainer width="100%" height="100%">
49// … truncated