create custom pie chart and add other queries

app/page.tsx

@@ -1,12 +1,30 @@
 "use client"
 
+import { useEffect, useState } from "react"
+import * as duckdb from "@duckdb/duckdb-wasm"
+
+import {
+  CREATE_VIEWS_QUERY,
+  FETCH_CHART_DATA_QUERY,
+  FETCH_DATASET_LICENSE_DATA_QUERY,
+  FETCH_MODEL_LICENSE_DATA_QUERY,
+  FETCH_SPACE_SDK_DATA_QUERY,
+} from "@/lib/queries"
 import { AreaChartStacked, ChartDataPoint } from "@/components/area-chart"
-import { useEffect, useState } from 'react'
-import * as duckdb from '@duckdb/duckdb-wasm'
+import { CustomPieChart } from "@/components/pie-chart"
 
 export default function IndexPage() {
-  const [db, setDb] = useState<duckdb.AsyncDuckDB | null>(null)
+  const [conn, setConn] = useState<duckdb.AsyncDuckDBConnection | null>(null)
   const [chartData, setChartData] = useState<ChartDataPoint[]>([])
+  const [modelLicenseData, setModelLicenseData] = useState<
+    Array<{ name: string; value: number; fill: string }>
+  >([])
+  const [datasetLicenseData, setDatasetLicenseData] = useState<
+    Array<{ name: string; value: number; fill: string }>
+  >([])
+  const [spaceSdkData, setSpaceSdkData] = useState<
+    Array<{ name: string; value: number; fill: string }>
+  >([])
 
   useEffect(() => {
     const initDB = async () => {
@@ -15,17 +33,19 @@ export default function IndexPage() {
       const JSDELIVR_BUNDLES = {
         mvp: {
           mainModule: `${CDN_BASE}/dist/duckdb-mvp.wasm`,
-          mainWorker: `${CDN_BASE}/dist/duckdb-browser-mvp.worker.js`
+          mainWorker: `${CDN_BASE}/dist/duckdb-browser-mvp.worker.js`,
         },
         eh: {
           mainModule: `${CDN_BASE}/dist/duckdb-eh.wasm`,
-          mainWorker: `${CDN_BASE}/dist/duckdb-browser-eh.worker.js`
-        }
+          mainWorker: `${CDN_BASE}/dist/duckdb-browser-eh.worker.js`,
+        },
       }
 
       const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES)
       const worker_url = URL.createObjectURL(
-        new Blob([`importScripts("${bundle.mainWorker}");`], { type: 'text/javascript' })
+        new Blob([`importScripts("${bundle.mainWorker}");`], {
+          type: "text/javascript",
+        })
       )
 
       const worker = new Worker(worker_url)
@@ -33,55 +53,67 @@ export default function IndexPage() {
       const db = new duckdb.AsyncDuckDB(logger, worker)
       await db.instantiate(bundle.mainModule)
 
-      const conn = await db.connect()
+      const connection = await db.connect()
 
-      // create views from hf parquet files
-      await conn.query(`
-        CREATE VIEW models AS SELECT * FROM read_parquet('https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/refs%2Fconvert%2Fparquet/models/train/0000.parquet?download=true');
-        CREATE VIEW datasets AS SELECT * FROM read_parquet('https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/refs%2Fconvert%2Fparquet/datasets/train/0000.parquet?download=true');
-        CREATE VIEW spaces AS SELECT * FROM read_parquet('https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/refs%2Fconvert%2Fparquet/spaces/train/0000.parquet?download=true');
-      `)
+      await connection.query(CREATE_VIEWS_QUERY)
 
-      setDb(db)
-      await fetchChartData(db)
+      setConn(connection)
+      await fetchChartData(connection)
     }
 
     initDB()
+
+    // Clean up the connection when the component unmounts
+    return () => {
+      if (conn) {
+        conn.close()
+      }
+    }
   }, [])
 
-  const fetchChartData = async (db: duckdb.AsyncDuckDB) => {
-    const conn = await db.connect()
+  const fetchChartData = async (connection: duckdb.AsyncDuckDBConnection) => {
+    // Use the imported query
+    const result = await connection.query(FETCH_CHART_DATA_QUERY)
 
-    const result = await conn.query(`
-      WITH all_data AS (
-        SELECT DATE_TRUNC('month', CAST(createdAt AS DATE)) AS month, 'model' AS type FROM models
-        UNION ALL
-        SELECT DATE_TRUNC('month', CAST(createdAt AS DATE)) AS month, 'dataset' AS type FROM datasets
-        UNION ALL
-        SELECT DATE_TRUNC('month', CAST(createdAt AS DATE)) AS month, 'space' AS type FROM spaces
-      )
-      SELECT
-        month,
-        COUNT(*) FILTER (WHERE type = 'model') AS models,
-        COUNT(*) FILTER (WHERE type = 'dataset') AS datasets,
-        COUNT(*) FILTER (WHERE type = 'space') AS spaces
-      FROM all_data
-      GROUP BY month
-      ORDER BY month
-    `)
-
-    const data: ChartDataPoint[] = result.toArray().map(row => ({
+    const data: ChartDataPoint[] = result.toArray().map((row) => ({
       month: new Date(row.month),
       models: Number(row.models),
       datasets: Number(row.datasets),
-      spaces: Number(row.spaces)
+      spaces: Number(row.spaces),
     }))
 
-    console.log(data)
-
-    await conn.close()
-
     setChartData(data)
+
+    const [modelLicenseResult, datasetLicenseResult, spaceSdkResult] =
+      await Promise.all([
+        connection.query(FETCH_MODEL_LICENSE_DATA_QUERY),
+        connection.query(FETCH_DATASET_LICENSE_DATA_QUERY),
+        connection.query(FETCH_SPACE_SDK_DATA_QUERY),
+      ])
+
+    setModelLicenseData(
+      modelLicenseResult.toArray().map((row, index) => ({
+        name: row.tag.replace("license:", ""),
+        value: Number(row.count),
+        fill: `hsl(${index * 30}, 70%, 50%)`,
+      }))
+    )
+
+    setDatasetLicenseData(
+      datasetLicenseResult.toArray().map((row, index) => ({
+        name: row.tag.replace("license:", ""),
+        value: Number(row.count),
+        fill: `hsl(${index * 30}, 70%, 50%)`,
+      }))
+    )
+
+    setSpaceSdkData(
+      spaceSdkResult.toArray().map((row, index) => ({
+        name: row.sdk,
+        value: Number(row.count),
+        fill: `hsl(${index * 30}, 70%, 50%)`,
+      }))
+    )
   }
 
   return (
@@ -92,8 +124,39 @@ export default function IndexPage() {
         </h1>
       </div>
       <div className="flex flex-col gap-4 max-w-6xl mt-10 w-full mx-auto">
-        {chartData.length > 0 ? <AreaChartStacked data={chartData} /> : <p>Loading...</p>}
+        {chartData.length > 0 ? (
+          <AreaChartStacked data={chartData} />
+        ) : (
+          <p>Loading...</p>
+        )}
       </div>
+      {modelLicenseData.length > 0 &&
+        datasetLicenseData.length > 0 &&
+        spaceSdkData.length > 0 && (
+          <div className="flex flex-wrap gap-8 max-w-6xl mt-10 w-full mx-auto">
+            <div className="flex-1 min-w-[300px]">
+              <CustomPieChart
+                title="Model Licenses"
+                data={modelLicenseData}
+                dataKey="value"
+              />
+            </div>
+            <div className="flex-1 min-w-[300px]">
+              <CustomPieChart
+                title="Dataset Licenses"
+                data={datasetLicenseData}
+                dataKey="value"
+              />
+            </div>
+            <div className="flex-1 min-w-[300px]">
+              <CustomPieChart
+                title="Space SDKs"
+                data={spaceSdkData}
+                dataKey="value"
+              />
+            </div>
+          </div>
+        )}
     </section>
   )
 }

components/area-chart.tsx

@@ -19,39 +19,43 @@ import {
 } from "@/components/ui/chart"
 
 export interface ChartDataPoint {
-  month: Date;
-  models: number;
-  datasets: number;
-  spaces: number;
+  month: Date
+  models: number
+  datasets: number
+  spaces: number
 }
 
 interface AreaChartStackedProps {
-  data: ChartDataPoint[];
+  data: ChartDataPoint[]
 }
 
 const chartConfig = {
   models: {
     label: "Models",
-    color: "hsl(0, 70%, 70%)", // Light red
+    color: "hsl(var(--chart-1))",
   },
   datasets: {
     label: "Datasets",
-    color: "hsl(120, 70%, 40%)", // Darker green
+    color: "hsl(var(--chart-2))",
   },
   spaces: {
     label: "Spaces",
-    color: "hsl(210, 70%, 70%)", // Light blue
+    color: "hsl(var(--chart-3))",
   },
 } satisfies ChartConfig
 
 export function AreaChartStacked({ data }: AreaChartStackedProps) {
-  const sortedData = [...data].sort((a, b) => a.month.getTime() - b.month.getTime());
+  const sortedData = [...data].sort(
+    (a, b) => a.month.getTime() - b.month.getTime()
+  )
 
   return (
-    <Card>
+    <Card className="bg-[var(--card-background)]">
       <CardHeader>
-        <CardTitle>Hugging Face Hub Growth</CardTitle>
-        <CardDescription>
+        <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>
@@ -72,44 +76,44 @@ export function AreaChartStacked({ data }: AreaChartStackedProps) {
               axisLine={false}
               tickMargin={8}
               tickFormatter={(value) => {
-                const date = new Date(value);
-                return date.toLocaleString('default', { month: 'short', year: 'numeric' });
+                const date = new Date(value)
+                return date.toLocaleString("default", {
+                  month: "short",
+                  year: "numeric",
+                })
               }}
             />
             <ChartTooltip
               cursor={true}
-              content={
-                <ChartTooltipContent
-                  indicator="line"
-                  hideLabel
-                />
-              }
+              content={<ChartTooltipContent indicator="line" hideLabel />}
             />
             <Area
               dataKey="spaces"
               type="natural"
-              fill="hsl(210, 70%, 70%)"
+              fill="hsl(var(--chart-3))"
               fillOpacity={0.4}
-              stroke="hsl(210, 70%, 70%)"
+              stroke="hsl(var(--chart-3))"
               stackId="a"
             />
             <Area
               dataKey="datasets"
               type="natural"
-              fill="hsl(120, 70%, 40%)"
+              fill="hsl(var(--chart-2))"
               fillOpacity={0.2}
-              stroke="hsl(120, 70%, 40%)"
+              stroke="hsl(var(--chart-2))"
               stackId="a"
             />
             <Area
               dataKey="models"
               type="natural"
-              fill="hsl(0, 70%, 70%)"
+              fill="hsl(var(--chart-1))"
               fillOpacity={0.4}
-              stroke="hsl(0, 70%, 70%)"
+              stroke="hsl(var(--chart-1))"
               stackId="a"
             />
-            <ChartLegend content={<ChartLegendContent />} />
+            <ChartLegend
+              content={<ChartLegendContent className="text-white" />}
+            />
           </AreaChart>
         </ChartContainer>
       </CardContent>

components/pie-chart.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { Cell, LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+interface PieChartProps {
+  title: string
+  description?: string
+  data: Array<{ name: string; value: number; fill: string }>
+  dataKey: string
+}
+
+const chartConfig: ChartConfig = {
+  value: {
+    label: "Value",
+  },
+}
+
+export function CustomPieChart({
+  title,
+  description,
+  data,
+  dataKey,
+}: PieChartProps) {
+  const chartColors = [
+    "hsl(var(--chart-1))",
+    "hsl(var(--chart-2))",
+    "hsl(var(--chart-3))",
+    "hsl(var(--chart-4))",
+    "hsl(var(--chart-5))",
+  ]
+
+  // Sort data by value in descending order
+  const sortedData = [...data].sort((a, b) => b.value - a.value)
+
+  // Take top 4 items
+  const topItems = sortedData.slice(0, 4)
+
+  // Sum the rest under "Other"
+  const otherValue = sortedData
+    .slice(4)
+    .reduce((sum, item) => sum + item.value, 0)
+
+  const chartData =
+    otherValue > 0
+      ? [
+          ...topItems,
+          { name: "Other", value: otherValue, fill: chartColors[4] },
+        ]
+      : topItems
+
+  return (
+    <Card className="bg-[var(--card-background)]">
+      <CardHeader className="items-center pb-0">
+        <CardTitle className="text-[var(--card-text)]">{title}</CardTitle>
+        {description && ( // Conditionally render CardDescription
+          <CardDescription className="text-[var(--card-text)]">
+            {description}
+          </CardDescription>
+        )}
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[500px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideIndicator hideLabel />}
+            />
+            <Pie data={chartData} dataKey={dataKey} nameKey="name">
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={chartColors[index % chartColors.length]}
+                />
+              ))}
+              <LabelList
+                dataKey="name"
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}

config/site.ts

@@ -2,8 +2,7 @@ export type SiteConfig = typeof siteConfig
 
 export const siteConfig = {
   name: "Hugging Face Hub Stats",
-  description:
-    "Tracking Hugging Face Hub usage",
+  description: "Tracking Hugging Face Hub usage",
   mainNav: [
     {
       title: "Home",

lib/queries.ts

@@ -0,0 +1,43 @@
+export const CREATE_VIEWS_QUERY = `
+  CREATE VIEW models AS SELECT * FROM read_parquet('https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/refs%2Fconvert%2Fparquet/models/train/0000.parquet?download=true');
+  CREATE VIEW datasets AS SELECT * FROM read_parquet('https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/refs%2Fconvert%2Fparquet/datasets/train/0000.parquet?download=true');
+  CREATE VIEW spaces AS SELECT * FROM read_parquet('https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/refs%2Fconvert%2Fparquet/spaces/train/0000.parquet?download=true');
+`
+
+export const FETCH_CHART_DATA_QUERY = `
+  WITH all_data AS (
+    SELECT DATE_TRUNC('month', CAST(createdAt AS DATE)) AS month, 'model' AS type FROM models
+    UNION ALL
+    SELECT DATE_TRUNC('month', CAST(createdAt AS DATE)) AS month, 'dataset' AS type FROM datasets
+    UNION ALL
+    SELECT DATE_TRUNC('month', CAST(createdAt AS DATE)) AS month, 'space' AS type FROM spaces
+  )
+  SELECT
+    month,
+    COUNT(*) FILTER (WHERE type = 'model') AS models,
+    COUNT(*) FILTER (WHERE type = 'dataset') AS datasets,
+    COUNT(*) FILTER (WHERE type = 'space') AS spaces
+  FROM all_data
+  GROUP BY month
+  ORDER BY month
+`
+
+export const FETCH_MODEL_LICENSE_DATA_QUERY = `
+  SELECT tag, COUNT(*) as count
+  FROM models, UNNEST(tags) AS t(tag)
+  WHERE tag LIKE 'license:%'
+  GROUP BY tag;
+`
+
+export const FETCH_DATASET_LICENSE_DATA_QUERY = `
+  SELECT tag, COUNT(*) as count
+  FROM datasets, UNNEST(tags) AS t(tag)
+  WHERE tag LIKE 'license:%'
+  GROUP BY tag;
+`
+
+export const FETCH_SPACE_SDK_DATA_QUERY = `
+  SELECT sdk, COUNT(*) as count
+  FROM spaces
+  GROUP BY sdk;
+`

styles/globals.css

@@ -4,62 +4,64 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
+    --background: 240 5% 6%;
+    --foreground: 60 5% 90%;
+    --primary: 240 0% 90%;
+    --primary-foreground: 60 0% 0%;
+    --secondary: 240 4% 15%;
+    --secondary-foreground: 60 5% 85%;
+    --accent: 240 0% 13%;
+    --accent-foreground: 60 0% 100%;
+    --destructive: 0 60% 50%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --muted: 240 5% 25%;
+    --muted-foreground: 60 5% 85%;
+    --card: 240 4% 10%;
+    --card-foreground: 60 5% 90%;
+    --card-background: #1e1e1e;
+    --card-text: #fff;
+    --popover: 240 5% 15%;
+    --popover-foreground: 60 5% 85%;
+    --border: 240 6% 20%;
+    --input: 240 6% 20%;
+    --ring: 240 5% 90%;
+    --chart-1: 359 2% 90%;
+    --chart-2: 240 1% 74%;
+    --chart-3: 240 1% 58%;
+    --chart-4: 240 1% 42%;
+    --chart-5: 240 2% 26%;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --background: 240 5% 6%;
+    --foreground: 60 5% 90%;
+    --primary: 240 0% 90%;
+    --primary-foreground: 60 0% 0%;
+    --secondary: 240 4% 15%;
+    --secondary-foreground: 60 5% 85%;
+    --accent: 240 0% 13%;
+    --accent-foreground: 60 0% 100%;
+    --destructive: 0 60% 50%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --muted: 240 5% 25%;
+    --muted-foreground: 60 5% 85%;
+    --card-text: #fff;
+    --card: 240 4% 10%;
+    --card-foreground: 60 5% 90%;
+    --card-background: #1e1e1e;
+    --popover: 240 5% 15%;
+    --popover-foreground: 60 5% 85%;
+    --border: 240 6% 20%;
+    --input: 240 6% 20%;
+    --ring: 240 5% 90%;
+    --chart-1: 359 2% 90%;
+    --chart-2: 240 1% 74%;
+    --chart-3: 240 1% 58%;
+    --chart-4: 240 1% 42%;
+    --chart-5: 240 2% 26%;
   }
 }
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -137,4 +139,4 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
-}
+}