allow download csv

src/pages/trend/index.tsx

@@ -16,7 +16,8 @@ import {
   getTotalMonthlyData,
   processDetailedModelData,
   MonthlyActivity,
-  DetailedModelData
+  DetailedModelData,
+  convertToCSV
 } from '../../utils/modelData';
 
 interface TrendProps {
@@ -161,180 +162,212 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
         Track the growth of Chinese AI models and datasets over time
       </p>
       
-      <div className="flex justify-center mb-6 space-x-4">
-        <button
-          onClick={() => setContentType('all')}
-          className={`px-4 py-2 rounded-lg ${
-            contentType === 'all'
-              ? 'bg-blue-500 text-white'
-              : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
-          }`}
-        >
-          All
-        </button>
-        <button
-          onClick={() => setContentType('models')}
-          className={`px-4 py-2 rounded-lg ${
-            contentType === 'models'
-              ? 'bg-blue-500 text-white'
-              : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
-          }`}
-        >
-          Models
-        </button>
-        <button
-          onClick={() => setContentType('datasets')}
-          className={`px-4 py-2 rounded-lg ${
-            contentType === 'datasets'
-              ? 'bg-blue-500 text-white'
-              : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
-          }`}
-        >
-          Datasets
-        </button>
-      </div>
-
-      {/* Controls */}
-      <div className="flex flex-wrap gap-4 mb-6 justify-center items-center">
-        <div className="flex gap-2">
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex justify-center mb-6 space-x-4">
           <button
-            onClick={() => setShowTotal(!showTotal)}
-            className={`px-4 py-2 rounded transition-colors ${
-              showTotal 
-                ? 'bg-green-500 text-white dark:bg-green-600' 
-                : 'bg-gray-200 dark:bg-gray-700 dark:text-gray-300'
+            onClick={() => setContentType('all')}
+            className={`px-4 py-2 rounded-lg ${
+              contentType === 'all'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
             }`}
           >
-            Total
+            All
           </button>
-          {Object.entries(PROVIDERS_MAP).map(([provider, { color }]) => (
+          <button
+            onClick={() => setContentType('models')}
+            className={`px-4 py-2 rounded-lg ${
+              contentType === 'models'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+            }`}
+          >
+            Models
+          </button>
+          <button
+            onClick={() => setContentType('datasets')}
+            className={`px-4 py-2 rounded-lg ${
+              contentType === 'datasets'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+            }`}
+          >
+            Datasets
+          </button>
+        </div>
+
+        <div className="flex flex-wrap gap-4 mb-6 justify-center items-center">
+          <div className="flex gap-2">
             <button
-              key={provider}
-              onClick={() => toggleProvider(provider)}
-              className={`px-4 py-2 rounded transition-colors ${
-                selectedProviders.includes(provider)
-                  ? 'text-white'
-                  : 'text-gray-600 dark:text-gray-400'
+              onClick={() => setShowTotal(!showTotal)}
+              className={`px-4 py-2 rounded-lg ${
+                showTotal
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
               }`}
-              style={{
-                backgroundColor: selectedProviders.includes(provider) 
-                  ? color 
-                  : 'transparent'
-              }}
             >
-              {provider}
+              {showTotal ? 'Hide Total' : 'Show Total'}
             </button>
-          ))}
+            {Object.entries(PROVIDERS_MAP).map(([provider, { color }]) => (
+              <button
+                key={provider}
+                onClick={() => toggleProvider(provider)}
+                className={`px-4 py-2 rounded-lg transition-colors ${
+                  selectedProviders.includes(provider)
+                    ? 'text-white'
+                    : 'text-gray-600 dark:text-gray-400'
+                }`}
+                style={{
+                  backgroundColor: selectedProviders.includes(provider)
+                    ? color
+                    : 'transparent'
+                }}
+              >
+                {provider}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
 
-      {/* Chart */}
-      <div className="w-full h-[600px] dark:bg-gray-900 p-4 rounded-lg">
-        <ResponsiveContainer width="100%" height="100%">
-          <LineChart
-            margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
-          >
-            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-            <XAxis
-              dataKey="date"
-              type="category"
-              allowDuplicatedCategory={false}
-              tick={{ fontSize: 12 }}
-              interval="preserveStartEnd"
-              stroke="#9CA3AF"
-            />
-            <YAxis stroke="#9CA3AF" />
-            <Tooltip content={<CustomTooltip />} />
-            <Legend />
-            
-            {/* Total Line */}
-            {showTotal && (
-              <Line
-                data={filteredTotalData}
-                type="monotone"
-                dataKey="count"
-                stroke={COLORS['Total']}
-                name="Total"
-                strokeWidth={2}
-                dot={false}
+        {/* Chart */}
+        <div className="w-full h-[600px] dark:bg-gray-900 p-4 rounded-lg">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+              <XAxis
+                dataKey="date"
+                type="category"
+                allowDuplicatedCategory={false}
+                tick={{ fontSize: 12 }}
+                interval="preserveStartEnd"
+                stroke="#9CA3AF"
               />
-            )}
+              <YAxis stroke="#9CA3AF" />
+              <Tooltip content={<CustomTooltip />} />
+              <Legend />
+              
+              {/* Total Line */}
+              {showTotal && (
+                <Line
+                  data={filteredTotalData}
+                  type="monotone"
+                  dataKey="count"
+                  stroke={COLORS['Total']}
+                  name="Total"
+                  strokeWidth={2}
+                  dot={false}
+                />
+              )}
 
-            {/* Provider Lines */}
-            {selectedProviders.map(provider => (
-              <Line
-                key={provider}
-                data={providerData[provider]}
-                type="monotone"
-                dataKey="count"
-                stroke={COLORS[provider]}
-                name={provider}
-                strokeWidth={1.5}
-                dot={false}
-              />
-            ))}
-          </LineChart>
-        </ResponsiveContainer>
-      </div>
+              {/* Provider Lines */}
+              {selectedProviders.map(provider => (
+                <Line
+                  key={provider}
+                  data={providerData[provider]}
+                  type="monotone"
+                  dataKey="count"
+                  stroke={COLORS[provider]}
+                  name={provider}
+                  strokeWidth={1.5}
+                  dot={false}
+                />
+              ))}
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
 
-      {/* Major Releases Section */}
-      <div className="mt-12">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-bold dark:text-white">
-            Major Releases ({Object.values(filteredModels).flat().length})
-          </h2>
-          <div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-4 py-2 rounded-lg shadow-sm">
-            <label className="text-sm font-medium dark:text-gray-300">Min Likes:</label>
-            <input
-              type="number"
-              value={minLikes}
-              onChange={(e) => setMinLikes(Math.max(0, parseInt(e.target.value) || 0))}
-              className="w-20 px-2 py-1 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-green-500"
-            />
-          </div>
+        {/* Download Button */}
+        <div className="flex justify-center mt-4 mb-8">
+          <button
+            className="px-4 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600"
+            onClick={() => {
+              // Get the currently visible data based on filters
+              const visibleData = [];
+              
+              // Add provider data if showing
+              selectedProviders.forEach(provider => {
+                visibleData.push(...providerData[provider].map(d => ({ ...d, provider })));
+              });
+              
+              // Add total data if showing
+              if (showTotal) {
+                visibleData.push(...filteredTotalData);
+              }
+
+              const csvContent = convertToCSV(visibleData);
+              const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+              const link = document.createElement('a');
+              link.href = URL.createObjectURL(blob);
+              link.download = `${contentType}_counts.csv`;
+              link.click();
+              URL.revokeObjectURL(link.href);
+            }}
+          >
+            Download CSV
+          </button>
         </div>
-        <div className="space-y-8">
-          {Object.entries(filteredModels)
-            .map(([monthKey, models]) => ({
-              monthKey,
-              models,
-              sortKey: models[0]?.sortKey || '' // Use the first model's sortKey
-            }))
-            .sort((a, b) => b.sortKey.localeCompare(a.sortKey)) // Sort by sortKey in descending order
-            .map(({ monthKey, models }) => (
-              <div key={monthKey} className="border-b border-gray-200 dark:border-gray-700 pb-4">
-                <h3 className="text-xl font-semibold mb-3 dark:text-white">{monthKey}</h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {models
-                    .sort((a, b) => b.likes - a.likes) // Sort models within each month by likes
-                    .map(model => (
-                    <div
-                      key={model.id}
-                      className="p-4 rounded-lg border dark:border-gray-700 hover:shadow-md transition-shadow bg-white dark:bg-gray-800"
-                      style={{ borderColor: COLORS[model.provider] }}
-                    >
-                      <div className="flex justify-between items-start">
-                        <div>
-                          <a
-                            href={`https://huggingface.co/${model.id}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline font-medium dark:text-blue-400"
-                          >
-                            {model.name}
-                          </a>
-                          <p className="text-sm text-gray-600 dark:text-gray-400">{model.provider}</p>
-                        </div>
-                        <div className="text-right">
-                          <p className="text-sm font-medium dark:text-white">❤️ {model.likes}</p>
-                          <p className="text-xs text-gray-500 dark:text-gray-400">{formatDate(model.createdAt)}</p>
+
+        {/* Major Releases Section */}
+        <div className="mt-12">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold dark:text-white">
+              Major Releases ({Object.values(filteredModels).flat().length})
+            </h2>
+            <div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-4 py-2 rounded-lg shadow-sm">
+              <label className="text-sm font-medium dark:text-gray-300">Min Likes:</label>
+              <input
+                type="number"
+                value={minLikes}
+                onChange={(e) => setMinLikes(Math.max(0, parseInt(e.target.value) || 0))}
+                className="w-20 px-2 py-1 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-green-500"
+              />
+            </div>
+          </div>
+          <div className="space-y-8">
+            {Object.entries(filteredModels)
+              .map(([monthKey, models]) => ({
+                monthKey,
+                models,
+                sortKey: models[0]?.sortKey || '' // Use the first model's sortKey
+              }))
+              .sort((a, b) => b.sortKey.localeCompare(a.sortKey)) // Sort by sortKey in descending order
+              .map(({ monthKey, models }) => (
+                <div key={monthKey} className="border-b border-gray-200 dark:border-gray-700 pb-4">
+                  <h3 className="text-xl font-semibold mb-3 dark:text-white">{monthKey}</h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {models
+                      .sort((a, b) => b.likes - a.likes) // Sort models within each month by likes
+                      .map(model => (
+                      <div
+                        key={model.id}
+                        className="p-4 rounded-lg border dark:border-gray-700 hover:shadow-md transition-shadow bg-white dark:bg-gray-800"
+                        style={{ borderColor: COLORS[model.provider] }}
+                      >
+                        <div className="flex justify-between items-start">
+                          <div>
+                            <a
+                              href={`https://huggingface.co/${model.id}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-blue-600 hover:underline font-medium dark:text-blue-400"
+                            >
+                              {model.name}
+                            </a>
+                            <p className="text-sm text-gray-600 dark:text-gray-400">{model.provider}</p>
+                          </div>
+                          <div className="text-right">
+                            <p className="text-sm font-medium dark:text-white">❤️ {model.likes}</p>
+                            <p className="text-xs text-gray-500 dark:text-gray-400">{formatDate(model.createdAt)}</p>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+          </div>
         </div>
       </div>
     </div>

src/utils/modelData.ts

@@ -318,3 +318,38 @@ export const getTotalMonthlyData = (monthlyData: MonthlyActivity[]): MonthlyActi
     }
   ]).sort((a, b) => a.date.localeCompare(b.date));
 };
+
+// Convert monthly activity data to CSV format
+export const convertToCSV = (data: MonthlyActivity[]): string => {
+  // Group data by date
+  const dataByDate: Record<string, Record<string, number>> = {};
+  const providers = new Set<string>();
+  
+  // Initialize and collect data
+  data.forEach(({ date, provider, count }) => {
+    if (!dataByDate[date]) {
+      dataByDate[date] = {};
+    }
+    dataByDate[date][provider] = count;
+    providers.add(provider);
+  });
+
+  // Create CSV header
+  const header = ['Date', ...Array.from(providers)];
+  
+  // Create CSV rows
+  const rows = Object.entries(dataByDate)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([date, providerData]) => {
+      const row = [date];
+      header.slice(1).forEach(provider => {
+        row.push((providerData[provider] || 0).toString());
+      });
+      return row;
+    });
+
+  // Combine header and rows
+  return [header, ...rows]
+    .map(row => row.join(','))
+    .join('\n');
+};