스크립트
00:00:00لقد فعلها فريق TanStack مرة أخرى، وهذه المرة يحلون مشكلة الرسومات البيانية في جافا سكريبت مع TanStack Charts.
00:00:04إنه يعد بحجم حزمة أصغر من المكتبات مثل ReCharts، وهو يحتوي على دعم لـ SVG و
00:00:08مخرجات Canvas، والرسوم المتحركة، وتلميح الأدوات، والتفاعلات، وكمعظم مكتبات TanStack، فهي تمتلك نواة
00:00:13مستقلة عن الإطارات، مع أمان للأنواع، وتجربة مطور رائعة. وعلى الرغم من حداثتها الشديدة،
00:00:18يمكنك بالفعل بناء العديد من أنواع الرسومات البيانية باستخدامها، بدءاً من مخطط خطي أساسي
00:00:22أو مخطط عمودي، وصولاً إلى أنواع أكثر تعقيداً مثل مخطط سانكي، والخريطة الشجرية، والخرائط الحرارية، والخطوط الرادارحة،
00:00:27ومخططات الدونات، والمؤشرات، وحتى خرائط العالم الرائعة حقاً. ربما يمكنها إنشاء كل ما تحتاجه
00:00:32بالفعل. والآن أول شيء أريد استعراضه هو كيف تتعامل مكتبة TanStack Charts مع الرسومات البيانية في الواقع،
00:00:41لأنها بطريقة مشابهة لمكتبة مثل ggplot2 في لغة R، فهي تستخدم نحو الرسومات (grammar of graphics). هذا
00:00:47النهج لا يعامل الرسم البياني كنوع ثابت، بل إنها في الواقع تركيب من العلامات،
00:00:51والمقاييس، والتعيينات؛ لذا بدلاً من طلب مخطط عمودي، فإنك تحدد شيئاً مثل ضع بعض الأعمدة
00:00:56هنا، واعرِض هذا المتغير على محور x، وذاك على محور y، وطبق هذه المقاييس، ومن خلال هذا الوصف،
00:01:01يظهر الرسم البياني. إنه فرق دقيق للغاية، ولكنه جزء مما يجعل هذه المكتبة مرنة للغاية.
00:01:05أعني أن شخصاً غرد يسأل عما إذا كان بإمكانها إنشاء مخطط كهذا، وكانت الإجابة بنعم.
00:01:11هذا ليس نوع مخطط مدمج، بل إن المكتبة مرنة بما يكفي لإنشائه.
00:01:14أما بالنسبة لكيفية عمل ذلك، فإذا نظرت إلى عرض المخطط العمودي هنا الذي يمثل تكرار
00:01:18الحروف الإنجليزية، فإن أهم كود لهذا لا يتجاوز 20 سطراً. يبدأ بتعريف المخطط
00:01:23باستخدام دالة define chart، وداخلها نبدأ بالعلامات (marks). يمكنك التفكير في
00:01:28العلامات على أنها الأشياء التي يتم رسمها بالفعل، مثل الخطوط، أو النقاط، أو الأعمدة. لقد أنشأت موقع عرض تجريبي
00:01:32أحاول فيه استخدام جميع العلامات المتاحة في مخططات TanStack، وأعتقد أن هناك حوالي 55 علامة،
00:01:37لذا يجب أن يكون هذا مثالاً جيداً إلى حد ما للرسومات البيانية التي يمكنك بناؤها باستخدام TanStack charts،
00:01:40وهناك عدد كبير جداً منها. سيتعين عليك التحلي بالصبر معي هنا،
00:01:43ولكن يمكنك أن ترى أن لدينا مخططات الأعمدة العادية، سواء أردتها أفقية أو عمودية،
00:01:47وكذلك الأمر مع الخطوط والمناطق. ثم لدينا أيضاً مخططات النقاط هنا،
00:01:51ولدينا قاعدة وهي الخط المنقط الذي يمتد عبر المخطط، حيث يمكنك جعله عمودياً،
00:01:54ويمكنك إنشاء مخطط شرطات (tick)، على المحور x أو y، ولديك مستطيل، وخلية، ونطاقات،
00:01:59وأسهم، ومتجهات بحيث يمكنك إنشاء حقل رياح، ولدينا الربط، والأشكال السداسية،
00:02:04والنصوص، لذا يمكن أن تكون العلامات نصوصاً لعرضها في أي مكان تريده داخل المخطط. ولدينا إطارات،
00:02:08وخطوط، وفروق، ومخططات الانحدار الخطي، وصناديق، ومخططات الكمان (violin)،
00:02:13ومخططات الوافل. يمكنك إنشاء خرائط كنتورية باستخدامها بالفعل. بالمناسبة،
00:02:17هذه المكتبة تم إطلاقها منذ أسبوع واحد، وهذا أمر جنوني، فهي تمتلك هذا العدد الهائل من الميزات، والقائمة لا تزال مستمرة.
00:02:22يمكننا إنشاء هذا المخطط، أياً كان ما يمثله، فأنا لا أعرف حتى ما الغرض منه.
00:02:25لدينا مخطط الخريطة الشجرية، ومخطط الانفجار الشمسي (sunburst)، ومخططات سانكي، ودليل تركيز مؤشر التقاطع،
00:02:29ولدينا مخططاتنا الشعاعية مثل المخططات الدائرية أو الدونات أو الرادار، ثم
00:02:33أخيراً هنا، لدينا أيضاً الأشكال الجغرافية (geoshape) إذا كنت تريد خرائط العالم البيانية. وكما قلت، هناك عدد كبير جداً
00:02:38من هذه العناصر التي يمكنك دمجها لإنشاء أي مخطط تحتاجه تقريباً. بالعودة إلى عرض مخطط الأعمدة الخاص بنا،
00:02:42فإن العلامة الوحيدة التي أحتاجها هي bar y، وداخلها تقوم بتمرير بياناتك،
00:02:47هذه المصفوفة من الكائنات. وبعد ذلك، تحدد ما يجب أن يكون مفتاح x، وما يجب أن يكون مفتاح y،
00:02:51وهذا أمر رائع لأنه يعني أنك لست مضطراً لتكييف بياناتك مع هيكل محدد،
00:02:56بل يمكنك ببساطة تحديده هنا. وهي أيضاً آمنة من حيث الأنواع (type safe)، مما يعني أنه إذا أخطأت في كتابة أحد هذه المفاتيح،
00:03:00فستعلمني بذلك على الفور، وهذا هو الأمان في الأنواع الذي اعتدنا عليه وأحببناه في TanStack.
00:03:04بعد أن نحدد العلامات التي نريدها، يصبح لدينا محوري x و y. بالنسبة للمحور x،
00:03:08فالأمر في غاية البساطة. لقد ذكرت أنني أريد space band، وهو مخصص للفئات، بحيث تتباعد حروفنا
00:03:12بشكل متساوٍ، ولدي أيضاً بعض المسافات البادئة (padding) فيما بينها. أما بالنسبة لمحمور y، فأنا أستخدم مقياساً خطياً
00:03:17scale linear، وهو مخصص للأرقام، ولدي أيضاً ضبط الإعداد nice على true، مما يعني ببساطة تقريب
00:03:21المحور إلى رقم معقول بدلاً من التوقف عند أعلى قيمة لدينا. إذا قمت بتعيين هذا إلى false،
00:03:26سترى أن أعلى المحور هنا ينتهي ببساطة عند نقطة انتهاء أعلى عمود. وهنا،
00:03:30لقد منحت المحور أيضاً تسمية وتنسيقاً أيضاً، فقط لكي نتمكن من تنسيق هذه الأرقام كنسب مئوية
00:03:34بدلاً من النقاط العشرية. الآن كل هذا التعريف هو الجزء المستقل عن الإطارات، ولكن لكي يتم
00:03:39عرض هذا فعلياً في React، كل ما نحتاج إلى فعله هو استيراد مكون المخطط (chart)، وتمرير تعريفنا إليه،
00:03:43ومنحه ارتفاعاً، ثم تسمية، وهذا كل ما نحتاجه لصنع مخططنا. ولكن الشيء الذي أود توضيحه حقاً
00:03:47هو أننا لم نستخدم مخطط أعمدة هنا. لقد حددنا في كودنا المكانที่เรา نريد أن
00:03:51نعرض فيه علامتنا، واتفق أن تكون النتيجة النهائية لمخططنا هي مخطط أعمدة، ولكنه تمييز
00:03:55دقيق للغاية، وهذا هو استخدام نحو الرسومات. كمثال على مرونة هذا،
00:04:00لنفترض أنني أردت خطا متوسطا على مخطط الأعمدة الخاص بي، كل ما أحتاج إلى فعله هو الانتقال إلى مصفوفة العلامات وإضافة
00:04:04علامة جديدة، وهي هذه المرة rule Y. كمثال سريع آخر، لنفترض أنني أردت مخططا خطيا بنقاط ومنطقة
00:04:09تحتها، حسناً يمكنني ببساطة تعريف كل ذلك كعلامات، وانظر إلى ذلك، أصبح لدي الآن رسم بياني
00:04:14لعدد المشتركين لدينا، وهو الوقت المثالي لإخبارك بالاشتراك، والبقاء على اطلاع بذكاء الاصطناعي وأخبار
00:04:18المطورين مثل هذه. إذا كنت تريد رؤية المزيد من الأمثلة على استخدام هذه العلامات لبناء
00:04:22جميع تلك الرسومات البيانية المختلفة التي عرضتها سابقاً، يمكنك الاطلاع على وثائقهم، فهي تحتوي على طن
00:04:26من الأمثلة، وهي مفصلة بشكل لا يصدق. في الواقع، لقد أخذت بضع أمثلة أخرى من وثائقهم
00:04:30هنا فقط لأريك بالضبط ما يمكن أن تفعله مخططات tan stack، نظراً لعدم توفر الوقت لاستعراض جميع
00:04:34الميزات بعمق، سيستغرق ذلك حرفياً حوالي 20 ساعة، ولكن أحد أروع الميزات هو مخطط الكرة الأرضية هذا،
00:04:38أنا معجب به حقاً، وأعتقد أنه أمر رائع للغاية أن يمكنك القيام بذلك في مكتبة عمرها أسبوع واحد.
00:04:42ثم لدينا أيضاً التفاعلات، وهي رائعة للغاية، فلدينا أداة الفرشاة (brush) هذه، يمكننا سحبها عبر
00:04:46منحنينا وتغيير نطاقها من كل جانب. ولدينا ميزة التكبير على مخططنا، حتى نتمكن من التكبير
00:04:51بشكل لطيف على هذا المخطط الخطي. ولدينا التحديد بالمفاتيح بالإضافة إلى التحديد بلوحة المفاتيح، فإذا مررت فوق أحد هذه العناصر
00:04:56وضغطت على مسافة، فسيعمل كل شيء بشكل جيد، ويمكنك أن ترى أنه يقرأ قيمة ما حددناه
00:05:00هنا في الأسفل. ثم لدينا أيضاً مؤشر التقاطع (crosshair)، لذا مع تقدمي، يمكنك رؤية أنه يطبع التاريخ الفعلي
00:05:04الذي أقف فوقه على المحور أدناه. وتحتوي أيضاً على تلميحات أدوات مع عدد كبير من خيارات الضبط،
00:05:09لذا يمكنك أن ترى في الوقت الحالي تم ضبط هذا على nearest X، لذا فإن المسافة الأفقية وحدها هي ما يُحسب لأي نقطة
00:05:14سيتم اختيارها. يمكننا أيضاً اختيار استراتيجية مثل group X، لذا سيعرض لي كل تلك
00:05:18القيم عندما أتحرك فوق أي منطقة هنا. يمكنك أيضاً جعله بحيث يمكنك تثبيت تلميح الأدوات، فإذا مررت فوق
00:05:22مخططات الأعمدة هذه هنا، يمكنك أن ترى أن تلميح الأدوات يتغير، ولكن إذا قمت بالنقر فوق أحدهما، فهذا يثبت
00:05:26تلميح الأدوات ويعرض أيضاً بعض التفاصيل الإضافية. وهنا أيضاً، يمكنك أن ترى أننا ليس لدينا تلميح أدوات، ولكن
00:05:31يتم قراءة تلك القيم مباشرة أدناه، لذا يمكنك استخراج تلك المعلومات، وهنا نقوم
00:05:35بعرض تلميح أدوات مخصص، فإذا نقرت للتثبيت، فلدينا زر إغلاق مخصص، وكل هذا
00:05:39يتم تنفيذه في React. هذه المكتبة تدعمك أيضاً إذا كنت تريد إجراء بعض الرسوم المتحركة، فإذا قمت بتغيير
00:05:43قيم هذه الأعمدة هنا، يمكنك أن ترى أنها تتحرك بسلاسة بين تلك القيم المتغيرة.
00:05:48يمكننا أيضاً النقر فوق إعادة التشغيل هنا، ويمكنك أن ترى أنه يمكننا الحصول على دخول متتابع لمخططات الأعمدة لدينا،
00:05:51وإذا مضيت قدماً وأزلت بعض الأعمدة أدناه، يمكنك أن ترى أنها تتحرك بسلاسة عند
00:05:55إضافة أو إزالة تلك الأعمدة. يمكننا حتى إجراء حركة بث مباشر، لذا مع ورود بيانات جديدة،
00:06:00فهي تقوم ببساطة بإزاحة خط المخطط بدلاً من إعادة رسمه. وقبل أن أستعرض كيفية
00:06:03تنسيق هذه الرسومات البيانية، الميزة الأخيرة التي أريد إبرازها هي ميزة التصدير. يمكنك أن ترى أن لدي أزراراً هنا
00:06:07للتحميل كـ SVG و PNG، وإذا نقرت عليها، فهذه هي النتيجة النهائية التي أحصل عليها.
00:06:12لذا دعنا نتحدث الآن عن كيفية تخصيص السمات والتنسيقات لهذه الرسومات البيانية، لأنه إذا قمت بإزالة التنسيقات من
00:06:16هذا المخطط هنا، فهذا هو الشكل الأساسي الافتراضي، لأنه خارج الصندوق ليس له تنسيقات، وهو ببساطة
00:06:21يستخدم اللون الحالي للعنصر الأمامي (foreground)، والخلفية شفافة. هناك ثلاثة مستويات
00:06:25للتنسيق في مخططات tan stack، والأول هو متغيرات CSS. هذه هي ألوانك الفئوية
00:06:30من ست خصائص مخصصة، ويمكنك تجاوز هذه القيم على أي حاوية تريدها. لذا إذا قمت بتغيير هذه
00:06:35القيم هنا، يمكنك رؤية كيف يقوم هذا المخطط بتحديث جميع ألوانه. المستوى الثاني موجود بعد ذلك على
00:06:39كتلة السمة (theme block)، وهو موجود في تعريف المخطط الفعلي. هذا مخصص لما يسمى
00:06:43بعناصر المخطط (chart furniture) بدلاً من البيانات، لذا فهو أشياء مثل النصوص، وخطوط الشبكة، والخلفية،
00:06:47وما إلى ذلك. أما المستوى الثالث فهو على العلامات نفسها، بحيث يمكنك تعيين أشياء مثل التعبئة (fill)،
00:06:51والحد (stroke)، والشفافة (opacity)، ونهاية الخط، والشرطات، ونصف قطر الزاوية، والخطوط، والمزيد. يمكن أن تكون هذه أيضاً قيم ثابتة أو
00:06:57مدفوعة بالبيانات، لذا يمكنك تلوين عمود بناءً على ما إذا كان يتجاوز هدفا معينا. يمكنك حتى بناء
00:07:01تدرجات لونية باستخدام بياناتك. وكما قلت، هذه المكتبة مرنة للغاية. وهي أيضاً خفيفة الوزن للغاية.
00:07:06في تلك الحزمة الشاملة للمقارنة المعيارية، تتضمن أشياء مثل مؤشرات التقاطع، والفرش، والتكبير، والتحديد،
00:07:10كل ذلك. يتراوح حجم الحزمة بين 36 و 43 كيلوبايت. وإذا قارنا ذلك بـ chart.js أو
00:07:16recharts، فإن chart.js تأتي بحجم 45 إلى 58 كيلوبايت، وrecharts بحجم 153 إلى 168 كيلوبايت. لذا فإن tanstack charts
00:07:24أصغر بكثير. جزء آخر رائع في هذا هو تلك الفلسفة. لقد قاموا في الواقع
00:07:28ببناء هذا لغرضين. أولاً، يجب أن يحصل الأشخاص على رسومات بيانية مصقولة من إعلان قصير،
00:07:32وثانياً، يجب أن يكون الذكاء الاصطناعي قادراً على تركيب وتفقد وتعديل الرسومات البيانية دون تعلم نموذج سلسلة
00:07:38خاص بالتطبيق. لذا فقد صمموا واجهة البرمجة هذه بحيث يمكن للوكيل كتابة الرسومات البيانية دون قراءة
00:07:42الوثائق، وبصراحة، لقد استخدمت Claude لتوصيل معظم العروض التوضيحية التي قمت بها سابقاً، وعلى الرغم من أنني تحققت من ذلك مرتين،
00:07:47وهو أمر نادر جداً هذه الأيام، إلا أنه توافق في الغالب مع كل ما كنت أتوقعه. كان علي إجراء تغييرات قليلة للغاية،
00:07:52وهو أمر مفاجئ للغاية بالنسبة لمكتبة جديدة تماماً. إذن هذه هي tanstack charts. إنها
00:07:57مكتبة الرسوم البيانية المفضلة الجديدة لدي، وهي تتحسن بسرعة. أخبرني برأيك في التعليقات
00:08:01في الأسفل. وبينما أنت هناك، اشترك. وكما هو دائمًا، أراكم في الفيديو القادم.