کارهای منتخب — 02 / ویژوالهای سفارشی
نمودارهایی که مجبور شدم خودم بنویسم.
Power BI با مجموعهای ثابت از نمودارها میآید. وقتی آنکه لازم داشتم میانشان نبود، خودم نوشتمش — تا اینجا شش تا: یک هیتمپِ نقشهٔ بدن، یک ویژوالِ میلهای، یک گِیج، یک ستونِ تغییرِ انباشته و کارتهای KPI، همه با دست در TypeScript نوشته شده. پایینتر بازسازی شده، زنده، تا بتوانی با آنها بازی کنی.
هر عددی درون این ویجتها دادهٔ نمونه است — ساختگی، برای نشاندادنِ رفتارِ هر ویژوال، نه اعداد واقعی.
زندههمان هیتمپی که پایینتر است — گرمتر یعنی آسیبِ بیشتر.
بهاختصار
یک ویژوالِ سفارشی، برنامهٔ کوچکی است که Power BI درون گزارش اجرا میکند: داده و اندازهٔ کادر را به کدت میدهد، و کدِ تو پیکسلها را میکشد.
کد است، نه یک قالب
یک کلاسِ TypeScript که یک اینترفیس را پیاده میکند. نه کشیدنورهاکردن — هر پیکسل بهعمد کشیده شده.
01 · IVisual · TypeScriptPower BI داده را به آن میدهد
فیلدهایی را که میپذیری اعلام میکنی؛ میزبان داده را متناسب شکل میدهد و در هر تغییر به آن میفرستد.
02 · capabilities · dataViewتو پیکسلها را میکشی
با داده و viewport، کد چیدمانِ SVG را میسازد — میلهها، مسیرها، برچسبها، یک پنلِ کاملِ آمار.
03 · SVG · چیدمانِ توبهصورت یک فایل منتشر میشود
در یک .pbiviz واحد بسته میشود — کد، استایل و آیکون با هم zip شده — و در هر گزارشی import میشود.
چطور کار میکند
Power BI میگوید. کدِ تو میکشد.
تمام زندگیاش یک حلقه است: یکبار ساخته میشود، سپس update() در هر تغییرِ داده، اندازه یا تنظیم فراخوانده میشود — بخوان، دوباره بکِش. حلقه را اجرا کن
constructor
میزبان ویژوال را میسازد و المانِ DOM را تحویل میدهد. تو <svg>ات را برپا میکنی.
تغییرِ داده / اندازه / تنظیم
کسی فیلتر میکند، اندازه را عوض میکند، یا یک کنترلِ قالب را تنظیم میکند.
update(options)
میزبان update()ات را با optionsِ تازه فرا میخواند.
options.dataViews[0]
دادهٔ بازچیدهشده و تنظیماتِ فعلی را بیرون میکشی.
render() → SVG
بومِ نقاشی را پاک کن، تصویر را در اندازهٔ تازه بچین.
ویژوالِ یک — نقشهٔ آسیبِ بدن
آسیبها، روی بدن نقشهبرداریشده.
دو فیلد به داخل — یک ناحیهٔ بدن و یک شمارِ آسیب — و هر ناحیه روی مقیاسی پنجباندی رنگ میگیرد، در حالی که پنل آنها را در گروهها جمع میکند و بدترینها را برجسته میکند. روی یک ناحیه کلیک کن، یا بارِ پروندهها را بکِش
آسیبها بر پایهٔ گروهِ بدن
باندها: 1–5 · 6–15 · 16–40 · 41+ — همه رنگهای پنلِ قالباند. این نمونهٔ اولیه است؛ دوقلوی منتشرشدهاش bodyInjuryHeatmap پنج باند را با یک گرادیانِ نرمِ min→max جایگزین میکند، چپ را از راست تشخیص میدهد، و انتخابِ Power BI، همبرجستهسازی و تولتیپها را وصل میکند.
دادهای که پشتش است
دو فیلد به داخل. یک تصویر به بیرون.
اعلام میکند چه میپذیرد — یک گروهبندی، یک سنجه — و Power BI گزارش را به همان dataViewِ categoricalی که دریافت میکند بازشکل میدهد. ردیفها را روشن/خاموش کن — dataView را ببین
dataViewآنچه update() دریافت میکند — categorical
ویژوالِ دو — ویژوالِ میلهای
نمودارِ میلهایای که کاری میکند که نمونهٔ داخلی نمیکند.
برای جزئیاتی که نمودارِ میلهایِ داخلی نادیده میگیرد — یک سرسطرِ جمعِ کلِ واقعی، فونتهای خودش، ترازبندی و کادری که میتوانی شکلش دهی. هرکدام یک کنترل در پنلِ قالب است. پنل را عوض کن — نمودار دنبال میکند
پنل از کجا میآید
یک کنترل اعلام کن. Power BI پنل را میکشد.
پنل را هرگز با دست نمیسازی — typeِ هر ویژگی را اعلام میکنی، و میزبان کنترل را رندر میکند. یک type انتخاب کن
A boolean becomes a switch in the pane, and arrives in your settings model as true / false.
ویژوالِ سه — گِیجِ نیمدایره
روی هدف، در یک نگاه.
یک مقدار بهسوی یک بیشینه پُر میشود، از دو هدف میگذرد، به یکی از سه ناحیه میرسد — عقب، روی مسیر، جلو — و کمان رنگِ آن ناحیه را میگیرد. مقدار را بکِش
اهداف در 40 و 75 · کمینه/بیشینه، ناحیهها و نشانگرها همه کنترلهای پنلِ قالباند.
باقیِ قفسه
همان غریزه، چند بارِ دیگر.
دو تای دیگر که جایشان را حق دارند — یک ستونِ انباشته که تغییرِ خودش را میان دورهها یادداشت میکند، و رشتهای از کارتهای KPI. هر دو زنده. تکانشان بده
ستونِ انباشته + تغییر
v3.5.8 · راهنما · دریلداون · دلتاهای تغییرMultiCard
v1.3.2 · کارتهای KPI · ردیف یا ستونتکرار
یک نسخهٔ خوب در واقع شش تاست.
هر انتشار دقیقاً یک چیز را که یک گزارش میخواست افزود — و بستهٔ قدیمی هرگز بازنویسی نشد، فقط جایگزین شد. نسخهها را مرور کن
Set the Values role to accept a measure or a grouping, so a report author can pick “Don't summarize” and show raw category values instead of a forced sum.
در قالبِ اعداد
خانواده، شمردهشده.
هر دو با SVGِ خام روی APIِ powerbi-visuals کشیده شدهاند — نه کمککنندههای نمودارِ D3، نه چارتسازیِ شخصِثالث. هر رنگ، فونت و کادر یک کنترلِ پنلِ قالب است.