cleanup the mvp (#22)

README.md

@@ -1,18 +1,43 @@
-TODO:
+# Chromatic Usage Tool
+
+**This tool is not affiliated with Chromatic.**
+
+This tool is designed to help you parse the usage report that you can download from the Billing page on your Chromatic Dashboard. It converts the CSV into several graphs that can help you better understand how your team is consuming snapshots.
+
+Graphs:
+
+- Cumulative snapshots over time
+  - By app
+  - Skipped snapshots (TurboSnaps) vs total snapshots
+- Daily snapshots by app
+- % of snapshots skipped
+  - Per day
+  - By app
+
+## Usage
+
+1. Clone the repo
+1. Run `pnpm install`
+1. Run `pnpm dev`
+1. Teach the tool how to convert from Chromatic's app IDs to names. Click the "settings" link in the top right corner and follow the directions on screen.
+1. Download the CSV from your Chromatic billing page.
+1. Upload the CSV to the tool's main page.
+
+## TODO:
 
 - [x] Setup CI
 - [x] Add file upload and parse
   - [x] add contents to DB
   - [x] clear on new file upload
-- [ ] Convert app IDs to names
+- [x] Convert app IDs to names
 - [x] Store app ID -> name in DB
   - [ ] prompt for it if needed
 - [ ] Add graphs for the usage
 - [x] Add column for total snapshots per build
 - [ ] Add error checking when you upload a CSV that the apps exist. Direct people to settings.
 - [ ] Refresh on upload
 
-# Data views
+### Data views
 
 - [ ] Use of snapshots over time for this month
   - [x] cumulative
@@ -21,16 +46,9 @@ TODO:
 - [x] Compare skipped snapshots to total snapshots
   - [x] overall
   - [x] by app
-- [ ] All of the above, but filtered to a specific app
 - [ ] some kind of per-branch analysis?
   - [ ] what branches were the most expensive?
   - [ ] were there any stand-outs?
 - [ ] Compare use of snapshots between month
   - [ ] overall
   - [ ] by app
-
-## Querying
-
-- group by branch, date, app, browser
-- count snapshots, number of builds, skipped snapshots
-- filter by branch, app, browser, date range

src/app/components/DailyNormalizedTurbosnaps.tsx

@@ -25,7 +25,7 @@ export const DailyNormalizedTurbosnaps = () => {
       ],
       title: "Daily Normalized Turbosnaps",
       x: { type: "band" },
-      y: { label: "% of Snapshots" },
+      y: { label: "% of Snapshots", transform: (y) => y * 100 },
     } satisfies Plot.PlotOptions;
   }
   return <BaseChart options={options} />;

src/app/components/NormalizedTurbosnapsByApp.tsx

@@ -26,7 +26,7 @@ export const NormalizedTurbosnapsByApp = () => {
       ],
       title: "Normalized Turbosnaps By App",
       y: { label: "App Name" },
-      x: { label: "% of Snapshots" },
+      x: { label: "% of Snapshots", transform: (x) => x * 100 },
     } satisfies Plot.PlotOptions;
   }
   return <BaseChart className="col-span-1" options={options} />;

src/app/settings/ChromaticAppForm.tsx

@@ -25,7 +25,7 @@ export const ChromaticAppForm = () => {
       <Input
         className="w-5/12"
         type="text"
-        placeholder="App Name"
+        placeholder="Project Name"
         {...register("name", { required: true })}
       />
       <Input

src/app/settings/chromaticApps.tsx

@@ -10,15 +10,21 @@ export const ChromaticApps = async () => {
       <h2 className="mb-3 text-xl font-semibold text-slate-200">
         Chromatic Apps
       </h2>
-      <p className="mb-4 w-[32rem] text-center">
-        The Chromatic usage CSV gives us the App ID for each build. <br />
-        To convert that to the project name, add the name and ID to this table.
-      </p>
+      <div className="mb-4 w-[38rem] text-center">
+        <p className="mb-2">
+          The Chromatic usage CSV gives us the App ID for each build. To convert
+          that to the name of your Project, add the name and ID to this table.
+        </p>
+        <p>
+          You can find the App ID by going to your project&apos;s Build page and
+          grabbing the `appId` query string parameter from the URL.
+        </p>
+      </div>
       <table className="w-[38rem]">
         <thead className="border-b border-slate-400/20 text-lg font-semibold">
           <tr>
-            <th className="w-5/12 text-left">Name</th>
-            <th className="w-5/12 text-left">ID</th>
+            <th className="w-5/12 text-left">Project Name</th>
+            <th className="w-5/12 text-left">App ID</th>
             <th className="w-1/6">Delete</th>
           </tr>
         </thead>

src/server/api/routers/build.ts

@@ -99,8 +99,8 @@ export const buildRouter = createTRPCRouter({
       totalSnapshots: 0,
       skippedSnapshots: 0,
     }).map((x) => [
-      { date: x.date, type: "totalSnapshots", value: x.totalSnapshots },
-      { date: x.date, type: "skippedSnapshots", value: x.skippedSnapshots },
+      { date: x.date, type: "Total Snapshots", value: x.totalSnapshots },
+      { date: x.date, type: "Skipped Snapshots", value: x.skippedSnapshots },
     ]);
     return merge<{ date: Date; type: string; value: number }>(thing);
   }),
@@ -119,12 +119,12 @@ export const buildRouter = createTRPCRouter({
     const split = totalSnapshotsByApp.map((x) => [
       {
         appName: x.appName ?? "Unknown",
-        type: "skippedSnapshots",
+        type: "Skipped Snapshots",
         value: x.skippedSnapshots,
       },
       {
         appName: x.appName ?? "Unknown",
-        type: "totalSnapshots",
+        type: "Total Snapshots",
         value: x.totalSnapshots,
       },
     ]);