ReportChartV2() — supabase Function Reference

Architecture documentation for the ReportChartV2() function in ReportChartV2.tsx from the supabase codebase.

Function tsx ContentManagement Collections calls 1

Entity Profile

ContentManagement→ Collections→ ReportChartV2() — supabase Function Reference

Dependency Diagram

graph TD
  41f16ebe_2bcb_fb78_ddd7_d9584fbfa8d3["ReportChartV2()"]
  752e39f1_bf41_9daa_fe02_d71ad3fd9e60["computePeriodTotal()"]
  41f16ebe_2bcb_fb78_ddd7_d9584fbfa8d3 -->|calls| 752e39f1_bf41_9daa_fe02_d71ad3fd9e60
  style 41f16ebe_2bcb_fb78_ddd7_d9584fbfa8d3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Reports/v2/ReportChartV2.tsx lines 63–188

export const ReportChartV2 = ({
  report,
  projectRef,
  startDate,
  endDate,
  interval,
  updateDateRange,
  className,
  syncId,
  filters,
  highlightActions,
  queryGroup,
}: ReportChartV2Props) => {
  const { data: org } = useSelectedOrganizationQuery()
  const { plan: orgPlan } = useCurrentOrgPlan()
  const orgPlanId = orgPlan?.id

  const isAvailable = !report?.availableIn || (orgPlanId && report.availableIn?.includes(orgPlanId))

  const canFetch = orgPlanId !== undefined && isAvailable

  const {
    data: queryResult,
    isLoading: isLoadingChart,
    error,
    isFetching,
  } = useQuery({
    queryKey: [
      'projects',
      projectRef,
      'report-v2',
      { reportId: report.id, queryGroup, startDate, endDate, interval, filters },
    ],
    queryFn: async () => {
      return await report.dataProvider(projectRef, startDate, endDate, interval, filters)
    },
    enabled: Boolean(projectRef && canFetch && isAvailable && !report.hide),
    refetchOnWindowFocus: false,
    staleTime: 0,
  })

  const chartData = queryResult?.data || []
  const dynamicAttributes = queryResult?.attributes || []

  const showSumAsDefaultHighlight = report.showSumAsDefaultHighlight ?? true
  const headerTotal = showSumAsDefaultHighlight
    ? computePeriodTotal(chartData, dynamicAttributes)
    : undefined

  /**
   * Depending on the source the timestamp key could be 'timestamp' or 'period_start'
   */
  const firstItem = chartData[0]
  const timestampKey = firstItem?.hasOwnProperty('timestamp') ? 'timestamp' : 'period_start'

  const { data: filledChartData, isError: isFillError } = useFillTimeseriesSorted({
    data: chartData,
    timestampKey,
    valueKey: dynamicAttributes.map((attr) => attr.attribute),
    defaultValue: 0,
    startDate,
    endDate,
    minPointsToFill: undefined,
    interval,
  })

  const [chartStyle, setChartStyle] = useState<string>(report.defaultChartStyle)
  const chartHighlight = useChartHighlight()

  if (!isAvailable) {
    return <ReportChartUpsell report={report} orgSlug={org?.slug ?? ''} />
  }

  const isErrorState = error && !isLoadingChart

  if (report.hide) return null

  return (
    <Card id={report.id} className={cn('relative w-full overflow-hidden scroll-mt-16', className)}>
      <CardContent
        className={cn(
          'flex flex-col gap-4 min-h-[280px] items-center justify-center',
          isFetching && 'opacity-50'
        )}
      >
        {isLoadingChart ? (
          <Loader2 className="size-5 animate-spin text-foreground-light" />
        ) : isErrorState ? (
          <p className="text-sm text-foreground-light text-center h-full flex items-center justify-center">
            Error loading chart data
          </p>
        ) : (
          <div className="w-full relative">
            <ComposedChart
              chartId={report.id}
              attributes={dynamicAttributes}
              data={filledChartData}
              format={report.format ?? undefined}
              xAxisKey={report.xAxisKey ?? 'timestamp'}
              yAxisKey={report.yAxisKey ?? dynamicAttributes[0]?.attribute}
              hideHighlightedValue={report.hideHighlightedValue}
              highlightedValue={headerTotal}
              title={report.label}
              customDateFormat={undefined}
              chartStyle={chartStyle}
              chartHighlight={chartHighlight}
              showTooltip={report.showTooltip}
              showLegend={report.showLegend}
              showTotal={false}
              showMaxValue={report.showMaxValue}
              onChartStyleChange={setChartStyle}
              updateDateRange={updateDateRange}
              valuePrecision={report.valuePrecision}
              hideChartType={report.hideChartType}
              titleTooltip={report.titleTooltip}
              syncId={syncId}
              sql={queryResult?.query}
              highlightActions={highlightActions}
              showNewBadge={report.showNewBadge}
            />
          </div>
        )}
      </CardContent>
    </Card>
  )
}