📊 Komponentlar: jadval va grafik

Tuzilgan ma’lumot uchun ikki komponent: Table va Chart. Uzun ro‘yxatlar uchun esa ListView qulayroq.

🧮 Table

Uch tugundan iborat: Table → TableRow → TableCell.

• TableRow: header — sarlavha qatori.
• TableCell: width, colSize (xs … xl), colSpan, rowSpan, padding, align, vAlign.

<Table>
  <TableRow header>
    <TableCell><Text value="Mahsulot" /></TableCell>
    <TableCell align="end"><Text value="Narx" /></TableCell>
  </TableRow>
  {items.map(item => (
    <TableRow>
      <TableCell><Text value={item.title} /></TableCell>
      <TableCell align="end"><Text value={item.price} /></TableCell>
    </TableRow>
  ))}
</Table>

Chat oynasi tor — ikki yoki uch ustundan ko‘pi noqulay bo‘ladi.

📈 Chart

Ustunli, chiziqli va to‘ldirilgan grafiklar.

• data — qatorlar massivi yoki unga bog‘lash.
• series — [{ dataKey, label, type, color, stack, curveType }]. type: bar | line | area.
• xAxis — ustun nomi yoki { dataKey, hide }.
• yAxis — { domain: [min, max] }, showYAxis.
• showLegend, showTooltip, barGap, height.
• curveType: linear | natural | monotone | step | stepBefore | stepAfter.
• stack — bir xil qiymat berilgan seriyalar ustma-ust yig‘iladi.

<Chart
  data={usage}
  xAxis="day"
  height={180}
  showTooltip
  series={[{ dataKey: "messages", label: "Xabarlar", type: "bar", color: "primary" }]}
/>

💡 Maslahat

• Grafik balandligini height bilan aniq bering — chat oynasida u avtomatik hisoblanmaydi.
• Nuqtalar soni 5–10 tadan oshmasa, tor oynada o‘qish qulay bo‘ladi.