npm stats

Author: tannerlinsley

app/components/NpmStatsChart.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import * as Plot from '@observablehq/plot'
+import { ParentSize } from '@visx/responsive'
+
+type NpmStats = {
+  start: string
+  end: string
+  package: string
+  downloads: Array<{
+    downloads: number
+    day: string
+  }>
+}
+
+export function NpmStatsChart({ stats }: { stats: NpmStats[] }) {
+  const plotRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!stats.length || !plotRef.current) return
+
+    // Flatten the data for the plot
+    const plotData = stats.flatMap((stat) =>
+      stat.downloads.map((d) => ({
+        ...d,
+        package: stat.package,
+        date: new Date(d.day),
+      }))
+    )
+
+    const chart = Plot.plot({
+      marginLeft: 50,
+      marginRight: 0,
+      marginBottom: 70,
+      width: plotRef.current.clientWidth,
+      height: plotRef.current.clientHeight,
+      marks: [
+        Plot.line(plotData, {
+          x: 'date',
+          y: 'downloads',
+          stroke: 'package',
+          strokeWidth: 2,
+        }),
+      ],
+      x: {
+        type: 'time',
+        label: 'Date',
+        labelOffset: 35,
+        tickFormat: (d: Date) => d.toLocaleDateString(),
+      },
+      y: {
+        label: 'Downloads',
+        labelOffset: 35,
+        tickFormat: (d: number) => {
+          if (d >= 1000000) {
+            return `${(d / 1000000).toFixed(1)}M`
+          }
+          if (d >= 1000) {
+            return `${(d / 1000).toFixed(1)}K`
+          }
+          return d.toString()
+        },
+      },
+      grid: true,
+      color: {
+        legend: true,
+      },
+    })
+
+    plotRef.current.appendChild(chart)
+
+    return () => {
+      if (plotRef.current) {
+        plotRef.current.innerHTML = ''
+      }
+    }
+  }, [stats])
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <div
+          ref={plotRef}
+          style={{
+            width,
+            height: Math.max(400, height * 0.6),
+          }}
+        />
+      )}
+    </ParentSize>
+  )
+}

app/components/Tooltip.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import {
+  useFloating,
+  useHover,
+  useInteractions,
+  FloatingPortal,
+  offset,
+  shift,
+  flip,
+  autoUpdate,
+} from '@floating-ui/react'
+
+interface TooltipProps {
+  content: React.ReactNode
+  children: React.ReactElement
+  placement?: 'top' | 'right' | 'bottom' | 'left'
+  className?: string
+}
+
+export function Tooltip({
+  content,
+  children,
+  placement = 'top',
+  className = '',
+}: TooltipProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: [offset(5), flip(), shift()],
+    whileElementsMounted: autoUpdate,
+  })
+
+  const hover = useHover(context)
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover])
+
+  return (
+    <>
+      {React.cloneElement(children, {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+      })}
+      <FloatingPortal>
+        {isOpen && (
+          <div
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+            className={`z-50 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-gray-800 ${className}`}
+          >
+            {content}
+          </div>
+        )}
+      </FloatingPortal>
+    </>
+  )
+}

app/routeTree.gen.ts

@@ -27,6 +27,7 @@ import { Route as LibrariesEthosImport } from './routes/_libraries/ethos'
 import { Route as LibrariesDedicatedSupportImport } from './routes/_libraries/dedicated-support'
 import { Route as LibrariesBlogImport } from './routes/_libraries/blog'
 import { Route as LibraryIdVersionImport } from './routes/$libraryId/$version'
+import { Route as StatsNpmIndexImport } from './routes/stats/npm/index'
 import { Route as LibrariesBlogIndexImport } from './routes/_libraries/blog.index'
 import { Route as LibrariesBlogSplatImport } from './routes/_libraries/blog.$'
 import { Route as LibraryIdVersionDocsImport } from './routes/$libraryId/$version.docs'
@@ -142,6 +143,12 @@ const LibraryIdVersionRoute = LibraryIdVersionImport.update({
   getParentRoute: () => LibraryIdRouteRoute,
 } as any)
 
+const StatsNpmIndexRoute = StatsNpmIndexImport.update({
+  id: '/stats/npm/',
+  path: '/stats/npm/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const LibrariesBlogIndexRoute = LibrariesBlogIndexImport.update({
   id: '/',
   path: '/',
@@ -397,6 +404,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibrariesBlogIndexImport
       parentRoute: typeof LibrariesBlogImport
     }
+    '/stats/npm/': {
+      id: '/stats/npm/'
+      path: '/stats/npm'
+      fullPath: '/stats/npm'
+      preLoaderRoute: typeof StatsNpmIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/$libraryId/$version/docs/$': {
       id: '/$libraryId/$version/docs/$'
       path: '/$'
@@ -624,6 +638,7 @@ export interface FileRoutesByFullPath {
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsRouteWithChildren
   '/blog/$': typeof LibrariesBlogSplatRoute
   '/blog/': typeof LibrariesBlogIndexRoute
+  '/stats/npm': typeof StatsNpmIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
@@ -656,6 +671,7 @@ export interface FileRoutesByTo {
   '/': typeof LibrariesIndexRoute
   '/blog/$': typeof LibrariesBlogSplatRoute
   '/blog': typeof LibrariesBlogIndexRoute
+  '/stats/npm': typeof StatsNpmIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
@@ -693,6 +709,7 @@ export interface FileRoutesById {
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsRouteWithChildren
   '/_libraries/blog/$': typeof LibrariesBlogSplatRoute
   '/_libraries/blog/': typeof LibrariesBlogIndexRoute
+  '/stats/npm/': typeof StatsNpmIndexRoute
   '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute
@@ -731,6 +748,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs'
     | '/blog/$'
     | '/blog/'
+    | '/stats/npm'
     | '/$libraryId/$version/docs/$'
     | '/$libraryId/$version/docs/'
     | '/config/$version'
@@ -762,6 +780,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blog/$'
     | '/blog'
+    | '/stats/npm'
     | '/$libraryId/$version/docs/$'
     | '/$libraryId/$version/docs'
     | '/config/$version'
@@ -797,6 +816,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs'
     | '/_libraries/blog/$'
     | '/_libraries/blog/'
+    | '/stats/npm/'
     | '/$libraryId/$version/docs/$'
     | '/$libraryId/$version/docs/'
     | '/_libraries/config/$version/'
@@ -821,6 +841,7 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   MerchRoute: typeof MerchRoute
   SponsorsEmbedRoute: typeof SponsorsEmbedRoute
+  StatsNpmIndexRoute: typeof StatsNpmIndexRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
@@ -830,6 +851,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   MerchRoute: MerchRoute,
   SponsorsEmbedRoute: SponsorsEmbedRoute,
+  StatsNpmIndexRoute: StatsNpmIndexRoute,
 }
 
 export const routeTree = rootRoute
@@ -847,7 +869,8 @@ export const routeTree = rootRoute
         "/dashboard",
         "/login",
         "/merch",
-        "/sponsors-embed"
+        "/sponsors-embed",
+        "/stats/npm/"
       ]
     },
     "/$libraryId": {
@@ -957,6 +980,9 @@ export const routeTree = rootRoute
       "filePath": "_libraries/blog.index.tsx",
       "parent": "/_libraries/blog"
     },
+    "/stats/npm/": {
+      "filePath": "stats/npm/index.tsx"
+    },
     "/$libraryId/$version/docs/$": {
       "filePath": "$libraryId/$version.docs.$.tsx",
       "parent": "/$libraryId/$version/docs"