محسن زارعی
بازگشت به کارها

کارهای منتخب · ۰۲ / ویژوال‌های سفارشی

نمودارهایی که باید می‌ساختیم.

Power BI با مجموعه‌ای ثابت از نمودارها می‌آید. آنچه لازم داشتیم میانشان نبود؛ بخشی را خودم ساختم و برای بقیه تیم را فنی هدایت کردم. تا اینجا شش ویژوالِ سفارشی: یک نقشهٔ حرارتیِ بدن، یک ویژوالِ میله‌ای، یک گِیج، یک ستونِ تغییرِ انباشته و کارت‌های KPI، همه در TypeScript. پایین‌تر، زنده، بازسازی شده‌اند.

نقشِ من: توسعهٔ مستقیم برای برخی ویژوال‌ها؛ هدایتِ فنی و راهنماییِ تیم برای بقیه.

۶ویژوال سفارشی
۱۲ناحیهٔ بدن
TypeScript + SVG۰ کتابخانهٔ نمودارگِیج · میله · انباشته · کارت

توضیح دربارهٔ داده‌های نمایشی. همهٔ مقادیر، تاریخ‌ها، شمارِ آسیب‌ها، درصدها، روندها و مقایسه‌های این صفحه دادهٔ نمونهٔ ساختگی‌اند و فقط برای نشان‌دادنِ ویژوال‌ها ساخته شده‌اند. معرفِ افراد، رویدادها، سازمان‌ها یا عملکردِ واقعیِ کسب‌وکار نیستند.

چطور کار می‌کند

Power BI می‌گوید. کدِ تو می‌کشد.

یک‌بار ساخته می‌شود. بعد update() در هر تغییرِ داده، اندازه یا تنظیم فراخوانده می‌شود. حلقه را اجرا کن

یک‌بار

constructor

میزبان ویژوال را می‌سازد و المانِ DOM را تحویل می‌دهد. تو <svg>‌ات را برپا می‌کنی.

ماشه

تغییرِ داده / اندازه / تنظیم

کسی فیلتر می‌کند، اندازه را عوض می‌کند، یا یک کنترلِ قالب را تنظیم می‌کند.

هر بار

update(options)

میزبان update()‌ات را با optionsِ تازه فرا می‌خواند.

بخوان

options.dataViews[0]

دادهٔ بازچیده‌شده و تنظیماتِ فعلی را بیرون می‌کشی.

بکِش

render() → SVG

بوم را پاک کن، در اندازهٔ تازه دوباره بکِش.

idle
قرارداد داده

گروه‌بندی bodyRegion + سنجهٔ injuryCount dataView دسته‌ای SVG طراحی‌شده برای همین کار.

categories[] + values[]

ویژوالِ یک · نقشهٔ آسیبِ بدندادهٔ نمونه

آسیب‌ها، روی بدن نقشه‌برداری‌شده.

دو فیلد به داخل: یک ناحیهٔ بدن و یک شمارِ آسیب. هر ناحیه روی مقیاسی پنج‌باندی رنگ می‌گیرد؛ پنل آن‌ها را گروه می‌کند و بدترین‌ها را برجسته می‌کند. روی یک ناحیه کلیک کن تا رویش تمرکز کنی

بازهٔ زمانی
مجموع۴۲ آسیب

آسیب‌ها بر پایهٔ گروهِ بدن

0
1–5
6–15
16–40
41+
رنگ = شمارِ آسیب‌ها

باندها: 1–5 · 6–15 · 16–40 · 41+، همه رنگ‌های پنلِ قالب. این نمونهٔ اولیه است. دوقلوی منتشرشده‌اش bodyInjuryHeatmap باندها را با یک گرادیانِ نرمِ min→max جایگزین می‌کند، چپ را از راست تشخیص می‌دهد، و انتخابِ Power BI، هم‌برجسته‌سازی و تولتیپ‌ها را وصل می‌کند.

ویژوالِ دو · ویژوالِ میله‌ایدادهٔ نمونه

نمودارِ میله‌ای‌ای که کاری می‌کند که نمونهٔ داخلی نمی‌کند.

جزئیاتی که نمودارِ میله‌ایِ داخلی نادیده می‌گیرد، هرکدام یک کنترل در پنلِ قالب. پنل را عوض کن. نمودار دنبال می‌کند

قالب · ویژوالِ میله‌ای
سربرگِ جمعِ کل
نمایش
پیشوند
ترازبندی
کادرِ سربرگ
سبک
ضخامت1.5
شعاع6
رنگ
فونت‌ها و رنگ
اندازهٔ برچسب12
اندازهٔ مقدار13
میله‌ها

ویژوالِ سه · گِیجِ نیم‌دایرهدادهٔ نمونه

روی هدف، در یک نگاه.

یک مقدار، سه وضعیت. کمان، عدد و وضعیت با هم به‌روز می‌شوند. مقدار را بکِش

81% روی مسیر

مقدارِ واقعی81%
کمینه 0بیشینه 100
زیرِ هدف0 – 59
در معرضِ خطر60 – 79
روی مسیر80 – 100

کمینه/بیشینه، ناحیه‌ها و نشانگرها همه کنترل‌های پنلِ قالب‌اند.دادهٔ نمونه

تکرار

یک نسخهٔ خوب در واقع شش تاست.

هر انتشار یک چیز را که گزارشی می‌خواست افزود. بستهٔ قدیمی هرگز بازنویسی نشد، فقط جایگزین شد. نسخه‌ها را مرور کن

1.6.0داده

نقشِ Values هم معیار (measure) می‌گیرد هم گروه‌بندی؛ با «جمع نزن»، مقادیرِ خامِ هر دسته می‌آید، نه یک جمعِ اجباری.