NetworkTrafficRenderer() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx lines 46–113

export const NetworkTrafficRenderer = (
  props: ReportWidgetProps<{
    timestamp: string
    ingress: number
    egress: number
  }>
) => {
  const { data, error, isError } = useFillTimeseriesSorted({
    data: props.data,
    timestampKey: 'timestamp',
    valueKey: ['ingress_mb', 'egress_mb'],
    defaultValue: 0,
    startDate: props.params?.iso_timestamp_start,
    endDate: props.params?.iso_timestamp_end,
  })

  const totalIngress = sumBy(props.data, 'ingress_mb')
  const totalEgress = sumBy(props.data, 'egress_mb')

  function determinePrecision(valueInMb: number) {
    return valueInMb < 0.001 ? 7 : totalIngress > 1 ? 2 : 4
  }

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

  return (
    <div className="flex flex-col gap-12 w-full">
      <BarChart
        size="small"
        title="Ingress"
        highlightedValue={sumBy(props.data, 'ingress_mb')}
        format="MB"
        className="w-full"
        valuePrecision={determinePrecision(totalIngress)}
        data={data}
        yAxisKey="ingress_mb"
        xAxisKey="timestamp"
        displayDateInUtc
      />

      <BarChart
        size="small"
        title="Egress"
        highlightedValue={totalEgress}
        format="MB"
        valuePrecision={determinePrecision(totalEgress)}
        className="w-full"
        data={data}
        yAxisKey="egress_mb"
        xAxisKey="timestamp"
        displayDateInUtc
      />
    </div>
  )
}