ابر کلمات (Word Cloud)

معرفی

کامپوننت PartoWordCloud یک روش بصری برای نمایش فراوانی کلمات است که در آن اندازه هر کلمه نشان‌دهنده اهمیت یا تکرار آن است. این کامپوننت بر پایه d3-cloud ساخته شده و برای نمایش هشتگ‌ها، کلمات کلیدی و موضوعات داغ در داشبوردهای تحلیل اجتماعی مناسب است.

چه زمانی استفاده کنیم:

• برای نمایش بصری فراوانی کلمات کلیدی یا هشتگ‌ها
• برای شناسایی سریع موضوعات داغ و پرتکرار
• وقتی بیش از ۱۰ کلمه برای نمایش دارید و مقایسه دقیق مقادیر اهمیت ندارد

چه زمانی استفاده نکنیم:

• برای مقایسه دقیق مقادیر — از BarChart استفاده کنید
• برای کمتر از ۱۰ کلمه — از Badge یا BarChart استفاده کنید
• وقتی ترتیب الفبایی یا کمی مهم است — از لیست یا BarChart استفاده کنید

استفاده

import { PartoWordCloud } from '@parto-system-design/ui'

const words = [
  { text: '#بلاگر', value: 17 },
  { text: '#صدای_تبریز', value: 16 },
  { text: '#کفش', value: 16 },
  { text: '#برف', value: 13 },
  { text: '#تراکتور', value: 12 },
  { text: '#للبيع', value: 11 },
  { text: '#ورزش', value: 11 },
  { text: '#ثروت', value: 10 },
  { text: '#آموزش', value: 7 },
  { text: '#کفش_زنانه', value: 6 },
]

;<PartoWordCloud words={words} width={900} height={400} padding={4} spiral="rectangular" rotate={0} />

مثال با هشتگ‌ها

const hashtags = [
  { text: '#MerryChristmas', value: 2 },
  { text: '#iran', value: 2 },
  { text: '#fadaei', value: 2 },
  { text: '#تکست_ناب', value: 3 },
  { text: '#حرف_حق', value: 4 },
  { text: '#دلار', value: 4 },
  { text: '#رزمی', value: 5 },
  { text: '#سجاف', value: 5 },
]

;<PartoWordCloud words={hashtags} width={900} height={400} padding={4} spiral="rectangular" rotate={0} />

حالت‌ها و انواع

الگوی چیدمان (spiral)

حالت بارگذاری (isLoading)

با isLoading={true} یک Skeleton متحرک به‌جای ابر کلمات نمایش داده می‌شود.

راهنمای استفاده

جدول ویژگی‌ها

نوع داده WordData

interface WordData {
  text: string // متن کلمه
  value: number // مقدار فراوانی یا وزن
}

نکات

• مقدار value هر کلمه باید عددی مثبت باشد
• برای چیدمان پایدار، از تابع random ثابت استفاده کنید
• الگوی archimedean برای توزیع طبیعی‌تر مناسب است
• الگوی rectangular برای چیدمان فشرده‌تر مناسب است
• برای متن‌های فارسی، rotate={0} توصیه می‌شود

موارد استفاده

• نمایش کلمات کلیدی محبوب
• تحلیل هشتگ‌های پرتکرار
• نمایش موضوعات داغ
• تحلیل محتوای متنی
• داشبوردهای تحلیلی

دسترسی‌پذیری

• کامپوننت از عنصر SVG با role="img" استفاده می‌کند
• در حالت بارگذاری از role="status" استفاده می‌شود
• رنگ‌های کلمات کنتراست کافی با پس‌زمینه دارند
• برای دسترسی‌پذیری بهتر، داده‌های جدولی را نیز به‌عنوان جایگزین در نظر بگیرید

کامپوننت‌های مرتبط

• BarChart — اگر نیاز به مقایسه دقیق فراوانی کلمات دارید، BarChart دقت بصری بیشتری ارائه می‌دهد
• PieChart — اگر می‌خواهید سهم نسبی چند کلمه کلیدی اصلی را نمایش دهید
• داده‌نمایی — راهنمای کامل نمودارها و اصول رنگ‌بندی