[pull] master from supabase:master

apps/studio/components/interfaces/Reports/ReportChart.tsx

@@ -7,6 +7,7 @@
  * This component acts as a bridge between the data-fetching logic and the
  * presentational chart component.
  */
+import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
 import LogChartHandler from 'components/ui/Charts/LogChartHandler'
 import { useChartData } from 'hooks/useChartData'
 import type { UpdateDateRange } from 'pages/project/[ref]/reports/database'
@@ -60,6 +61,28 @@ const ReportChart = ({
         : chart.showMaxValue,
   })
 
+  const isTopListChart = chart.id === 'top-api-routes' || chart.id === 'top-rpc-functions'
+
+  const chartDataArray = Array.isArray(data) ? data : []
+
+  const { data: filledData, isError: isFillError } = useFillTimeseriesSorted(
+    chartDataArray,
+    'period_start',
+    (chartAttributes.length > 0 ? chartAttributes : chart.attributes).map(
+      (attr: any) => attr.attribute
+    ),
+    0,
+    startDate,
+    endDate,
+    undefined,
+    interval
+  )
+
+  const finalData =
+    chartDataArray.length > 0 && chartDataArray.length < 20 && !isFillError && !isTopListChart
+      ? filledData
+      : chartDataArray
+
   const getExpDemoChartData = () =>
     new Array(20).fill(0).map((_, index) => ({
       period_start: new Date(startDate).getTime() + index * 1000,
@@ -129,7 +152,7 @@ const ReportChart = ({
       attributes={
         (chartAttributes.length > 0 ? chartAttributes : chart.attributes) as MultiAttribute[]
       }
-      data={data}
+      data={finalData}
       isLoading={isLoadingChart || isLoading}
       highlightedValue={highlightedValue as any}
       updateDateRange={updateDateRange}

apps/studio/components/interfaces/Reports/Reports.constants.ts

@@ -36,38 +36,38 @@ export const REPORTS_DATEPICKER_HELPERS: ReportsDatetimeHelper[] = [
   },
   {
     text: REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES,
-    calcFrom: () => dayjs().subtract(1, 'hour').startOf('day').toISOString(),
+    calcFrom: () => dayjs().subtract(1, 'hour').toISOString(),
     calcTo: () => dayjs().toISOString(),
     default: true,
     availableIn: ['free', 'pro', 'team', 'enterprise'],
   },
   {
     text: REPORT_DATERANGE_HELPER_LABELS.LAST_3_HOURS,
-    calcFrom: () => dayjs().subtract(3, 'hour').startOf('day').toISOString(),
+    calcFrom: () => dayjs().subtract(3, 'hour').toISOString(),
     calcTo: () => dayjs().toISOString(),
     availableIn: ['free', 'pro', 'team', 'enterprise'],
   },
   {
     text: REPORT_DATERANGE_HELPER_LABELS.LAST_24_HOURS,
-    calcFrom: () => dayjs().subtract(1, 'day').startOf('day').toISOString(),
+    calcFrom: () => dayjs().subtract(1, 'day').toISOString(),
     calcTo: () => dayjs().toISOString(),
     availableIn: ['free', 'pro', 'team', 'enterprise'],
   },
   {
     text: REPORT_DATERANGE_HELPER_LABELS.LAST_7_DAYS,
-    calcFrom: () => dayjs().subtract(7, 'day').startOf('day').toISOString(),
+    calcFrom: () => dayjs().subtract(7, 'day').toISOString(),
     calcTo: () => dayjs().toISOString(),
     availableIn: ['pro', 'team', 'enterprise'],
   },
   {
     text: REPORT_DATERANGE_HELPER_LABELS.LAST_14_DAYS,
-    calcFrom: () => dayjs().subtract(14, 'day').startOf('day').toISOString(),
+    calcFrom: () => dayjs().subtract(14, 'day').toISOString(),
     calcTo: () => dayjs().toISOString(),
     availableIn: ['team', 'enterprise'],
   },
   {
     text: REPORT_DATERANGE_HELPER_LABELS.LAST_28_DAYS,
-    calcFrom: () => dayjs().subtract(28, 'day').startOf('day').toISOString(),
+    calcFrom: () => dayjs().subtract(28, 'day').toISOString(),
     calcTo: () => dayjs().toISOString(),
     availableIn: ['team', 'enterprise'],
   },

apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts

@@ -474,8 +474,12 @@ export const fillTimeseries = (
   defaultValue: number,
   min?: string,
   max?: string,
-  minPointsToFill: number = 20
+  minPointsToFill: number = 20,
+  interval?: string
 ) => {
+  if (timeseriesData.length === 0 && !(min && max)) {
+    return []
+  }
   // If we have more points than minPointsToFill, just normalize timestamps and return
   if (timeseriesData.length > minPointsToFill) {
     return timeseriesData.map((datum) => {
@@ -493,41 +497,61 @@ export const fillTimeseries = (
 
   // const truncationSample = timeseriesData.length > 0 ? timeseriesData[0][timestampKey] : min || max
   const truncationSamples = timeseriesData.length > 0 ? dates : [minDate, maxDate]
-  const truncation = getTimestampTruncation(truncationSamples as Dayjs[])
+  let truncation: 'second' | 'minute' | 'hour' | 'day'
+  let step = 1
+
+  if (interval) {
+    const match = interval.match(/^(\d+)(m|h|d|s)$/)
+    if (match) {
+      step = parseInt(match[1], 10)
+      const unitChar = match[2] as 'm' | 'h' | 'd' | 's'
+      const unitMap = { s: 'second', m: 'minute', h: 'hour', d: 'day' } as const
+      truncation = unitMap[unitChar]
+    } else {
+      // Fallback for invalid format
+      truncation = getTimestampTruncation(truncationSamples as Dayjs[])
+    }
+  } else {
+    truncation = getTimestampTruncation(truncationSamples as Dayjs[])
+  }
 
   const newData = timeseriesData.map((datum) => {
-    const iso = dayjs.utc(datum[timestampKey]).toISOString()
+    const timestamp = datum[timestampKey]
+    const iso = isUnixMicro(timestamp)
+      ? unixMicroToIsoTimestamp(timestamp)
+      : dayjs.utc(timestamp).toISOString()
     datum[timestampKey] = iso
     return datum
   })
 
-  const diff = maxDate.diff(minDate, truncation as dayjs.UnitType)
-  // Intentional throwing of error here to be caught by Sentry, as this would indicate a bug since charts shouldn't be rendering more than 10k data points
-  if (diff > 10000) {
-    throw new Error(
-      'The selected date range will render more than 10,000 data points within the charts, which will degrade browser performance. Please select a smaller date range.'
-    )
-  }
-
-  for (let i = 0; i <= diff; i++) {
-    const dateToMaybeAdd = minDate.add(i, truncation as dayjs.ManipulateType)
-
-    const keys = typeof valueKey === 'string' ? [valueKey] : valueKey
-
-    const toMerge = keys.reduce(
-      (acc, key) => ({
-        ...acc,
-        [key]: defaultValue,
-      }),
-      {}
-    )
-
-    if (!dates.find((d) => isEqual(d, dateToMaybeAdd))) {
+  let currentDate = minDate
+  while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate)) {
+    const found = dates.find((d) => {
+      const d_date = d as Dayjs
+      return (
+        d_date.year() === currentDate.year() &&
+        d_date.month() === currentDate.month() &&
+        d_date.date() === currentDate.date() &&
+        d_date.hour() === currentDate.hour() &&
+        d_date.minute() === currentDate.minute()
+      )
+    })
+    if (!found) {
+      const keys = typeof valueKey === 'string' ? [valueKey] : valueKey
+
+      const toMerge = keys.reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: defaultValue,
+        }),
+        {}
+      )
       newData.push({
-        [timestampKey]: dateToMaybeAdd.toISOString(),
+        [timestampKey]: currentDate.toISOString(),
         ...toMerge,
       })
     }
+    currentDate = currentDate.add(step, truncation)
   }
 
   return newData

apps/studio/components/ui/Charts/ComposedChart.utils.tsx

@@ -131,6 +131,7 @@ export const calculateTotalChartAggregate = (
 const CustomTooltip = ({
   active,
   payload,
+  label,
   attributes,
   isPercentage,
   format,
@@ -139,7 +140,6 @@ const CustomTooltip = ({
   isActiveHoveredChart,
 }: TooltipProps) => {
   if (active && payload && payload.length) {
-    const timestamp = payload[0].payload.timestamp
     const maxValueAttribute = isMaxAttribute(attributes)
     const maxValueData =
       maxValueAttribute && payload?.find((p: any) => p.dataKey === maxValueAttribute.attribute)
@@ -203,7 +203,7 @@ const CustomTooltip = ({
           !isActiveHoveredChart && 'opacity-0'
         )}
       >
-        <p className="font-medium">{dayjs(timestamp).format(DateTimeFormats.FULL_SECONDS)}</p>
+        <p className="font-medium">{label}</p>
         <div className="grid gap-0">
           {payload
             .reverse()

apps/studio/hooks/misc/useReportDateRange.ts

@@ -175,17 +175,21 @@ export const useReportDateRange = (
 
   const handleIntervalGranularity = useCallback((from: string, to: string) => {
     const diffInDays = dayjs(to).diff(from, 'day', true)
+    const diffInHours = dayjs(to).diff(from, 'hour', true)
     const conditions = {
-      '1m': dayjs(to).diff(from, 'hour') < 3, // less than 3 hours
-      '10m': dayjs(to).diff(from, 'hour') < 6, // less than 6 hours
-      '30m': dayjs(to).diff(from, 'hour') < 18, // less than 18 hours
+      '1m': diffInHours < 1.1, // less than 1.1 hours
+      '5m': diffInHours < 3.1, // less than 3.1 hours
+      '10m': diffInHours < 6.1, // less than 6.1 hours
+      '30m': diffInHours < 25, // less than 25 hours
       '1h': diffInDays < 10, // less than 10 days
       '1d': diffInDays >= 10, // more than 10 days
     }
 
     switch (true) {
       case conditions['1m']:
         return '1m'
+      case conditions['5m']:
+        return '5m'
       case conditions['10m']:
         return '10m'
       case conditions['30m']:

apps/www/_blog/2025-07-15-stripe-engine-as-sync-library.mdx

@@ -0,0 +1,134 @@
+---
+title: 'Stripe-To-Postgres Sync Engine as standalone Library'
+description: 'Sync Stripe webhook data directly to Postgres using standalone TypeScript library.'
+categories:
+  - product
+  - launch-week
+tags:
+  - launch-week
+  - stripe
+date: '2025-07-15:15:00'
+toc_depth: 3
+author: kevcodez
+image: launch-week-15/day-2-stripe-engine/og.jpg
+thumb: launch-week-15/day-2-stripe-engine/thumb.png
+launchweek: 15
+---
+
+We're excited to announce that [`stripe-sync-engine`](https://github.com/supabase/stripe-sync-engine) is now available as a standalone npm package: [`@supabase/stripe-sync-engine`](https://www.npmjs.com/package/@supabase/stripe-sync-engine)!
+
+Previously distributed only as a Docker image (`supabase/stripe-sync-engine`), you can now plug this into any backend project—whether you're using Node.js, running Express on a server, or even deploying on Supabase Edge Functions.
+
+Stripe-Sync-Engine is a webhook listener that transforms Stripe webhooks into structured Postgres inserts/updates. It listens to Stripe webhook events (like `invoice.payment_failed`, `customer.subscription.updated`, etc), normalizes and stores them in a relational format in Postgres.
+
+<Img
+  src={{
+    dark: '/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-dark.png',
+    light: '/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-light.png',
+  }}
+  alt="Stripe Sync Engine Diagram"
+/>
+
+## Why sync Stripe data to Postgres?
+
+While Supabase offers a convenient [foreign data wrapper](https://supabase.com/partners/integrations/supabase_wrapper_stripe) (FDW) for Stripe, sometimes you want your Stripe data _locally available_ in your Postgres database for:
+
+- **Lower latency**: Avoid round-trips to the Stripe API.
+- **Better joins**: Query subscriptions, invoices, and charges together.
+- **Custom logic**: Build fraud checks, billing dashboards, and dunning workflows directly from your own database.
+
+## New: Use it as an npm package
+
+You can now install and run the Stripe sync engine directly inside your backend:
+
+```bash
+npm install @supabase/stripe-sync-engine
+```
+
+And use it like this:
+
+```tsx
+import { StripeSync } from '@supabase/stripe-sync-engine'
+
+const sync = new StripeSync({
+  databaseUrl: 'postgres://user:pass@host:port/db',
+  stripeSecretKey: 'sk_test_...',
+  stripeWebhookSecret: 'whsec_...',
+})
+
+// Example: process a Stripe webhook
+await sync.processWebhook(payload, signature)
+```
+
+For a full list of configuration options, refer to our [stripe-sync-engine README](https://github.com/supabase/stripe-sync-engine/blob/main/packages/sync-engine/README.md).
+
+## Use via Supabase Edge Function
+
+To use the Stripe-Sync-Engine in an [Edge Function](https://supabase.com/edge-functions), you first have to ensure that the schema and tables exist. While you can technically do this inside the Edge Function, it is recommended to run the schema migrations outside of that. You can do a one-off migration via
+
+```tsx
+import { runMigrations } from '@supabase/stripe-sync-engine'
+;(async () => {
+  await runMigrations({
+    databaseUrl: 'postgresql://postgres:..@db.<ref>.supabase.co:5432/postgres',
+    schema: 'stripe',
+    logger: console,
+  })
+})()
+```
+
+or include the [migration files](https://github.com/supabase/stripe-sync-engine/tree/main/packages/sync-engine/src/database/migrations) in your regular migration workflow.
+
+Once the schema and tables are in place, you can start syncing your Stripe data using an Edge Function:
+
+```tsx
+import 'jsr:@supabase/functions-js/edge-runtime.d.ts'
+import { StripeSync } from 'npm:@supabase/[email protected]'
+
+// Load secrets from environment variables
+const databaseUrl = Deno.env.get('DATABASE_URL')!
+const stripeWebhookSecret = Deno.env.get('STRIPE_WEBHOOK_SECRET')!
+const stripeSecretKey = Deno.env.get('STRIPE_SECRET_KEY')!
+
+// Initialize StripeSync
+const stripeSync = new StripeSync({
+  databaseUrl,
+  stripeWebhookSecret,
+  stripeSecretKey,
+  backfillRelatedEntities: false,
+  autoExpandLists: true,
+})
+
+Deno.serve(async (req) => {
+  // Extract raw body as Uint8Array (buffer)
+  const rawBody = new Uint8Array(await req.arrayBuffer())
+
+  const stripeSignature = req.headers.get('stripe-signature')
+
+  await stripeSync.processWebhook(rawBody, stripeSignature)
+
+  return new Response(null, {
+    status: 202,
+    headers: { 'Content-Type': 'application/json' },
+  })
+})
+```
+
+1. Deploy your Edge Function initially using `supabase functions deploy`
+2. Set up a Stripe webhook with the newly deployed Supabase Edge Function url
+3. Create a new .env file in the `supabase` directory
+
+```
+# Use Dedicated pooler if available
+DATABASE_URL="postgresql://postgres:..@db.<ref>.supabase.co:6532/postgres"
+STRIPE_WEBHOOK_SECRET="whsec_"
+STRIPE_SECRET_KEY="sk_test_..."
+```
+
+1. Load the secrets using `sh supabase secrets set --env-file ./supabase/.env`
+
+As webhooks come in, the data is automatically persisted in the `stripe` schema. For a full guide, please refer to our [repository docs](https://supabase.github.io/stripe-sync-engine/).
+
+## Final thoughts
+
+If you're building with Stripe and Supabase, [`stripe-sync-engine`](https://github.com/supabase/stripe-sync-engine) gives you a reliable, scalable way to bring your billing data closer to your database and application. Whether you want better analytics, faster dunning workflows, or simpler integrations—this package is built to make that seamless.

apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx

@@ -52,13 +52,13 @@ export const days: BuildDay[] = [
     ],
   },
   {
-    title: '',
+    title: 'Introducing stripe-sync-engine npm package',
     description: '',
-    id: '',
-    is_shipped: false,
+    id: 'stripe-engine',
+    is_shipped: true,
     links: [
       {
-        url: '/blog/',
+        url: '/blog/stripe-engine-as-sync-library',
         label: 'Blog post',
         target: '_blank',
       },