قالب‌های بخش گزارش (ReportSections)

معرفی

ReportComposer خود primitive container است؛ این مجموعه شش section template آماده است که 90٪ بخش‌های یک بولتن افکارسنجی را پوشش می‌دهند. هر template یک composition نازک از primitive های موجود (sentiment-distribution، flow-distribution، PostList، PartoLineChart، SocialPlatformBadge) داخل ReportSection shell است.

زمین بازی

import {
  ReportComposer,
  ExecutiveSummarySection,
  SentimentBreakdownSection,
  FlowDistributionSection,
  TopPostsSection,
  TimelineSection,
  SourceBreakdownSection,
} from '@parto-system-design/ui'
;<ReportComposer title="بولتن هفتگی">
  <ExecutiveSummarySection
    summary="نظرات مثبت روند صعودی داشت..."
    metrics={[
      { label: 'تعداد پست', value: 4820, delta: 12.4 },
      { label: 'سهم مثبت', value: 78, unit: '٪' },
    ]}
  />
  <SentimentBreakdownSection sentiment={sentiment} emotions={emotions} />
  <FlowDistributionSection flow={flow} />
  <TimelineSection data={dailyVolume} dataKeys={['volume']} summary={{ seriesKey: 'volume', from: 1240, to: 4820 }} />
  <TopPostsSection posts={topPosts} topN={5} />
  <SourceBreakdownSection
    sources={[
      { platform: 'instagram', count: 600 },
      { platform: 'twitter', count: 300 },
      { platform: 'tv', count: 80 },
    ]}
  />
</ReportComposer>

شش Template

ویژگی مشترک

هر شش template از ReportSectionShellProps ارث می‌برند، یعنی همه prop های slot ای ReportSection را پشتیبانی می‌کنند: enabled / onEnabledChange / collapsed / onCollapsedChange / draggable / onDragHandlePointerDown / onSettingsClick / headerActions. این اجازه می‌دهد در composer ادیتور هم استفاده شوند:

<ExecutiveSummarySection
  summary="..."
  enabled={summaryOn}
  onEnabledChange={setSummaryOn}
  collapsed={summaryCollapsed}
  onCollapsedChange={setSummaryCollapsed}
  draggable
  onDragHandlePointerDown={handleDragStart}
/>

عنوان پیش‌فرض هر template به‌صورت locale-aware: مثلاً ExecutiveSummarySection بدون title پاس‌دادن «خلاصه اجرایی» (fa) / «الملخص التنفيذي» (ar) / «Executive Summary» (en) رندر می‌کند. title prop آن را override می‌کند.

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

تمام شش template از ReportSectionShellProps ارث می‌برند، یعنی این props مشترک‌اند:

پراپ‌های مشترک (همه‌ی templates)

ExecutiveSummarySection

SentimentBreakdownSection

FlowDistributionSection

TopPostsSection

TimelineSection

SourceBreakdownSection

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

• هر بخش با ReportSection shell wrap می‌شود که heading <h2> معنادار، landmark structure و کنترل‌های keyboard-accessible (Switch enable، Button collapse، drag handle) را تأمین می‌کند.
• چارت‌های داخلی (SentimentDistribution، FlowDistribution، EmotionDistribution، PartoLineChart) خود ARIA labels و توضیحات text-summary مناسب رندر می‌کنند — <title> و <desc> در SVG.
• TrendIndicator در summary tile با aria-label مناسب (مثل «دلتا ۱۲٪») جهت screen reader آماده می‌شود.
• در حالت چاپ، header actions (print:hidden) مخفی می‌شوند و sectionها break-inside-avoid می‌گیرند تا روی صفحه نصف نشوند.
• ترتیب tab روی sections از بالا به پایین RTL-aware است؛ drag handle قبل از Switch enable در tab order قرار می‌گیرد.

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

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

• container و shell → ReportComposer + ReportSection + BulletinViewer
• اگر template خودتان می‌خواهید → ReportSection خام بسازید
• پست‌های full به‌جای compact list → PostCard
• توزیع به‌صورت standalone (نه داخل bulletin) → SentimentDistribution + FlowDistribution