Window Resize Event Handling

Window Resize Event হল একটি ইভেন্ট যা ব্যবহারকারী যখন তাদের ব্রাউজারের উইন্ডোর আকার পরিবর্তন করেন, তখন ট্রিগার হয়। এই ইভেন্টের মাধ্যমে আপনি চার্ট, ইমেজ বা অন্য কোনো কন্টেন্টের আকার ডাইনামিকভাবে পরিবর্তন করতে পারেন, যাতে তারা বিভিন্ন ডিভাইস বা স্ক্রীন সাইজের জন্য সঠিকভাবে উপস্থাপিত হয়।

Google Charts API এবং Angular ব্যবহার করে আপনি window resize ইভেন্ট হ্যান্ডেল করতে পারেন এবং সেই অনুযায়ী চার্টের আকার পরিবর্তন করতে পারেন।

এখানে window resize ইভেন্টের মাধ্যমে চার্টের আকার কিভাবে আপডেট করতে হয় তার একটি উদাহরণ দেখানো হলো।

Step-by-Step: Window Resize Event Handling

Step 1: Angular App তৈরি করা

প্রথমে একটি নতুন Angular অ্যাপ তৈরি করুন:

ng new resize-event-chart
cd resize-event-chart

Step 2: Google Charts লাইব্রেরি ইন্সটল করা

এখন angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:

npm install angular-google-charts

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

এখন 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: Chart এবং Resize Event Handling

এখন, আমরা একটি Pie Chart তৈরি করব এবং window resize ইভেন্ট হ্যান্ডেল করার মাধ্যমে চার্টের আকার পরিবর্তন করব।

app.component.ts ফাইল:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Window Resize Event Handling';

  chartType = 'PieChart';  // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities', // Title
    pieHole: 0.4,  // Doughnut Style
    width: '100%', // Set width to 100% for responsiveness
    height: 400, // Fixed height
  };

  constructor() {}

  ngOnInit(): void {
    // Add window resize event listener when component is initialized
    window.addEventListener('resize', this.onResize.bind(this));
  }

  ngOnDestroy(): void {
    // Remove the event listener when the component is destroyed to avoid memory leaks
    window.removeEventListener('resize', this.onResize.bind(this));
  }

  // Function to handle window resize event
  onResize(): void {
    // Adjust chart width dynamically based on window size
    const width = window.innerWidth * 0.9; // Set chart width to 90% of the window width
    this.chartOptions.width = width;
  }
}

app.component.html ফাইল:

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

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Step 5: Responsive Layout (CSS)

চার্টের রেসপন্সিভ আকারের জন্য কিছু CSS প্রয়োগ করা যেতে পারে, যেমন চার্টটি স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে প্রদর্শিত হবে।

app.component.css ফাইল:

google-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Make chart width responsive */
}

এটি নিশ্চিত করে যে চার্টটি সর্বদা স্ক্রীনের 100% প্রস্থ ব্যবহার করবে এবং ব্রাউজার সাইজ পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে সমন্বয় হবে।

ব্যাখ্যা:

• window.addEventListener('resize', this.onResize.bind(this)):
  • যখন ব্রাউজারের আকার পরিবর্তিত হবে, তখন resize ইভেন্ট ট্রিগার হবে এবং onResize ফাংশন কল হবে। এতে আমরা চার্টের প্রস্থ পুনরায় সেট করি, যাতে এটি স্ক্রীনের আকারের সাথে মানিয়ে নেয়।
• this.onResize.bind(this):
  • bind(this) ব্যবহার করা হয়েছে যাতে this এর প্রসঙ্গ সঠিকভাবে ব্যাবহৃত হয়, কারণ ইভেন্ট হ্যান্ডলার ফাংশন অন্য প্রসঙ্গে কল হতে পারে।
• onResize():
  • এটি একটি ফাংশন যা উইন্ডো রিসাইজ ইভেন্টে কল হয় এবং এতে চার্টের width প্রোপার্টি পুনরায় সেট করা হয়।
• ngOnInit() এবং ngOnDestroy():
  • ngOnInit()-এ আমরা resize ইভেন্ট হ্যান্ডলার যোগ করি, এবং ngOnDestroy()-এ সেই হ্যান্ডলার সরিয়ে ফেলি যাতে মেমরি লিক না হয় যখন কম্পোনেন্ট ধ্বংস হয়।

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

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

ng serve

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

সারাংশ

Window Resize Event Handling এর মাধ্যমে আপনি Google Charts API তে window resize ইভেন্ট ট্রিগার করে চার্টের আকার কাস্টমাইজ করতে পারেন। Angular তে এটি খুবই সহজ, যেখানে আপনি window.addEventListener ব্যবহার করে রিসাইজ ইভেন্ট শোনেন এবং সেই অনুযায়ী চার্টের আকার পরিবর্তন করেন। এটি responsive charts তৈরির জন্য খুবই কার্যকরী, যেহেতু চার্টটি স্ক্রীন সাইজের সাথে মানিয়ে নেয়।