WIT-Academy

အားလုံးပဲ မင်္ဂလာပါ။

ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ JavaScript ES6 အသုံးပြုနည်းလေးပဲ ဖြစ်ပါတယ်။ ECMAScript 2015 (ES6) ကို JavaScript ရဲ့ ထင်ရှားတဲ့ Features အနေနဲ့ မိတ်ဆက်ပေးခဲ့ပါတယ်။ ထို့အတွက်ကြောင့် Advanced ES6 Features တွေကို Production Products တွေမှာ ပိုမို အသုံးချလာကြပါတယ်။

let, const (Block Scope)
---------------------------------
let, const တို့သည် Block Scope ဖြစ်ပါတယ်။ နှစ်ခုစလုံးက Block Scope ဖြစ်သော်လည်း const သည် Scope အတွင်းမှာ variable ကို reassign လုပ်လို့ မရပါဘူး။ let ကတော့ ရပါတယ်။

let counter = 20;
const counter2 = 20;

counter = 10;
counter2 = 10;

counter2 လိုင်းက Error ပြမှာ ဖြစ်ပါတယ်။ သို့သော် Object Attributes, Array List တွေကို Update လုပ်လို့ ရပါတယ်။

const list = [ 10 ];
list.push(20);
console.log(list); // [ 10, 20 ]

သို့သော် အောက်ကလိုတော့ မရပါ။

list = [ 10, 20 ]; // Const Error

Classes with Private Fields
-------------------------------------
class Account {
= 0;

deposit(amount) {
this. += amount;
}

getBalance() {
return this. ;
}
}

const myAccount = new Account();
myAccount.deposit(100);
console.log(myAccount.balance); // Undefined
console.log(myAccount.getBalance()); // Outputs: 100

အားလုံးပဲ မင်္ဂလာပါ။

ဒီတစ်ပတ်မှာတော့ Chart.js မှာ Gradient ထည့်တာကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။ Chart.js ဆိုတာ Web Developer တော်တော်များများ အသုံးပြုနေကြတဲ့ Chart အမျိုးအစား မြောက်များစွာကို Options, Parameters အမျိုးမျိုးနဲ့ လုပ်ဆောင်နိုင်တဲ့ JS Library တစ်ခုပဲ ဖြစ်ပါတယ်။

အသုံးပြုဖို့အတွက် canvas ကို ID နဲ့ သတ်မှတ်ပေးရမှာ ဖြစ်ပါတယ်။


Canvas Context ကို ကြေညာပါမယ်။
const ctx = document.getElementById('gradientChart').getContext('2d');

ထို့နောက် Canvas Context မှာ Gradient Fill လုပ်ဖို့အတွက် သတ်မှတ်ပါမယ်။
const gradientFill = ctx.createLinearGradient(0, 0, 0, 400);
gradientFill.addColorStop(0, 'rgba(102, 126, 234, 0.5)');
gradientFill.addColorStop(0.5, 'rgba(118, 75, 162, 0.25)');

လိုင်းတွေကို အရောင်ထည့်ဖို့အတွက် သတ်မှတ်ပါမယ်။
const gradientStroke = ctx.createLinearGradient(0, 0, 700, 0);
gradientStroke.addColorStop(0, ' ');
gradientStroke.addColorStop(0.5, ' ');

ထို့နောက် Datasets အောက်က ကုဒ်ကို ထည့်ပါမယ်။
{
label: 'Revenue ($k)',
data: [30, 45, 38, 65, 48, 72, 85, 78, 92, 88, 105, 120],
fill: true,
backgroundColor: gradientFill,
borderColor: gradientStroke,
borderWidth: 3,
tension: 0.4,
pointBackgroundColor: ' ',
pointBorderColor: gradientStroke,
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 8,
pointHoverBackgroundColor: ' ',
pointHoverBorderColor: ' ',
pointHoverBorderWidth: 2
},

ထို့နောက် ကျန်တဲ့ ကုဒ်ကိုတော့ ပုံမှန်ရေးတဲ့အတိုင်း ထည့်ပေးပါမယ်။
// Chart configuration
const config = {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: true,
interaction: {
intersect: false,
mode: 'index'
},
plugins: { ... }

အားလုံးပဲ မင်္ဂလာပါ။
ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ Chart.js ရဲ့ Advance ဖြစ်မယ့် Event, Label Customization အကြောင်းပဲ ဖြစ်ပါတယ်။

label (tooltip) ကို Customize ပြင်မယ်ဆိုရင် options ထဲက plugins ရှိ tooltip ထဲက callbacks မှတဆင့် label ကို ပြင်ပေးရမှာပဲ ဖြစ်ပါတယ်။

options: {
plugins: {
tooltip: {
callbacks: {
label: (context) => {
return Sales: ${context.raw} units;
}
}
}
}
}

OnHover အတွက် အောက်က ကုဒ်အတိုင်း ရေးပေးလို့ ရမှာ ဖြစ်ပါတယ်။

options: {
onHover: (event, elements) => {
if (!elements.length) return;

const point = elements[0];

const datasetIndex = point.datasetIndex;
const dataIndex = point.index;

const datasetLabel = chart.data.datasets[datasetIndex].label;
const value = chart.data.datasets[datasetIndex].data[dataIndex];
const label = chart.data.labels[dataIndex];

console.log('Hover:', {
datasetLabel,
label,
value
});
}
}

အားလုံးပဲ မင်္ဂလာပါ။

ဒီတစ်ပတ်အတွက် မျှဝေပေးသွားချင်တဲ့ အကြောင်းအရာကတော့ Chart.js ရဲ့ အခြေခံ အသုံးပြုပုံပဲ ဖြစ်ပါတယ်။ Chat.js ဆိုတာ Pie Chart, Line Chart, Graph Chart စသည်တို့ကို မိမိ Web App တွေမှာ dynamic data (သို့ ) static data တွေနဲ့ ပြသချင်တဲ့အခါမှာ အသုံးပြုလို့ ရပြီး Animated Graph များ ဖြစ်ပြီး ရွေးချယ်စရာ Options များလည်း စုံစုံလင်လင် ရှိပါတယ်။

အရင်ဦးဆုံး CDN ချိတ်ဆက်ပါတယ်။


Graph/Chart ပေါ်ဖို့အတွက် Canvas တစ်ခုကို ထည့်ပါမယ်။ အဲ့မှာ Size (width, height) ကို သတ်မှတ်ထားပါမယ်။


ထို့နောက် ထဲမှာ အောက်ပါ ကုဒ်ကို ထည့်ပါမယ်။

အောက်က ကုဒ်ကတော့ အပေါ်မှာ ထည့်ထားတဲ့ canvas ကို id နဲ့ variable တစ်ခုနဲ့ ခေါ်သုံးပါမယ်။
const ctx = document.getElementById('myChart');

ထို့နောက် Bar Chart ကို အသုံးပြုပြီး လစဥ် Sale Data ကို (၅) လစာ ထုတ်တဲ့ ပုံစံမျိုး ရေးသားခြင်း ဖြစ်ပါတယ်။
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Monthly Sales',
data: [12, 19, 8, 15, 22],
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
});

datasets ကတော့ x axis အတွက် လိုအပ်သော ဒေတာကို ထည့်ပေးခြင်း ဖြစ်ပြီး data ဆိုတာကတော့ y-axis အတွက် လိုအပ်သော ဒေတာကို Array နဲ့ ထည့်ပေးတာ ဖြစ်ပါတယ်။ label ကတော့ graph/chart မှာ data point တွေအတွက် Label TIp အတွက် ဖြစ်ပါတယ်။