File size: 3,057 Bytes
08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 08cd799 6aaff3e 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 120 121 122 123 |
"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(var(--chart-1))",
},
datasets: {
label: "Datasets",
color: "hsl(var(--chart-2))",
},
spaces: {
label: "Spaces",
color: "hsl(var(--chart-3))",
},
} satisfies ChartConfig
export function AreaChartStacked({ data }: AreaChartStackedProps) {
const sortedData = [...data].sort(
(a, b) => a.month.getTime() - b.month.getTime()
)
return (
<Card className="bg-[var(--card-background)]">
<CardHeader>
<CardTitle className="text-[var(--card-text)]">
Hugging Face Hub Growth Each Month
</CardTitle>
<CardDescription className="text-[var(--card-text)]">
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(var(--chart-3))"
fillOpacity={0.4}
stroke="hsl(var(--chart-3))"
stackId="a"
/>
<Area
dataKey="datasets"
type="natural"
fill="hsl(var(--chart-2))"
fillOpacity={0.2}
stroke="hsl(var(--chart-2))"
stackId="a"
/>
<Area
dataKey="models"
type="natural"
fill="hsl(var(--chart-1))"
fillOpacity={0.4}
stroke="hsl(var(--chart-1))"
stackId="a"
/>
<ChartLegend
content={<ChartLegendContent className="text-white" />}
/>
</AreaChart>
</ChartContainer>
</CardContent>
</Card>
)
}
|