MathML या लेटेक्स - हमने MathJax का उपयोग करके पेरोल की गणना में बदलते वेतन को कैसे लागू किया

यह आलेख उन वेब डेवलपर्स के लिए उपयोगी होगा, जो सामान्य विकास के लिए अन्य आईटी के लिए, एक ब्राउज़र में गणितीय सूत्र प्रदर्शित करने के बारे में सोच रहे हैं।

हमारी कंपनी ने लंबे समय से "रेडमाइन" के आधार पर कर्मचारी प्रोत्साहन (KPI) की एक प्रणाली लागू की है, जो वेतन अनुपात की गणना के कार्यों को जोड़ती है। मैं आपको उसके बारे में थोड़ा बताऊंगा

प्रत्येक पद पर किसी न किसी तरह का वेतन होता है, स्थिति को संभालने वाला कर्मचारी अच्छी तरह से काम कर सकता है और अपने वेतन को एक प्रदर्शन गुणांक से गुणा कर सकता है, जिसकी गणना उसकी स्थिति के लिए कॉन्फ़िगर किए गए कुछ मुट्ठी भर संकेतकों के आधार पर की जाती है। प्रदर्शन का गुणांक एक से अधिक या कम हो सकता है। इस प्रकार, मॉडलिंग संकेतक, एक निश्चित दिशा में काम करने के लिए कुछ पदों के कर्मचारियों को उत्तेजित करना संभव है।

यह सब कुछ इस तरह लग सकता है:





समय के साथ, हम इस निष्कर्ष पर पहुंचे कि विभिन्न संकेतकों के आधार पर कुछ पदों का वेतन भी अलग-अलग होना चाहिए। उदाहरण के लिए, फार्मेसी प्रबंधकों के साथ, आधार वेतन फार्मेसी के नकदी प्रवाह पर निर्भर होना चाहिए। इसके अलावा, यह निर्भरता अलग हो सकती है!

एक महत्वपूर्ण विशेषता जिसे हमेशा KPI को लागू करने पर विचार किया जाना चाहिए, वह है पारदर्शिता! एक कर्मचारी को हमेशा पता होना चाहिए कि उसे सिर्फ इतना वेतन क्यों मिला, जहां उसने काम नहीं किया, संकेतक को इस तरह से गणना क्यों की गई थी।

इसलिए, आधार वेतन की गणना के अलावा, यह प्रदर्शित करना आवश्यक हो गया कि वेतन की गणना कैसे की गई।

लेटेक्स और मैथएमएल

वर्तमान में एक ब्राउज़र में सूत्र प्रदर्शित करने के लिए दो मुख्य मानक हैं: लेटेक्स और मैथएमएल

मैंने दर्द से चुना कि किस तकनीक का इस्तेमाल करना है। परिणामस्वरूप, मैंने कई निष्कर्ष निकाले। मुझे उम्मीद है कि वे समुदाय के लिए उपयोगी होंगे।

रिकॉर्ड की संक्षिप्तता में लेटेक्स का मुख्य लाभ। अन्यथा, मेरी राय में , यह प्रारूप MathML से नीच है।

उदाहरण के लिए, एक सूत्र प्रविष्टि लेटेक्स में, ऐसा दिखता है:

\frac{(a+b )}{4} 

MathML में, बहुत अधिक बोझिल लिखा जाएगा:

 <math xmlns="http://www.w3.org/1998/Math/MathML"> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> <mrow> <mn>4</mn> </mrow> </mfrac> </math> 

MathML शुद्ध XML है, यहाँ से यदि आवश्यक हो तो अपनी आवश्यकताओं के लिए पार्स करना आसान है।

MathML एक अधिक समझने वाला और शीघ्रता से तैयार किया गया प्रारूप है। हालांकि यह राय व्यक्तिगत और विवादास्पद है।

MathML को Chrome को छोड़कर अधिकांश आधुनिक ब्राउज़र द्वारा समर्थित किया गया है, जिसने MathJax लाइब्रेरी का हवाला देते हुए इस प्रारूप का समर्थन करने से इनकार कर दिया है। इसका मतलब है कि फ़ायरफ़ॉक्स में, उदाहरण के लिए, आपको अतिरिक्त पुस्तकालयों को कनेक्ट करने की आवश्यकता नहीं है, ब्राउज़र पार्स करता है और तीसरे पक्ष के पुस्तकालयों की मदद के बिना ऊपर दिखाए गए सूत्र को प्रदर्शित करता है।

"MathML" आपको उपयोगी अतिरिक्त के एक समूह के साथ सूत्र को पूरक करने की अनुमति देता है। उदाहरण के लिए, सूत्र के कुछ मूल्यों के लिए टूलटिप प्राप्त करना हमारे लिए महत्वपूर्ण था ताकि कर्मचारी यह देख सके कि यह मूल्य कहाँ से आया है। इसके लिए मैथ्मेल में एक मैगनेशन टैग है:

 <maction actiontype="tooltip"> <mn mathsize="big">17 745 400</mn> <ms></ms> </maction> 

परिणामस्वरूप, जब आप किसी मूल्य पर होवर करते हैं, तो उपयोगकर्ता को एक टूलटिप प्रदर्शित किया जाएगा:



मजेदार, लेकिन सबसे समझ में आने वाला प्रारूप प्रलेखन मोज़िला प्रलेखन था। मैं इसे उन लोगों के लिए सुझाता हूं जो इस प्रारूप में चुन रहे हैं: developer.mozilla.org/en-US/docs/Web/MathML/Element

MathJax

MathML अच्छा है, लेकिन दुर्भाग्य से यह सभी ब्राउज़रों द्वारा समर्थित नहीं है। एक MathJax पुस्तकालय है जो आपको HTML, SVG, आदि में MathML को पार्स करने की अनुमति देता है। वह, वैसे, मुझे लेटेक्स ने खारिज कर दिया।

पुस्तकालय सूत्रों को पार्स करने का एक अच्छा काम करता है, लेकिन इसमें खामियां हैं।

मेरी राय में, सबसे बड़ा, इसकी मात्रा संपीड़ित रूप में 32.9 एमबी है। बेशक, सूत्र प्रस्तुत करते समय क्लाइंट को सब कुछ नहीं दिया जाएगा, लेकिन अपने आप में इस तरह की जेएस-लाइब्रेरी वॉल्यूम कष्टप्रद है। उदाहरण के लिए, हमें इसे बाहरी ग्राहकों को वितरित करने की आवश्यकता है।

शुरू में पूरे पुस्तकालय से जुड़े और कार्य का एहसास होने के बाद, मैंने बेतरतीब ढंग से फ़ोल्डर्स का एक गुच्छा फेंक दिया। "प्रहार" विधि का उपयोग करना, यह जांचना कि कुछ भी नहीं टूट गया है। आकार घटकर 16 एमबी हो गया। मूल रूप से फोंट और अतिरिक्त आउटपुट प्रारूपों (उदाहरण के लिए, एसवीजी) के साथ फ़ोल्डर फेंक दिया।

मुझे लाइब्रेरी का वॉल्यूम कम करने के लिए सक्षम दस्तावेज नहीं मिले।

पुस्तकालय मास्टर करने के लिए काफी मुश्किल है। मैंने लंबे समय तक चारों ओर पोक किया, इसमें अनावश्यक चिप्स को बंद कर दिया। मैं कुछ उपयोगी विन्यास सेटिंग्स की सूची दूंगा जो उपयोगी साबित हुई हैं:

सबसे पहले, प्रत्येक सूत्र एक अलग विंडो में खुलता है, जिसे अतुल्यकालिक रूप से (AJAX के माध्यम से) लोड किया जाता है। इसलिए, जब उपयोगकर्ता लिंक पर क्लिक नहीं करता है तो पुस्तकालय को लोड करने की कोई आवश्यकता नहीं है। यह कुछ इस तरह दिखता है:



पुस्तकालय डायनेमिक लोडिंग का समर्थन करता है (यहां docs.mathjax.org/en/latest/dynamic.html इस बारे में विस्तार से लिखा गया है)। सापेक्ष रूप से, आपको गतिशील रूप से लाइब्रेरी घोषणा को "हेड" टैग में जोड़ने की आवश्यकता है और केवल यह करें कि लाइब्रेरी पहले से कनेक्ट नहीं हुई है:

 if(typeof $('body').data('mathjax_loaded') == 'undefined' ) { //    head $('body').data('mathjax_loaded', 'true') } else { MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } 

लायब्रेरी को गतिशील रूप से कनेक्ट करते समय, सूत्र रेंडर करने में समस्याएं थीं। सूत्र केवल उस स्थिति में प्रदान किया गया था जब पुस्तकालयों को पहले लोड किया गया था, एक दूसरे क्लिक के साथ और खिड़की खोलने के लिए, सूत्र का प्रतिपादन नहीं किया गया था। पृष्ठ पर सूत्रों के प्रतिपादन के लिए मजबूर निर्माण ने मदद की:

 MathJax.Hub.Queue(["Typeset",MathJax.Hub]); 

सूत्र तुरंत रेंडर नहीं करता है, इसलिए उपयोगकर्ता को प्रीलोडर दिखाने के लिए बेहतर है, इसके लिए एक निर्माण है:

 mml2jax: {preview: [["img", {src: '/plugin_assets/kpi/images/loader.gif'}]]} 

कभी-कभी इसमें ज़ूम करना उपयोगी होता है:

 HTML-CSS: { scale: 140 } 

यदि फॉर्मूला रेंडर करने के बाद आपको कुछ अतिरिक्त जावास्क्रिप्ट चलाने की आवश्यकता है, तो आप निर्माण का उपयोग कर सकते हैं:

 MathJax.Hub.Queue(function () { alert('Test'); }); 

अतिरिक्त मेनू को अक्षम करने के लिए, जिसे सही माउस क्लिक के साथ कहा जा सकता है, और ज़ूम सूत्र को अक्षम करें:

 showMathMenu: false, menuSettings: { zoom: false } 

दो सूत्र, एक नहीं

हाल तक तक, गणितीय सूत्र को पार्स करने के विचार ने मुझे नहीं छोड़ा, जिसके द्वारा MathML प्रारूप में गणना वास्तव में की जाएगी। अर्थात्, डेटाबेस में मैं फॉर्म का एक सूत्र बचाना चाहता था:

 31000.00 + (0.015*{"pattern": "imported_value", "id": "51"}/{"pattern": "imported_value", "id": "40"}) 

और मूल फॉर्मूले से मैथिलम निर्माण प्राप्त करें:

 <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mn> {"pattern": "result"} </mn> <mo>=</mo> <maction actiontype="tooltip"> <mn>31 000</mn> <ms> </ms> </maction> <mo>+</mo> <mfrac> <mrow> <mn>0.015</mn> <mo>×</mo> <maction actiontype="tooltip"> <mn mathsize="big">{"pattern": "imported_value", "id": "51"}</mn> <ms></ms> </maction> </mrow> <mrow> <maction actiontype="tooltip"> <mn mathsize="big">{"pattern": "imported_value", "id": "40"}</mn> <ms> </ms> </maction> </mrow> </mfrac> </mrow> </math> 

परिणामस्वरूप, उन्होंने निष्कर्ष निकाला कि यह असंभव रूप से कठिन था और हमेशा उचित नहीं था। एक गणित के फार्मूले में उन तत्वों का एक समूह हो सकता है जिन्हें एक नियमित सूत्र में संग्रहीत नहीं किया जा सकता है, उदाहरण के लिए, टूलटिप्स, फ़ॉन्ट रंग हाइलाइटिंग, आदि। वर्तमान में, हम डेटाबेस में दो फ़ार्मुलों को सहेजते हैं, एक सीधे मूल्य की गणना के लिए, और दूसरा उपयोगकर्ता के लिए गणना प्रणाली प्रदर्शित करने के लिए।

मैं कठिनाइयों का सामना करने के बाद लेख लिखने की कोशिश करता हूं, मुझे अपनी समस्याओं का समझने योग्य और त्वरित समाधान नहीं मिला। मुझे लगता है कि मेरा विशिष्ट लेख किसी के लिए उपयोगी होगा।