Better prediction of usage (uses Linear regression)

Author: matt-aitken

apps/webapp/app/presenters/v3/UsagePresenter.server.ts

@@ -3,7 +3,7 @@ import { env } from "~/env.server";
 import { getUsage, getUsageSeries } from "~/services/platform.v3.server";
 import { createTimeSeriesData } from "~/utils/graphs";
 import { BasePresenter } from "./basePresenter.server";
-import { start } from "@popperjs/core";
+import { DataPoint, linear } from "regression";
 
 type Options = {
   organizationId: string;
@@ -43,12 +43,41 @@ export class UsagePresenter extends BasePresenter {
     );
 
     //usage data from the platform
-    const past30Days = getUsageSeries(organizationId, {
+    const usage = getUsageSeries(organizationId, {
       from: startOfMonth,
       to: endOfMonth,
       window: "DAY",
     }).then((data) => {
-      return createTimeSeriesData({
+      //we want to sum it to get the total usage
+      const current = (data?.data.reduce((acc, period) => acc + period.value, 0) ?? 0) / 100;
+
+      // Get the start day (the day the customer started using the product) or the first day of the month
+      const startDay = new Date(data?.data.at(0)?.windowStart ?? startOfMonth).getDate();
+
+      // We want to project so we convert the data into an array of tuples [dayNumber, value]
+      const projectionData =
+        data?.data.map((period, index) => {
+          // Each value should be the sum of the previous values + the current value
+          // Adjust the day number to start from 1 when the customer started using the product
+          return [
+            new Date(period.windowStart).getDate() - startDay + 1,
+            data.data.slice(0, index + 1).reduce((acc, period) => acc + period.value, 0) / 100,
+          ] as DataPoint;
+        }) ?? ([] as DataPoint[]);
+
+      const result = linear(projectionData);
+      const [a, b] = result.equation;
+
+      // Adjust the total days in the month based on when the customer started
+      const totalDaysInMonth = endOfMonth.getDate() - startDay + 1;
+      const projected = a * totalDaysInMonth + b;
+      const overall = {
+        current,
+        projected,
+      };
+
+      //and create daily data for the graph
+      const timeSeries = createTimeSeriesData({
         startDate: startOfMonth,
         endDate: endOfMonth,
         window: "DAY",
@@ -62,6 +91,11 @@ export class UsagePresenter extends BasePresenter {
         date: period.date.toISOString(),
         dollars: (period.value ?? 0) / 100,
       }));
+
+      return {
+        overall,
+        timeSeries,
+      };
     });
 
     //usage by task
@@ -99,17 +133,7 @@ export class UsagePresenter extends BasePresenter {
         .sort((a, b) => b.totalCost - a.totalCost);
     });
 
-    const usage = getUsage(organizationId, { from: startOfMonth, to: endOfMonth }).then((data) => {
-      const current = (data?.cents ?? 0) / 100;
-      const percentageThroughMonth = new Date().getDate() / endOfMonth.getDate();
-      return {
-        current: current,
-        projected: current / percentageThroughMonth,
-      };
-    });
-
     return {
-      usageOverTime: past30Days,
       usage,
       tasks,
     };

apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx

@@ -71,13 +71,12 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   startDate.setUTCHours(0, 0, 0, 0);
 
   const presenter = new UsagePresenter();
-  const { usageOverTime, usage, tasks } = await presenter.call({
+  const { usage, tasks } = await presenter.call({
     organizationId: organization.id,
     startDate,
   });
 
   return typeddefer({
-    usageOverTime,
     usage,
     tasks,
     months,
@@ -91,8 +90,7 @@ const monthDateFormatter = new Intl.DateTimeFormat("en-US", {
 });
 
 export default function Page() {
-  const { usage, usageOverTime, tasks, months, isCurrentMonth } =
-    useTypedLoaderData<typeof loader>();
+  const { usage, tasks, months, isCurrentMonth } = useTypedLoaderData<typeof loader>();
   const currentPlan = useCurrentPlan();
   const { value, replace } = useSearchParams();
 
@@ -148,7 +146,7 @@ export default function Page() {
                             {isCurrentMonth ? "Month-to-date" : "Usage"}
                           </Header3>
                           <p className="text-3xl font-medium text-text-bright">
-                            {formatCurrency(usage.current, false)}
+                            {formatCurrency(usage.overall.current, false)}
                           </p>
                         </div>
                         {isCurrentMonth ? (
@@ -157,15 +155,15 @@ export default function Page() {
                             <div className="flex flex-col gap-2 text-text-dimmed">
                               <Header3 className="text-text-dimmed">Projected</Header3>
                               <p className="text-3xl font-medium">
-                                {formatCurrency(usage.projected, false)}
+                                {formatCurrency(usage.overall.projected, false)}
                               </p>
                             </div>
                           </>
                         ) : null}
                       </div>
                       <UsageBar
-                        current={usage.current}
-                        projectedUsage={isCurrentMonth ? usage.projected : undefined}
+                        current={usage.overall.current}
+                        projectedUsage={isCurrentMonth ? usage.overall.projected : undefined}
                         isPaying={currentPlan?.v3Subscription?.isPaying ?? false}
                         tierLimit={
                           isCurrentMonth
@@ -190,14 +188,14 @@ export default function Page() {
                 }
               >
                 <Await
-                  resolve={usageOverTime}
+                  resolve={usage}
                   errorElement={
                     <div className="flex min-h-40 items-center justify-center">
                       <Paragraph variant="small">Failed to load graph.</Paragraph>
                     </div>
                   }
                 >
-                  {(past30Days) => <UsageChart data={past30Days} />}
+                  {(u) => <UsageChart data={u.timeSeries} />}
                 </Await>
               </Suspense>
             </div>

apps/webapp/package.json

@@ -91,12 +91,12 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-virtual": "^3.0.4",
     "@team-plain/typescript-sdk": "^3.5.0",
-    "@trigger.dev/platform": "1.0.12",
     "@trigger.dev/companyicons": "^1.5.35",
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/core-backend": "workspace:*",
     "@trigger.dev/database": "workspace:*",
     "@trigger.dev/otlp-importer": "workspace:*",
+    "@trigger.dev/platform": "1.0.12",
     "@trigger.dev/sdk": "workspace:*",
     "@trigger.dev/yalt": "workspace:*",
     "@types/pg": "8.6.6",
@@ -152,6 +152,7 @@
     "react-stately": "^3.29.1",
     "react-use": "^17.4.0",
     "recharts": "^2.12.6",
+    "regression": "^2.0.1",
     "remix-auth": "^3.6.0",
     "remix-auth-email-link": "2.0.2",
     "remix-auth-github": "^1.6.0",
@@ -205,6 +206,7 @@
     "@types/react": "18.2.69",
     "@types/react-collapse": "^5.0.4",
     "@types/react-dom": "18.2.7",
+    "@types/regression": "^2.0.6",
     "@types/seedrandom": "^3.0.8",
     "@types/semver": "^7.3.13",
     "@types/simple-oauth2": "^5.0.4",