File size: 2,924 Bytes
08cd799 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
"use client"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
ChartLegend,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
export interface ChartDataPoint {
month: Date;
models: number;
datasets: number;
spaces: number;
}
interface AreaChartStackedProps {
data: ChartDataPoint[];
}
const chartConfig = {
models: {
label: "Models",
color: "hsl(0, 70%, 70%)", // Light red
},
datasets: {
label: "Datasets",
color: "hsl(120, 70%, 40%)", // Darker green
},
spaces: {
label: "Spaces",
color: "hsl(210, 70%, 70%)", // Light blue
},
} satisfies ChartConfig
export function AreaChartStacked({ data }: AreaChartStackedProps) {
const sortedData = [...data].sort((a, b) => a.month.getTime() - b.month.getTime());
return (
<Card>
<CardHeader>
<CardTitle>Hugging Face Hub Growth</CardTitle>
<CardDescription>
Monthly creation trends for models, datasets, and spaces
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig}>
<AreaChart
accessibilityLayer
data={sortedData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => {
const date = new Date(value);
return date.toLocaleString('default', { month: 'short', year: 'numeric' });
}}
/>
<ChartTooltip
cursor={true}
content={
<ChartTooltipContent
indicator="line"
hideLabel
/>
}
/>
<Area
dataKey="spaces"
type="natural"
fill="hsl(210, 70%, 70%)"
fillOpacity={0.4}
stroke="hsl(210, 70%, 70%)"
stackId="a"
/>
<Area
dataKey="datasets"
type="natural"
fill="hsl(120, 70%, 40%)"
fillOpacity={0.2}
stroke="hsl(120, 70%, 40%)"
stackId="a"
/>
<Area
dataKey="models"
type="natural"
fill="hsl(0, 70%, 70%)"
fillOpacity={0.4}
stroke="hsl(0, 70%, 70%)"
stackId="a"
/>
<ChartLegend content={<ChartLegendContent />} />
</AreaChart>
</ChartContainer>
</CardContent>
</Card>
)
}
|