/
/
/
/
REPORT-05
REPORT
طراحی و مدیریت قالب‌های نموداری
استودیوی خروجی قالب‌های نموداری (ChartStudio)
در بسیاری از مواقع، بررسی صدها ردیف عدد و متن در قالب جدول نمی‌تواند تصویر سریع و روشنی از وضعیت کارها به مدیران بدهد. یک نگاه کوتاه به یک نمودار میله‌ای یا خطی، می‌تواند در عرض چند ثانیه روند فروش، وضعیت پیشرفت پروژه‌ها یا انحراف از بودجه را آشکار کند. استودیوی خروجی نمودار (ChartStudio) در پلتفرم GraphBPMS این امکان را فراهم می‌کند که بر روی داده‌های هر گزارش، انواع قالب‌های نموداری جذاب و کاربردی (مانند میله‌ای، خطی، دایره‌ای، عقربه‌ای و دریل‌داون) بسازید. این نمودارها مستقیماً به داده‌های زنده گزارش متصل هستند و کاربر می‌تواند با فیلتر کردن، حرکت ماوس و کلیک روی اجزای نمودار، جزئیات دقیق‌تری از اطلاعات را مشاهده کند یا خروجی آن‌ها را در میزکار خود قرار دهد. در این راهنما، با محیط طراحی نمودار، انواع مدل‌های قابل استفاده و نحوه ساخت گام‌به‌گام آن‌ها آشنا می‌شوید.
۱. قالب نموداری چیست و چه کمکی به تصمیم‌گیری در سازمان می‌کند؟
در سازمان‌ها روزانه حجم زیادی از اطلاعات در فرم‌ها و فرآیندها ثبت می‌شود. گزارش‌های معمولی این داده‌ها را به صورت سطر و ستون‌های متنی نمایش می‌دهند که برای بررسی دقیق ردیف‌به‌ردیف بسیار مفیدند؛ اما وقتی مدیران می‌خواهند یک تصمیم سریع بگیرند یا روند کارها را بسنجند، خواندن جداول طولانی وقت‌گیر و دشوار خواهد بود.
قالب نموداری (Chart Studio) این امکان را فراهم می‌کند که به جای اعداد خام، یک تصویر شفاف، گویا و تعاملی از اطلاعات داشته باشید. برای مثال، به جای اینکه ده‌ها سطر هزینه را بررسی کنید، با یک نمودار میله‌ای مقایسه‌ای در چند ثانیه می‌بینید کدام بخش بیشترین بودجه را مصرف کرده است، یا با یک نمودار عقربه‌ای در یک نگاه متوجه می‌شوید چند درصد از اهداف سازمان محقق شده است.
مهم‌ترین مزیت استودیوی نمودار در GraphBPMS این است که نمودارها کاملاً زنده هستند؛ یعنی با ثبت رکوردهای جدید در سیستم، نمودار به صورت خودکار به‌روزرسانی می‌شود. همچنین کاربر می‌تواند روی هر ستون یا بخش از نمودار کلیک کند تا جزئیات ریزتر آن باز شود (قابلیت دریل‌داون).
۱
گزارش مبنا (داده‌ها)
اطلاعات ثبت‌شده در فرم‌ها و فرآیندها
منابع داده SQL و موجودیت‌های عملیاتی سیستم
۲
استودیوی طراحی نمودار
انتخاب نوع نمودار
میله‌ای، خطی، دایره‌ای، قطبی، گیج عقربه‌ای
⬇
تنظیم محورها، فیلترها و رنگ‌ها
نگاشت فیلدها، تجمیع‌ها و چیدمان پالت
۳
خروجی نهایی برای کاربر
نمایش تعاملی و گویا
به‌روزرسانی خودکار با ثبت داده‌های جدید
⬇
کلیک و مشاهده جزئیات (Drill-Down)
تعبیه در میزکار و پیشخوان‌های سازمانی
مراحل کار از انتخاب گزارش مبنا تا نمایش نمودار تعاملی در اختیار کاربران
تفاوت ساده گزارش جدولی با قالب نموداری
گزارش جدولی پاسخ می‌دهد «دقیقاً چه مواردی ثبت شده است؟»، در حالی که نمودار پاسخ می‌دهد «روند کلی کارها به چه سمتی می‌رود و وضعیت سازمان چگونه است؟». این دو ابزار در کنار یکدیگر، تصمیم‌گیری را برای مدیران سریع‌تر و دقیق‌تر می‌کنند.
۲. ورود به پیشخوان گزارش‌ها، موقعیت آیکون نمودار و آناتومی استودیوی طراحی (ChartStudio)
جهت آغاز فرآیند ساخت و مدیریت قالب‌های نموداری، مدیر سیستم یا طراح گزارش ابتدا وارد منوی گزارش‌ساز پیشرفته می‌شود. در سطر هر گزارش ثبت‌شده، مجموعه‌ای از اکشن‌های اختصاصی تعبیه شده است که آیکون نمودار (با شکل گراف میله‌ای) جهت مدیریت قالب‌های بصری استفاده می‌شود.
اصل بنیادین: لزوم شناخت دقیق گزارش مبنا پیش از ساخت نمودار
در موتور گزارش‌ساز GraphBPMS، هیچ نموداری به صورت مجزا و بدون داده تعریف نمی‌شود؛ بلکه هر نمودار در حقیقت یک «قالب خروجی بصری» (Chart Output View) است که مستقیماً بر روی یک «گزارش مبنا» سوار می‌شود.
بنابراین طراح گزارش قبل از هر اقدامی برای ساخت چارت، باید ابتدا گزارش مبنای خود را بشناسد؛ ساختار ستون‌های خروجی (فیلدهای متنی جهت ابعاد محور افقی و دسته‌بندی‌ها، و فیلدهای عددی جهت شاخص‌ها و محور عمودی) و همچنین پارامترهای ورودی آن را در پیش‌نمایش جدول گزارش به دقت بررسی نماید. تنها با اشراف کامل به فیلدها و ساختار گزارش مبنا است که طراح می‌تواند محورهای افقی، عمودی، توابع تجمیعی و فیلترهای نمودار را هوشمندانه پیکربندی کند.
آیکون خروجی نمودار در لیست
در ستون اکشن‌های جدول گزارش‌ها، دکمه نمودار به عنوان درگاه ورود به استودیوی گرافیکی تعریف شده است. در صورت وجود قالب فعال، تعداد قالب‌ها به صورت یک نشانگر عددی (Badge) روی آیکون نمایان می‌گردد.
مودال لیست قالب‌های نمودار
با کلیک بر روی آیکون نمودار، پنجره پاپ‌آپ لیست قالب‌ها باز می‌شود. در صورتی که قالبی ثبت نشده باشد، دکمه شاخص «ایجاد خروجی نمودار» طراح را به استودیو هدایت می‌کند.
آناتومی ۴ ناحیه‌ای ChartStudio
محیط استودیو شامل نوار اکشن‌های سراسری در بالا، تب‌های بوم (تنظیمات پارامترها و پیش‌نمایش)، سایدبار سمت راست (تنظیمات عمومی و ۵ سوئیچ کلیدی)، و پنل تنظیمات لایه‌های نمودار در چپ بوم است.
آشنایی با سایدبار اطلاعات و سوئیچ‌های ۵گانه کنترل خروجی
سایدبار سمت راست استودیو اطلاعات هویتی قالب و ۵ سوئیچ کنترلی استراتژیک را در اختیار طراح می‌گذارد که نحوه تعامل کاربر نهایی را با صفحه نمایش نمودار تعیین می‌کنند:
کاربرد حیاتی و درخشش اصلی این ۵ سوئیچ در «ویجت‌های نمودار میز کار» (Workspace Widgets)
شاید در نگاه اول حین طراحی اولیه در استودیو، کاربرد این ۵ سوئیچ ساده یا معمولی به نظر برسد؛ اما کاربرد اصلی و درخشش فوق‌العاده حیاتی این آپشن‌ها زمانی نمایان می‌شود که این نمودار را به عنوان یک «ویجت در میز کار» (Dashboard Widget) قرار می‌دهیم.
در صفحه پیش‌نمایش مستقیم، نمودار کل پهنای مانیتور را در اختیار دارد؛ اما در میز کار (Dashboard)، نمودارها در قالب ویجت‌ها و کارت‌های فشرده و کوچک در کنار کارپوشه وظایف، جدول‌ها و سایر شاخص‌ها چیده می‌شوند. در چنین محیط متراکمی، این ۵ سوئیچ ابزارهای حیاتی تعامل مدیران با داده‌ها بدون نیاز به ترک میز کار هستند:
- نمایش بصورت پنجره‌ای (Window Mode): چون کارت ویجت در میز کار ابعاد کوچکی دارد، این گزینه یک آیکون دوطرفه بزرگ‌نمایی در هدر ویجت فعال می‌کند. با یک کلیک، نمودار بلافاصله در قالب پنجره مودال تمام‌صفحه باز می‌شود تا مدیر تمامی جزئیات، لژاندها و برچسب‌های شلوغ را با وضوح کامل ببیند و سپس بدون خروج از میز کار، آن را ببندد.
- نمایش تنظیم پارامترها (Parameter Modal): آیکون قیف فیلتر را روی هدر کارت ویجت فعال می‌کند تا کاربر بتواند بدون نیاز به رفتن به منوی گزارش‌ها، مستقیماً از داخل میز کار پنجره پارامترها را باز کرده و شرط‌ها (مانند بازه زمانی یا دسته‌بندی پروژه‌ها) را تغییر دهد تا نمودار همان ویجت نوسازی شود.
- نمایش پارامترهای تنظیم‌شده (Active Chips): در میز کار بسیار مهم است که مدیر در یک نگاه متوجه شود این نمودار بر مبنای چه فیلترهایی دارد داده نشان می‌دهد. این سوئیچ برچسب‌ها و چیپ‌های متنی فیلتر فعال (مانند «دسته‌بندی: عمرانی») را در بالای نمودار ویجت نشان می‌دهد تا از هرگونه اشتباه تحلیلی جلوگیری گردد.
- نمایش گزینه بروزرسانی (Refresh Action): پرکاربردترین دکمه در میز کار! در یک داشبورد سازمانی با چندین ویجت، بارگذاری مجدد کل صفحه مرورگر (F5) زمان‌بر است و تمام سامانه را دوباره لود می‌کند. این دکمه به کاربر اجازه می‌دهد تنها داده‌های همین یک ویجت نمودار را در کسری از ثانیه و بدون رفرش کل صفحه به‌روز کند.
- نمایش گزینه حذف فیلترها (Clear Filters): اگر کاربر در طول کار روزمره فیلترهای موقتی روی ویجت اعمال کرده باشد، با کلیک روی آیکون سطل زباله در هدر ویجت، تمامی فیلترها بلافاصله حذف شده و ویجت نمودار به تنظیمات پیش‌فرض سازمانی بازمی‌گردد.
| عنوان سوئیچ / فیلد | نام فنی در سیستم | مقدار پیش‌فرض | کارکرد اصلی و نقش عملیاتی به‌ویژه در «ویجت میز کار» |
|---|---|---|---|
| نام نمودار | ChartName |
متن آزاد | نام فنی و شناسایی قالب در لیست قالب‌های خروجی سامانه. |
| توضیحات | Description |
اختیاری | توضیحات تکمیلی جهت راهنمایی سایر طراحان و مدیران سیستم. |
| عنوان نمودار | HeaderTitle |
متن آزاد | عنوان رسمی که در بالای بوم نمودار و در هدر کارت ویجت میز کار به کاربر نمایش داده می‌شود. |
| نمایش بصورت پنجره‌ای | WindowModeToggle |
روشن (ON) | کلیدی برای ویجت‌های فشرده میز کار: تعبیه آیکون بزرگ‌نمایی در هدر ویجت جهت باز کردن نمودار در پنجره مودال بزرگ برای تحلیل دقیق جزئیات و بازگشت سریع به میز کار. |
| نمایش تنظیم پارامترها | ParameterModalToggle |
روشن (ON) | تغییر شرط‌ها در محل ویجت: فعال‌سازی آیکون قیف در بالای ویجت میز کار جهت باز کردن پنجره پارامترها و فیلتر کردن مجدد نمودار بدون نیاز به خروج از داشبورد. |
| نمایش پارامترهای تنظیم‌شده | ActiveChipsToggle |
روشن (ON) | شفافیت فوری داده‌ها در میز کار: نمایش چیپ‌ها و برچسب‌های متنی فیلترهای فعال در بالای نمودار ویجت تا مدیر در یک نگاه بفهمد نمودار بر چه اساسی محاسبه شده است. |
| نمایش گزینه بروزرسانی | RefreshActionToggle |
روشن (ON) | نوسازی زنده بدون لود کل صفحه: افزودن دکمه رفرش به هدر ویجت تا کاربر بدون نیاز به زدن کلید F5 و لود سنگین کل میز کار، منحصراً داده‌های این ویجت را در لحظه به‌روز کند. |
| نمایش گزینه حذف فیلترها | ClearFiltersToggle |
روشن (ON) | ریست سریع به حالت پایه: تعبیه آیکون سطل زباله در هدر ویجت میز کار برای پاکسازی کلیه فیلترهای اعمال‌شده و بازگرداندن نمودار به وضعیت پیش‌فرض با یک کلیک. |
۳. آشنایی با ۵ گونه اصلی نمودار و انتخاب بهترین مدل متناسب با اطلاعات گزارش
استودیوی نمودار GraphBPMS از ۵ گونه نمایشی اصلی پشتیبانی می‌کند که هر یک برای نوع خاصی از اطلاعات طراحی شده‌اند:
| گونه اصلی نمایش (همراه با شمارنده) | نام انگلیسی و خانواده پایه | مفهوم و ماهیت تحلیلی | بهترین کاربرد فرآیندی در GraphBPMS |
|---|---|---|---|
|
۱. نمودار مختصاتی
۲۳ مدل پیاده‌سازی‌شده
|
Cartesian (Bar, Line, Spline, Area, Combo) |
ترسیم داده‌ها در صفحه دکارتی دوبعدی شامل محور افقی دسته‌ها و محورهای عمودی مقداری با قابلیت چندپنی و دریل‌داون. | مقایسه بودجه پروژه‌ها، روند مبالغ صورت‌وضعیت‌ها در طول زمان، نمودارهای ترکیبی هزینه-پیشرفت فیزیکی. |
|
فهرست کامل ۲۳ زیرمجموعه و گونه‌های تخصصی نمودار مختصاتی در موتور استودیو (DevExtreme Engine):
خوشه ۱: خانواده نمودارهای میله‌ای و ستونی (Bar & Column Family - ۴ گونه)
نمودار میله‌ای
Bar Chart
مقایسه مستقیم مقادیر مقطعی بر حسب یک بعد دسته‌بندی؛ نظیر بودجه مصوب پروژه‌ها بر حسب استان یا پیمانکار.
میله‌ای انباشته
Stacked Bar
مقایسه همزمان حجم کل و سهم مؤلفه‌های سازنده در هر ستون؛ تفکیک هزینه‌های تجهیزات، دستمزد و مصالح هر پروژه.
میله‌ای انباشته ۱۰۰٪
Full-Stacked Bar 100%
نرمال‌سازی سهم درصدی اجزا مستقل از بزرگی مقادیر عددی کل؛ مقایسه سهم نسبی اقلام هزینه در سبد پروژه‌ها.
میله‌ای بازه‌ای
Range Bar
ستون‌های شناور با دو نقطه شروع و پایان مستقل؛ مشابه گانت‌چارت‌های ساده برای نمایش بازه زمانی فازها یا تلورانس بودجه.
خوشه ۲: خانواده نمودارهای خطی و پیوسته (Line & Spline Family - ۷ گونه)
نمودار خطی
Line Chart
ردگیری روند تغییرات پیوسته یک متغیر در طول محور زمان یا توالی تاریخی اسناد مالی.
نمودار خطی نرم
Spline Chart
ترسیم روندهای طبیعی با منحنی‌های ملایم بدون شکستگی‌های تند (B-Spline) جهت هموارسازی نوسانات فصلی.
نمودار خطی پله‌ای
Step Line Chart
نمایش جهش‌های ناگهانی و تغییرات گسسته در نقاط عطف زمانی؛ نظیر تصویب تعرفه‌ها یا مراحل پرداخت فازها.
خطی انباشته
Stacked Line Chart
خطوط موازی انباشته‌شده برای ردگیری سهم تجمعی چندین فرآیند همزمان در سازمان.
خطی انباشته ۱۰۰٪
Full-Stacked Line 100%
ردگیری تغییرات سهم درصدی روندها در مقیاس ۱۰۰ درصدی در طول ماه‌های سال مالی.
خطی نرم انباشته
Stacked Spline Chart
تلفیق انباشتگی چندمنظوره روندها با خطوط منحنی هموار و پیوسته بدون لبه‌های شکسته.
خطی نرم انباشته ۱۰۰٪
Full-Stacked Spline 100%
توزیع درصدی نرمالایز شده با خطوط منحنی هموار در طول دوره‌های پایش مدیریتی.
خوشه ۳: خانواده نمودارهای ناحیه‌ای و گرادیانی (Area Family - ۸ گونه)
نمودار ناحیه‌ای
Area Chart
تأکید بر بزرگی و حجم کل کمیت در طول زمان با پرشدگی سطح زیر نمودار جهت درک مقیاس مالی.
ناحیه‌ای نرم
Spline Area Chart
پرشدگی سطحی زیر منحنی‌های ملایم جهت نمایش بصری مدرن و چشم‌نواز در داشبوردهای گزارشات راهبردی.
ناحیه‌ای پله‌ای
Step Area Chart
حجم تجمعی پله‌ای با مرزهای مشخص گسسته؛ تحلیل تغییرات ظرفیت مخازن اعتبارات یا انبارها.
ناحیه‌ای انباشته
Stacked Area Chart
روند همزمان کل حجم و لایه‌های متشکله زیرین در طول زمان؛ روند تجمیعی هزینه‌های کلان سازمان.
ناحیه‌ای انباشته ۱۰۰٪
Full-Stacked Area 100%
سهم نسبی رسته‌های گوناگون از کل ۱۰۰ درصدی در گذر زمان به صورت باندهای رنگی مساحت‌محور.
ناحیه بازه‌ای
Range Area Chart
نوار نواری شناور میان حداقل و حداکثر؛ نمایش دالان نوسان مجاز، کریدور هزینه یا تلورانس کیفیت.
ناحیه‌ای نرم انباشته
Stacked Spline Area
ترکیب سطوح پرشده با منحنی‌های ملایم لایه‌ای برای زیبایی بصری حداکثری و تحلیل تجمیعی.
ناحیه‌ای نرم انباشته ۱۰۰٪
Full-Stacked Spline Area 100%
سطوح نرم لایه‌ای با سقف ثابت ۱۰۰ درصدی جهت نمایش تحول سهم بخش‌ها در طول زمان.
خوشه ۴: آماری و توزیع داده‌ها (۲ گونه)
نمودار پراکندگی
Scatter / Point Chart
توزیع نقاط دو متغیر عددی نامرتبط جهت کشف همبستگی آماری؛ نظیر رابطه درصد پیشرفت فیزیکی با تعداد روزهای تأخیر پیمانکار.
نمودار حبابی
Bubble Chart
رندر همزمان ۳ بعد تحلیلی: موقعیت افقی (شاخص ۱)، موقعیت عمودی (شاخص ۲) و اندازه قطر حباب (شاخص ۳ مانند مبلغ بودجه یا سطح ریسک).
خوشه ۵: مالی، بورس و نوسانات بازار (۲ گونه)
نمودار کندل استیک
Candlestick Chart
مدل شمعی با ۴ شاخص کلیدی (آغازین، پایانی، بیشترین، کمترین - Open/High/Low/Close) جهت تحلیل نوسانات مالی و جریان وجوه نقد.
نمودار سهام
Stock Chart
رصد نوسانات شاخص‌های بورسی، مالی و ارزی سازمان در بازه‌های معاملاتی و تسویه‌حساب‌های ارزی پیمانکاران خارجی. |
|||
|
۲. نمودار دایره‌ای
۲ مدل پیاده‌سازی‌شده
|
Pie / Doughnut Chart |
نمایش سهم درصدی و کسری دسته‌بندی‌ها از یک کل ۱۰۰ درصدی با قابلیت برش مجزا (Exploded slice). | سهم رسته‌های مختلف هزینه از کل بودجه، تفکیک وضعیت تایید مالی درخواست‌ها (تاییدشده، در جریان، ردشده). |
|
مدل‌های پیاده‌سازی‌شده خانواده نمودارهای دایره‌ای در استودیو:
Pie (نمودار دایره‌ای قطاعی)
Pie Chart
نمایش سهم قطاع‌های یک کل ۱۰۰ درصدی از یک مرکز مشترک با قابلیت انفصال قطاع (Exploded Slice) و تولتیپ درصدی؛ عالی برای تفکیک بودجه مصوب میان حوزه‌های کاری (عمرانی، IT، تأسیسات).
Donut (نمودار دونات / پیراپیچی)
Donut / Ring Chart
نمودار دایره‌ای حلقه‌ای با هسته توخالی؛ فضای خالی میانی امکان قرار دادن شاخص کلان (مانند مبلغ کل بودجه یا درصد تحقق کل) را فراهم می‌سازد تا همزمان کل و جزء دیده شوند. |
|||
|
۳. نمودار قطبی
۴ مدل پیاده‌سازی‌شده
|
Polar / Radar Chart |
نمایش همزمان چندین متغیر بر روی محورهای شعاعی هم‌مرکز منشعب از مبدا مشترک. | ارزیابی متوازن عملکرد پیمانکاران در ابعاد مختلف (کیفیت، زمان‌بندی، هزینه، ایمنی HSE) و تحلیل مقایسه‌ای دوره‌ای. |
|
مدل‌های پیاده‌سازی‌شده خانواده نمودارهای قطبی و شعاعی در استودیو:
نمودار ناحیه‌ای قطبی
Polar Area Chart
پرشدگی سطوح زاویه‌ای بر حسب جهت و شعاع؛ ایده‌آل برای نمایش پدیده‌های زاویه‌ای، توزیع جغرافیایی توان و الگوهای چندجهتی.
نمودار میله‌ای قطبی
Polar Bar Chart
میله‌های ستونی چرخشی ۳۶۰ درجه‌ای پیرامون مبدا مشترک؛ فوق‌العاده برای مقایسه رکوردهای چرخه‌ای (نظیر الگوی مصرف یا عملکرد ماه‌های دوازده‌گانه).
نمودار خطی قطبی / رادار
Polar Line / Radar Chart
شبکه تار عنکبوتی چندمتغیره؛ قدرتمندترین ابزار برای ارزیابی متوازن عملکرد پیمانکاران در ابعاد همزمان کیفی، زمانی، مالی و ایمنی.
نمودار پراکندگی قطبی
Polar Scatter Chart
نقاط توزیع‌شده با مختصات قطبی (زاویه و شعاع)؛ مناسب برای تجزیه و تحلیل توزیع‌های آزمایشگاهی، جهت‌گیری سنسورها و فرکانس وقایع. |
|||
|
۴. نمودار عقربه‌ای
۳ مدل پیاده‌سازی‌شده
|
Gauge / Angular / KPI Chart |
شاخص سنجش تک‌مقداری شبیه کیلومترشمار با دامنه‌های رنگی بحرانی، هشدار و ایمن (سبز، زرد، قرمز). | داشبوردهای مدیریتی، درصد تحقق اهداف سازمانی، سقف مصرف اعتبارات مالی، درصد کارایی تجهیزات. |
|
مدل‌های پیاده‌سازی‌شده خانواده نمودارهای عقربه‌ای (Gauges) در استودیو:
Bar Gauge (عقربه‌ای نواری / کمانی)
Bar Gauge
نوارهای کمانی هم‌مرکز موازی با پرشدگی رنگی؛ امکان مقایسه همزمان وضعیت پیشرفت چندین پروژه یا معاونت سازمانی در یک قاب فشرده.
Circular Gauge (عقربه‌ای دایره‌ای)
Circular Gauge
صفحه دایره‌ای ۲۷۰ یا ۳۶۰ درجه شبیه کیلومترشمار اتومبیل با عقربه متحرک و دامنه‌های رنگی سبز، زرد و قرمز برای هشدار سریع انحراف شاخص از هدف.
Linear Gauge (عقربه‌ای خطی / دماسنجی)
Linear Gauge
نوار خطی افقی یا عمودی شبیه دماسنج؛ ایده‌آل برای پایش مصرف سقف اعتبارات مالی، درصد تکمیل ظرفیت انبارها یا پیشرفت فیزیکی مگاپروژه‌ها. |
|||
|
۵. جدول داده‌ای
۱ مدل پیشرفته
|
Grid Display |
تلفیق داده‌های ساختاریافته ماتریسی در کنار خروجی‌های تصویری جهت تحلیل جزئیات عددی. | ریز ردیف‌های اسناد مالی، جداول خلاصه مدیریتی همراه با چارت‌های همجوار در یک بوم ترکیبی. |
|
مدل پیاده‌سازی‌شده گونه جدول در استودیو:
گرید ماتریسی سلسله‌مراتبی (Hierarchical Grid)
DataGrid Engine
تلفیق مستقیم داده‌های جدولی در کنار نمودارها؛ مجهز به دکمه مستقیم دانلود خروجی Excel، کادر جستجوی بلادرنگ، فیلتر ستونی، گروه‌بندی کشیدنی (Drag & Drop Grouping) و باز شدن زیرجدول‌های فرزند (Master-Detail Nested Grid) به ازای هر رکورد والد. |
|||
چگونه بر اساس اطلاعات گزارش، مناسب‌ترین نوع نمودار را انتخاب کنیم؟
پیش از ساخت هر نمودار، اولین قدم نگاه کردن به خروجی جدول گزارش است. نوع ستون‌ها و اطلاعاتی که در گزارش دارید مشخص می‌کند چه نموداری زیباترین و گویاترین نتیجه را به شما می‌دهد. در ادامه با ۳ نمونه واقعی از گزارش‌ها و نمودارهای مناسب هر کدام آشنا می‌شویم:
الگوی تحلیلی ۱: گزارشی با خروجی رکوردهای مکانی و شاخص‌های مقداری (پست‌های برق)
ساختار خروجی داده‌ها: فرض کنید گزارشی در سازمان داریم که خروجی جدولی آن رکوردهای مکانی (شهر و استان) را همراه با شاخص‌های مقداری (نظیر سطح ولتاژ به کیلوولت و ظرفیت اسمی به مگاوات) استخراج می‌کند؛ همان‌گونه که در پیش‌نمایش جدول زیر مشاهده می‌شود:
حال برای چنین ساختار خروجی، بسته به هدف تصمیم‌گیری، دو نحوه نمایش بسیار کاربردی در استودیوی طراحی در دسترس است:
الف) نحوه نمایش میله‌ای مقایسه‌ای همراه با خط بنچ‌مارک محاسباتی (Benchmark Line):
اگر هدف مقایسه مقادیر ولتاژ شهرها با یک حد آستانه استاندارد سازمانی (تراز ۳۰۰ کیلوولت برای تمایز سریع پست‌های فوق‌توزیع و انتقال) باشد، نمودار میله‌ای با خط محاسباتی ثابت شفاف‌ترین دید مقایسه‌ای را ایجاد می‌کند:
سیستم اطفای حریق: بله) در بالای بوم.
ب) نحوه نمایش قطبی و شعاعی ۳۶۰ درجه (Polar / Radial Bar Chart):
اگر طراح بخواهد توزیع و وزن نسبی استان‌ها را در یک ساختار دایره‌ای مدرن ۳۶۰ درجه همراه با بالن راهنمای شناور (Tooltip) به تصویر بکشد، از گونه قطبی استفاده می‌کند:
ج) نشانگر عددی قالب‌های فعال روی آیکون گزارش در پیشخوان (Badge Indicator):
پس از ثبت و ذخیره‌سازی موفق یک یا چند قالب در استودیو، در فهرست گزارش‌های سیستم، یک نشانگر عددی فعال (Badge آبی‌رنگ با عدد ۱) بر روی آیکون نمودار آن گزارش قرار می‌گیرد تا کاربران با یک نگاه متوجه وجود خروجی تصویری آماده شوند:
الگوی تحلیلی ۲: گزارشی با خروجی چندشاخصه تجمیعی (کوئری پایگاه داده با توابع Sum, Max, Min)
ساختار خروجی داده‌ها: حال فرض کنید گزارشی داریم که در پایگاه داده از طریق یک کوئری تجمیعی، چندین شاخص هم‌جنس (مانند مجموع ظرفیت اسمی و بیشترین ظرفیت اسمی مگاوات) را به ازای هر منطقه تولید می‌کند؛ همانند کوئری SQL زیر:
نحوه نمایش متناظر: برای چنین گزارش‌هایی با خروجی چندشاخصه، بهترین مدل نمایش نمودار رادار / تار عنکبوتی (Radar / Spider Chart) است تا چند متغیر هم‌جنس را به طور همزمان بر روی یک شبکه شعاعی مقایسه کند:
الگوی تحلیلی ۳: گزارشی با خروجی داده‌های وضعیتی و نسبتی (سنجش شاخص کلیدی عملکرد - KPI)
ساختار خروجی داده‌ها: اگر خروجی گزارش شما یک شاخص وضعیتی عددی برای سنجش سلامت تجهیزات یا پیشرفت کار باشد (مانند تعداد تجهیزات فاقد برق اضطراری در برابر کل تجهیزات)، هدف تصمیم‌گیرنده یک سنجش سریع عقربه‌ای است:
آمادگی برای کارگاه عملی: ساخت نمودار برای گزارش پروژه‌ها و اقلام
اکنون که با انواع مدل‌های نموداری و کاربرد هر یک آشنا شدیم، در بخش بعدی وارد کارگاه عملی ساخت نمودار می‌شویم. در این بخش، مرحله‌به‌مرحله برای گزارش سازمانی «لیست پروژه‌ها و اقلام» یک نمودار کامل با قابلیت تعاملی کلیک روی جزئیات (دریل‌داون) پیاده‌سازی می‌کنیم.
۴. کارگاه عملی: ساخت گام‌به‌گام نمودار برای گزارش «پروژه‌ها و اقلام» (با قابلیت دریل‌داون)
جهت ارائه یک الگوی کاربردی و شفاف، در این کارگاه از یک گزارش دو سطحی (پروژه‌ها به عنوان سطح والد و اقلام هزینه به عنوان سطح فرزند) استفاده می‌کنیم تا تمامی مراحل ساخت نمودار و مشاهده جزئیات با کلیک را گام‌به‌گام مرور کنیم:
سطح کلان / Master منبع داده والد: لیست پروژه‌های سازمانی (Master Provider)
موجودیت والد: حاوی اطلاعات عمومی پروژه‌های فعال عمرانی، IT و تأسیساتی شرکت شامل نام پروژه، بودجه مصوب ریالی، درصد پیشرفت فیزیکی و فیلتر ورودی دسته‌بندی موضوعی (@CategoryId).
رکوردهای نمونه: احداث پست برق ۴۰۰ کیلوولت غرب (۵۰ میلیارد ریال)، توسعه زیرساخت مرکز داده و اتاق سرور (۲۵ میلیارد ریال)، بهسازی تأسیسات سرمایشی ساختمان مرکزی (۱۵ میلیارد ریال).
سطح خرد / Detail منبع داده فرزند: صورت‌وضعیت‌ها و اقلام هزینه (Detail Provider)
موجودیت وابسته: حاوی ریز فاکتورها، اقلام مالی و صورت‌وضعیت‌های تسلیم‌شده پیمانکاران که از طریق کلید خارجی ProjectId به منبع والد متصل گردیده است (پارامتر ورودی @ProjectId).
رکوردهای نمونه پروژه دیتاسنتر: خرید رک‌های سرور و کابل‌های فیبر نوری (۸۰۰ میلیون ریال)، خدمات مشاوره طراحی معماری امنیت شبکه (۲۰۰ میلیون ریال).
جریان داده و معماری موتور نمودارساز در سناریوهای چندمنبعی (Master-Detail)
همان‌طور که در بخش ۱ این آموزش دیدیم، در حالت ساده و تک‌منبعی، فرآیند ساخت نمودار یک فرآیند ساده و تک‌مرحله‌ای است: یک گزارش معمولی با یک منبع داده وارد استودیو می‌شود، ستون‌های دسته‌ها و مقادیر روی محورها قرار می‌گیرند و یک نمودار ایستا تولید می‌شود.
اما در دنیای واقعی سازمان‌ها و سناریوهای کاربردی نظیر همین کارگاه (پروژه‌ها و صورت‌وضعیت‌ها)، با یک معماری چندمنبعی Master-Detail سر و کار داریم. در چنین حالتی، موتور نمودارساز GraphBPMS پردازش‌های پیشرفته‌تری را مدیریت می‌کند تا امکان حرکت روان میان لایه کلان (والد) و لایه خرد (فرزند) برای کاربر فراهم شود:
۱
لایه منابع داده (Data Layer)
منبع داده والد (Master)
لیست پروژه‌ها و بودجه مصوب
⬇
منبع داده فرزند (Detail)
اقلام هزینه و صورت‌وضعیت‌ها
۲
موتور پردازش چارت (Chart Engine)
فیلترها و شرط‌گذاری پارامتریک
WHERE Builder، پارامترهای پویا و امنیتی
توابع تجمیع و گروه‌بندی (Aggregation)
SUM, COUNT, AVG بر روی محورها
معماری چند‌پنل (Multi-Pane)
جداسازی مقیاس میلیارد والد از میلیون فرزند
هسته پیمایش دریل‌داون (Drill-Down Router)
دریافت Id پروژه و فراخوانی بلادرنگ فرزند
۳
رابط بصری کاربر (Visual Output)
نمودار کلان والد
میله‌ای با قابلیت کلیک روی هر ستون
🔄 رویداد کلیک Drill-Down
نمودار ریز اقلام فرزند
تصویرسازی مبالغ صورت‌وضعیت پروژه منتخب
جعبه‌ابزار تعاملی
تمام‌صفحه، خروجی اکسل/تصویر، دکمه بازگشت
دیاگرام جریان داده و معماری موتور نمودارساز GraphBPMS در سناریوهای Master-Detail
تفاوت بنیادین سناریوی چندمنبعی کارگاه با مدل ساده تک‌منبعی:
برای درک عمیق رفتار نمودار در این کارگاه، تفاوت سه لایه اصلی معماری بالا را نسبت به حالت ساده مقایسه می‌کنیم:
- ۱. لایه منابع داده (Data Layer): در مدل ساده، فقط یک کوئری مستقل وجود دارد؛ اما در سناریوی کارگاه، دو منبع داده مجزا داریم: منبع والد (
Master) که کل سبد پروژه‌ها را می‌آورد، و منبع فرزند (Detail) که صورت‌وضعیت‌ها را همراه با شرط پارامتریک کلید خارجیWHERE ProjectId = @ProjectIdنگهداری می‌کند. - ۲. موتور پردازش چارت (Chart Engine): برخلاف حالت ساده که صرفاً محورهای X و Y را نگاشت می‌کند، در این سناریو یک مولفه راهبردی به نام «هسته پیمایش دریل‌داون» (Drill-Down Router) فعال می‌شود. این هسته رویداد کلیک ماوس کاربر روی هر میله از نمودار والد را شنود کرده، کلید یکتای آن پروژه را برداشته و به عنوان پارامتر ورودی به منبع فرزند تزریق می‌نماید.
- ۳. رابط بصری کاربر (Visual Output): خروجی دیگر یک نمودار تک‌منظوره نیست؛ بلکه یک محیط بصری تعاملی و دو لایه است که در لایه نخست نمودار میله‌ای بودجه کلان پروژه‌ها را نشان می‌دهد، با کلیک کاربر بلافاصله به نمودار ریز اقلام مالی همان پروژه تغییر چهره می‌دهد، و با یک دکمه بازگشت («← بازگشت») مجدداً کاربر را به نمای کلان اولیه بازمی‌گرداند.
بررسی تب تنظیمات پارامترها و پیش‌نمایش جدول داده‌های مبنا
در نخستین گام ورود به استودیو، تب «تنظیمات پارامترها» فیلترهای ورودی منبع داده Master را به تصویر می‌کشد. پارامتر @CategoryId به شکل یک لیست کشویی با گزینه‌های «عمرانی»، «IT» و «تأسیسات» پیکربندی شده است:
ایجاد اولین آیتم نمودار در پنل سمت چپ
با کلیک بر روی زبانه عمودی «تنظیمات نمودار» در سمت چپ بوم، پنل تعریف لایه‌ها باز می‌شود. طراح با فشردن دکمه آبی «+ افزودن»، ساخت اولین لایه چارت را آغاز می‌نماید:
۵. بررسی دقیق آکاردئون‌های ۱۰گانه نمودار مختصاتی (Cartesian Architecture)
نمودار مختصاتی قلب تپنده مصورسازی داده‌ها در سامانه GraphBPMS است. پیکربندی این نمودار در ۱۰ آکاردئون ساختاریافته تفکیک شده است که هر یک مسئولیت مهندسی معینی را بر عهده دارند:
آکاردئون ۱: اتصال داده (Data Binding)، گزینش منبع و تعریف محورهای X و Y
در آکاردئون «اتصال داده»، ابتدا منبع داده مورد نظر از میان Data Providerهای گزارش انتخاب می‌شود. برای نمودار اول، گزینه «لیست پروژه‌ها (master)» را برمی‌گزینیم:
نگاشت محور افقی (Argument / Category Axis - X):
محور افقی متغیر مستقل و دسته‌بندی پایه مقایسه را معین می‌کند. در منوی «انتخاب محور افقی»، ستون «عنوان پروژه» را انتخاب می‌کنیم تا هر ستون از نمودار به یکی از پروژه‌های شرکت منتسب شود:
تعریف لایه مقداری و سری‌های محور عمودی (Value Series / Y-Axis):
جهت نمایش شاخص‌های مقداری (نظیر مبالغ بودجه، هزینه‌ها، اوزان یا درصدها)، طراح باید بر روی دکمه آبی «+ افزودن محور عمودی» کلیک کند:
موردکاوی عیب‌یابی سازمانی: کشف و اصلاح جابجایی ستون‌ها (Metadata Troubleshooting)
سناریوی واقعی عیب‌یابی: مغایرت نام ستون نمایشی (Alias Swap)
در جریان بررسی پیش‌نمایش تصویر ۳۸، مشاهده گردید که مقادیر محور عمودی در بازه ۰ تا ۹۰ نمایش داده می‌شوند که با ماهیت بودجه‌های میلیاردی سازمانی همخوانی ندارد. پس از بررسی دقیق کوئری و متادیتای ستون‌ها مشخص شد:
- ستون
ProgressPercent: (حاوی درصدهای پیشرفت ۶۵٪، ۴۰٪ و ۸۵٪) به اشتباه با عنوان نمایشی «بودجه مصوب» نام‌گذاری شده بود. - ستون واقعی
BudgetAmount: (حاوی مبالغ ۵۰، ۲۵ و ۱۵ میلیارد ریال) بدون عنوان باقی مانده بود.
مراحل ۴ گانه رفع مشکل:
- خروج موقت از محیط استودیوی نمودار (ChartStudio)
- ورود به محیط استودیوی گزارش‌ساز (ReportStudio)
- ویرایش عنوان کارت ستون‌ها و اصلاح نگاشت فیلدها
- ذخیره گزارش و ورود مجدد به استودیوی نمودار جهت مشاهده مقادیر صحیح بودجه
شبکه گریدی چیدمان (Grid Layout) و موتور شرط‌گذاری بصری (Visual WHERE Builder)
نمودارساز GraphBPMS امکان تنظیم ابعاد واکنش‌گرا (Responsive) را بر مبنای سیستم ۱۲ ستونی Bootstrap فراهم می‌کند:
تعداد ستون (Grid Columns)
مقدار ۱۲ به معنای اشغال تمام‌عرض صفحه است. با تنظیم مقادیر ۶ یا ۴ می‌توان دو یا سه نمودار را در یک ردیف در کنار یکدیگر مستقر کرد.
ارتفاع و واحد اندازه‌گیری
تنظیم ارتفاع به صورت درصدی (مثلاً ۵۰٪ یا ۱۰۰٪) یا بر حسب پیکسل (px)، انعطاف کامل نمودار را در انواع مانیتورها تضمین می‌نماید.
موتور شرط‌گذاری بصری داده‌های نمودار (WHERE Builder):
در بالای تنظیمات منبع داده، نوار تیره «تنظیم شرط» تعبیه شده است. این ابزار به طراح امکان می‌دهد بدون دستکاری کوئری اصلی گزارش، شروط فیلترینگ اختصاصی بر روی داده‌های نمودار اعمال نماید:
موتور شرط‌گذاری GraphBPMS از ۱۳ عملگر مقایسه‌ای پیشرفته پشتیبانی می‌کند:
ProjectTitle شامل شود ساختمان مرکزی.
مرتب‌سازی ۴گانه (Sorting) و توابع تجمعی ۶گانه (Aggregation Functions)
نحوه چینش میله‌ها نقش حیاتی در سرعت ادراک بصری تصمیم‌گیرندگان دارد. موتور چارت GraphBPMS از ۴ سناریوی مرتب‌سازی پشتیبانی می‌کند:
مرتب‌سازی الفبایی محور افقی
صعودی: چینش بر اساس حروف الفبای نام پروژه از راست به چپ (احداث ← بهسازی ← توسعه).
نزولی: چینش معکوس الفبا (توسعه ← بهسازی ← احداث).
مرتب‌سازی مقداری محور عمودی
نزولی: مرتب‌سازی بر اساس بودجه از بیشترین به کمترین (۵۰B ← ۲۵B ← ۱۵B).
صعودی: مرتب‌سازی از کمترین به بیشترین بودجه (۱۵B ← ۲۵B ← ۵۰B).
توابع تجمعی ۶گانه و سفارشی‌سازی رنگ سری:
در هر سری عمودی، طراح می‌تواند رنگ رسم و تابع تجمعی محاسباتی را مشخص کند:
default, count, sum, avg, min, max.
معماری گروه‌بندی چندبعدی (Multi-Dimensional Grouping)
فیلد «گروه‌بندی» (Grouping) یکی از پیشرفته‌ترین امکانات سری‌های عمودی است. هنگامی که یک فیلد دسته‌بندی ثانویه (مانند رسته کاری، استان، سال مالی یا فاز پروژه) در منوی گروه‌بندی انتخاب شود:
- موتور چارت میله‌های هر پروژه را به تفکیک دسته‌های ثانویه می‌شکند (Grouped Bar Chart).
- توابع تجمعی (مانند Sum یا Count) مقادیر مربوط به هر گروه را در تقاطع بعد افقی و بعد گروه محاسبه می‌کنند.
- راهنمای نمودار (Legend) به طور خودکار رنگ‌های مجزا به هر زیرگروه اختصاص می‌دهد.
تنظیمات برچسب مقادیر (Data Labels) و تولتیپهای تعاملی (Interactive Tooltips)
جهت مشاهده مستقیم ارقام مالی بدون نیاز به نگاه کردن مکرر به خط‌کش محور عمودی، سوئیچ «نمایش مقدار بر روی سری» به کار می‌رود:
مدیریت تداخل ارقام با خطوط رابط همپوشانی (Leader Lines):
در نمودارهایی که ستون‌ها به یکدیگر نزدیک هستند، نمایش اعداد بزرگ ممکن است سبب تداخل بصری گردد. با فعال‌سازی سوئیچ «همپوشانی»، موتور چارت ارقام را با خطوط رابط ظریف (Leader Lines) به سقف میله‌ها متصل می‌کند:
پیکربندی تولتیپ تعاملی و شخصی‌سازی موقعیت و عناوین:
تولتیپ (Tooltip) کادر اطلاعاتی شناوری است که هنگام هاور ماوس پدیدار می‌شود. طراح می‌تواند موقعیت نمایش را بین «لبه ستون» (Column Edge) و «وسط ستون» (Column Center) تغییر داده و عناوین پیش‌فرض سیستم را با اصطلاحات سازمانی بومی‌سازی کند:
نمودار ترکیبی چندمنبعی (Multi-Dataset Combo Spline Chart)
یکی از قابلیت‌های انحصاری GraphBPMS، توانایی تعریف چندین منبع داده و ترکیب انواع مختلف رسم (مانند میله‌ای و خطی منحنی نرم Spline) بر روی یک بوم مشترک است. این ساختار از طریق دکمه آبی «+ افزودن منبع داده» پیاده‌سازی می‌گردد:
آکاردئون ۲: تنظیمات عمومی، سلسله‌مراتب تیتر و چرخش ۹۰ درجه (Rotated Chart)
آکاردئون «تنظیمات عمومی» هویت بصری کلی بوم را مدیریت می‌کند:
- سلسله‌مراتب دو سطحی عنوان و زیرعنوان: تنظیم عنوان اصلی با وزن قلم سنگین و رنگ تیره، و زیرعنوان راهنما با وزن و سایز سبک‌تر جهت توضیح محتوای تحلیلی چارت.
- رنگ پس‌زمینه بیرون نمودار: کنترل کنتراست کلی صفحه و تفکیک بوم از بدنه داشبورد.
- چرخش ۹۰ درجه (Rotated Chart / Horizontal Bars): تبدیل ستون‌های عمودی به میله‌های افقی؛ این حالت برای نام‌های فارسی طولانی پروژه‌ها بسیار ایده‌آل است زیرا فضای کافی برای خواندن اسامی کامل فراهم می‌آورد.
جعبه‌ابزار خروجی ۵گانه نمودار (Export Suite):
با روشن بودن سوئیچ خروجی در تنظیمات عمومی، آیکون منوی همبرگری (☰) در گوشه بالای نمودار فعال می‌شود که امکان صدور گزارش در ۵ فرمت استاندارد سازمانی را به کاربر نهایی می‌دهد:
آکاردئون ۴: تنظیمات محور عمودی و انطباق کامل با استاندارد راست‌به‌چپ (RTL Alignment)
در نگارش زبان فارسی و سامانه‌های بومی، خط‌کش محور عمودی باید در سمت راست نمودار قرار گیرد تا جریان ادراک چشمی ناظر از راست به چپ منطبق با جهت خواندن متون باشد:
نکته طلایی و Best Practice سازمانی: روانشناسی رنگ‌ها، ارگونومی بصری و تایپوگرافی در داشبوردهای مدیریتی
مقایسه تحلیلی حالت اولیه در برابر طراحی استاندارد سازمانی:
در تصویر ۸۰، اگرچه تمامی گزینه‌های فنی تست شده‌اند، اما استفاده از رنگ‌های تند فیروزه‌ای نئونی، پس‌زمینه رنگی با اشباع بالا و فونت‌های بسیار درشت (18px) برای درجات خط‌کش، سبب «خستگی شناختی و بصری» (Cognitive Fatigue) در نگاه طولانی‌مدت ناظران می‌شود.
در تصویر ۸۰، اگرچه تمامی گزینه‌های فنی تست شده‌اند، اما استفاده از رنگ‌های تند فیروزه‌ای نئونی، پس‌زمینه رنگی با اشباع بالا و فونت‌های بسیار درشت (18px) برای درجات خط‌کش، سبب «خستگی شناختی و بصری» (Cognitive Fatigue) در نگاه طولانی‌مدت ناظران می‌شود.
استاندارد کلاس سازمانی در طراحی نمودار:
-
پالت کبالت و کهربایی: Royal Blue
#2563EB& Warm Amber#EA580C— القاکننده حس اعتماد، ثبات مالی و هشدارهای کنترل‌شده. -
پس‌زمینه مرواریدی ملایم:
#F8FAFC— کاهش حداکثری تضاد زننده نور سفید بدون تیرگی مفرط. -
تایپوگرافی مهندسی و متناسب: کاهش سایز درجات خط‌کش محورها به 11-12px و برجسته‌سازی متوازن عناوین اصلی.
-
هدایت نگاه راست‌به‌چپ (RTL Flow): ترکیب خط‌کش در سمت راست با شبکه خطوط تراز ملایم، سرعت تحلیل اعداد را برای مدیران تا ۳ برابر افزایش می‌دهد.
آکاردئون ۳: معماری پین‌های چندگانه (Multi-Pane) و حل ناسازگاری مقیاس‌ها
یکی از بزرگ‌ترین چالش‌های طراحان داشبورد، نمایش همزمان شاخص‌های با دامنه‌های به شدت ناهمگون است؛ به عنوان مثال فرض کنید می‌خواهیم برای پروژه‌ها هم بودجه مصوب (در مقیاس ۵۰ میلیارد ریال) و هم درصد پیشرفت فیزیکی (در مقیاس ۰ تا ۱۰۰ درصد) را نمایش دهیم:
- اگر هر دو سری را روی یک محور Y واحد قرار دهیم، ستون‌های درصد پیشرفت به دلیل کوچکی رقم ۱۰۰ در برابر ۵۰ میلیارد، به خط صاف چسبیده به کف نمودار تبدیل می‌شوند!
- راهکار معماری GraphBPMS: تقسیم بوم به چند Pane (طبقه موازی) مستقل با محور افقی مشترک و همگام.
- پین بالا به نمودار بودجه مصوب (مقیاس میلیاردی) و پین پایین به نمودار درصد پیشرفت (مقیاس ۰-۱۰۰٪) اختصاص می‌یابد. هر دو نمودار زیر هم تراز شده و هر پروژه دقیقاً زیر ستون متناظر خود سنجیده می‌شود.
آکاردئون ۵: تنظیمات محور افقی، خطوط عمودی و مدیریت شکست متن فارسی
محور افقی علاوه بر عنوان، کنترل آرایش متن دسته‌بندی‌ها را بر عهده دارد:
آکاردئون ۶: راهنمای نمودار (Legend) و جانمایی استاندارد RTL
راهنمای نمودار (Legend) وظیفه تفکیک بصری شاخص‌های چندگانه را بر عهده دارد:
آکاردئون ۷: خط محاسباتی داینامیک (Dynamically Calculated Line)
در تحلیل‌های مالی و بودجه‌ای، مقایسه مقادیر با شاخص‌های آماری مرجع (میانگین، بیشینه، کمینه) نقشی کلیدی دارد. خط محاسباتی داینامیک به جای یک رقم ثابت، مقدار خود را بر اساس رکوردهای جاری به صورت برخط محاسبه می‌کند:
آکاردئون ۸: ردیاب تعاملی مختصات محورها (Crosshair / Axis Coordinate Tracking)
هنگامی که تعداد آیتم‌های محور افقی زیاد است، سنجش چشمی مقادیر در امتداد محور عمودی دشوار می‌شود. با فعال‌سازی ردیاب مختصات محورها، به محض هاور ماوس بر روی هر ستون:
- پس‌زمینه عنوان آن شاخص در محور افقی با رنگ برجسته (سبز تیره) هایلایت می‌شود.
- یک خط تراز افقی نقطه‌چین از راس میله به سمت محور عمودی امتداد یافته و نشانگر مقدار دقیق (مانند 25B یا 50B) را در خط‌کش محور روشن می‌سازد.
آکاردئون ۱۰: تنظیمات بزرگ‌نمایی و جابه‌جایی تعاملی (Zoom & Pan Suite)
موتور چارت سامانه یک پکیج جامع از ابزارهای ناوبری تعاملی را در اختیار کاربر می‌گذارد:
سوئیچ‌های ۵گانه تعامل
۱. بزرگ‌نمایی با جابه‌جایی ماوس (Mouse Drag Box)
۲. بزرگ‌نمایی با غلتک ماوس (Mouse Wheel Zoom)
۳. بزرگ‌نمایی لمسی موبایل (Touch Pinch Zoom)
۴. قفل زوم در راستای محور عمودی (Y-Axis Lock)
۵. قفل زوم در راستای محور افقی (X-Axis Lock)
کلیدهای اصلاح‌گر جابه‌جایی (Pan Keys)
جهت تفکیک کشیدن کادر زوم از جابه‌جایی بوم (Panning)، طراح می‌تواند یکی از کلیدهای کیبورد (Ctrl, Alt, Shift, Meta) را به عنوان کلید فعال‌ساز Pan تعیین کند.
۶. جعبه‌ابزار اکشن‌های تعاملی کاربر نهایی (End-User Action Toolbar)
یکی از نقاط قوت برجسته گزارش‌ساز GraphBPMS، تجهیز بوم خروجی چارت به یک نوار ابزار تعاملی شناور (Floating Action Toolbar) است. این جعبه‌ابزار به کاربر نهایی اجازه می‌دهد بدون نیاز به خروج از بوم یا بارگذاری مجدد صفحه، رفتار نمودار را تغییر داده و عملیات تحلیلی را هدایت نماید:
عملکرد دکمه‌های ۴گانه نوار ابزار تعاملی:
۱. اکشن بزرگ‌نمایی تمام‌صفحه (Fullscreen / Window Mode):
این دکمه با آیکون فلش دوطرفه مورب نمایش داده می‌شود. کلیک بر روی آن، نمودار را در قالب یک پنجره مودال کلان تمام‌عرض (Fullscreen Modal) باز می‌کند تا جزئیات برای ناظران در اتاق‌های پایش بدون المان‌های مزاحم به نمایش درآید:
۲. اکشن تنظیم پارامترها و بنر چیپ‌های فعال (Parameter Filter & Active Chips):
آیکون قیف فیلتر، پنجره تنظیم پارامترها را باز می‌کند. در این پنجره، هر دو منبع داده Master و Detail تفکیک شده و کاربر می‌تواند در لحظه مقادیر فیلتر (مانند تغییر به دسته‌بندی موضوعی IT) را اعمال کند. به محض اعمال، بنر سبز رنگی در بالای نمودار وضعیت فیلترینگ را اعلام می‌نماید:
۳. اکشن بروزرسانی زنده داده‌ها (Live Data Refresh):
با کلیک بر روی آیکون دو فلش دایره‌ای، موتور چارت بدون رفرش کل مرورگر، کوئری لایه‌های داده را مجدداً به پایگاه داده فرستاده و ارتفاع میله‌ها و خطوط را با آخرین وضعیت رکوردهای مالی همگام می‌سازد:
۴. سوئیچ و اکشن پاکسازی سریع فیلترها (Clear Filters Action):
طراح با روشن نگاه داشتن سوئیچ «نمایش گزینه حذف فیلترها» در سایدبار، آیکون سطل زباله را در اختیار کاربر می‌گذارد تا با یک کلیک تمامی شروط و پارامترها را لغو کرده و به وضعیت ۳ پروژه‌ای اولیه بازگردد:
۷. چرخه حیات قالب، ذخیره‌سازی و پدیدار شدن نشانگر عددی ۱ (Badge 1)
پس از تکمیل تنظیمات نمودار Master، طراح با کلیک بر روی دکمه «ذخیره و بازگشت» در هدر استودیو، متادیتای کامل قالب را در مخزن پایگاه داده ذخیره می‌نماید:
- سیستم به صورت خودکار به پیشخوان لیست گزارش‌ها بازمی‌گردد.
- در سطر گزارش «لیست پروژه‌ها و اقلام»، بر روی آیکون خروجی نمودار، یک نشانگر عددی آبی (Badge Counter = 1) پدیدار می‌شود که نشان‌دهنده وجود ۱ قالب فعال برای این گزارش است.
- با کلیک مجدد روی آیکون، پنجره لیست قالب‌ها باز شده و قالب ذخیره‌شده با عنوان «لیست پروژه ها و اقلام» مشاهده می‌گردد.
۸. معماری و اجرای فوق‌پیشرفته دریل‌داون (Master-Detail Drill-Down Charting)
اوج قدرت مهندسی گزارش‌ساز GraphBPMS در قابلیت ناوبری چندسطحی داده‌ها (Drill-Down Navigation) متجلی می‌شود. به جای ایجاد داشبوردهای شلوغ و غیرقابل استفاده، سیستم به طراح امکان می‌دهد یک نمودار وابسته به عنوان فرزند (Child Chart) تعریف کند که به رویداد کلیک روی نمودار والد (Parent Chart) گوش فرا می‌دهد.
پیش‌نیاز بنیادین معماری: ماتریس دانشی فرم‌ها، منابع داده و نگاشت گزارش Master-Detail
یک اصل بنیادین در معماری گزارش‌ساز GraphBPMS وجود دارد که درک آن برای طراحان گزارش و مدل‌های هوش مصنوعی حیاتی است: موتور نمودارساز (ChartStudio) به خودی خود تولیدکننده منابع داده یا ایجادکننده روابط رابطه‌ای پایگاه داده نیست. بلکه قابلیت دریل‌داون (Drill-Down) در نمودار، سوار بر بستر از پیش تعریف‌شده یک گزارش چندمنبعی والد-فرزند (Master-Detail Report) عمل می‌کند.
جدول ماتریسی زیر، ارکان سه‌گانه هر دو لایه (فرم‌های مبنا، کوئری‌های منابع داده و نحوه نگاشت آن‌ها در استودیو) را به صورت یکپارچه و به دور از شناسه‌های موقت سیستمی خلاصه می‌نماید:
| فرم مبنا و ساختار داده (Form & Schema) | پرس‌وجو و منطق منبع داده (Query & Provider) | خروجی‌های گزارش و اتصال کلیدها (Report Outputs & Binding) |
|---|---|---|
|
لایه والد (Master)
موجودیت فرم: اطلاعات پروژه‌ها ( ستون‌های کلیدی:
|
منبع داده والد: پروژه‌ها (Master Provider) پرس‌وجوی SQL: شروط و پارامترها: پارامتر اختیاری |
کارت‌های ستون خروجی در استودیو:
نقش در دریل‌داون: میله‌های نمودار والد را شکل می‌دهد؛ با کلیک روی هر میله، مقدار |
|
لایه فرزند (Detail)
موجودیت فرم: صورت‌وضعیت‌ها و هزینه‌ها ( ستون‌های کلیدی:
|
منبع داده فرزند: صورت‌وضعیت‌ها (Detail Provider) پرس‌وجوی SQL: شروط و پارامترها: پارامتر ورودی الزامی |
کارت‌های ستون خروجی در استودیو:
نگاشت پارامتر (Parameter Binding):
|
مراحل پیاده‌سازی و شواهد بصری در مدیریت منابع داده و استودیوی ساخت گزارش
پس از تعریف فرم‌ها و موجودیت‌های دیتابیس، پیوند این دو لایه در سه گام عملیاتی انجام گرفته است:
گام ۱. طراحی کوئری منبع داده فرزند با فیلتر پارامتریک کلید خارجی:
در کنسول مدیریت منابع داده، برای منبع داده فرزند شرط WHERE ProjectId = @ProjectId درج شده تا سطرها بر اساس پروژه فعال تفکیک شوند:
گام ۲. مونتاژ گزارش Master-Detail و نگاشت پارامتر ورودی در استودیو:
در استودیوی ساخت گزارش، هر دو منبع داده والد و فرزند به گزارش افزوده شده‌اند. در تنظیمات کارت پارامتر @ProjectId منبع فرزند، نوع اتصال روی «ستون خروجی (Output Column)» تنظیم شده و به کلید اصلی Id منبع والد منتسب گردیده است. همچنین عنوان متناظر به ProjectTitle نگاشت و سوئیچ «عدم نمایش» فعال شده است:
گام ۳. راستی‌آزمایی در پیش‌نمایش گرید: تجلی رکوردهای تودرتو (Nested Child Grid):
حاصل این پیوند در جدول پیش‌نمایش گزارش، پدیدار شدن مثلث بازشونده در کنار هر پروژه است که با اکسپند کردن آن، صورت‌وضعیت‌های مالی مربوط به همان پروژه در زیرجدول به صورت بلادرنگ لود می‌شوند:
پل ارتباطی گزارش جدولی با دریل‌داون نموداری (The Drill-Down Bridge)
اکنون که پایه‌های رابطه‌ای گزارش تکمیل گردیده، موتور نمودارساز GraphBPMS می‌تواند با هوشمندی کامل عمل کند: به جای آنکه کاربر برای دیدن جزئیات مجبور باشد روی مثلث یک سطر در جدول کلیک کند، روی ستون گرافیکی همان پروژه در نمودار والد کلیک می‌کند؛ رویداد کلیک بلافاصله مقدار Id آن میله را برداشته و با ارسال به موتور دریل‌داون، نمودار فرزند را با داده‌های منبع فرزند در همان بوم تصویرسازی می‌نماید.
۱
کاربر نهایی
←
نمودار والد (سبد پروژه‌ها)
هاور ماوس روی ستون پروژه (نمایش خطوط راهنما Crosshair و کادر اطلاعات Tooltip) و کلیک روی ستون «پروژه دیتاسنتر».
۲
نمودار والد
←
موتور دریل‌داون GraphBPMS
تریگر رویداد OnClick و ارسال شناسه ProjectId به موتور دریل‌داون پلتفرم.
۳
موتور دریل‌داون
↔
منبع داده فرزند (صورت‌وضعیت‌ها)
اجرای کوئری واکشی برخط اقلام با شرط WHERE ProjectId = @ProjectId و بازگرداندن رکوردهای ۲ صورت‌وضعیت متناظر.
۴
موتور دریل‌داون
←
نمودار فرزند (اقلام هزینه)
رندر بلادرنگ چارت فرزند با مقیاس صد میلیونی، همراه با فعال‌سازی دکمه ناوبری «← بازگشت» و چیپ وضعیت در بالای نمودار.
۵
نمودار فرزند
←
نمودار والد (سبد پروژه‌ها)
کلیک کاربر روی دکمه «← بازگشت» و انتقال انیمیشنی نرم به نمای کلان سبد پروژه‌ها بدون رفرش صفحه.
توالی رویدادهای تعاملی دریل‌داون از کلیک روی میله والد تا رندر فرزند و بازگشت
ایجاد آیتم نمودار وابسته و کشف سوئیچ «فعال سازی Dril Down»
جهت پیاده‌سازی این سناریو، مجدداً وارد استودیو می‌شویم. در زبانه «تنظیمات نمودار» در سمت چپ، نمودار اول ما («نام پروژه و بودجه مصوب آن») ثبت است. با کلیک بر روی دکمه آبی «+ افزودن»، آیتم دوم چارت را ایجاد می‌کنیم:
پدیدار شدن اکشن استراتژیک دریل‌داون و انتساب نمودار والد:
به محض انتخاب گزینه «نمودار مختصاتی» برای آیتم دوم، موتور چارت با تشخیص وجود بیش از یک لایه در گزارش Master-Detail، گزینه‌ای استثنایی به نام «فعال سازی Dril Down» را در بالای آکاردئون‌ها نمایان می‌سازد:
با روشن کردن این سوئیچ به حالت ON، منوی کشویی جدیدی به نام «انتخاب نمودار والد» پدیدار می‌شود. در این منو، نمودار اول یعنی «نام پروژه و بودجه مصوب آن» را به عنوان والد برمی‌گزینیم:
اتصال منبع داده وابسته (Detail) و نگاشت محورهای فرزند
اکنون در آکاردئون اتصال داده نمودار فرزند، منبع داده دوم گزارش یعنی «صورت‌وضعیت‌ها و اقلام هزینه (Detail)» را انتخاب می‌کنیم. سپس برای محور افقی، فیلد تجاری «شرح صورت‌وضعیت» را منتسب می‌نماییم:
تزریق شفاف و خودکار پارامتر کلید خارجی (Transparent ProjectId Injection)
همان‌طور که در تنظیمات گزارش‌ساز پیکربندی شده بود، منبع داده فرزند بر روی پارامتر @ProjectId به فیلد کلید اصلی والد متصل است. در موتور چارت GraphBPMS، هیچ نیازی به کدنویسی دستی یا اسکریپت جاوااسکریپت وجود ندارد؛ سیستم در رویداد کلیک والد، مقدار ProjectId میله انتخاب‌شده را به صورت خودکار به منبع داده فرزند تزریق کرده و کوئری فرزند را واکشی می‌نماید.
پیش‌نیاز عملیاتی ایجاد سری عمودی: همانند نمودار والد، جهت ایجاد لایه مقداری باید بر روی دکمه آبی «+ افزودن محور عمودی» در زیر فیلد مرتب‌سازی محور افقی کلیک نمود:
اجرای زنده دریل‌داون در استودیو: هاور، کلیک و انتقال به اقلام هزینه
با تکمیل پیکربندی هر دو نمودار، وارد تب «پیش‌نمایش» می‌شویم تا جادوی تعاملی دریل‌داون را در عمل مشاهده کنیم:
۱. وضعیت اولیه پیش از کلیک (Pre-Click Master State):
در ابتدای ورود، تنها نمودار والد با سه پروژه فعال به تصویر درمی‌آید و نمودار فرزند هنوز مخفی است:
۲. هاور ماوس بر روی ستون پروژه (Hover Preview):
کاربر ماوس را بر روی ستون پروژه میانی یعنی «پروژه: توسعه زیرساخت مرکز داده و اتاق سرور» هاور می‌کند. خط تراز Crosshair به رقم 25B متصل شده و تولتیپ حاوی بودجه ۲۵ میلیارد ریالی ظاهر می‌گردد:
۳. کلیک و انتقال شگفت‌انگیز دریل‌داون (The Drill-Down Live Transition):
با کلیک کاربر بر روی ستون پروژه، انیمیشن انتقال اجرا شده و نمودار والد جای خود را به نمودار ریز اقلام هزینه مربوط به همین پروژه می‌دهد:
- دکمه ناوبری معکوس «← بازگشت»: در گوشه بالا سمت چپ بوم پدیدار می‌شود تا کاربر با یک کلیک به سبد پروژه‌ها بازگردد.
- چیپ سبز زمینه فیلتر: عبارت
محدود شده با مقادیر: [ProjectId: توسعه زیرساخت مرکز داده و اتاق سرور]را منعکس می‌سازد. - ترسیم دقیق اقلام هزینه: محور افقی شامل دو قلم هزینه اختصاصی این پروژه است:
- «خرید رک‌های سرور و کابل‌های فیبر نوری»: ۸۰۰,۰۰۰,۰۰۰ ریال (میله بلندتر فیروزه‌ای).
- «خدمات مشاوره طراحی معماری امنیت شبکه»: ۲۰۰,۰۰۰,۰۰۰ ریال (میله کوتاه‌تر فیروزه‌ای).
- بازتنظیم خودکار مقیاس محور Y: خط‌کش عمودی متناسب با ارقام فرزند از ۰ تا ۸۰۰,۰۰۰,۰۰۰ ریال تغییر مقیاس داده است.
۹. داشبورد چندنموداری ترکیبی و همگرایی انواع ۵گانه چارت با فیلتر پارامتریک مشترک (Composite Multi-Chart Dashboard & Shared Parameter Reactivity)
یکی از شگفت‌انگیزترین و قدرتمندترین قابلیت‌های موتور گزارش‌ساز GraphBPMS، امکان تعریف یک داشبورد تحلیلی چندنموداری (Composite Dashboard) در دلِ یک قالب خروجی واحد است. در سازمان‌های بزرگ، مدیران ارشد برای تصمیم‌گیری جامع نیاز دارند که زوایای مختلف داده‌ها (سهم درصدی از کل، مقایسه اعتبارات، پایش اهداف کلیدی عملکرد با گیج، ریز داده‌های سلسله‌مراتبی در جدول و تحلیل چندمتغیره در مختصات قطبی) را به صورت همزمان، در یک نگاه و با یک فیلتر پارامتریک مشترک مشاهده کنند.
در این فصل، قالب گزارش «لیست پروژه‌ها و اقلام» را فراتر از نمودار دکارتی و دریل‌داون برده و هر پنج گونه نمایش بصری را بر روی یک شبکه ۱۲ ستونی واکنش‌گرا پیاده‌سازی و در محیط واقعی رندر می‌کنیم.
۱
مدیر / کاربر نهایی
←
پنجره تنظیم پارامترها
انتخاب دسته‌بندی موضوعی = «عمرانی» در نوار ابزار پارامتریک بالا.
۲
پنجره پارامترها
←
موتور هماهنگ‌ساز (Event Bus)
انتشار رویداد OnParameterChanged(@CategoryId='عمرانی') در خط گذرگاه رویداد.
۳
موتور هماهنگ‌ساز
↔
منبع داده مستقل Master (پروژه‌ها)
اجرای کوئری با پارامتر عمرانی و بازگرداندن رکورد پروژه احداث پست برق (۶۵٪ پیشرفت، ۵۰B بودجه).
۴
Event Bus
←
پخش همزمان به ۵ ویجت (Parallel Broadcast)
🍩 دونات: تک‌برش ۶۵٪
📊 دکارتی: تک‌ستون ۵۰B
🧭 گیج: عقربه ۶۵٪ و ۵۰B
📋 جدول: سطر PRJ-101
🌐 قطبی: بردار شعاعی
✨ تمامی ۵ ویجت به صورت بلادرنگ و بدون رفرش صفحه همگام شدند!
توالی رویدادهای هماهنگ‌ساز پارامتریک در داشبورد چندنموداری (Composite Parameter Event Bus)
۹.۱. نمودار دایره‌ای / دونات درصد پیشرفت پروژه‌ها (Donut Chart)
جهت مصورسازی سهم پیشرفت هر پروژه، لایه جدیدی با نوع نمایش دایره‌ای تعریف می‌کنیم. از آنجا که نمودار پیشین بودجه مصوب عرضی معادل ۸ ستون دارد، برای تکمیل سطر اول شبکه ۱۲ ستونی، تعداد ستون‌های این ویجت را بر روی ۴ ستون با ارتفاع ۵۰٪ قرار می‌دهیم:
در تب تنظیمات داده، منبع داده Master (لیست پروژه‌ها) را برگزیده و محور افقی را بر روی «عنوان پروژه» و محور مقداری را بر روی فیلد «درصد پیشرفت پروژه» با فرمت نمایش درصد، نوع نمودار Doughnut (دونات با فضای خالی در مرکز) و تابع تجمعی Max تنظیم می‌کنیم:
با ذخیره تنظیمات و ورود به پیش‌نمایش استودیو، چیدمان همجوار این دو ویجت بر روی سطر اول ($4 + 8 = 12$ ستون) به زیبایی متجلی می‌شود. کاربر با هاور روی هر برش دونات، درصد دقیق و عنوان پروژه را مشاهده می‌نماید:
۹.۲. جدول داده‌ای سلسله‌مراتبی مستر-دیتیلز با خروجی اکسل (Hierarchical Master-Detail Grid)
مدیران در کنار تحلیل‌های چشمی و گرافیکی، نیازمند دسترسی به ارقام خام جدولی و امکان استخراج فایل اکسل هستند. در GraphBPMS، نوع نمایش «جدول (Grid)» به عنوان پنجمین نوع نمایش در استودیوی چارت تعبیه شده است:
به محض انتخاب نوع جدولی، سیستم به صورت هوشمند منبع داده Master را پیشنهاد داده و دکمه‌های مدیریتی جهت سفارشی‌سازی ساختار گرید را فعال می‌سازد:
با کلیک بر روی «پیکربندی جدول ها»، پنجره تنظیمات گرید باز می‌شود. طراح می‌تواند ستون‌های غیرضروری را مخفی کرده و چینش ستون‌ها را بر اساس اولویت سازمانی تنظیم کند:
خروجی این جدول در محیط چارت، یک گرید فوق‌پیشرفته سازمانی است که مجهز به دکمه مستقیم خروجی اکسل (با آیکون سبز Excel)، جستجوی بلادرنگ، ناحیه گروه‌بندی ستون‌ها، صفحه‌بندی و آیکون فلش جهت باز کردن دریل‌دان دیتیلز به ازای هر سطر می‌باشد:
۹.۳. بار گیج دو شاخصی و مقایسه انواع ۳گانه Gauge (Dual-Metric Bar Gauge)
جهت پایش لحظه‌ای و سنجش شاخص‌های کلیدی عملکرد (KPI)، ویجت عقربه‌ای (Gauge) تعریف می‌شود. این ویجت با عرض ۴ ستون در کنار جدول ۸ ستونه قرار می‌گیرد تا سطر دوم شبکه ۱۲ ستونی ($4 + 8 = 12$) را تکمیل کند:
در تنظیمات اتصال داده، محور شاخص بر روی «عنوان پروژه» قرار گرفته و نوع گیج بر روی Bar Gauge (گیج نواری قوسی) تنظیم می‌شود:
نکته برجسته فنی، قابلیت پایش چندشاخصی همزمان است؛ با انتخاب هر دو فیلد «درصد پیشرفت پروژه» و «بودجه مصوب (ریال)»، دو کمان قوسی متحدالمرکز بر روی یک گیج واحد رسم می‌شود:
در آکاردئون تنظیمات گیج، دامنه زاویه بر روی ۱۸۰ درجه (شروع) تا ۰ درجه (پایان) تنظیم می‌گردد تا یک نیم‌دایره ارگونومیک افقی در بالای ویجت تشکیل شود:
انواع ۳گانه گیج در بستر GraphBPMS: دراپ‌داون Gauge Type سه الگوی رندرینگ متمایز را پشتیبانی می‌نماید:
- Bar Gauge: نوارهای قوسی پرشونده (مناسب برای داشبوردهای مدرن و چندشاخصی).
- Circular Gauge: صفحه مدور سنتی با عقربه متحرک سوزنی (مناسب برای سنجش فشار، سرعت و درصد تحقق تک‌شاخص).
- Linear Gauge: ستون خطی عمودی یا افقی شبیه به دماسنج (مناسب برای سنجش تراز مالی و بودجه مصرفی).
۹.۴. نمودار قطبی / راداری مساحتی در مختصات شعاعی (Polar Area / Radar Chart)
برای تحلیل مقایسه‌ای چندبعدی و ایجاد نقطه اوج تنوع بصری در داشبورد، لایه پنجم با نوع نمودار قطبی (Polar Chart) تعریف می‌گردد. عرض این لایه ۶ ستون با ارتفاع ۵۰٪ در نظر گرفته می‌شود:
در پیش‌نمایش، نمودار راداری مساحتی در مختصات زاویه‌ای ۳۶۰ درجه به تصویر درمی‌آید. رئوس این چندضلعی مساحتی آبی‌رنگ، مقادیر پیشرفت ۸۵٪، ۶۵٪ و ۴۰٪ هر سه پروژه را به یکدیگر پیوند می‌زند:
در فرم تنظیمات تکمیلی سری قطبی، فیلد «درصد پیشرفت پروژه» به عنوان متغیر شعاعی، نوع سری بر روی «ناحیه‌ای (Area)» و تابع تجمعی بر روی sum تثبیت می‌گردد:
با کلیک بر روی دکمه «ذخیره و بازگشت»، به پیشخوان اصلی گزارش‌ساز بازمی‌گردیم. همان‌طور که در تصویر زیر قابل مشاهده است، نشانگر عددی ۱ (Badge = 1) بر روی سطر گزارش «لیست پروژه‌ها و اقلام» همچنان پایدار مانده است. این موضوع اثبات می‌کند که هر پنج گونه نمودار و جدول در قالب یک رکورد قالب واحد تجمیع شده‌اند:
با کلیک بر روی آیکون نمودار در پیشخوان، پنجره مودال لیست قالب‌ها باز می‌شود. حال برای ورود به محیط اجرایی نهایی، بر روی آیکون چشم آبی‌رنگ «مشاهده (View Action)» کلیک می‌کنیم:
۹.۵. صفحه اختصاصی PreviewExport و بازترسیم هماهنگ سراسری با پارامتر مشترک (Synchronized Parameter Reactivity)
با کلیک بر روی اکشن مشاهده، کاربر به آدرس اختصاصی PreviewExport هدایت می‌شود. در بدو ورود، سیستم پاپ‌آپ ورودی پارامترها را باز می‌کند تا در صورت نیاز، کاربر فیلتر اولیه را اعمال کرده یا مستقیماً با کلیک بر روی دکمه آبی «مشاهده»، داشبورد کلان سازمان را فراخوانی نماید:
به محض ورود به داشبورد، چهار ویجت نخست در نیمه بالایی صفحه به صورت یکپارچه و ارگونومیک رندر می‌شوند:
- ویجت دونات (سمت چپ): سهم درصدی پیشرفت هر سه پروژه.
- ویجت میله‌ای/اسپلاین دکارتی (سمت راست): مقایسه حجم اعتبارات مصوب ۵۰B، ۲۵B و ۱۵B با خط میانگین کهربایی.
- ویجت بار گیج دو شاخصی (پایین سمت چپ): پایش همزمان پیشرفت و بودجه با کمان‌های قوسی.
- ویجت جدول داده‌ای (پایین سمت راست): مشخصات کامل شناسنامه‌ای پروژه‌ها همراه با دکمه اکسل.
با اسکرول بوم به سمت پایین، ویجت پنجم یعنی نمودار قطبی مساحتی در زیر جدول نمایان می‌شود که چشم‌اندازی ۳۶۰ درجه از توازن پیشرفت را در معرض دید قرار می‌دهد:
آزمون خواسته مدیر سیستم: بازترسیم سراسری با فیلتر پارامتریک مشترک
اکنون مهم‌ترین خواسته مدیر سیستم را به بوته آزمایش می‌گذاریم: آیا با تغییر یک پارامتر، تمام ۵ گونه نمایش به صورت هماهنگ و بلادرنگ فیلتر می‌شوند؟
بر روی دکمه «تنظیم پارامتر» در نوار ابزار بالای صفحه کلیک کرده و در منوی دسته‌بندی موضوعی، گزینه «عمرانی» را برمی‌گزینیم:
با کلیک بر روی «مشاهده»، معجزه هماهنگی در معماری نرم‌افزاری GraphBPMS رقم می‌خورد:
- بنر سراسری: چیپ سبز
محدود شده با مقادیر: دسته‌بندی موضوعی: عمرانیدر پیشانی کل صفحه روشن می‌شود. - نمودار دونات: فوراً فیلتر شده و تنها یک حلقه تک‌پروژه‌ای فیروزه‌ای مربوط به پروژه عمرانی (احداث پست برق ۴۰۰ کیلوولت غرب) با پیشرفت ۶۵٪ را نمایش می‌دهد.
- نمودار میله‌ای دکارتی: تمامی پروژه‌های IT و تأسیسات حذف شده و تنها یک ستون آبی ۵۰ میلیارد ریالی مربوط به پست برق باقی می‌ماند.
- بار گیج دو شاخصی: فوراً به پروژه پست برق سوئیچ کرده و مقادیر ۶۵٪ پیشرفت و ۵۰B ریال بودجه را منعکس می‌سازد.
- جدول داده‌ای: منحصراً سطر پروژه احداث پست برق (کد PRJ-101) را به تصویر می‌کشد.
۱۰. رونوشت گزارش، تعبیه ویجت نموداری در میزکار و رندرینگ نهایی در پورتال سازمانی (Report Transcription, Workspace Embedding & Portal Rendering)
ایجاد قالب‌های تحلیلی پیشرفته در استودیو، تنها نیمی از زنجیره ارزش هوش تجاری است؛ نیمه حیاتی دیگر، تحویل، به اشتراک‌گذاری و تعبیه بدون‌واسطه (Embedding) این نمودارها در میزکار روزمره (Workspace Dashboard) مدیران و کارشناسان فرآیندی است.
سیستم GraphBPMS با تکیه بر معماری امنیتی تفکیک‌شده، مفهوم قدرتمند «رونوشت گزارش (Transcript)» را با «طراحی ماژولار میزکار» پیوند زده است. در این فصل، فرآیند واگذاری رونوشت، پیکربندی ویجت در طراح میزکار و رندرینگ تعاملی آن در پرتال اصلی سازمانی را قدم‌به‌قدم دنبال می‌کنیم.
۱
استودیوی ساخت نمودار
قالب چندنموداری
پروژه‌ها و صورت‌وضعیت‌ها (۵ ویجت همگام)
۲
لایه امنیت و توزیع داده
اکشن رونوشت (Transcript)
اعطای مجوز بهره‌برداری کاربر نهایی
⬇
انتساب به کاربر یا نقش
راهبر سیستم / مدیر مالی
۳
مدیریت میزکار
طراحی تب جدید میزکار
ایجاد ویترین سازمانی در کارتابل
⬇
پیکربندی ویجت گزارشات
انتخاب قالب ← ذخیره با انتشار همزمان
۴
پورتال اصلی کاربر
بررسی رونوشت؟
کنترل سطح دسترسی در لایه سرور
⬇
✔️ مجوز دارد:
رندر کامل و تعاملی ۵ ویجت در داشبورد
❌ رونوشت ندارد:
خطای عدم دسترسی (Access Denied)
پایپ‌لاین امنیت، رونوشت و استقرار قالب چندنموداری در میزکارهای سازمانی پورتال
۱۰.۱. اکشن رونوشت قالب و تفکیک سطوح دسترسی (Transcript Action)
در سامانه GraphBPMS، هر قالب نمودار یا گزارش ساخته‌شده به صورت پیش‌فرض در مالکیت طراح یا سازنده آن قرار دارد. جهت اینکه سایر ارکان سازمان بتوانند این قالب را در میزکارهای خود مصرف کنند، طراح باید از قابلیت رونوشت (Transcript) استفاده نماید.
در پنجره مودال لیست قالب‌های نمودار گزارش «لیست پروژه‌ها و اقلام»، در کنار آیکون‌های طراحی و ویرایش، آیکونی متشکل از دو برگه سبز و خاکستری قرار دارد که معرف اکشن «ارسال رونوشت» است:
پنجره ارسال رونوشت باز می‌شود. این پنجره شامل دو تب استاندارد است:
- تب رونوشت‌های ارسال شده: تاریخچه گیرندگان قبلی را نمایش می‌دهد (مانند انتساب به کاربر «راهبر سیستم»).
- تب رونوشت جدید: به طراح اجازه می‌دهد بر اساس دو استراتژی سازمانی رونوشت را اعطا کند:
- بر اساس کاربری: انتساب مستقیم به یک شخص یا حساب کاربری خاص.
- بر اساس نقشه سازمانی: واگذاری به یک جایگاه یا رده شغلی مشخص در چارت فرآیندی (مانند مدیران پروژه یا کارشناسان بودجه).
۱۰.۲. ورود به مدیریت میزکار و بوم طراحی تب جدید (Workspace Designer)
پس از حصول اطمینان از اعطای رونوشت، از منوی راهبری سیستم وارد ماژول «مدیریت میزکار» در آدرس localhost/Dashboard/CreateDashboardView می‌شویم. در این صفحه، بر روی دکمه آبی‌رنگ «+ طراحی میزکار جدید» در گوشه بالا سمت چپ کلیک می‌کنیم:
محیط ویژوال «طراحی تب جدید میزکار» بارگذاری می‌شود. طراح با کلیک بر روی دکمه «+ افزودن»، یک کادر ویجت خام بر روی بوم قرار می‌دهد و با کلیک بر روی آیکون مداد سبز رنگ، پنجره «تنظیمات ویجت» را فراخوانی می‌کند:
۱۰.۳. تفکیک ساختاری اسلات «لیست نمودارها» در ویجت گزارشات
در پنجره تنظیمات ویجت، فیلد «لیست ماژول ها» را بر روی گزارشات قرار داده و در فیلد «لیست گزارشات»، گزارش مبدا «لیست پروژه ها و اقلام» را انتخاب می‌کنیم.
نکته کلیدی معماری نرم‌افزار GraphBPMS: به محض گزینش این گزارش، در کنار لیست گروه‌ها و نقشه‌ها، یک فیلد کشویی اختصاصی تحت عنوان «لیست نمودارها» فعال می‌گردد:
چرا «لیست نمودارها» به عنوان یک اسلات مستقل در تنظیمات ویجت تعبیه شده است؟
از آنجا که خروجی نمودار یک قابلیت فوق‌پیشرفته بصری با موتور رندرینگ تعاملی (Canvas/SVG)، دریل‌دان چندلایه‌ای و داشبورد چندنموداری است، GraphBPMS آن را از خروجی‌های سنتی جدولی جدا کرده و در قالب یک فیلد مجزا با نام «لیست نمودارها» در اختیار طراح می‌گذارد. بدین ترتیب می‌توان بدون تداخل، قالب نموداری ساخته‌شده را مستقیماً به عنوان محتوای ویجت برگزید.
قالب نموداری «لیست پروژه ها و اقلام» را انتخاب کرده، عنوان بخش را به همین نام تنظیم و گزینه‌های «نمایش هدر» و «نمایش عنوان بخش» را فعال می‌نماییم:
۱۰.۴. انتشار همزمان میزکار و قفل امنیتی دولایه‌ای
با ذخیره تنظیمات ویجت، بر روی دکمه آبی‌رنگ «ذخیره» در هدر صفحه طراحی کلیک می‌کنیم. پنجره مودال «ذخیره میزکار» گشوده می‌شود. در این فرم:
- عنوان میزکار: عبارت
لیست پروژه ها و اقلامثبت می‌شود. - گروه میزکار: دراپ‌داون بر روی
فرایندهای کسب و کار گرافتنظیم می‌گردد. - اولویت: مقدار
۰در نظر گرفته می‌شود. - چک‌باکس حیاتی: گزینه «همزمان با ذخیره سازی منتشر شود» را علامت می‌زنیم.
با کلیک بر روی ذخیره، به فهرست مدیریت میزکارها هدایت می‌شویم. همان‌طور که در تصویر زیر نمایان است، ردیف میزکار با عنوان «لیست پروژه ها و اقلام» ایجاد شده و دارای تیک آبی «انتشار یافته» و دسترسی کاربر «راهبر سیستم» می‌باشد:
تحلیل مهندسی قفل امنیتی دولایه‌ای: چرا رونوشت الزامی است؟
قفل امنیتی دولایه‌ای GraphBPMS (Two-Tier Security Enforcement)
بسیاری از طراحان مبتدی با این پرسش مواجه می‌شوند: «اگر من دسترسی تب میزکار را به کاربری داده‌ام، چرا او نمودار داخل ویجت را نمی‌بیند؟»
پاسخ در تفکیک بنیادین دو لایه امنیتی زیر نهفته است:
- مجوز کانتینر رابط کاربری (UI Container Access): حق مشاهده تب میزکار در هدر داشبورد پورتال.
- مجوز مصرف خروجی داده (Data & Output Permission): حق بهره‌برداری از قالب گزارش و اجرای کوئری‌های زیرین آن که منحصراً از طریق اکشن رونوشت (Transcript) اعطا می‌شود.
اگر به کاربری رونوشت داده نشده باشد، تب میزکار برای او لود می‌شود اما ویجت با خطای عدم دسترسی (Access Denied / Unauthorized) مواجه شده و داده‌ای نشان نخواهد داد. این معماری نفوذ‌ناپذیر تضمین می‌کند که هیچ کاربری به اطلاعات محرمانه پروژه‌ها از طریق ایجاد میزکارهای متفرقه دسترسی پیدا نکند.
۱۰.۵. رندرینگ زنده، تعاملی و عملیاتی در داشبورد اصلی پرتال (/Dashboard)
اکنون با حساب کاربری راهبر سیستم وارد صفحه اصلی پورتال سازمانی به نشانی localhost/Dashboard می‌شویم. همان‌طور که در تصویر زیر مشاهده می‌شود، تب جدید تحت عنوان «لیست پروژه ها و اقلام» در بالاترین سطح میزکار پورتال قرار گرفته است:
قابلیت‌های عملیاتی ارائه‌شده در میزکار پورتال:
- واکنش‌گرایی کامل ویجت‌ها: تمامی رفتارهای هاور، تولتیپ‌ها، برجسته‌سازی‌ها و خط شاخص میانگین همانند استودیوی پیش‌نمایش در دسترس کاربر هستند.
- نوار ابزار تعاملی ویجت (تحقق سوئیچ‌های ۵گانه سایدبار استودیو): در گوشه بالای هر ویجت، ابزارک‌های سطل زباله (حذف فیلترها -
ClearFiltersToggle)، قیف (فیلتر پارامتریک -ParameterModalToggle)، رفرش زنده داده‌ها (RefreshActionToggle)، فلش دوطرفه (بزرگ‌نمایی تمام‌صفحه پنجره‌ای -WindowModeToggle) و نمایش چیپ‌های فیلتر فعال (ActiveChipsToggle) که در بخش ۲ پیکربندی شدند، مستقر بوده و بدون خروج از میزکار امکان تعامل کامل را به کاربر می‌دهند. - دکمه رفرش اختصاصی داشبورد: آیکون دایره‌ای آبی‌رنگ در هدر پورتال به کاربر امکان می‌دهد بدون رفرش کل مرورگر، داده‌های تمام ویجت‌ها را بازخوانی کند.
- تعاملات جدولی: کاربر می‌تواند مستقیماً از داخل میزکار، سطر پروژه‌ها را با فلش باز کرده و ریز صورت‌وضعیت‌ها را ببیند یا با کلیک روی آیکون سبز، خروجی اکسل زنده دریافت کند.
۱۱. ماتریس عیب‌یابی و راهنمای جامع خطایابی سازمانی (Enterprise Troubleshooting Matrix)
در استقرار سازمانی قالب‌های نموداری، داشبوردهای چندنموداری و تعبیه آن‌ها در میزکارهای پرتال، ممکن است تیم‌های تحلیل داده و طراحان فرآیند با رفتارهای غیرمنتظره‌ای مواجه شوند. جدول زیر علل ریشه‌ای و راهکارهای استاندارد ۱۲ خطای پرتکرار را خلاصه کرده است:
| کد / عنوان خطا | نشانه‌های ظاهری در سیستم | علت ریشه‌ای مهندسی | اقدام اصلاحی و دستورالعمل حل |
|---|---|---|---|
| ERR-CHART-01 بوم سفید / نمودار خالی |
نمودار ترسیم نمی‌شود یا محورها بدون ستون هستند. | منبع داده فیلترشده با مقادیر پارامتر ورودی، هیچ رکوردی بازنمی‌گرداند یا اتصال شبکه به دیتابیس قطع است. | بررسی تب «تنظیمات پارامترها» و کلیک روی پیش‌نمایش جدول جهت اطمینان از لود رکوردهای معتبر پایگاه داده. |
| ERR-CHART-02 فشردگی مقیاس (Scale Disparity) |
یکی از سری‌ها به شکل خط مستقیم چسبیده به کف نمودار رندر می‌شود. | تفاوت مقیاس شدید میان دو شاخص (مانند قرار دادن بودجه ۵۰ میلیاردی در کنار درصد ۰-۱۰۰ در یک محور مشترک). | استفاده از آکاردئون Pane؛ ایجاد دو پین موازی مستقل با محور افقی مشترک و انتساب هر سری به پین متناظر. |
| ERR-CHART-03 جابجایی متادیتا (Alias Swap) |
محور عمودی اعدادی نامرتبط با فیلد مورد نظر نمایش می‌دهد. | جابجایی برچسب‌های نمایشی بین ستون‌های هم‌نام یا متوالی در ReportStudio (مانند موردکاوی بودجه و درصد). | ورود به ReportStudio، ویرایش برچسب کارت ستون‌ها، ذخیره گزارش و ورود مجدد به ChartStudio. |
| ERR-CHART-04 تداخل متون محور افقی |
نام‌های پروژه‌ها روی هم افتاده و ناخوانا هستند. | طولانی بودن اسامی فارسی پروژه‌ها در حالت پیش‌فرض محور X. | تنظیم «نحوه نمایش متن بعد افقی» بر روی نمایش دو خطی یا چرخاندن در آکاردئون محور افقی. |
| ERR-CHART-05 عدم اجرای دریل‌داون |
کلیک روی میله والد هیچ اتفاقی ایجاد نمی‌کند. | خاموش بودن سوئیچ Dril Down در چارت فرزند، یا عدم انتساب صحیح فیلد کلید خارجی (ProjectId) در تنظیمات گزارش. | اطمینان از فعال بودن سوئیچ «فعال سازی Dril Down» روی ON و انتخاب دقیق چارت والد در لیست کشویی. |
| ERR-CHART-06 برش خوردن راهنما (Legend Cutoff) |
عناوین طولانی سری‌ها در راهنما ناقص هستند. | تعداد ستون‌های نامناسب در چیدمان راهنما یا انتخاب موقعیت نامناسب. | تغییر نوع به افقی یا تنظیم موقعیت به «بالا» با چیدمان ۲ یا ۳ سطره در آکاردئون Legend. |
| ERR-CHART-07 عدم نمایش ردیاب Crosshair |
هاور ماوس خطوط تراز را نشان نمی‌دهد. | سوئیچ ردیاب مختصات در آکاردئون خاموش است یا ضخامت خط روی ۰ تنظیم شده است. | فعال‌سازی سوئیچ در آکاردئون مختصات محورها و تعیین ضخامت ۱ تا ۲ پیکسل با رنگ کنتراست مناسب. |
| ERR-CHART-08 عدم کارکرد زوم ماوس |
چرخاندن غلتک ماوس مقیاس را تغییر نمی‌دهد. | غیرفعال بودن سوئیچ «بزرگ‌نمایی به وسیله غلتک موس» در آکاردئون بزرگ‌نمایی و جابه‌جایی. | روشن کردن سوئیچ مربوطه در آکاردئون ۱۰ و اطمینان از باز بودن قفل محورهای X و Y. |
| ERR-CHART-09 خطای محاسباتی خط هدف |
خط محاسباتی در مقدار نامناسبی ظاهر می‌شود. | انتخاب منبع داده یا فیلد نادرست در فرم تنظیمات خط محاسباتی. | تطبیق منبع داده ۱ با فیلد بودجه مصوب و گزینش تابع محاسباتی هدف (بیشینه، کمینه، میانگین). |
| ERR-CHART-10 ناپدید شدن دکمه‌های اکشن |
نوار ابزار ۴ دکمه‌ای در بالای چارت ظاهر نمی‌شود. | خاموش بودن سوئیچ‌های ۵گانه در سایدبار عمومی استودیو. | ورود به سایدبار تنظیمات عمومی و روشن کردن سوئیچ‌های پنجره‌ای، پارامترها، بروزرسانی و حذف فیلترها. |
| ERR-CHART-11 خطای دسترسی در میزکار (Access Denied) |
کادر ویجت در صفحه اصلی پرتال خالی مانده یا پیام عدم مجوز می‌دهد. | عدم اعطای «رونوشت گزارش» به کاربر جاری یا نقش سازمانی او علیرغم داشتن دسترسی به تب میزکار. | ورود به لیست قالب‌های گزارش، کلیک روی اکشن دو برگ رونوشت و افزودن کاربر یا نقش به لیست مجاز. |
| ERR-CHART-12 عدم نمایش تب در داشبورد کاربر |
پس از طراحی و ذخیره، تب جدید در پرتال ظاهر نمی‌شود. | فراموش کردن علامت زدن چک‌باکس «همزمان با ذخیره سازی منتشر شود» در پنجره ذخیره تب میزکار. | ورود مجدد به مدیریت میزکارها، ویرایش تب مورد نظر و فعال‌سازی تیک انتشار یافته (Published). |
۱۲. جمع‌بندی و پرسش‌های متداول (FAQ)
آیا می‌توان بیش از دو لایه دریل‌داون (مثلاً سه سطح) تعریف کرد؟
بله. موتور دریل‌داون زنجیره‌ای GraphBPMS از معماری N-Tier پشتیبانی می‌کند؛ چارت سطح دوم می‌تواند به عنوان والد برای چارت سطح سوم (مثلاً فاکتورهای ذیل هر صورت‌وضعیت) برگزیده شود.
چگونه پارامتر مشترک در داشبورد چندنموداری عمل می‌کند؟
تمام ویجت‌های موجود در یک قالب به منبع داده مشترک گزارش متصل هستند؛ لذا تغییر پارامتر در هدر صفحه، یک Event Bus سراسری را فعال کرده و داده‌های تمام ۵ ویجت را همگام بازترسیم می‌نماید.
آیا فرمت‌های خروجی وکتور (SVG) کیفیت چاپ را حفظ می‌کنند؟
بله. خروجی SVG کاملاً برداری بوده و در بزرگ‌نمایی‌های بی‌نهایت و چاپ‌های سایز بزرگ پوستر بدون کوچک‌ترین افت کیفیت رندر می‌شود.
چرا تفکیک دسترسی رونوشت از دسترسی میزکار اهمیت دارد؟
این تفکیک دولایه‌ای مانع از نشت داده‌های محرمانه سازمانی می‌شود؛ کاربر حتی اگر تب میزکار را ببیند، بدون رونوشت مستقیم حق اجرای کوئری و مصرف خروجی را نخواهد داشت.
گام بعدی در دانشنامه خروجی‌های گزارش
سرفصل بعدی در دانشنامه: جهت ادامه فراگیری ابزارهای خروجی و آشنایی با تحلیل‌های مکان‌محور و نقشه‌ها، به مستند «[REPORT-06] استودیوی خروجی مکان‌محور (GIS & Map Studio)» مراجعه فرمایید.