১. ভূমিকা
গুগল ডেটা স্টুডিও আপনাকে বিনামূল্যে সুন্দর ডেটা ভিজ্যুয়ালাইজেশন সহ গতিশীল, ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে দেয়। কমিউনিটি ভিজ্যুয়ালাইজেশন হল ডেটা স্টুডিওর একটি বৈশিষ্ট্য যা আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে কাস্টম ভিজ্যুয়ালাইজেশন তৈরি করতে দেয় যা আপনার ডেটা স্টুডিও রিপোর্টের সাথে একীভূত হয়।
তুমি কি শিখবে
এই কোডল্যাবে আপনি শিখবেন:
- গুগল ডেটা স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন কীভাবে কাজ করে
- আমাদের কমান্ড-লাইন টেমপ্লেট টুল ব্যবহার করে কীভাবে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন
- কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করতে জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরি কীভাবে ব্যবহার করবেন
- আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনকে ডেটা স্টুডিও ড্যাশবোর্ডে কীভাবে একীভূত করবেন
তোমার যা লাগবে
এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার প্রয়োজন হবে:
- ইন্টারনেট, একটি ওয়েব ব্রাউজার, একটি টার্মিনাল এবং আপনার প্রিয় টেক্সট এডিটর অ্যাক্সেস করুন
- একটি গুগল অ্যাকাউন্ট
- গুগল ক্লাউড স্টোরেজ বাকেট অ্যাক্সেস করুন
- জাভাস্ক্রিপ্ট, নোড.জেএস এবং কমান্ড-লাইনের সাথে পরিচিতি।
এই কোডল্যাব ধরে নেয়:
- আপনি ইতিমধ্যেই একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করেছেন (TODO লিঙ্ক প্রথম কোডল্যাব)
- গুগল ক্লাউড স্টোরেজের সাথে পরিচিত
শুরু করতে, ক্লিক করে এই প্রতিবেদনের একটি অনুলিপি তৈরি করুন 
উপরের ডানদিকের কোণে। কোডল্যাবটি দেখার সময় এটি অন্য ট্যাবে খোলা রাখুন।
2. দ্রুত জরিপ
তুমি কেন এই কোডল্যাবটি বেছে নিলে?
আপনি এই কোডল্যাব/টিউটোরিয়ালটি কীভাবে ব্যবহার করার পরিকল্পনা করছেন?
ডেটা স্টুডিওর সাথে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
তোমার পটভূমি কোনটি সবচেয়ে ভালোভাবে বর্ণনা করে?
জরিপের তথ্য জমা দিতে পরবর্তী পৃষ্ঠায় যান।
৩. dscc-gen এর মাধ্যমে কমিউনিটি ভিজ্যুয়ালাইজেশন ডেভেলপমেন্ট
dscc-gen সম্পর্কে
dscc-gen হল একটি কমান্ড-লাইন টুল যা কমিউনিটি ভিজ্যুয়ালাইজেশন এবং কমিউনিটি কানেক্টরগুলির জন্য মতামতযুক্ত টেমপ্লেট এবং ওয়ার্কফ্লো সরবরাহ করে। কমিউনিটি ভিজ্যুয়ালাইজেশন টেমপ্লেটটি একটি কার্যকরী ভিজ্যুয়ালাইজেশন এবং একটি ওয়ার্কফ্লো সরবরাহ করে যা আপনাকে আপনার ভিজ্যুয়ালাইজেশন কোডের পরিবর্তনগুলি এবং স্ক্রিপ্টগুলি তাৎক্ষণিকভাবে দেখতে দেয় যাতে আপনি আপনার ভিজ্যুয়ালাইজেশনগুলিকে যাচাই, তৈরি এবং স্থাপন করতে পারেন।
সেটআপ
dscc-gen ডিপ্লয়মেন্ট স্ক্রিপ্টে gsutil এবং কমিউনিটি ভিজ্যুয়ালাইজেশন জাভাস্ক্রিপ্ট কোড তৈরিতে npm এবং ওয়েবপ্যাক ব্যবহার করে।
- আপনার স্থানীয় কম্পিউটারে npm ইনস্টল করুন
- gsutil quickstart ব্যবহার করে একটি Google Cloud Storage বাকেট সেট আপ করুন।
- আপনার প্রকল্পটি যেখানে খুঁজে পেতে চান সেই স্থানীয় ডিরেক্টরিতে যান।
৪. একটি নতুন dscc-gen কমিউনিটি ভিজ্যুয়ালাইজেশন প্রকল্প শুরু করুন
একটি টার্মিনাল খুলুন এবং কমান্ডটি চালান:
npx @google/dscc-gen viz
dscc-gen আপনাকে একটি প্রকল্পের নাম, একটি "dev" GCS স্টোরেজ অবস্থান এবং একটি "prod" স্টোরেজ অবস্থানের জন্য অনুরোধ করবে। gs প্রোটোকল ব্যবহার করে একটি URI হিসাবে অবস্থানটি লিখুন, যেমন gs://my-gs-project/example-dev । একটি "অবস্থান" হয় একটি ক্লাউড স্টোরেজ বাকেট হতে পারে অথবা সেই বাকেটের মধ্যে একটি ফোল্ডার হতে পারে। দুটি স্টোরেজ অবস্থান অবশ্যই আলাদা হতে হবে। টুলটি যাচাই করবে যে আপনি যে মানগুলি প্রবেশ করান সেগুলিতে আপনার অ্যাক্সেস আছে। যদি অবস্থানগুলি বিদ্যমান না থাকে, তবে সেগুলি আপনার জন্য তৈরি করা হবে।
dscc-gen একবার একটি নতুন কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করলে, এটি কীভাবে শুরু করবেন তার নির্দেশাবলী প্রিন্ট করে। আপনার টার্মিনালটি দেখতে এরকম কিছু হবে ( বোল্ড ইটালিকগুলিতে আপনার ইনপুট):
$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...
Created new community viz: barchart
cd barchart and npm run start to begin working on your viz!
তোমার ভিজ্যুয়ালাইজেশন লেখার জন্য তুমি src/ - বিশেষ করে index.js , index.json , এবং index.css - ফাইলগুলি সম্পাদনা করবে।
dist/ এর ফাইলগুলি আপনাকে ব্রাউজারে স্থানীয়ভাবে আপনার ভিজ্যুয়ালাইজেশনের পূর্বরূপ দেখার সুযোগ দেয়। webpack.config.js স্থানীয়ভাবে ভিজ্যুয়ালাইজেশন চালানোর জন্য ব্যবহৃত হয়। README.md টেমপ্লেট ফাইল এবং কমান্ডের একটি সারসংক্ষেপ প্রদান করে।
৫. স্থানীয়ভাবে আপনার ভিজ্যুয়ালাইজেশনের পূর্বরূপ দেখুন
প্রস্তাবিত নির্দেশাবলী অনুসরণ করুন এবং আপনার টার্মিনালে নিম্নলিখিত কমান্ডগুলি চালান:
cd <folder name>
npm run start
একটি ব্রাউজার খুলবে যেখানে একটি ওয়েব পৃষ্ঠা থাকবে যা দেখতে এরকম হবে:
পরবর্তী ধাপে আরও জানুন।
৬. [তথ্য] dscc-gen ওয়ার্কফ্লো কীভাবে কাজ করবে তা
dscc-gen ভিজ্যুয়ালাইজেশন টেমপ্লেটটি একটি কার্যকরী ভিজ্যুয়ালাইজেশন এবং টেমপ্লেটটি কীভাবে ব্যবহার করবেন তার নির্দেশাবলী সহ আসে। এখানে মূল কার্যকারিতা রয়েছে:
আপনার স্থানীয় বার্তা আপডেট করুন: নমুনা বার্তাটি টেমপ্লেটে অন্তর্ভুক্ত করা হয়েছে, তবে এটি সম্ভবত আপনি যে ব্যবহারের ক্ষেত্রে সমর্থন করতে চান তার প্রতিফলন নয়। আপনি যে ভিজ্যুয়ালাইজেশন তৈরি করতে চান তার প্রতিফলনকারী নমুনা ডেটা ডাউনলোড করা উচিত।
স্থানীয় উন্নয়ন কর্মপ্রবাহ : আপনার স্থানীয় ডেটা আপডেট করুন থেকে ডেটা ব্যবহার করে, স্থানীয়ভাবে আপনার কোড লিখুন এবং পরীক্ষা করুন।
আপনার ভিজ্যুয়ালাইজেশন তৈরি করুন এবং স্থাপন করুন: আপনার কোড তৈরি করুন এবং এটি আপনার গুগল ক্লাউড স্টোরেজ বাকেটগুলিতে আপলোড করুন।
ডেটা স্টুডিওতে আপনার ভিজ্যুয়ালাইজেশন লোড করুন: আপনার ডেটা স্টুডিও রিপোর্টে ভিজ্যুয়ালাইজেশন যোগ করুন।
৭. একটি কনফিগারেশন সংজ্ঞায়িত করুন
কনফিগারেশন ফাইলটি হল আপনার (যেমন ডেভেলপার) এবং ভিজ্যুয়ালাইজেশন ব্যবহারকারী রিপোর্ট এডিটরের মধ্যে চুক্তি। এটি ডেটা স্টুডিওতে ভিজ্যুয়ালাইজেশন লোড হওয়ার পরে উপলব্ধ বিকল্পগুলি সংজ্ঞায়িত করে।
এই বার চার্ট ভিজ্যুয়ালাইজেশনের জন্য, কনফিগারেশনে একটি মাত্রা এবং একটি মেট্রিক থাকবে, সেইসাথে একটি স্টাইল উপাদান থাকবে যা রিপোর্ট এডিটরকে বার চার্ট স্টাইল পরিবর্তন করতে দেয়।
src/index.json এর কন্টেন্টগুলো নিচের লেখা দিয়ে প্রতিস্থাপন করুন। সব বন্ধনী অন্তর্ভুক্ত করুন। যদি আপনি এটি পুনরায় টাইপ করেন, তাহলে বর্গাকার এবং কোঁকড়া বন্ধনী এবং নেস্টিং কাঠামোর মধ্যে পার্থক্যের দিকে মনোযোগ দিন।
ইনডেক্স.জেসন
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "dimension",
"label": "Dimensions",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "metric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "barStyling",
"label": "Bar Styles",
"elements": [
{
"id": "barColor",
"label": "Bar Color",
"type": "FILL_COLOR",
"defaultValue": {
"color": "#1E555C"
}
}
]
}
]
}
৮. আপডেট করা বার্তা ডাউনলোড করুন
আপনার স্থানীয়ভাবে সঞ্চিত ডেটা আপডেট করতে, চালান:
npm run update_message
আপনার টার্মিনালটি দেখতে এরকম কিছু হওয়া উচিত:
barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object
Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev
এই কমান্ডটি ডেটা স্টুডিওতে একটি ভিজ্যুয়ালাইজেশন স্থাপন করে যা স্থানীয়ভাবে প্রাপ্ত ডেটা প্রিন্ট করে। স্ক্রিপ্টগুলি আপনার ভিজ্যুয়ালাইজেশনের ডিপ্লয়মেন্ট লোকেশন প্রিন্ট করে (উপরে হাইলাইট করা হয়েছে)। আপনি ডেটা স্টুডিওতে আপনার ভিজ্যুয়ালাইজেশন লোড করার জন্য এই লোকেশনটি ব্যবহার করবেন।
আপনার ভিজ্যুয়ালাইজেশন লোড করতে, আপনার আগে কপি করা রিপোর্টটি খুলুন।
- "প্রতিবেদন সম্পাদনা করুন" এ যান।
- টুলবারে "কমিউনিটি ভিজ্যুয়ালাইজেশন এবং উপাদান" এ ক্লিক করুন।
- "আরও অন্বেষণ করুন" এ ক্লিক করুন
- "আপনার নিজস্ব ভিজ্যুয়ালাইজেশন তৈরি করুন" এ ক্লিক করুন।
- আপনার ম্যানিফেস্ট পাথ (আপনার টার্মিনালে মুদ্রিত
gs://...অবস্থান) লিখুন এবং জমা দিন ক্লিক করুন।
- আপনার রিপোর্টে যোগ করতে রেন্ডার করা কার্ডটিতে ক্লিক করুন।
ভিজ্যুয়ালাইজেশনটি JSON রেন্ডার করবে যা দেখতে এরকম কিছু হবে:
ডান-ক্লিক করে সবগুলো নির্বাচন করে পুরো বার্তাটি অনুলিপি করুন, এবং src/localMessage.js এর বিষয়বস্তু আপনার কপি করা ফাইল দিয়ে প্রতিস্থাপন করুন। ফাইলটি সংরক্ষণ করুন।
আপনার ব্রাউজারে স্থানীয়ভাবে চলমান ভিজ্যুয়ালাইজেশন আর দেখা যাবে না, এবং আপনি যদি কনসোলে দেখেন, তাহলে আপনি একটি ত্রুটি দেখতে পাবেন।
৯. বার চার্টের জন্য জাভাস্ক্রিপ্ট লিখুন
প্রথমে, নির্ভরতা হিসেবে d3.js যোগ করতে নিম্নলিখিত কমান্ডটি চালান।
npm install d3
তারপর, src/index.js পরিবর্তে নিম্নলিখিত কোডটি দিন। শেষ ধাপের পরিবর্তনগুলি বোল্ড করা হয়েছে।
src/index.js সম্পর্কে
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;
const drawViz = (message) => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]));
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
যদি স্থানীয় সার্ভারটি এখনও চালু থাকে, তাহলে আপনার ব্রাউজারটি পরীক্ষা করুন। স্থানীয় ডেভেলপমেন্ট ওয়েব পৃষ্ঠায় এখন নীচের মতো একটি বার চার্ট দেখানো উচিত।
১০. ম্যানিফেস্ট আপডেট করুন (ঐচ্ছিক)
আপনার ভিজ্যুয়ালাইজেশন ম্যানিফেস্টে আপনার ভিজ্যুয়ালাইজেশন সম্পর্কে মেটাডেটা, সেইসাথে আপনার ভিজ্যুয়ালাইজেশনের অবস্থান জাভাস্ক্রিপ্ট, কনফিগারেশন এবং CSS রয়েছে। আপনার ম্যানিফেস্টে মানগুলি আপডেট করুন - সেগুলি আপনার ভিজ্যুয়ালাইজেশন সম্পর্কে শেষ ব্যবহারকারীর তথ্য প্রদান করতে ব্যবহার করা হবে।
আপনার ভিজ্যুয়ালাইজেশন বর্ণনা করতে src/manifest.json সম্পাদনা করুন। একটি নমুনা ম্যানিফেস্ট নিচে দেওয়া হল।
src/manifest.json
{
"name": "Bar Chart",
"organization": "[My name]",
"description": "Bar chart",
"logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
"organizationUrl": "https://github.com/googledatastudio/",
"supportUrl": "http://github.com/googledatastudio/community-visualizations",
"privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
"termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
"packageUrl": "",
"devMode": "DEVMODE_BOOL",
"components": [
{
"id": "Bar chart",
"name": "Bar chart",
"description": "My first Community Visualization",
"iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
"resource": {
"js": "YOUR_GCS_BUCKET/index.js",
"config": "YOUR_GCS_BUCKET/index.json",
"css": "YOUR_GCS_BUCKET/index.css"
}
}
]
}
১১. ভিজ্যুয়ালাইজেশন স্থাপন করুন
src/index.js এ, const LOCAL কে "false" এ পরিবর্তন করুন। আপনার ব্রাউজারে ভিজ্যুয়ালাইজেশন কাজ করা বন্ধ করে দেবে। পরিবর্তিত কোডের লাইনটি মোটা অক্ষরে লেখা আছে। এই বুলিয়ান কোডটি "স্থানীয়" ডেটা ফাইল ব্যবহার করবে নাকি ডেটা স্টুডিও থেকে প্রাপ্ত ডেটা ব্যবহার করবে তা কনফিগার করে।
src/index.js (abridged)
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;
const drawViz = (message) => {...}
তারপর, আপনার টার্মিনালে, চালান:
npm run build:dev
npm run push:dev
build:dev কমান্ডটি আপনার জাভাস্ক্রিপ্ট নির্ভরতাগুলিকে একটি আনমিনিফায়েড আউটপুটে একত্রিত করে এবং ক্যাশিং অক্ষম করতে এবং আপনার আগে কনফিগার করা "dev" বাকেটের দিকে নির্দেশ করতে আপনার ম্যানিফেস্টে মানগুলি প্রতিস্থাপন করে।
push:dev কমান্ড আপনার ভিজ্যুয়ালাইজেশন রিসোর্সগুলিকে "dev" বাকেটে আপলোড করে যা আপনি ধাপ ১ এ কনফিগার করেছিলেন, এবং বাকেটের অবস্থান কনসোলে প্রিন্ট করে।
ডেটা স্টুডিও রিপোর্টটি রিফ্রেশ করুন। আপনার একটি বার চার্ট দেখা উচিত। প্রপার্টি প্যানেলে ডেটা এবং স্টাইল বিকল্পগুলি পরিবর্তন করার চেষ্টা করুন। ডেটা পরিবর্তন করলে বারগুলি পরিবর্তন হবে। তবে, বার কালার স্টাইল নির্বাচক এখনও কাজ করবে না।
১২. বার চার্টে রিপোর্ট এডিটরের রঙ নির্বাচন ব্যবহার করুন
কোডটি স্থানীয়ভাবে সম্পাদনা করতে, প্রথমে src/index.js এ const LOCAL ভেরিয়েবলটিকে true তে আপডেট করুন। তারপর, styleVal() নামে একটি নতুন ফাংশন যোগ করুন এবং drawViz()-এ কোডটি আপডেট করুন। আপনার src/index.js দেখতে এরকম হওয়া উচিত:
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// parse the style value
const styleVal = (message, styleId) => {
if (typeof message.style[styleId].defaultValue === "object") {
return message.style[styleId].value.color !== undefined
? message.style[styleId].value.color
: message.style[styleId].defaultValue.color;
}
return message.style[styleId].value !== undefined
? message.style[styleId].value
: message.style[styleId].defaultValue;
};
const drawViz = message => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// get the user-selected bar color
let barColor = styleVal(message, "barColor");
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]))
.attr("fill", barColor);
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.attr("fill", barColor)
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
src/index.js সংরক্ষণ করুন, তারপর আপনার স্থানীয় ব্রাউজার সেশনে ফিরে যান। এটি স্থানীয়ভাবে চলছে দেখুন, তারপর আবার, const LOCAL কে false এ পরিবর্তন করুন।
আপনার আপডেট করা ফাইলগুলি Google Cloud Storage-এ আপলোড করুন:
npm run build:dev
npm run push:dev
আপনার ডেটা স্টুডিও রিপোর্ট রিফ্রেশ করুন। আপনি এখন আপনার বারগুলির রঙ পরিবর্তন করতে পারবেন।
১৩. প্রোড স্থাপনা
প্রোড মোতায়েন
একবার আপনার ভিজ্যুয়ালাইজেশনে খুশি হলে, নিশ্চিত করুন যে src/index.js এ const LOCAL মিথ্যা, তারপর চালান।
npm run build:prod
npm run push:prod
এটি আপনার ফাইলগুলিকে আপনার "prod" GCS বাকেট লোকেশনে স্থাপন করবে। অতিরিক্তভাবে, ক্যাশিং সক্ষম হবে এবং বান্ডেল করা জাভাস্ক্রিপ্ট যথাযথভাবে মিনিফাই করা হবে।
ঠিক আগের মতোই, আপনার স্থাপনার অবস্থান কনসোলে মুদ্রিত হবে। ডেটা স্টুডিও রিপোর্টে আপনার "প্রোড" ভিজ্যুয়ালাইজেশন লোড করতে এই "ম্যানিফেস্ট পাথ" ব্যবহার করুন।
অভিনন্দন! আপনি dscc-gen টুল ব্যবহার করে আপনার প্রথম কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করেছেন।
১৪. পরবর্তী পদক্ষেপ
আপনার ভিজ্যুয়ালাইজেশন প্রসারিত করুন
- আপনার ভিজ্যুয়ালাইজেশনে ইন্টারঅ্যাকশন যোগ করুন
- উপলব্ধ স্টাইল উপাদানগুলি সম্পর্কে আরও জানুন এবং আপনার ভিজ্যুয়ালাইজেশনে অতিরিক্ত স্টাইল যুক্ত করুন।
কমিউনিটি ভিজ্যুয়ালাইজেশনের মাধ্যমে আরও অনেক কিছু করুন
- dscc হেল্পার লাইব্রেরি , ম্যানিফেস্ট এবং কনফিগারেশন ফাইলের রেফারেন্সগুলি পর্যালোচনা করুন।
- আমাদের কমিউনিটি ভিজ্যুয়ালাইজেশন শোকেসে আপনার ভিজ্যুয়ালাইজেশন জমা দিন।
- ডেটা স্টুডিওর জন্য একটি কমিউনিটি সংযোগকারী তৈরি করুন।
অতিরিক্ত সম্পদ
এই কোডল্যাবে অন্তর্ভুক্ত উপাদানগুলির আরও গভীরে খনন করতে সাহায্য করার জন্য নীচে বিভিন্ন সংস্থান রয়েছে যা আপনি অ্যাক্সেস করতে পারেন।
রিসোর্সের ধরণ | ব্যবহারকারীর বৈশিষ্ট্য | ডেভেলপার বৈশিষ্ট্য |
ডকুমেন্টেশন | ||
খবর ও আপডেট | ডেটা স্টুডিও > ব্যবহারকারীর সেটিংসে সাইন আপ করুন | |
প্রশ্ন জিজ্ঞাসা করুন | স্ট্যাক ওভারফ্লো [google-data-studio] ডেটা স্টুডিও ডেভেলপার ফোরাম | |
ভিডিও | শীঘ্রই আসছে! | |
উদাহরণ |