ResponseSpeedChartRenderer() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx lines 294–344

export const ResponseSpeedChartRenderer = (
  props: ReportWidgetProps<{
    timestamp: string
    avg: number
  }>
) => {
  const transformedData = props.data.map((datum) => ({
    timestamp: datum.timestamp,
    avg: datum.avg,
  }))

  const { data, error, isError } = useFillTimeseriesSorted({
    data: transformedData,
    timestampKey: 'timestamp',
    valueKey: 'avg',
    defaultValue: 0,
    startDate: props.params?.iso_timestamp_start,
    endDate: props.params?.iso_timestamp_end,
  })

  const lastAvg = props.data[props.data.length - 1]?.avg

  if (!!props.error) {
    const error = (
      typeof props.error === 'string' ? { message: props.error } : props.error
    ) as ResponseError
    return <AlertError subject="Failed to retrieve response speeds" error={error} />
  } else if (isError) {
    return (
      <Alert_Shadcn_ variant="warning">
        <WarningIcon />
        <AlertTitle_Shadcn_>Failed to retrieve response speeds</AlertTitle_Shadcn_>
        <AlertDescription_Shadcn_>{error?.message ?? 'Unknown error'}</AlertDescription_Shadcn_>
      </Alert_Shadcn_>
    )
  }

  return (
    <BarChart
      size="small"
      highlightedValue={lastAvg}
      format="ms"
      minimalHeader
      className="w-full"
      data={data}
      yAxisKey="avg"
      xAxisKey="timestamp"
      displayDateInUtc
    />
  )
}