DC.js কে Webpack এবং Babel এর সাথে ব্যবহার করলে আপনি মডুলার JavaScript কোড তৈরি করতে পারবেন এবং ES6 বা তার পরে যেকোনো নতুন ফিচার ব্যবহার করতে পারবেন। Webpack কোডের মডুলারিটি এবং অ্যাসেট ম্যানেজমেন্টে সহায়ক, আর Babel ES6 কোডকে পুরানো ব্রাউজারগুলোর জন্য কম্পাইল করতে ব্যবহৃত হয়।
এই গাইডে, আমরা দেখব কীভাবে Webpack এবং Babel এর মাধ্যমে DC.js ইন্টিগ্রেশন করা যায়।
১. প্রয়োজনীয় প্যাকেজ ইনস্টলেশন
প্রথমে, আপনার প্রজেক্টে Webpack, Babel, এবং DC.js ইনস্টল করতে হবে। আপনার প্রজেক্টে npm (Node Package Manager) ব্যবহার করতে হবে।
১.১. package.json তৈরি করা
প্রথমে আপনার প্রজেক্ট ডিরেক্টরিতে npm init কমান্ড চালিয়ে একটি package.json ফাইল তৈরি করুন।
npm init -y
১.২. প্রয়োজনীয় প্যাকেজ ইনস্টল করা
npm install dc d3 crossfilter2 --save
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install html-webpack-plugin --save-dev
- dc: DC.js
- d3: D3.js
- crossfilter2: Crossfilter
- webpack: মডুলার কোড ব্যবস্থাপনার জন্য
- babel-loader, @babel/core, @babel/preset-env: Babel সেটআপ
- html-webpack-plugin: HTML ফাইল তৈরি করার জন্য
২. Webpack এবং Babel কনফিগারেশন
২.১. webpack.config.js ফাইল তৈরি করা
এই ফাইলটি Webpack এর কনফিগারেশন ধারণ করবে।
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', // আপনার প্রধান জাভাস্ক্রিপ্ট ফাইলের পথ
output: {
filename: 'bundle.js', // আউটপুট ফাইলের নাম
path: path.resolve(__dirname, 'dist'), // আউটপুট ডিরেক্টরি
},
module: {
rules: [
{
test: /\.js$/, // সব জাভাস্ক্রিপ্ট ফাইল
exclude: /node_modules/,
use: {
loader: 'babel-loader', // Babel ব্যবহার
options: {
presets: ['@babel/preset-env'], // ES6 বা তার পরবর্তী ফিচার সমর্থন
},
},
},
],
},
devtool: 'source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // HTML টেমপ্লেট
}),
],
};
২.২. .babelrc ফাইল তৈরি করা
এটি Babel এর কনফিগারেশন হবে, যা ES6 কোড পুরানো ব্রাউজারে কাজ করার জন্য কম্পাইল করবে।
{
"presets": ["@babel/preset-env"]
}
২.৩. src/index.html ফাইল তৈরি করা
HTML টেমপ্লেট তৈরি করুন যা DC.js চার্ট প্রদর্শন করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Webpack Integration</title>
</head>
<body>
<h1>DC.js with Webpack</h1>
<div id="chart"></div>
<script src="bundle.js"></script> <!-- Webpack এর আউটপুট -->
</body>
</html>
২.৪. src/index.js ফাইল তৈরি করা
এখন আপনার প্রধান JavaScript ফাইল তৈরি করুন যেখানে DC.js ব্যবহার করা হবে।
import dc from 'dc';
import d3 from 'd3';
import crossfilter from 'crossfilter2';
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// value এর উপর গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js চার্ট তৈরি
const chart = dc.barChart("#chart");
chart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxisLabel("Category")
.yAxisLabel("Value");
dc.renderAll();
৩. Webpack এবং Babel রান করা
৩.১. Webpack Build
Webpack বিল্ড প্রক্রিয়া চালাতে, আপনি package.json এ scripts সেকশন এ একটি স্ক্রিপ্ট যোগ করতে পারেন:
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
}
webpack --mode production: প্রোডাকশন মোডে কোড বানানোর জন্য।webpack-dev-server --mode development: ডেভেলপমেন্ট সার্ভার চালাতে।
৩.২. npm run start কমান্ড দিয়ে ডেভেলপমেন্ট সার্ভার চালানো
npm run start
এটি webpack-dev-server চালাবে এবং আপনার কোড পরিবর্তন করার সাথে সাথে ব্রাউজারে রিফ্রেশ হবে।
৪. প্যাকেজ ম্যানেজার এবং কোড কম্পাইলেশন
Babel কোডের ES6+ ফিচার গুলিকে পুরানো ব্রাউজারে চলার মতো কম্পাইল করে দেয়, এবং Webpack মডুলার কোড বানাতে সাহায্য করে। Webpack দিয়ে আপনি DC.js এবং অন্যান্য লাইব্রেরির সাথে কোড একত্রিত করে একটি ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে পারবেন।
সারাংশ
- Webpack এবং Babel এর সাথে DC.js ইন্টিগ্রেশন করলে আপনি মডুলার কোড ব্যবহার করতে পারবেন এবং ES6 ফিচার ব্যবহার করতে পারবেন।
- Webpack কোডের কম্পাইলেশন এবং ডিপেনডেন্সি ম্যানেজমেন্ট সহজ করে, এবং Babel নতুন জাভাস্ক্রিপ্ট কোড পুরানো ব্রাউজারে কম্পাইল করে।
- DC.js এর সাহায্যে ইন্টারেক্টিভ ড্যাশবোর্ড এবং চার্ট তৈরি করা যায়, যা Webpack এবং Babel এর মাধ্যমে মডুলার এবং কার্যকরভাবে ব্যবহৃত হয়।
এই গাইড অনুসরণ করে, আপনি Webpack এবং Babel এর সাথে DC.js ব্যবহার করে আরো কার্যকর এবং মডুলার ডেটা ভিজ্যুয়ালাইজেশন অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
