스크립트
00:00:00TanStack ने फिर से कमाल कर दिया है, इस बार TanStack Charts के साथ JavaScript में चार्ट्स की समस्या को हल किया है।
00:00:04यह ReCharts जैसी लाइब्रेरी की तुलना में छोटे बंडल साइज़ का वादा करता है, इसमें SVG और
00:00:08कैनवास आउटपुट, एनिमेशन, टूलटिप्स, इंटरैक्शन हैं, और अधिकांश TanStack लाइब्रेरीज़ की तरह, इसका
00:00:13फ़्रेमवर्क एग्नोस्टिक कोर, टाइप सेफ़्टी और एक बेहतरीन डेवलपर अनुभव है। और इतना नया होने के बावजूद,
00:00:18आप इससे पहले से ही कई प्रकार के चार्ट बना सकते हैं, एक बुनियादी लाइन चार्ट से लेकर सब कुछ
00:00:22या बार चार्ट, सैंके आरेख, ट्री मैप, हीट मैप, रडार चार्ट जैसे अधिक जटिल चार्ट तक,
00:00:27डोनट चार्ट, गेज और यहां तक कि वाकई शानदार विश्व मानचित्र भी। यह शायद वह सब कुछ बना सकता है जिसकी आपको आवश्यकता है
00:00:32अभी। अब पहली बात जो मैं बताना चाहता हूँ वह यह है कि TanStack Charts वास्तव में चार्ट्स के प्रति कैसे दृष्टिकोण रखता है,
00:00:41क्योंकि यह R में ggplot2 जैसी लाइब्रेरी के समान है, यह ग्राफ़िक्स के व्याकरण का उपयोग करता है। यह
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डिफाइन चार्ट फ़ंक्शन का उपयोग करके परिभाषा, और इसके अंदर हम चिह्नों से शुरू करते हैं। आप सोच सकते हैं
00:01:28चिह्नों को उस सामग्री के रूप में जो वास्तव में खींची जाती है, जैसे आपकी लाइनें, बिंदु या बार। मैंने वास्तव में एक डेमो साइट बनाई है
00:01:32TanStack चार्ट में उपलब्ध सभी चिह्नों का उपयोग करने का प्रयास किया जा रहा है, और मुझे लगता है कि उनमें से लगभग 55 हैं,
00:01:37इसलिए यह उन चार्टों का एक उचित अच्छा उदाहरण होना चाहिए जिन्हें आप TanStack चार्ट में बना सकते हैं,
00:01:40और उनमें से बहुत सारे हैं। आपको यहाँ मेरे साथ बने रहना होगा,
00:01:43लेकिन आप देख सकते हैं कि हमारे पास हमारे सामान्य बार चार्ट हैं, चाहे आप उसे क्षैतिज या ऊर्ध्वाधर चाहते हों,
00:01:47लाइनों और क्षेत्रों जैसी चीज़ों के साथ भी यही है। फिर हमारे पास हमारे डॉट चार्ट भी हैं,
00:01:51हमारे पास एक नियम है जो चार्ट में जाने वाली बिंदीदार रेखा है, जहाँ आप उसे लंबवत रख सकते हैं,
00:01:54आप एक टिक चार्ट बना सकते हैं, फिर से x या y, आपके पास एक आयत है, आपके पास एक सेल है, आपके पास बैंड हैं,
00:01:59आपके पास तीर हैं, आपके पास वेक्टर है, इसलिए आप एक विंड फ़ील्ड बना सकते हैं, आपके पास लिंकिंग है, आपके पास षटकोण है,
00:02:04आपके पास टेक्स्ट है, इसलिए चार्ट के भीतर उन्हें जहाँ चाहें वहाँ रेंडर करने के लिए चिह्न टेक्स्ट हो सकते हैं। हमारे पास फ़्रेम हैं,
00:02:08हमारे पास लाइनें हैं, हमारे पास अंतर हैं, हमारे पास रैखिक प्रतिगमन चार्ट हैं, हमारे पास बक्से हैं, हमारे पास वायलिन हैं
00:02:13चार्ट, हमारे पास वाफ़ल चार्ट हैं। आप इसमें कंटूर मैप पहले से ही बना सकते हैं। वैसे,
00:02:17यह लाइब्रेरी एक हफ़्ते से बाहर है, यह पागलपन है, इसमें इतनी सारी सुविधाएँ हैं, और सूची अभी भी जारी है।
00:02:22हम यह चार्ट बना सकते हैं, चाहे वह कुछ भी हो, मुझे यह भी नहीं पता कि यह किसके लिए है।
00:02:25हमारे पास एक ट्री मैप चार्ट है, हमारे पास एक सनबर्स्ट चार्ट है, हमारे पास सैंके आरेख हैं, हमारे पास क्रॉसहेयर फ़ोकस है
00:02:29गाइड, हमारे पास आपके पाई चार्ट या आपके डोनट या आपके रडार जैसे हमारे रेडियल चार्ट हैं, और फिर
00:02:33अंत में यहाँ नीचे, यदि आप अपने विश्व मानचित्र चार्ट चाहते हैं तो हमारे पास जियोशेप भी है। जैसा कि मैंने कहा, बस बहुत सारे हैं
00:02:38इनमें से कई को अपनी ज़रूरत का लगभग कोई भी चार्ट बनाने के लिए जोड़ा जा सकता है। हालाँकि, हमारे बार चार्ट डेमो पर वापस आते हैं,
00:02:42केवल एक ही निशान की मुझे आवश्यकता है वह है बार y, और इसके अंदर, आप अपना डेटा पास करते हैं,
00:02:47वस्तुओं की यह सरणी। फिर उसके बाद, आप परिभाषित करते हैं कि x कुंजी क्या होनी चाहिए, और y क्या होना चाहिए
00:02:51कुंजी, और यह बहुत बढ़िया है क्योंकि इसका मतलब है कि आपको अपने डेटा को किसी विशिष्ट संरचना के अनुरूप बनाने की आवश्यकता नहीं है,
00:02:56आप इसे यहाँ आसानी से परिभाषित कर सकते हैं। यह टाइप सेफ़ भी है, इसलिए इसका मतलब है कि अगर मैं इनमें से किसी एक कुंजी की वर्तनी गलत लिखता हूँ,
00:03:00यह मुझे तुरंत बता देगा, और यह वह प्रकार की सुरक्षा है जो हमें TanStack से पसंद आने लगी है।
00:03:04अपने मनचाहे निशान परिभाषित करने के बाद, हमारे पास हमारे x और y अक्ष होते हैं। x अक्ष के लिए,
00:03:08यह बेहद आसान है। मैंने कहा है कि मुझे स्पेस बैंड चाहिए, जो श्रेणियों के लिए है, इसलिए हमारे अक्षर प्राप्त होते हैं
00:03:12समान रूप से दूर-दूर, और उनके बीच कुछ पैडिंग भी है। हमारे y अक्ष के लिए, मैं स्केल का उपयोग कर रहा हूँ
00:03:17रैखिक, जो संख्याओं के लिए है, और मेरे पास अच्छी सेटिंग भी सही पर सेट है, जिसका अर्थ है गोल
00:03:21अक्ष को उच्चतम मान पर रोकने के बजाय एक उचित संख्या तक गोल कर देता है। यदि मैं इसे असत्य (false) कर देता हूँ,
00:03:26आप देख सकते हैं कि यहाँ अक्ष का शीर्ष वहीं समाप्त होता है जहाँ सबसे ऊंचे बार का शीर्ष है। यहाँ,
00:03:30मैंने अक्ष को एक लेबल और एक प्रारूप भी दिया है, ताकि हम इन संख्याओं को प्रतिशत के रूप में प्रारूपित कर सकें
00:03:34दशमलव बिंदुओं के बजाय। अब वह सारी परिभाषा फ़्रेमवर्क एग्नोस्टिक हिस्सा है, लेकिन वास्तव में
00:03:39React में इसे रेंडर करने के लिए, हमें बस चार्ट घटक को आयात करना है, इसे हमारी परिभाषा पास करनी है,
00:03:43इसे एक ऊँचाई दें, और फिर एक लेबल दें, और अपना चार्ट बनाने के लिए हमें बस इतना ही चाहिए। लेकिन वह बात जो मैं चाहता हूँ
00:03:47यह बहुत स्पष्ट करना है कि हमने यहाँ बार चार्ट का उपयोग नहीं किया है। हमने अपने कोड में परिभाषित किया है कि हम कहाँ चाहते हैं
00:03:51हमारे निशान रेंडर करें, और ऐसा होता है कि हमारा अंतिम परिणाम एक बार चार्ट है, लेकिन यह बहुत सूक्ष्म है
00:03:55भेद, लेकिन यही ग्राफ़िक्स के व्याकरण का उपयोग है। इसके लचीलेपन के एक उदाहरण के रूप में,
00:04:00मान लीजिए कि मुझे अपने बार चार्ट पर औसत लाइन चाहिए, मुझे बस मार्क्स सरणी में जाना है और एक जोड़ना है
00:04:04नया चिह्न, इस बार नियम Y होना। एक अन्य त्वरित उदाहरण के लिए, मान लीजिए कि मैं डॉट्स के साथ एक लाइन चार्ट चाहता हूँ और एक
00:04:09नीचे क्षेत्र, ठीक है मैं उन सभी को चिह्नों के रूप में परिभाषित कर सकता हूँ, और इसे देखें, अब मेरे पास इसका एक ग्राफ़ है
00:04:14हमारी ग्राहक संख्या, जो आपको सदस्यता लेने के लिए कहने का सही समय है, AI के साथ अपडेट रहें और
00:04:18इस तरह की डेवलपर खबरें। यदि आप उन सभी विभिन्न चार्टों को बनाने के लिए इन चिह्नों के उपयोग के और भी अधिक उदाहरण देखना चाहते हैं जो मैंने पहले दिखाए थे,
00:04:22आप उनके दस्तावेज़ देख सकते हैं, उनके पास ढेर सारे उदाहरण हैं, और यह अविश्वसनीय रूप से विस्तृत है। वास्तव में, मैंने कुछ और उदाहरण लिए
00:04:26उनके दस्तावेज़ों में से यहाँ सिर्फ आपको यह दिखाने के लिए कि टेन स्टैक चार्ट क्या कर सकते हैं, क्योंकि मेरे पास सभी का समय नहीं है
00:04:30सुविधाओं की गहराई से, इसमें शाब्दिक रूप से लगभग 20 घंटे लगेंगे, लेकिन सबसे अच्छे में से एक यह ग्लोब है
00:04:34चार्ट, मुझे यह सचमुच बहुत पसंद है, मुझे लगता है कि यह बहुत अच्छा है कि आप इसे एक ऐसे पुस्तकालय में कर सकते हैं जो एक हफ्ता पुराना है।
00:04:38फिर हमारे पास इंटरैक्शन भी हैं, जो बहुत बढ़िया है, इसलिए हमारे पास यह ब्रश है, जिसे हम इस पर खींच सकते हैं
00:04:42हमारा प्लॉट और प्रत्येक पक्ष से इसकी सीमा भी बदलते हैं। हमारे चार्ट पर ज़ूम इन करना है, ताकि हम ज़ूम कर सकें
00:04:46इस लाइन चार्ट पर अच्छी तरह से। हमारे पास की गई चयन प्लस कीबोर्ड चयन है, इसलिए यदि मैं किसी एक पर होवर करता हूँ
00:04:51इस लाइन चार्ट को आसानी से ज़ूम किया जा सकता है। हमारे पास की-बेस्ड सिलेक्शन और कीबोर्ड सिलेक्शन दोनों हैं, इसलिए यदि मैं इनमें से किसी पर होवर करके
00:04:56नीचे। फिर हमारे पास एक क्रॉसहेयर भी है, इसलिए जैसे-जैसे मैं आगे बढ़ता हूँ, आप देख सकते हैं कि यह प्रिंट कर रहा है कि वास्तविक क्या है
00:05:00तारीख यह है कि मैं नीचे दिए गए अक्ष पर होवर कर रहा हूँ। इसमें बहुत सारे कॉन्फ़िगरेशन के साथ टूलटिप्स भी हैं,
00:05:04तो आप देख सकते हैं कि इस समय यह निकटतम X पर सेट है, इसलिए केवल क्षैतिज दूरी ही मायने रखती है कि कौन सा बिंदु है
00:05:09यह चुनने जा रहा है। हम समूह X जैसी रणनीति भी चुन सकते हैं, इसलिए यह मुझे वे सभी दिखाएगा
00:05:14मान जब मैं यहाँ किसी भी क्षेत्र पर होवर करता हूँ। आप इसे ऐसा भी बना सकते हैं जिससे आप टूल टिप को पिन कर सकें, इसलिए यदि मैं होवर करता हूँ
00:05:18यहाँ इन बार चार्ट पर, आप देख सकते हैं कि टूलटिप बदल रहा है, लेकिन अगर मैं किसी एक पर क्लिक करता हूँ, तो यह पिन हो जाता है
00:05:22टूलटिप और कुछ अतिरिक्त विवरण भी दिखाता है। यहाँ पर, आप यह भी देख सकते हैं कि हमारे पास टूलटिप नहीं है, लेकिन
00:05:26यह उन मानों को सीधे नीचे पढ़ रहा है, ताकि आप उस जानकारी को बाहर निकाल सकें, और यहाँ हम हैं
00:05:31एक कस्टम टूलटिप में रेंडर करना, इसलिए यदि मैं पिन करने के लिए क्लिक करता हूँ, तो हमारे पास एक कस्टम क्लोज बटन है, और यह सब है
00:05:35React में किया जाता है। यदि आप कुछ एनिमेशन करना चाहते हैं तो इस लाइब्रेरी में आपको कवर भी मिल जाएगा, इसलिए यदि मैं बदलता हूँ
00:05:39यहाँ इन बार के मान, आप देख सकते हैं कि यह उन बदले हुए मानों के बीच अच्छी तरह से एनिमेट हो रहा है।
00:05:43हम यहाँ रीप्ले पर भी क्लिक कर सकते हैं, और आप देख सकते हैं कि हमारे बार चार्ट का एक क्रमिक प्रवेश हो सकता है,
00:05:48और यदि मैं आगे बढ़ता हूँ और नीचे कुछ बार हटा देता हूँ, तो आप देख सकते हैं कि यह अच्छी तरह से एनिमेट होता है
00:05:51उन बार को जोड़ना या हटाना। हम एक स्ट्रीमिंग एनिमेशन भी कर सकते हैं, इसलिए जैसे-जैसे नया डेटा आता है,
00:05:55यह केवल उस लाइन बार को फिर से बनाने के बजाय स्थानांतरित कर रहा है। और इससे पहले कि मैं आगे बढ़ूँ
00:06:00इन चार्टों को कैसे स्टाइल किया जाता है, आखिरी विशेषता जिसे मैं दिखाना चाहता था वह निर्यात सुविधा थी। आप देख सकते हैं मैं हूँ
00:06:03SVG और PNG के रूप में डाउनलोड करने के लिए यहाँ बटन मिले हैं, और यदि मैं इन पर क्लिक करता हूँ, तो मुझे यह अंतिम परिणाम मिलता है
00:06:07वापस। तो अब बात करते हैं कि हम इन चार्टों को कैसे थीम और स्टाइल करते हैं, क्योंकि अगर मैं इससे स्टाइल हटा दूं
00:06:12यहाँ चार्ट, यह डिफ़ॉल्ट आधार रूप है, क्योंकि बॉक्स से बाहर इसमें कोई स्टाइल नहीं है, यह बस है
00:06:16अग्रभूमि के लिए वर्तमान रंग का उपयोग करता है, और पृष्ठभूमि पारदर्शी है। तीन स्तर हैं
00:06:21टैन स्टैक चार्ट में स्टाइलिंग के लिए, और पहला आपका सीएसएस चर है। ये आपके स्पष्टवादी रंग हैं
00:06:25छह कस्टम गुणों से, और आप अपनी पसंद के किसी भी कंटेनर पर इन्हें ओवरराइड कर सकते हैं। तो अगर मैं इन्हें बदल दूँ
00:06:30यहाँ मान, आप देख सकते हैं कि यह चार्ट अपने सभी रंगों को कैसे अपडेट करता है। दूसरा स्तर तब चालू होता है
00:06:35थीम ब्लॉक, जो वास्तविक चार्ट परिभाषा में है। यह चार्ट कहे जाने वाले के लिए है
00:06:39डेटा के बजाय फ़र्नीचर, इसलिए यह आपका टेक्स्ट, आपकी ग्रिड लाइनें, आपकी पृष्ठभूमि जैसी चीज़ें हैं,
00:06:43और इसी तरह। फिर तीसरा स्तर खुद निशानों पर है, इसलिए आप फिल जैसी चीजें सेट कर सकते हैं,
00:06:47स्ट्रोक, अपारदर्शिता, लाइन कैप, डैश, कॉर्नर रेडियस, फोंट, और बहुत कुछ। ये निश्चित मूल्य भी हो सकते हैं या
00:06:51डेटा-संचालित, ताकि आप किसी निश्चित लक्ष्य से अधिक होने पर बार को रंग सकें। आप बाहर भी निर्माण कर सकते हैं
00:06:57अपने डेटा का उपयोग करके ग्रेडिएंट। जैसा कि मैंने कहा, यह लाइब्रेरी बेहद लचीली है। यह भी सुपर लाइटवेट है।
00:07:01उस बेंचमार्क पूर्ण सूट में क्रॉसहेयर, ब्रशिंग, ज़ूमिंग, चयन जैसी चीजें शामिल हैं,
00:07:06यह सब। बंडल का आकार 36 और 43 किलोबाइट के बीच है। यदि हम उसकी तुलना chart.js से करें या
00:07:10रीचार्ट्स, चार्ट.जेएस 45 से 58 किलोबाइट में आता है, और रीचार्ट्स 153 से 168 किलोबाइट में आता है। तो टैनस्टैक
00:07:16चार्ट काफी छोटे हैं। इसके बारे में एक और भयानक हिस्सा वह दर्शन है। वे वास्तव में हैं
00:07:24इसे दो चीजों के लिए बनाया गया है। सबसे पहले, लोगों को एक छोटी घोषणा से पॉलिश किए गए चार्ट मिलने चाहिए,
00:07:28इसे दो मुख्य बातों को ध्यान में रखकर बनाया गया है। पहला, लोग कम घोषणाओं से ही बेहतरीन चार्ट प्राप्त कर सकें,
00:07:32और दूसरा, AI किसी खास एप्लिकेशन के मॉडल को सीखे बिना ही चार्ट बना सके, देख सके और उनमें बदलाव कर सके।
00:07:38इसलिए उन्होंने इस API को ऐसे डिज़ाइन किया है कि कोई एजेंट दस्तावेज़ पढ़े बिना भी चार्ट कोड लिख सके,
00:07:42और सच कहूं तो, मैंने पहले जो डेमो बनाए थे उनमें से ज़्यादातर के लिए क्लॉड (Claude) का इस्तेमाल किया, और हालांकि मैंने इसकी दोबारा जाँच की,
00:07:47जो आजकल काफी दुर्लभ है, यह काफ़ी हद तक मेरी उम्मीद के मुताबिक ही था। मुझे बहुत कम
00:07:52बदलाव करने पड़े, जो कि एक बिल्कुल नई लाइब्रेरी के लिए काफी हैरान करने वाला है। तो यह टैनस्टैक चार्ट्स (TanStack Charts) है। यह मेरी
00:07:57नई पसंदीदा चार्टिंग लाइब्रेरी है, और इसमें तेज़ी से सुधार हो रहा है। नीचे कमेंट्स में मुझे बताएं कि आप क्या सोचते हैं।
00:08:01नीचे। जब आप वहाँ हों, तो सदस्यता लें। हमेशा की तरह, अगले वाले में मिलते हैं।