ابر کلمات (PartoWordCloud)

معرفی

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

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

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

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

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

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { PartoWordCloud } from '@partodata/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} توصیه می‌شود

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

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

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

• بدون onWordClick نمودار یک تصویر است و از role="img" استفاده می‌کند
• با onWordClick هر کلمه یک کنترل واقعی است: ریشه به role="group" تغییر می‌کند (چون role="img" تمام زیرمجموعه را از درخت دسترسی‌پذیری حذف می‌کند) و هر کلمه با role="button"، tabIndex={0}، برچسب «کلمه: تعداد» و پشتیبانی از کلیدهای Enter و Space رندر می‌شود؛ حلقه فوکوس نیز روی خود کلمه نمایش داده می‌شود
• در حالت بارگذاری از role="status" استفاده می‌شود
• اگر ariaLabel داده نشود، نام دسترسی‌پذیری پیش‌فرض «ابر کلمات» (متناسب با locale) به‌کار می‌رود؛ نقش img یا group بدون نام، در صفحه‌خوان بی‌نام اعلام می‌شود
• داده این نمودار خودِ متن است، پس رنگ کلمات باید حد 4.5:1 متن را رد کند — نه حد 3:1 که پالت --chart-* برای سطوح پُرشده تنظیم شده است. کامپوننت هر رنگ پالت را در زمان اجرا با پس‌زمینه صفحه می‌سنجد و در صورت نیاز آن را تیره‌تر (در تم روشن) یا روشن‌تر (در تم تیره) می‌کند تا به 4.5:1 برسد؛ رنگ‌هایی که از پیش این حد را دارند بدون تغییر می‌مانند
• برای دسترسی‌پذیری بهتر، داده‌های جدولی را نیز به‌عنوان جایگزین در نظر بگیرید

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

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