dscc-gen की मदद से Data Studio कम्यूनिटी विज़ुअलाइज़ेशन बनाना

1. परिचय

Google Data Studio की मदद से, डाइनैमिक और इंटरैक्टिव डैशबोर्ड बनाए जा सकते हैं. इनमें डेटा को बेहतर तरीके से विज़ुअलाइज़ किया जा सकता है. इसके लिए, आपको कोई शुल्क नहीं देना पड़ता. कम्यूनिटी विज़ुअलाइज़ेशन, Data Studio की एक सुविधा है. इसकी मदद से, JavaScript का इस्तेमाल करके कस्टम विज़ुअलाइज़ेशन बनाए जा सकते हैं. ये विज़ुअलाइज़ेशन, आपकी Data Studio रिपोर्ट के साथ इंटिग्रेट हो जाते हैं.

आपको क्या सीखने को मिलेगा

इस कोडलैब में, आपको इनके बारे में जानकारी मिलेगी:

  • Google Data Studio का कम्यूनिटी विज़ुअलाइज़ेशन कैसे काम करता है
  • कमांड-लाइन टेंप्लेट टूल की मदद से कम्यूनिटी विज़ुअलाइज़ेशन बनाने का तरीका
  • कम्यूनिटी विज़ुअलाइज़ेशन बनाने के लिए, JavaScript विज़ुअलाइज़ेशन लाइब्रेरी का इस्तेमाल कैसे करें
  • अपने कम्यूनिटी विज़ुअलाइज़ेशन को Data Studio डैशबोर्ड में इंटिग्रेट करने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

इस कोडलैब को पूरा करने के लिए, आपको इनकी ज़रूरत होगी:

  • इंटरनेट, वेब ब्राउज़र, और टर्मिनल का ऐक्सेस. साथ ही, आपके पसंदीदा टेक्स्ट एडिटर का ऐक्सेस
  • Google खाता
  • Google Cloud Storage बकेट का ऐक्सेस
  • JavaScript, Node.js, और कमांड-लाइन की जानकारी

इस कोडलैब में यह माना गया है कि:

  • आपने पहले ही एक कम्यूनिटी विज़ुअलाइज़ेशन बना लिया है (TODO link first codelab)
  • Google Cloud Storage के बारे में जानकारी हो

शुरू करने के लिए, इस रिपोर्ट की कॉपी बनाएं. इसके लिए, 14575f934e800122.png ऊपर दाएं कोने में मौजूद पर क्लिक करें. कोडलैब पढ़ते समय, इसे किसी दूसरे टैब में खुला रखें.

2. क्विक सर्वे

आपने इस कोडलैब को क्यों चुना?

मुझे डेटा विज़ुअलाइज़ेशन में दिलचस्पी है. मुझे Data Studio के बारे में ज़्यादा जानना है मुझे अपना कम्यूनिटी विज़ुअलाइज़ेशन बनाना है. मुझे Data Studio को किसी दूसरे प्लैटफ़ॉर्म के साथ इंटिग्रेट करना है. मुझे Google Cloud के समाधानों में दिलचस्पी है.

आपको इस कोडलैब/ट्यूटोरियल का इस्तेमाल कैसे करना है?

इसे पढ़ें और सवालों के जवाब दें सिर्फ़ एक बार पढ़ें

Data Studio इस्तेमाल करने के अपने अनुभव को आप क्या रेटिंग देंगे?

मैंने इसके बारे में कभी नहीं सुना मुझे पता है कि यह क्या है, लेकिन मैं इसका इस्तेमाल नहीं करता/करती. मैं इसका नियमित तौर पर इस्तेमाल करता/करती हूं. मैं एक विशेषज्ञ उपयोगकर्ता हूं.

इनमें से कौनसा विकल्प आपके बैकग्राउंड के बारे में सबसे अच्छी तरह बताता है?

डेवलपर बिज़नेस / डेटा ऐनालिस्ट डेटा साइंटिस्ट / डेटा इंजीनियर फ़ाइनेंशियल ऐनालिस्ट मार्केटिंग / सोशल मीडिया / डिजिटल ऐनलिटिक्स एक्सपर्ट बिज़नेस ऐनालिस्ट डिज़ाइनर अन्य

सर्वे की जानकारी सबमिट करने के लिए, अगले पेज पर जाएं.

3. dscc-gen की मदद से कम्यूनिटी विज़ुअलाइज़ेशन डेवलप करना

dscc-gen

dscc-gen, कमांड-लाइन टूल है. यह कम्यूनिटी विज़ुअलाइज़ेशन और कम्यूनिटी कनेक्टर के लिए, सुझाए गए टेंप्लेट और वर्कफ़्लो उपलब्ध कराता है. कम्यूनिटी विज़ुअलाइज़ेशन टेंप्लेट में, काम करने वाला विज़ुअलाइज़ेशन और वर्कफ़्लो होता है. इससे आपको विज़ुअलाइज़ेशन कोड में किए गए बदलाव तुरंत दिखते हैं. साथ ही, इसमें विज़ुअलाइज़ेशन की पुष्टि करने, उन्हें बनाने, और उन्हें डिप्लॉय करने के लिए स्क्रिप्ट भी होती हैं.

सेटअप

dscc-gen, डिप्लॉयमेंट स्क्रिप्ट में gsutil का इस्तेमाल करता है. साथ ही, कम्यूनिटी विज़ुअलाइज़ेशन के JavaScript कोड को बनाने के लिए, npm और webpack का इस्तेमाल करता है.

  1. अपने कंप्यूटर पर npm इंस्टॉल करना
  2. gsutil क्विकस्टार्ट गाइड पढ़ें और Google Cloud Storage बकेट सेट अप करें
  3. उस लोकल डायरेक्ट्री पर जाएं जहां आपको अपना प्रोजेक्ट ढूंढना है

4. dscc-gen का इस्तेमाल करके, कम्यूनिटी विज़ुअलाइज़ेशन का नया प्रोजेक्ट शुरू करना

टर्मिनल खोलें और यह कमांड चलाएं:

npx @google/dscc-gen viz

dscc-gen आपसे प्रोजेक्ट का नाम, "dev" GCS स्टोरेज की जगह, और "prod" स्टोरेज की जगह के बारे में पूछेगा. जगह की जानकारी को gs प्रोटोकॉल के साथ यूआरआई के तौर पर डालें. उदाहरण के लिए, gs://my-gs-project/example-dev. "location" Cloud Storage बकेट या उस बकेट में मौजूद कोई फ़ोल्डर हो सकता है. दोनों स्टोरेज लोकेशन अलग-अलग होनी चाहिए. यह टूल पुष्टि करेगा कि आपके पास, डाली गई वैल्यू का ऐक्सेस है. अगर ये जगहें मौजूद नहीं हैं, तो इन्हें आपके लिए बनाया जाएगा.

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 में टेंप्लेट फ़ाइलों और कमांड की खास जानकारी दी गई है.

5. विज़ुअलाइज़ेशन की झलक स्थानीय तौर पर देखना

सुझाए गए निर्देशों का पालन करें और अपने टर्मिनल में ये कमांड चलाएं:

cd <folder name>

npm run start

ब्राउज़र में एक वेब पेज खुलेगा, जो इस तरह दिखेगा:

2f219993dfb676d4.png

अगले चरण में इस बारे में ज़्यादा जानें.

6. [जानकारी] dscc-gen वर्कफ़्लो कैसे काम करता है

dscc-gen विज़ुअलाइज़ेशन टेंप्लेट में, काम करने वाला विज़ुअलाइज़ेशन और टेंप्लेट इस्तेमाल करने के निर्देश शामिल होते हैं. यहां मुख्य फ़ंक्शन के बारे में बताया गया है:

स्थानीय मैसेज को अपडेट करें: टेंप्लेट में सैंपल मैसेज शामिल किया गया है. हालांकि, ऐसा हो सकता है कि यह आपके इस्तेमाल के उदाहरण के मुताबिक न हो. आपको उस विज़ुअलाइज़ेशन के हिसाब से सैंपल डेटा डाउनलोड करना चाहिए जिसे आपको बनाना है.

लोकल डेवलपमेंट वर्कफ़्लो: अपने स्थानीय डेटा को अपडेट करें से मिले डेटा का इस्तेमाल करके, अपने कोड को स्थानीय तौर पर लिखें और उसकी जांच करें.

विज़ुअलाइज़ेशन बनाएं और उसे डिप्लॉय करें: अपना कोड बनाएं और उसे Google Cloud Storage बकेट में अपलोड करें.

Data Studio में अपना विज़ुअलाइज़ेशन लोड करें: Data Studio रिपोर्ट में विज़ुअलाइज़ेशन जोड़ें.

7. कॉन्फ़िगरेशन तय करना

कॉन्फ़िगरेशन फ़ाइल, विज़ुअलाइज़ेशन का इस्तेमाल करने वाले रिपोर्ट एडिटर और विज़ुअलाइज़ेशन डेवलपर के बीच का कानूनी समझौता है. इससे यह तय होता है कि विज़ुअलाइज़ेशन को Data Studio में लोड करने के बाद, कौन-कौनसे विकल्प उपलब्ध होंगे.

इस बार चार्ट विज़ुअलाइज़ेशन के लिए, कॉन्फ़िगरेशन में एक डाइमेंशन और एक मेट्रिक होगी. साथ ही, एक स्टाइल एलिमेंट होगा. इससे रिपोर्ट एडिटर, बार चार्ट की स्टाइल बदल पाएगा.

src/index.json के कॉन्टेंट को इससे बदलें. पक्का करें कि आपने सभी ब्रैकेट शामिल किए हों. अगर आपको इसे फिर से टाइप करना है, तो पक्का करें कि आपने स्क्वेयर और कर्ली ब्रैकेट के बीच के अंतर और नेस्टिंग स्ट्रक्चर पर ध्यान दिया हो.

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"
          }
        }
      ]
    }
  ]  
}

8. अपडेट किया गया मैसेज डाउनलोड करना

स्थानीय तौर पर सेव किए गए डेटा को अपडेट करने के लिए, यह कमांड चलाएं:

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

यह कमांड, Data Studio में एक विज़ुअलाइज़ेशन डिप्लॉय करती है. यह विज़ुअलाइज़ेशन, मिले हुए डेटा को लोकल विज़ुअलाइज़ेशन में प्रिंट करता है. स्क्रिप्ट, आपके विज़ुअलाइज़ेशन की डिप्लॉयमेंट लोकेशन को प्रिंट करती हैं. इसे ऊपर हाइलाइट किया गया है. इस जगह की जानकारी का इस्तेमाल, Data Studio में विज़ुअलाइज़ेशन लोड करने के लिए किया जाएगा.

अपने विज़ुअलाइज़ेशन को लोड करने के लिए, वह रिपोर्ट खोलें जिसे आपने पहले कॉपी किया था.

  1. "रिपोर्ट में बदलाव करें" पर जाएं
  2. टूलबार में मौजूद, "कम्यूनिटी विज़ुअलाइज़ेशन और कॉम्पोनेंट" पर क्लिक करें

e927f8fbd49979a5.png

  1. "ज़्यादा एक्सप्लोर करें" पर क्लिक करें

c236b0cfcc68ce2c.png

  1. "खुद का विज़ुअलाइज़ेशन बनाएं" पर क्लिक करें
  2. अपना मेनिफ़ेस्ट पाथ डालें (आपके टर्मिनल में gs://... लोकेशन प्रिंट की गई है). इसके बाद, सबमिट करें पर क्लिक करें

26588c6c8382a3b.png

  1. अपनी रिपोर्ट में रेंडर किया गया कार्ड जोड़ने के लिए, उस पर क्लिक करें

विज़ुअलाइज़ेशन को ऐसा JSON रेंडर करना चाहिए जो इस तरह दिखता हो:

a08a61345fe12837.png

पूरे मैसेज को कॉपी करने के लिए, राइट क्लिक करें और 'सभी चुनें' को चुनें. इसके बाद, src/localMessage.js के कॉन्टेंट को अभी कॉपी किए गए कॉन्टेंट से बदलें. फ़ाइल सेव करें.

आपके ब्राउज़र में स्थानीय तौर पर चल रहा विज़ुअलाइज़ेशन अब नहीं दिखेगा. साथ ही, कंसोल में आपको एक गड़बड़ी दिखेगी.

9. बार चार्ट के लिए JavaScript लिखो

सबसे पहले, 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});
}

अगर लोकल सर्वर अब भी चल रहा है, तो अपना ब्राउज़र देखें. अब लोकल डेवलपमेंट वेब पेज पर, नीचे दिए गए बार चार्ट की तरह एक बार चार्ट दिखना चाहिए.

2cb9f9d8d1bd2063.png

10. मेनिफ़ेस्ट अपडेट करना (ज़रूरी नहीं)

आपके विज़ुअलाइज़ेशन मेनिफ़ेस्ट में, आपके विज़ुअलाइज़ेशन के बारे में मेटाडेटा होता है. साथ ही, इसमें आपके विज़ुअलाइज़ेशन JavaScript, कॉन्फ़िगरेशन, और सीएसएस की जगह की जानकारी भी होती है. अपने मेनिफ़ेस्ट में वैल्यू अपडेट करें. इनका इस्तेमाल, उपयोगकर्ता को आपके विज़ुअलाइज़ेशन के बारे में जानकारी देने के लिए किया जाएगा.

अपने विज़ुअलाइज़ेशन के बारे में बताने के लिए, 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"
      }
    }
  ]
}

11. विज़ुअलाइज़ेशन को डिप्लॉय करना

src/index.js में, const LOCAL को "false" पर सेट करें. आपके ब्राउज़र में विज़ुअलाइज़ेशन काम करना बंद कर देगा. बदली गई लाइन के कोड को बोल्ड किया गया है. यह बूलियन कॉन्फ़िगर करता है कि कोड को "लोकल" डेटा फ़ाइल का इस्तेमाल करना चाहिए या Data Studio से मिले डेटा का.

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 कमांड, आपकी JavaScript डिपेंडेंसी को बिना छोटा किए गए आउटपुट में बंडल करती है. साथ ही, आपके मेनिफ़ेस्ट में मौजूद वैल्यू को बदल देती है, ताकि कैश मेमोरी को बंद किया जा सके. इसके अलावा, यह कमांड उस "dev" बकेट की ओर इशारा करती है जिसे आपने पहले कॉन्फ़िगर किया था.

push:dev कमांड, विज़ुअलाइज़ेशन के संसाधनों को "dev" बकेट में अपलोड करती है. इस बकेट को आपने पहले चरण में कॉन्फ़िगर किया था. साथ ही, यह कमांड बकेट की जगह की जानकारी को कंसोल पर प्रिंट करती है..

Data Studio की रिपोर्ट को रीफ़्रेश करें. आपको एक बार चार्ट दिखेगा. प्रॉपर्टी पैनल में, डेटा और स्टाइल के विकल्प बदलकर देखें. डेटा बदलने पर बार भी बदल जाएंगे. हालांकि, बार के रंग की स्टाइल चुनने वाला टूल अभी काम नहीं करेगा.

12. बार चार्ट में रिपोर्ट एडिटर के कलर पिकर का इस्तेमाल करना

कोड में बदलाव करने के लिए, सबसे पहले 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

Data Studio रिपोर्ट को रीफ़्रेश करें. अब आपको बार का रंग बदलने का विकल्प दिखना चाहिए.

fd4e436a6e8dd58b.gif

13. प्रोडक्शन डिप्लॉयमेंट

प्रोडक्शन डिप्लॉयमेंट

जब आपको विज़ुअलाइज़ेशन पसंद आ जाए, तो पक्का करें कि src/index.js में const LOCAL की वैल्यू false हो. इसके बाद, इसे चलाएं.

npm run build:prod
npm run push:prod

इससे आपकी फ़ाइलें, "prod" GCS बकेट की जगह पर डिप्लॉय हो जाएंगी. इसके अलावा, कैश मेमोरी की सुविधा चालू हो जाएगी और बंडल की गई JavaScript को सही तरीके से कम से कम किया जाएगा.

पहले की तरह, कंसोल में आपके डिप्लॉयमेंट की जगह की जानकारी प्रिंट की जाएगी. Data Studio की रिपोर्ट में "prod" विज़ुअलाइज़ेशन लोड करने के लिए, इस "manifest path" का इस्तेमाल करें.

बधाई हो! आपने dscc-gen टूल की मदद से, अभी-अभी अपना पहला कम्यूनिटी विज़ुअलाइज़ेशन बनाया है.

14. अगले चरण

विज़ुअलाइज़ेशन को बड़ा करना

कम्यूनिटी विज़ुअलाइज़ेशन का ज़्यादा से ज़्यादा फ़ायदा पाना

अन्य संसाधन

इस कोडलैब में शामिल कॉन्टेंट के बारे में ज़्यादा जानने के लिए, यहां दिए गए अलग-अलग संसाधनों का इस्तेमाल करें.

संसाधन का टाइप

उपयोगकर्ता से जुड़ी सुविधाएँ

डेवलपर के लिए सुविधाएं

दस्तावेज़ के रूप में

सहायता केंद्र

डेवलपर के लिए दस्तावेज़

खबरें और अपडेट

Data Studio > उपयोगकर्ता सेटिंग में जाकर साइन अप करें

डेवलपर के लिए ईमेल पाने वाली सूची

सवाल पूछें

उपयोगकर्ता फ़ोरम

Stack Overflow [google-data-studio]Data Studio Developers Forum

वीडियो

YouTube पर Data Studio

जल्द ही उपलब्ध होगा!

उदाहरण

रिपोर्ट गैलरी

ओपन सोर्स रिपॉज़िटरी