Custom মডিউল তৈরি করা এবং কনফিগার করা

Highcharts একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা আপনাকে কাস্টম চার্ট তৈরি করতে সহায়তা করে। GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর কাস্টম মডিউল তৈরি এবং কনফিগার করা সম্ভব, যাতে আপনি Java কোডের মাধ্যমে JavaScript ফ্রন্টএন্ড চার্ট পরিচালনা করতে পারেন। GWT এর মাধ্যমে, আপনি JavaScript লাইব্রেরির কার্যকারিতা সম্পূর্ণ Java-ভিত্তিক অ্যাপ্লিকেশন থেকে কাস্টমাইজ করতে পারেন।

এই সেকশনে আমরা আলোচনা করবো কিভাবে GWT-এ Custom Highcharts Module তৈরি করা যায় এবং কিভাবে সেটি কনফিগার করা যায়।

১. GWT Highcharts মডিউল তৈরি করা

GWT ব্যবহার করে একটি Highcharts মডিউল তৈরি করার জন্য আপনাকে JavaScript Native Interface (JSNI) ব্যবহার করতে হবে, যা Java এবং JavaScript এর মধ্যে যোগাযোগ প্রতিষ্ঠা করে। প্রথমে, আপনাকে GWT অ্যাপ্লিকেশন তৈরির জন্য একটি কাস্টম ক্লাস তৈরি করতে হবে, যা Highcharts লাইব্রেরির JavaScript ফাংশনগুলো কল করবে।

১.১. GWT Highcharts মডিউল তৈরি করা

JavaScriptOverlay ব্যবহার করে Highcharts মডিউল তৈরি করা হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি কাস্টম Highcharts মডিউল তৈরি করা হয়েছে।

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;

public class HighchartsModule {

    // JavaScriptOverlay ক্লাস তৈরি
    public static native void createCustomChart(String containerId, JsArray<ChartData> data) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Custom Highcharts Example'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Sales Data',
                data: data
            }]
        });
    }-*/;

    // ChartData ক্লাস (ডেটার জন্য)
    public static class ChartData extends JavaScriptObject {
        protected ChartData() {}

        public final native String getName() /*-{
            return this.name;
        }-*/;

        public final native int getValue() /*-{
            return this.value;
        }-*/;
    }
}

এখানে:

• createCustomChart ফাংশনটি Highcharts লাইব্রেরির Highcharts.chart ফাংশন কল করছে এবং একটি কাস্টম চার্ট তৈরি করছে।
• ChartData একটি JavaScriptObject হিসেবে তৈরি করা হয়েছে যাতে ডেটার নাম এবং মান থাকে।

২. GWT অ্যাপ্লিকেশনে Custom মডিউল কনফিগার করা

এখন আপনি GWT অ্যাপ্লিকেশনে এই কাস্টম মডিউলটি ব্যবহার করতে পারবেন। নিচে দেখানো হলো কিভাবে HighchartsModule ক্লাসটি ব্যবহার করে একটি চার্ট তৈরি করা যায়।

২.১. Custom Highcharts মডিউল ব্যবহার

package com.mycompany.myproject.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.ui.RootPanel;

public class HighchartsExample implements EntryPoint {

    public void onModuleLoad() {
        // ডেটা তৈরি করা
        JsArray<HighchartsModule.ChartData> chartData = createChartData();

        // Highcharts মডিউল ব্যবহার করে চার্ট তৈরি
        HighchartsModule.createCustomChart("chart-container", chartData);
    }

    // Static ডেটা তৈরি করার জন্য মেথড
    private JsArray<HighchartsModule.ChartData> createChartData() {
        JsArray<HighchartsModule.ChartData> data = JsArray.createArray().cast();

        HighchartsModule.ChartData dataPoint1 = createDataPoint("January", 30);
        HighchartsModule.ChartData dataPoint2 = createDataPoint("February", 40);
        HighchartsModule.ChartData dataPoint3 = createDataPoint("March", 50);
        HighchartsModule.ChartData dataPoint4 = createDataPoint("April", 60);
        HighchartsModule.ChartData dataPoint5 = createDataPoint("May", 70);

        data.push(dataPoint1);
        data.push(dataPoint2);
        data.push(dataPoint3);
        data.push(dataPoint4);
        data.push(dataPoint5);

        return data;
    }

    // Static Data পয়েন্ট তৈরি করার জন্য মেথড
    private HighchartsModule.ChartData createDataPoint(String name, int value) {
        HighchartsModule.ChartData dataPoint = JavaScriptObject.createObject().cast();
        dataPoint.setName(name);
        dataPoint.setValue(value);
        return dataPoint;
    }
}

এখানে:

• createChartData() ফাংশনটি ডেটা পয়েন্ট তৈরি করে, যা Highcharts এর জন্য উপযোগী।
• HighchartsModule.createCustomChart() ফাংশনটি GWT অ্যাপ্লিকেশনে চার্ট তৈরি করে এবং ডেটা পয়েন্ট পাস করা হয়।

২.২. HTML ফাইল

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Highcharts Example</title>
    <script src="js/highcharts.js"></script>
</head>
<body>
    <div id="chart-container" style="width: 100%; height: 400px;"></div>
</body>
</html>

৩. Custom মডিউল কনফিগার করা

Highcharts এর কাস্টম মডিউল কনফিগার করার সময় কিছু গুরুত্বপূর্ণ কনফিগারেশন বিবেচনায় রাখা প্রয়োজন, যেমন:

৩.১. Chart Type কনফিগারেশন

chart: {
    type: 'line'  // 'line', 'bar', 'pie', 'column' ইত্যাদি টাইপ ব্যবহার করা যায়
}

৩.২. Axis কনফিগারেশন

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
    title: {
        text: 'Sales in USD'
    }
}

৩.৩. Tooltip কাস্টমাইজেশন

tooltip: {
    formatter: function () {
        return 'Month: ' + this.point.category + '<br>Sales: ' + this.point.y;
    }
}

৩.৪. Legend কাস্টমাইজেশন

legend: {
    enabled: true,
    align: 'center',
    verticalAlign: 'bottom'
}

সারাংশ

Highcharts-এ কাস্টম মডিউল তৈরি এবং কনফিগার করা GWT ব্যবহারকারীদের জন্য একটি শক্তিশালী টুল, যা Java কোড থেকে JavaScript চার্ট সহজেই পরিচালনা করতে সহায়তা করে। JavaScript Native Interface (JSNI) বা JsInterop ব্যবহার করে GWT অ্যাপ্লিকেশনে Highcharts কাস্টম মডিউল অন্তর্ভুক্ত করা যায়, যা ডেটা ভিজুয়ালাইজেশন এবং কাস্টমাইজেশন এর জন্য উন্নত ফিচার প্রদান করে।