AttributeContent() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/Usage/UsageChartTooltips.tsx lines 44–75

const AttributeContent = ({
  attribute,
  attributeMeta,
  sumValue,
  tooltipFormatter,
  unit,
}: {
  attribute: Attribute
  attributeMeta?: Payload<ValueType, string | number>
  sumValue: number
  tooltipFormatter?: (value: any) => any
  unit: 'bytes' | 'percentage' | 'absolute' | 'hours' | 'gigabytes'
}) => {
  const attrValue = Number(attributeMeta?.value ?? 0)
  const percentageContribution = ((attrValue / sumValue) * 100).toFixed(1)

  return (
    <div key={attribute.name} className="flex items-center justify-between">
      <div className="flex items-center space-x-2 w-[175px]">
        <div className={cn('w-3 h-3 rounded-full border', COLOR_MAP[attribute.color].marker)} />
        <p className="text-xs prose">
          {attribute.name} ({percentageContribution}%):{' '}
        </p>
      </div>
      <p className="text-xs tabular-nums">
        {tooltipFormatter !== undefined
          ? tooltipFormatter(attrValue)
          : `${attrValue}${unit === 'hours' ? ' H' : ''}`}
      </p>
    </div>
  )
}