Ecommerce dashboard in React

lib/store-overview.ts (free: your orders into overview numbers)

/** One order: its total in your shop currency and when it was placed. */
export type StoreOrder = { total: number; createdAt: Date };

export type Overview = {
  revenue: number;
  orders: number;
  /** conversion rate in %, orders / visitors */
  conv: number;
  /** % change against the period before: revenue, orders, conversion */
  d: [number, number, number];
  /** 0 to 100 */
  goal: number;
  /** 7 heights, 0 to 100 */
  bars: number[];
  labels: string[];
};

type Options = {
  /** revenue target for the last 28 days, in your currency's main unit */
  monthlyGoal: number;
  /** visitors from your analytics: [this period, the period before]. Leave it out and conversion shows 0. */
  visitors?: { week: [number, number]; month: [number, number] };
  now?: Date;
};

const DAY = 86_400_000;
const change = (now: number, before: number) => (before ? Math.round(((now - before) / before) * 1000) / 10 : 0);
const rate = (orders: number, visitors: number) => (visitors ? Math.round((orders / visitors) * 10_000) / 100 : 0);

/** 7 bars of barDays days each, ending at midnight tonight, compared with the 7 bars before them. */
function range(orders: StoreOrder[], end: number, barDays: number, visitors: [number, number] | undefined, label: (d: Date) => string): Overview {
  const span = 7 * barDays * DAY;
  const start = end - span;
  const sums = Array<number>(7).fill(0);
  let revenue = 0, count = 0, before = 0, countBefore = 0;

  for (const o of orders) {
    const t = o.createdAt.getTime();
    if (t >= start && t < end) {
      sums[Math.min(6, Math.floor((t - start) / (barDays * DAY)))] += o.total;
      revenue += o.total;
      count++;
    } else if (t >= start - span && t < start) {
      before += o.total;
      countBefore++;
    }
  }

  const top = Math.max(...sums, 1);
  const [seen, seenBefore] = visitors ?? [0, 0];
  const conv = rate(count, seen);
  return {
    revenue: Math.round(revenue * 100) / 100,
    orders: count,
    conv,
    d: [change(revenue, before), change(count, countBefore), visitors ? change(conv, rate(countBefore, seenBefore)) : 0],
    goal: 0, // set from the 28-day revenue below
    bars: sums.map((s) => Math.round((s / top) * 100)),
    // label each bar at noon of its first day, so a daylight saving change can't shift it a day
    labels: sums.map((_, i) => label(new Date(start + i * barDays * DAY + DAY / 2))),
  };
}

export function storeOverview(orders: StoreOrder[], { monthlyGoal, visitors, now = new Date() }: Options) {
  const tonight = new Date(now);
  tonight.setHours(24, 0, 0, 0); // midnight at the end of today, in the server's time zone
  const end = tonight.getTime();
  const week = range(orders, end, 1, visitors?.week, (d) => d.toLocaleDateString("en-US", { weekday: "short" }));
  const month = range(orders, end, 4, visitors?.month, (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" }));
  const goal = Math.min(100, Math.round((month.revenue / monthlyGoal) * 100));
  return { week: { ...week, goal }, month: { ...month, goal } };
}

lib/shopify-orders.ts (free: orders from the Shopify Admin API)

import type { StoreOrder } from "./store-overview";

const SHOP = process.env.SHOPIFY_STORE_DOMAIN!; // your-store.myshopify.com
const TOKEN = process.env.SHOPIFY_ADMIN_TOKEN!; // Admin API access token with read_orders
const API = `https://${SHOP}/admin/api/2026-10/graphql.json`;

const QUERY = `query Orders($cursor: String, $q: String!) {
  orders(first: 250, after: $cursor, query: $q, sortKey: CREATED_AT) {
    nodes {
      createdAt
      test
      cancelledAt
      currentTotalPriceSet { shopMoney { amount currencyCode } }
    }
    pageInfo { hasNextPage endCursor }
  }
}`;

type OrderNode = {
  createdAt: string;
  test: boolean;
  cancelledAt: string | null;
  currentTotalPriceSet: { shopMoney: { amount: string; currencyCode: string } };
};
type OrdersPage = {
  data?: { orders: { nodes: OrderNode[]; pageInfo: { hasNextPage: boolean; endCursor: string | null } } };
  errors?: { message: string }[];
};

/** Real, not cancelled orders from the last `days` days. Shopify keeps 60 days unless your app has read_all_orders. */
export async function shopifyOrders(days = 56): Promise<StoreOrder[]> {
  const since = new Date(Date.now() - days * 86_400_000).toISOString();
  const orders: StoreOrder[] = [];
  let cursor: string | null = null;

  do {
    const res: Response = await fetch(API, {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-Shopify-Access-Token": TOKEN },
      body: JSON.stringify({ query: QUERY, variables: { cursor, q: `created_at:>='${since}'` } }),
    });
    if (!res.ok) throw new Error(`Shopify answered ${res.status}`);
    const page = (await res.json()) as OrdersPage;
    if (!page.data) throw new Error(page.errors?.[0]?.message ?? "Shopify orders query failed");

    for (const o of page.data.orders.nodes) {
      if (o.test || o.cancelledAt) continue;
      orders.push({ total: Number(o.currentTotalPriceSet.shopMoney.amount), createdAt: new Date(o.createdAt) });
    }
    const { hasNextPage, endCursor } = page.data.orders.pageInfo;
    cursor = hasNextPage ? endCursor : null;
  } while (cursor);

  return orders;
}