‏microcharts: نموداری که تو یه جمله جا می‌شه

تو صفحهٔ معرفی microcharts اومده که این کتابخونه برای جاییه که یه نمودار باید تو دل یه جمله یا توی سلول جدول بشینه، نه وسط داشبورد. 106 نوع نمودار توی چهار مجموعه داره — بزرگ‌ترینش core با 34 تا — و همه با یه API مشترک کار می‌کنن: data رو می‌دی و خروجی درست می‌گیری، و بعدش domain و color و title تو همهٔ نمودارها یه معنی می‌دن. کاتالوگ هم تایپ‌شده‌ست، برای همین ادیتور یا ایجنت بدون حدس‌زدن تکمیلش می‌کنه.

نتیجهٔ همون API مشترک اینه که یه آرایهٔ ساده رو می‌شه بین چند نوع نمودار جابه‌جا کرد بدون اینکه چیز دیگه‌ای عوض بشه:

const weeks = [128, 131, 129, 138, 141, 139, 148, 152, 150, 157, 161, 163]

<Sparkline data={weeks} />
<SparkBar data={weeks} />
<HeatStrip data={weeks} />

بحث اصلی سر حجمه. نویسنده می‌گه Recharts با 106 کیلوبایت برای یه جعبه‌ابزار کامل قیمت منصفیه، ولی هستهٔ مشترکش حتی با tree-shaking هم میاد و برای یه سلول جدول کل بودجه‌ست. در مقابل هر نمودار تعاملی microcharts بین 2.18 تا 7 کیلوبایت gzip می‌گیره با میانهٔ 5.25، و این عدد تو CI کنترل می‌شه. نمودارهای استاتیک هم توی Server Component رندر می‌شن و اصلاً هیدریت نمی‌شن. وابستگی هم نداره و ری‌اکت فقط peer dependency هست.

دسترس‌پذیری و دادهٔ خراب هم از قبل فکر شدن. متن جایگزین از خود اعدادی که نمودار داره ساخته می‌شه — چیزی مثل «27% رشد، بازهٔ 128 تا 163» — پس هیچ‌وقت قدیمی نمی‌شه؛ هر نمودار یه tab stop داره، با کلیدهای جهت بین مقادیر حرکت می‌کنی و هیچ اطلاعاتی فقط با رنگ منتقل نمی‌شه. دادهٔ بد هم چیزی رو نمی‌شکنه: مقدار NaN یا Infinity، آرایهٔ خالی و تک‌مقدار همه یه چیز منطقی رندر می‌کنن و آرایهٔ خالی صفر جعلی نمی‌سازه.

نویسنده صریح می‌گه چی رو عمداً نداره: نمودار دایره‌ای، گیج عقربه‌ای، ویولن و وافل تو این اندازه دیگه خوانا نیستن، برای همین تو کاتالوگ نیستن و هر کدوم یه جایگزین دارن که به همون سؤال جواب می‌ده (گیج به Bullet، ویولن به MicroBox، وافل به IconArray). محور و خط راهنما و لجند هم خبری نیست و جمله‌ای که نمودار توشه باید بار توضیح رو ببره. جایی حدود 200 پیکسل مرزیه که نمودار محور می‌خواد و از اون به بعد کتابخونهٔ کامل جواب می‌ده.

نکات کلیدی:

• 106 نوع نمودار توی چهار مجموعه، همه با یه API مشترک روی ری‌اکت
• 2.18 تا 7 کیلوبایت gzip برای هر نمودار تعاملی، میانهٔ 5.25 و کنترل‌شده تو CI
• نمودار استاتیک توی Server Component رندر می‌شه و جاوااسکریپت سمت کلاینت نداره
• بدون هیچ وابستگی؛ ری‌اکت peer dependency هست
• متن جایگزین خودکار از داده، پیمایش با کلیدهای جهت و بدون تکیه بر رنگ
• برای نمودار بالای حدود 200 پیکسل، جعبه‌ابزارهای کامل مثل Recharts گزینهٔ بهترن