‏TanStack Charts رسید: گرامر نمودار برای وب

تیم TanStack نسخهٔ ۰.۳.۱ از TanStack Charts رو روی npm منتشر کرده و تو صفحهٔ معرفی می‌گه هدفش یه «گرامر نمودار»ـه که لازم نباشه بعداً از توش دربیای و بذاریش کنار. یعنی به جای اینکه یه کامپوننت آمادهٔ «نمودار خطی» یا «میله‌ای» بگیری و هر جا کم آورد دورش بزنی، خودت مارک‌ها (خط، ناحیه، نقطه، متن، خط راهنما) رو روی یه دستگاه مختصات مشترک می‌چینی.

نتیجه اینه که تعریف نمودار، خودِ کل ترکیبه: تو defineChart مارک‌ها رو می‌چینی و مقیاس و محور و تولتیپ رو کنارشون تعریف می‌کنی. کاتالوگ سایت با همین ساختار از نمودار خطی و هیستوگرام تا هیت‌مپ تقویمی، سنکی، شبکهٔ نیرومحور و کرهٔ جغرافیایی رو پوشش داده. یه نمونهٔ فشرده از تعریف یه نمودار پراکندگی این شکلیه:

const accountHealth = defineChart({
  marks: [
    dot(accounts, { x: 'monthlyRevenue', y: 'retention', r: 'seats', z: 'segment', key: 'id' }),
  ],
  x: { scale: scaleLinear(), label: 'Monthly revenue ($k)' },
  y: { scale: scaleLinear(), label: '90-day retention' },
  tooltip: true,
})

اندازه هم یکی از حرف‌های اصلی این معرفیه: یه نمودار خطی فشرده تو ری‌اکت ۱۶.۴۸ کیلوبایت gzip می‌شه و صحنهٔ مستقل از فریم‌ورک ۸.۱۲ کیلوبایته و نه D3 رو نگه می‌داره نه InternMap. تو مقایسهٔ باندل کل صفحه که خودشون منتشر کردن، TanStack Charts بین ۲۶.۶ تا ۳۲.۱ کیلوبایت درمیاد، در برابر ۴۴.۷ تا ۵۸.۲ برای Chart.js، ۸۳.۳ تا ۹۱.۹ برای Observable Plot و ۱۵۳ به بالا برای Recharts و Apache ECharts.

همهٔ مثال‌ها زیر TypeScript سخت‌گیرانه کامپایل می‌شن؛ فیلدها، نوع داده، دامنه‌ها و کلیدها به دیتوم اصلی وصل می‌مونن و تعریف نامعتبر رد می‌شه — چیزی که هم برای آدم‌ها و هم برای ایجنت‌های کدنویس مهمه. ظاهر نمودار هم با متغیرهای CSS، تم، پراپ‌های مارک یا حتی رندرر اختصاصی خودت کنترل می‌شه. تو همون صفحه اومده که این API از گرامر گرافیک ویلکینسون و کار ggplot2، Vega-Lite و Observable Plot الهام گرفته، ولی رانتایمش پیاده‌سازی مستقل خودشونه.

نکات کلیدی:

• نسخهٔ ۰.۳.۱ روی npm منتشر شده
• به جای نمودار آماده، مارک‌ها روی مقیاس مشترک لایه می‌شن
• نمودار خطی فشرده در ری‌اکت ۱۶.۴۸ کیلوبایت gzip؛ هستهٔ مستقل ۸.۱۲ کیلوبایت
• بدون وابستگی به D3 و InternMap در خروجی نهایی
• تایپ‌سیف کامل زیر TypeScript سخت‌گیرانه و تم‌پذیری با متغیرهای CSS