Tooltip এবং Animation কাস্টমাইজেশন

Google Charts API-তে Tooltip এবং Animation দুটি শক্তিশালী কাস্টমাইজেশন অপশন। এগুলি ব্যবহার করে আপনি আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন। Tooltip ব্যবহারকারীকে ডেটা পয়েন্টের উপর হোভার করলে অতিরিক্ত তথ্য প্রদান করে, আর Animation চার্টের প্রদর্শনকে মসৃণ এবং আকর্ষণীয় করে তোলে।

এখন চলুন দেখি Tooltip এবং Animation কাস্টমাইজ করার পদ্ধতি।

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

Tooltip হল একটি ইনফরমেশন বক্স যা চার্টের উপর হোভার করার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সহায়তা করে। Google Charts API তে আপনি tooltip কাস্টমাইজ করতে পারেন বিভিন্নভাবে যেমন তার trigger, textStyle, HTML ইত্যাদি।

Tooltip কাস্টমাইজেশন অপশনস:

• trigger: Tooltip কখন এবং কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে ব্যবহার করা হয়। এর মান হতে পারে 'focus', 'selection', অথবা 'none'।
• textStyle: Tooltipের টেক্সট কাস্টমাইজ করতে ব্যবহৃত হয়, যেমন রঙ, ফন্ট সাইজ এবং স্টাইল।
• isHtml: আপনি যদি HTML ব্যবহার করতে চান, তবে এটিকে true সেট করতে হবে।
• showColorCode: Tooltip এ রঙের কোড দেখানোর জন্য ব্যবহৃত হয়।

Tooltip কাস্টমাইজ করার উদাহরণ:

chartOptions = {
  tooltip: {
    trigger: 'focus',  // Tooltip প্রদর্শন হবে যখন ইউজার একটি ডেটা পয়েন্টে ফোকাস করবে
    isHtml: true,  // Tooltip এ HTML সক্রিয়
    textStyle: {
      color: 'blue',  // Tooltip text color
      fontSize: 14,   // Tooltip text size
      bold: true      // Tooltip text bold
    },
    showColorCode: true  // Tooltip এ রঙের কোড দেখানো হবে
  }
};

এখন আপনি HTML এর মাধ্যমে একটি টুলটিপ কাস্টমাইজ করতে পারেন:

chartOptions = {
  tooltip: {
    trigger: 'focus',
    isHtml: true,
    textStyle: {
      color: 'green',
      fontSize: 16
    },
    content: '<div style="color:red;">Custom Tooltip Content</div>'  // Custom HTML in tooltip
  }
};

2. Animation কাস্টমাইজেশন

Animation হল সেই ফিচার যা চার্ট লোড হওয়ার সময় বা ডেটা পরিবর্তনের সময় মসৃণ এফেক্ট প্রদান করে। এটি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। Google Charts API তে animation কাস্টমাইজ করার মাধ্যমে আপনি চার্টের startup এফেক্ট, duration, এবং easing নিয়ন্ত্রণ করতে পারেন।

Animation কাস্টমাইজেশন অপশনস:

• startup: এটি যদি true হয়, তবে এনিমেশন শুরু হবে চার্ট লোড হওয়ার সময়।
• duration: এনিমেশনের সময়কাল (মিলিসেকেন্ডে)।
• easing: এনিমেশনের টাইপ, যেমন 'linear', 'inAndOut' বা 'out'।

Animation কাস্টমাইজ করার উদাহরণ:

chartOptions = {
  animation: {
    startup: true,      // Animation starts when the chart is loaded
    easing: 'inAndOut', // Easing function for animation
    duration: 1000      // Animation duration in milliseconds
  }
};

এখানে, চার্ট লোড হওয়ার সময় এনিমেশন শুরু হবে এবং 'inAndOut' easing ফাংশন ব্যবহার করা হবে, যা অল্প সময়ের মধ্যে গতি বাড়িয়ে এবং কমিয়ে এনিমেশন করবে। এনিমেশনের জন্য সময়কাল হল 1000 মিলিসেকেন্ড (1 সেকেন্ড)।

ডাইনামিক ডেটা আপডেট করার পর এনিমেশন:

updateChartData() {
  this.chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 6],
    ['Eat', 3],
    ['Commute', 2],
    ['Watch TV', 1],
    ['Sleep', 12]
  ];
  
  this.chartOptions.animation = {
    startup: true,
    easing: 'out',
    duration: 1500  // Longer duration for smooth animation
  };
}

এখানে, ডেটা আপডেটের পর এনিমেশন 'out' easing ফাংশন সহ এবং 1500 মিলিসেকেন্ডের সময়কাল দিয়ে চালু হবে।

Tooltip এবং Animation কাস্টমাইজেশন উদাহরণ

এখন চলুন একটি পূর্ণাঙ্গ উদাহরণ দেখি যেখানে Tooltip এবং Animation কাস্টমাইজেশন একসাথে ব্যবহার করা হচ্ছে।

উদাহরণ (Pie Chart with Tooltip and Animation):

app.component.ts:

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

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

  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
    titleTextStyle: {
      color: 'blue', // Title text color
      fontSize: 18, // Title font size
      bold: true // Title bold
    },
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14 // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true, // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    },
    animation: {
      startup: true,
      easing: 'inAndOut',
      duration: 1000  // Animation duration in milliseconds
    }
  };
}

app.component.html:

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

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Conclusion

Google Charts API-তে Tooltip এবং Animation কাস্টমাইজেশন খুবই গুরুত্বপূর্ণ ফিচার। আপনি tooltip এর মাধ্যমে ডেটার বিস্তারিত তথ্য প্রদর্শন করতে পারেন, এবং animation এর মাধ্যমে চার্ট লোড হওয়ার সময় সুন্দর মসৃণ এফেক্ট যোগ করতে পারেন। এগুলি চার্টের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ডেটার সঙ্গে ইন্টারঅ্যাকশন আরো আকর্ষণীয় করে তোলে।