Drilldown Chart তৈরি এবং Data Hierarchy ব্যবস্থাপনা

Drilldown Chart এমন একটি চার্ট যা ব্যবহারকারীকে মূল ডেটা থেকে বিস্তারিত স্তরে প্রবেশের অনুমতি দেয়। এটি ব্যবহারকারীকে প্রথমে একটি সারাংশ দেখাতে পারে এবং তারপর একটি নির্দিষ্ট ডেটা পয়েন্টে ক্লিক করলে আরও বিস্তারিত তথ্য বা স্তর খুলে দেখাতে পারে। সাধারণত Pie Charts, Bar Charts, Column Charts, Treemaps ইত্যাদিতে Drilldown ব্যবহার করা হয়।

Google Charts API-এ Drilldown ফিচার ব্যবহার করার জন্য Data Hierarchy ব্যবহার করে ডেটার বিভিন্ন স্তর তৈরি করা হয় এবং সেই স্তরের মধ্যে ইন্টারঅ্যাকশন পরিচালনা করা যায়।

এখানে, আমরা একটি Drilldown Chart তৈরি করার প্রক্রিয়া এবং ডেটা হায়ারার্কি ব্যবস্থাপনা দেখাবো।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new drilldown-chart-app
cd drilldown-chart-app

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে, app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Drilldown Chart তৈরি করা

এখন আমরা একটি Drilldown Chart তৈরি করব যেখানে প্রথমে একটি পি চার্ট প্রদর্শিত হবে এবং ইউজার একটি সেগমেন্টে ক্লিক করলে বিস্তারিত তথ্য দেখানো হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Drilldown Chart Example';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Category', 'Amount'],
    ['Food', 100],
    ['Clothing', 150],
    ['Transportation', 200]
  ]; // Initial Data for Pie Chart

  chartOptions = {
    title: 'Expenses Breakdown',
    width: 600,
    height: 400
  };

  // Drilldown Data (when clicked on a category)
  drilldownData = {
    'Food': [
      ['Subcategory', 'Amount'],
      ['Fruits', 30],
      ['Vegetables', 40],
      ['Snacks', 30]
    ],
    'Clothing': [
      ['Subcategory', 'Amount'],
      ['Shirts', 80],
      ['Jeans', 70],
      ['Shoes', 0]
    ],
    'Transportation': [
      ['Subcategory', 'Amount'],
      ['Fuel', 100],
      ['Bus', 50],
      ['Taxi', 50]
    ]
  };

  // Function to handle Drilldown
  drilldown(category: string) {
    this.chartData = this.drilldownData[category];
    this.chartOptions = {
      title: `${category} Breakdown`,
      width: 600,
      height: 400
    };
  }
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart Component -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  (click)="drilldown($event)">
</google-chart>

Chart Explanation:

• Main Data (Initial Pie Chart): এই ডেটা chartData অ্যারেতে রয়েছে, যা চারটি প্রধান ক্যাটেগরির তথ্য দেখায়। ইউজার একটি সেগমেন্টে ক্লিক করলে, সেই ক্যাটেগরির বিস্তারিত তথ্য drilldownData থেকে পাওয়া যাবে।
• Drilldown Data: Food, Clothing, এবং Transportation ক্যাটেগরি সবগুলো এক্সপ্যান্ডেড ডেটা (subcategories) ধারণ করে।
• drilldown() Function: ইউজার যখন কোন ক্যাটেগরিতে ক্লিক করবে, তখন এটি drilldownData থেকে উপযুক্ত ডেটা নিয়ে এসে চার্টে আপডেট করবে।

Step 5: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Drilldown Chart দেখতে পাবেন এবং যখন আপনি কোন সেগমেন্টে ক্লিক করবেন তখন সেই ক্যাটেগরির বিস্তারিত ডেটা প্রদর্শিত হবে।

Data Hierarchy এবং Drilldown

Data Hierarchy ব্যবস্থাপনা করে আপনি সহজেই বিভিন্ন স্তরের ডেটা প্রদর্শন করতে পারেন। এতে আপনি প্রথমে মূল ডেটা দেখাতে পারেন এবং তারপর ব্যবহারকারী কোনো অংশে ক্লিক করার মাধ্যমে আরও বিস্তারিত ডেটা উপস্থাপন করতে পারেন। Drilldown ফিচার Pie Chart, Bar Chart, Column Chart, Tree Maps ইত্যাদিতে কার্যকরী হতে পারে।

Drilldown Data Structure

1. Main Data: প্রথমে একটি সাধারণ চার্ট প্রদর্শন করুন যা একটি সারাংশ দেখায়।
2. Subcategories/Details: ইউজার যখন একটি সেগমেন্টে ক্লিক করবে, তখন ঐ সেগমেন্টের বিস্তারিত ডেটা প্রদর্শন করুন।

Chart Customization for Drilldown

আপনি Drilldown চার্টের জন্য আরও কাস্টমাইজেশন করতে পারেন যেমন:

1. Animation: Drilldown চার্টের জন্য অ্যানিমেশন যোগ করা।
2. Colors: বিভিন্ন স্তরের জন্য বিভিন্ন রঙ সেট করা।
3. Data Labels: বিস্তারিত তথ্যের জন্য ডেটা লেবেল যোগ করা।

chartOptions = {
  title: `${category} Breakdown`,
  width: 600,
  height: 400,
  colors: ['#ffcc00', '#ff6600', '#ff3333'], // Colors for subcategories
  animation: {
    startup: true,
    easing: 'inAndOut',
    duration: 1000
  }
};

সারাংশ

Drilldown Chart একটি শক্তিশালী ফিচার যা ইউজারকে ডেটার সারাংশ থেকে বিস্তারিত স্তরে যাওয়ার সুযোগ দেয়। Google Charts API ব্যবহার করে Pie Chart, Bar Chart, Column Chart ইত্যাদিতে Drilldown ফিচার তৈরি করা যায় এবং Data Hierarchy ব্যবস্থাপনার মাধ্যমে আপনি স্তরভিত্তিক ডেটা উপস্থাপন করতে পারেন। Angular অ্যাপে Drilldown Chart তৈরি করতে আমরা event binding এবং chartData ব্যবহৃত করেছি, যার মাধ্যমে ইউজার ইন্টারঅ্যাকশন অনুযায়ী চার্টের ডেটা আপডেট হচ্ছে।