Highchart

کامپوننت x-high-chart یک کامپوننت قدرتمند Blade برای استفاده از کتابخانه Highcharts در قالب لاراول است که امکان نمایش انواع نمودارهای تعاملی و قابل تنظیم را فراهم می‌کند.

---

ویژگی‌ها

• پشتیبانی از انواع نمودارها: ستون، میله‌ای، دایره‌ای، خطی و ...
• امکان تعریف داده‌های مختلف برای تب‌ها
• کاملاً واکنش‌گرا (Responsive)
• پشتیبانی از نمایش راست به چپ (RTL)
• قابل شخصی‌سازی با تمام گزینه‌های Highcharts

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
id	string	auto-generated	شناسه اختصاصی برای ظرف نمودار (در صورت عدم ارسال، به‌صورت خودکار تولید می‌شود)
type	string	null	نوع نمودار (pie، column، line، bar, area, spline, areaspline) — اختیاری
series	array	[]	آرایه‌ای از داده‌ها برای رسم نمودار
options	array	[]	تنظیمات پیشرفته Highcharts مانند عنوان، محور‌ها، Tooltip، PlotOptions و ...
categories	array	[]	تنظیمات Highcharts + داده‌های سری برای هر دسته‌بندی
categoryType	string	tabs	نوع نمایش دسته‌بندی ('tabs' یا 'select')
categorySelector	string	null	سلکتور CSS برای المان انتخاب دسته‌بندی (ضروری در صورت انتخاب categoryType='select')
class	string	null	کلاس‌های CSS اضافی برای ظرف نمودار
containerClass	string	null	کلاس‌های CSS اضافی برای wrapper ظرف نمودار

---

نکته

برای افزودن محتوای سفارشی (مانند HTML یا کامپوننت‌های دیگر) به هر تب، کافی است طبق نمونه زیر عمل کنید. این محتوا بین نمودار و بخش انتخاب دسته‌بندی نمایش داده می‌شود.

@php
    $content1 = renderComponent(\Dornica\BladeComponents\UI\Badge\Badge::class, [
        'value' => 'تعداد در یک هفته اخیر: 2500',
        'variant' => 'success',
        'appearance' => 'solid',
    ]);
    $content2 = renderComponent(\Dornica\BladeComponents\UI\Badge\Badge::class, [
        'value' => 'تعداد در یک ماه اخیر: 3780',
        'variant' => 'info',
        'appearance' => 'solid',
    ]);
@endphp

:categories="[
                [
                    'title' => 'یک هفته اخیر',
                    'options' => [
                        'content' => $content1,
                    ],
                    'series' => [
                        [
                            'data' => [
                                ['name' => 'مسکن روستایی', 'y' => 4100000, 'color' => '#34A853'],
                                ['name' => 'مدرسه روستایی', 'y' => 450000, 'color' => '#0178C8'],
                                ['name' => 'راه روستایی', 'y' => 320000, 'color' => '#006CFF'],
                                ['name' => 'مراکز بهداشتی', 'y' => 190000, 'color' => '#FF7139'],
                                ['name' => 'مساجد روستایی', 'y' => 95000, 'color' => '#FF1B2D'],
                                ['name' => 'زیرساخت آب', 'y' => 65000, 'color' => '#FB542B'],
                            ],
                        ],
                    ],
                ],
                [
                    'title' => 'یک ماه اخیر',
                    'options' => [
                        'content' => $content2,
                        'legend' => [
                            'layout' => 'horizontal',
                            'align' => 'center',
                            'verticalAlign' => 'top',
                        ],
                    ],
                    'series' => [
                        [
                            'data' => [
                                ['name' => 'مسکن روستایی', 'y' => 2100000, 'color' => '#34A853'],
                                ['name' => 'مدرسه روستایی', 'y' => 250000, 'color' => '#0178C8'],
                                ['name' => 'راه روستایی', 'y' => 320000, 'color' => '#006CFF'],
                                ['name' => 'مراکز بهداشتی', 'y' => 190000, 'color' => '#FF7139'],
                                ['name' => 'مساجد روستایی', 'y' => 95000, 'color' => '#FF1B2D'],
                                ['name' => 'زیرساخت آب', 'y' => 65000, 'color' => '#FB542B'],
                            ],
                        ],
                    ],
                ],
                ...

---

مثال‌ها

نمونه ۱: نمودار ستونی ساده

<x-high-chart
    type="column"
    :options="[
        'title' => ['text' => 'نمودار فروش'],
        'xAxis' => ['categories' => ['تهران', 'اصفهان', 'شیراز']],
        'yAxis' => ['title' => ['text' => 'مقدار']],
    ]"
    :series="[
        ['name' => 'سال ۱۴۰۲', 'data' => [120, 100, 90]]
    ]"
/>

نمونه 2: نمودار پای با تب

@php
    $content1 = renderComponent(\Dornica\BladeComponents\UI\Badge\Badge::class, [
        'value' => 'تعداد در یک هفته اخیر: 2500',
        'variant' => 'success',
        'appearance' => 'solid',
    ]);
    $content2 = renderComponent(\Dornica\BladeComponents\UI\Badge\Badge::class, [
        'value' => 'تعداد در یک ماه اخیر: 3780',
        'variant' => 'info',
        'appearance' => 'solid',
    ]);
    $content3 = renderComponent(\Dornica\BladeComponents\UI\Badge\Badge::class, [
        'value' => 'تعداد در یک سال اخیر: 9800',
        'variant' => 'danger',
        'appearance' => 'solid',
    ]);
    $content4 = renderComponent(\Dornica\BladeComponents\UI\Badge\Badge::class, [
        'value' => 'تعداد کل: 15000',
        'variant' => 'success',
        'appearance' => 'solid',
    ]);
@endphp

<x-high-chart
    id="pie-chart-with-legend"
    type="pie"
    :options="[
        'chart' => [
            'height' => 300,
        ],
        'plotOptions' => [
            'pie' => [
                'borderRadius' => 6,
                'dataLabels' => [
                    'distance' => -25,
                    'filter' => [
                        'operator' => '>',
                        'property' => 'percentage',
                        'value' => 5,
                    ],
                    'style' => [
                        'fontSize' => '11px',
                    ],
                ],
            ],
        ],
        'legend' => [
            'rtl' => true,
            'layout' => 'vertical',
            'align' => 'left',
            'itemMarginBottom' => 10,
            'verticalAlign' => 'middle',
            'navigation' => [
                'enabled' => false,
            ],
            'symbolHeight' => 12,
            'symbolWidth' => 12,
            'labelFormat' => '<span>{name}: {y:,.0f}</span> <small>(پروژه)</small>',
            'itemStyle' => [
                'fontSize' => '14px',
                'fontWeight' => '500',
            ],
        ],
        'responsive' => [
            'rules' => [
                [
                    'condition' => [
                        'maxWidth' => 576,
                    ],
                    'chartOptions' => [
                        'legend' => [
                            'layout' => 'horizontal',
                            'align' => 'center',
                            'verticalAlign' => 'bottom',
                        ],
                    ],
                ],
            ],
        ],
    ]"
    :series="[
        [
            'name' => 'ساخت و ساز',
            'innerSize' => '60%',
        ],
    ]"
    :categories="[
        [
            'title' => 'یک هفته اخیر',
            'options' => [
                'content' => $content1,
            ],
            'series' => [
                [
                    'data' => [
                        ['name' => 'مسکن روستایی', 'y' => 4100000, 'color' => '#34A853'],
                        ['name' => 'مدرسه روستایی', 'y' => 450000, 'color' => '#0178C8'],
                        ['name' => 'راه روستایی', 'y' => 320000, 'color' => '#006CFF'],
                        ['name' => 'مراکز بهداشتی', 'y' => 190000, 'color' => '#FF7139'],
                        ['name' => 'مساجد روستایی', 'y' => 95000, 'color' => '#FF1B2D'],
                        ['name' => 'زیرساخت آب', 'y' => 65000, 'color' => '#FB542B'],
                    ],
                ],
            ],
        ],
        [
            'title' => 'یک ماه اخیر',
            'options' => [
                'content' => $content2,
                'legend' => [
                    'layout' => 'horizontal',
                    'align' => 'center',
                    'verticalAlign' => 'top',
                ],
            ],
            'series' => [
                [
                    'data' => [
                        ['name' => 'مسکن روستایی', 'y' => 2100000, 'color' => '#34A853'],
                        ['name' => 'مدرسه روستایی', 'y' => 250000, 'color' => '#0178C8'],
                        ['name' => 'راه روستایی', 'y' => 320000, 'color' => '#006CFF'],
                        ['name' => 'مراکز بهداشتی', 'y' => 190000, 'color' => '#FF7139'],
                        ['name' => 'مساجد روستایی', 'y' => 95000, 'color' => '#FF1B2D'],
                        ['name' => 'زیرساخت آب', 'y' => 65000, 'color' => '#FB542B'],
                    ],
                ],
            ],
        ],
        [
            'title' => 'یک سال اخیر',
            'options' => [
                'content' => $content3
            ],
            'series' => [
                [
                    'data' => [
                        ['name' => 'مسکن روستایی', 'y' => 5100000, 'color' => '#34A853'],
                        ['name' => 'مدرسه روستایی', 'y' => 250000, 'color' => '#0178C8'],
                        ['name' => 'راه روستایی', 'y' => 320000, 'color' => '#006CFF'],
                        ['name' => 'مراکز بهداشتی', 'y' => 190000, 'color' => '#FF7139'],
                        ['name' => 'مساجد روستایی', 'y' => 95000, 'color' => '#FF1B2D'],
                        ['name' => 'زیرساخت آب', 'y' => 105000, 'color' => '#FB542B'],
                    ],
                ],
            ],
        ],
        [
            'options' => [
                'content' => $content4
            ],
            'title' => 'کل',
            'series' => [
                [
                    'data' => [
                        ['name' => 'مساجد روستایی', 'y' => 105000, 'color' => '#FF1B2D'],
                        ['name' => 'مدرسه روستایی', 'y' => 250000, 'color' => '#0178C8'],
                        ['name' => 'راه روستایی', 'y' => 320000, 'color' => '#006CFF'],
                        ['name' => 'مراکز بهداشتی', 'y' => 190000, 'color' => '#FF7139'],
                        ['name' => 'زیرساخت آب', 'y' => 65000, 'color' => '#FB542B'],
                        ['name' => 'مسکن روستایی', 'y' => 100000, 'color' => '#34A853'],
                    ],
                ],
            ],
        ],
    ]"
/>