[tools] Add new page for Base UI npm downloads KPIs

tools-public/toolpad/components/DownloadsTable.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { createComponent } from "@mui/toolpad/browser";
+import { DataGrid } from '@mui/x-data-grid';
+import { getPackages } from "./NpmChart";
+
+export interface DownloadsTableProps {
+  data: any[]
+}
+
+const getColumns = (packages) => ([
+  { field: 'date', headerName: 'Month', width: 150 },
+  ...packages.map(packageName => ({
+    field: packageName, headerName: packageName, width: packageName === '@radix-ui/react-primitive' || packageName === '@headlessui/react' ? 170 : 120
+  })),
+  {field: 'ratio', headerName: "Base UI marketshare", width: 150}
+]);
+
+function DownloadsTable({ data: dataProp }: DownloadsTableProps) {
+  let data = [...(dataProp ?? [])];
+
+  // @ts-ignore
+  let packages = getPackages(data);
+  packages = packages.filter(function(item) {
+    return item !== '@mui/material' && item !== '@mui/core'
+  });
+
+  data = data.map(entry => {
+    let headlessLibrariesDownloads = 0;
+    Object.keys(entry).forEach(key => {
+      if(key !== 'date' && key !== '@mui/base') {
+        headlessLibrariesDownloads += entry[key];
+      }
+    })
+    return {
+      ...entry,
+      // @ts-ignore
+      date: entry.date.slice(0, -3),
+      // @ts-ignore
+      id: entry.date,
+      ratio: `${(entry['@mui/base']/headlessLibrariesDownloads * 100).toFixed(2)}%`
+    }
+  });
+
+  const columns = getColumns(packages);
+
+  return <DataGrid rows={data} columns={columns} />;
+}
+
+export default createComponent(DownloadsTable, {
+  argTypes: {
+    data: {
+      typeDef: { type: 'array' }
+    }
+  },
+});

tools-public/toolpad/components/NpmChart.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { createComponent } from "@mui/toolpad/browser";
+import { LineChart, Line, CartesianGrid, XAxis, Tooltip, Legend, YAxis } from 'recharts';
+
+export interface ChartProps {
+  data: any[]
+}
+
+const colors = [
+  "#1976d2",
+  "#9c27b0",
+  "#d32f2f",
+  "#ed6c02",
+  "#2f2f2f",
+  "#2e7d32",
+];
+
+export const getPackages = (inData = []) => {
+  const packages: string[] = [];
+  if(inData && inData.length > 0) {
+    Object.keys(inData[0] ?? {}).forEach(packageName => {
+      if(packageName !== 'date') {
+        packages.push(packageName);
+      }
+    });
+  }
+
+  return packages;
+}
+
+function Chart(props: ChartProps) {
+  const { data } = props;
+  // @ts-ignore
+  let packages = getPackages(data);
+
+  packages = packages.filter(function(item) {
+    return item !== '@mui/material' && item !== '@mui/core'
+  });
+
+  return (
+    <LineChart width={600} height={300} data={data}>
+      {packages.map((packageName, idx) => <Line type="monotone" dataKey={packageName} key={packageName} stroke={colors[idx]} /> )}
+      <CartesianGrid stroke="#ccc" />
+      <Tooltip />
+      <Legend />
+      <XAxis dataKey="date" />
+      <YAxis width={100}/>
+    </LineChart>
+  );
+}
+
+export default createComponent(Chart, {
+  argTypes: {
+    data: {
+      typeDef: { type: 'array' }
+    }
+  },
+});

tools-public/toolpad/pages/baseUiNpmKpis/page.yml

@@ -0,0 +1,30 @@
+apiVersion: v1
+kind: page
+spec:
+  id: U0CsCz5
+  title: baseUiNpmKpis
+  display: shell
+  content:
+    - component: PageRow
+      name: pageRow
+      children:
+        - component: codeComponent.NpmChart
+          name: codeComponent_NpmChart
+          props:
+            data:
+              $$jsExpression: |
+                queryHeadlessLibrariesDownloads.data
+    - component: PageRow
+      name: pageRow1
+      children:
+        - component: codeComponent.DownloadsTable
+          name: codeComponent_DownloadsTable
+          props:
+            data:
+              $$jsExpression: |
+                queryHeadlessLibrariesDownloads.data
+  queries:
+    - name: queryHeadlessLibrariesDownloads
+      query:
+        function: queryHeadlessLibrariesDownloads
+        kind: local

tools-public/toolpad/resources/functions.ts

@@ -289,3 +289,4 @@ export * from "./queryMUIXLabels";
 export * from "./queryPRs";
 export * from "./queryPRs2";
 export * from "./queryGender";
+export * from "./queryHeadlessLibrariesDownloads";

tools-public/toolpad/resources/queryHeadlessLibrariesDownloads.ts

@@ -0,0 +1,81 @@
+// Toolpad queries:
+
+const formatDatePart = (datePart) => {
+  return `${datePart < 10 ? "0" : ""}${datePart}`;
+}
+
+const getDateString = (date: Date) => {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${date.getFullYear()}-${month < 10 ? "0" : ""}${month}-${day < 10 ? "0" : ''}${date.getDate()}`
+}
+
+export const getPackages = (inData) => {
+  const packages: string[] = [];
+  Object.keys(inData ?? {}).forEach(packageName => {
+    packages.push(packageName);
+  });
+  return packages;
+}
+
+const getMonthKey = (date: string) => {
+  return date.slice(0, -2) + "01";
+}
+
+export const prepareData = (inData) => {
+  const date = new Date(2022, 6, 1, 0, 0, 0, 0);
+  const today = new Date();
+  const packages = getPackages(inData);
+
+  const monthsData = {};
+
+  while(date < today) {
+    monthsData[getDateString(date)] = {};
+    packages.forEach(packageName => {
+      monthsData[getDateString(date)][packageName] = 0;
+    })
+    date.setMonth(date.getMonth() + 1);
+  }
+
+  packages.forEach(packageName => {
+    Object.keys(inData[packageName]).map(date => {
+      const monthKey = getMonthKey(date);
+      monthsData[monthKey][packageName] += inData[packageName][date];
+    }) 
+  });
+
+  const data: object[] = [];
+
+  Object.keys(monthsData).forEach((date) => {
+    const entry = {
+      date,
+      ...monthsData[date],
+      '@mui/base': monthsData[date]['@mui/base'] +  monthsData[date]['@mui/core'] - monthsData[date]['@mui/material'],
+    }
+
+    delete entry['@mui/material'];
+    delete entry['@mui/core'];
+    data.push(entry);
+  })
+
+  return data;
+}
+
+export async function queryHeadlessLibrariesDownloads() {
+  const todayDate = new Date();
+  const today = `${todayDate.getFullYear()}-${formatDatePart(todayDate.getMonth() + 1)}-${formatDatePart(todayDate.getDate())}`;
+
+  const baseDownloadsResponse = await fetch(`https://npm-stat.com/api/download-counts?package=%40mui%2Fbase&package=%40mui%2Fmaterial&package=%40mui%2Fcore&from=2022-07-01&until=${today}`);
+  const baseDownloads = await baseDownloadsResponse.json()
+
+  const headlessLibrariesDownloadsResponse = await fetch(`https://npm-stat.com/api/download-counts?package=%40react-aria%2Futils&package=%40headlessui%2Freact&package=reakit&package=%40radix-ui%2Freact-primitive&package=%40reach%2Futils&from=2022-07-01&until=${today}`);
+  const headlessLibrariesDownloads = await headlessLibrariesDownloadsResponse.json()
+
+  const inData = {
+    ...baseDownloads,
+    ...headlessLibrariesDownloads
+  }
+  const data = prepareData(inData);
+
+  return data;
+}