नया v3.13 रिलीज़ आज आया! यह रिलीज़ 4 नई सुविधाओं, 2 बग फिक्स और टूलींग सुधारों के साथ आता है।

विस्तृत रिलीज़ जानकारी के लिए, कृपया रिलीज़ नोट देखें:
https://github.com/naver/billboard.js/releases/tag/3.13.0

नया क्या है?

क्षेत्र-चरण-सीमा चार्ट

श्रेणी प्रकार बेसलाइन मान से "श्रेणीबद्ध मान" की कल्पना करने में उपयोगी होते हैं। इस रिलीज़ से विविधता को नया "चरण" प्रकार प्रदान किया जाएगा।

डेमो: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart

import bb, {areaStepRange} from "billboard";

bb.generate({
  data: {
    columns: [
     ["data1", [70, 40, 30],
     [155, 130, 115],
     [160, 135, 120],
     [200, 120, 110],
     [95, 50, 40],
     [199, 160, 125]
    ]],
    type: areaStepRange()
  }
});

क्षेत्रों में सुधार हो रहा है

डैश्ड लाइन के साथ कुछ रेंज प्रस्तुत करने के लिए, data.regions विकल्प का उपयोग किया जाता है। लेकिन धराशायी लाइनों को प्रस्तुत करने का तरीका, कई पथ कमांड को संयोजित करके किया जाता है क्योंकि धराशायी लाइनों की आवश्यकता होती है।

उपर्युक्त उदाहरण स्क्रीनशॉट से, धराशायी रेखाएं खींचने के लिए एकाधिक पथ कमांड की आवश्यकता होती है।

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

इस दृष्टिकोण के कारण कुछ रेंडरिंग समस्याएं उत्पन्न हुईं (#1, #2) और हमने इसे मूल तरीके से सुधारने का प्रयास किया।

पथ कमांड के साथ धराशायी रेखाएं खींचने के बजाय, हम स्ट्रोक-डैशरे शैली संपत्ति का उपयोग करके प्रस्तुत करना शुरू कर दिया।

• पहले: पथ कमांड/बाद में: स्ट्रोक-डैशरे

डेमो: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

ज़ूम इंटरैक्शन पर, एनीमेशन फ़्रेम प्रदर्शन को 84ms से बेहतर बनाया गया है → 5ms!

3.12 में अपडेट करने पर बिना किसी कोड परिवर्तन के लाभ मिलेगा।

legend.format: मूल डेटा आईडी प्रदान करें
जब data.names विकल्प निर्दिष्ट किया जाता है, तो यह प्रदर्शन डेटा नामों को मूल नामों (आईडी) से भिन्न बना देगा।

{
  data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
    columns: [
       ["data1", 71.4],
       ["data2", 10]
    ]
  }
}

इस मामले में, Legend.format कॉलबैक, मूल आईडी के बजाय data.names प्रतिस्थापित मान प्राप्त करेगा।

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id) {
       // id will be 'Detailed Name' and 'Name Detailed'
    }
}

इस रिलीज़ से बदले गए नामों के साथ मूल 'आईडी' मान प्रदान किया जाएगा।

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id, dataId) {
        // id will be 'Detailed Name' and 'Name Detailed'
        // dataId will be 'data1' and 'data2'
    }
}

डेमो: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

बार.चौड़ाई कॉलबैक

पहले, bar.width पूर्ण मान या अनुपात मान निर्दिष्ट करना संभव था। पूर्ण रूप से चार्ट का आकार गतिशील रूप से प्रतिबिंबित नहीं हो सकता है और अनुपात कुछ सीमा के साथ प्रतिबिंबित हो सकता है।

जिस तरह से अनुपात की गणना की जाती है वह नीचे दिए गए समीकरण पर आधारित है।

x Axis tick Interval * ratio

उदाहरण के लिए, यदि चार्ट की चौड़ाई 500px है, 5 x एक्सिस टिक गिनती के साथ, अंतराल लगभग 100px होगा।

इस मामले में, यदि bar.ratio=0.5 निर्दिष्ट है, तो समीकरण इस प्रकार होगा, और बार की चौड़ाई 49.9px होगी।

100(exact value is 99.8) * 0.5 = 49.9

बार की चौड़ाई मान को समायोजित करने पर अधिक नियंत्रण देने के लिए, आसान पैरामीटर के साथ कॉलबैक फ़ंक्शन को स्वीकार करने के लिए bar.width विकल्प को बढ़ाया जाएगा।

डेमो: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: {
    width: function(width, targetsNum, maxDataCount) {
         // - width: chart area width
         // - targetsNum: number of targets
         // - maxDataCount: maximum data count among targets
   }
}

एक और बात, परीक्षण ढांचे पर अद्यतन

हमने अपने परीक्षण ढांचे के लिए कर्मा मोचा को अपनाया और बिलबोर्ड.जेएस को स्थिर बनाए रखना बहुत अच्छा अनुभव था।

अफसोस की बात है कि, कर्मा ने बहिष्कार की घोषणा की और हमें लाइब्रेरी को स्थिर रखने और आधुनिक पारिस्थितिकी तंत्र का पालन करने के लिए कुछ अन्य आधुनिक परीक्षण ढांचे को स्थानांतरित करने की आवश्यकता है।

कुछ शोध के बाद, हमने विटेस्ट में जाने का फैसला किया। हमने इस रिलीज़ के भीतर सफलतापूर्वक माइग्रेट किया और स्थानीय परीक्षण में 63% तक सुधार किया गया है!

अधिक जानकारी प्राप्त करें, चेकआउट करें https://github.com/naver/billboard.js/pull/3866

समापन

इस रिलीज़ के लिए हमारे पास बस इतना ही है और बने रहने के लिए धन्यवाद!