יצירת המחשות ויזואליות לקהילה ב-Data Studio באמצעות יצירה של עותק DSA

1. מבוא

Google Data Studio מאפשר לכם ליצור בחינם לוחות בקרה דינמיים ואינטראקטיביים עם תצוגות חזותיות יפות של נתונים. תצוגות חזותיות לקהילה היא תכונה של Data Studio שמאפשרת ליצור תצוגות חזותיות בהתאמה אישית באמצעות JavaScript, שמשתלבות בדוחות של Data Studio.

מה תלמדו

ב-codelab הזה תלמדו:

איך פועלת המחשה של הקהילה ב-Google Data Studio
איך יוצרים תרשים קהילתי באמצעות כלי התבניות שלנו לשורת הפקודה
איך משתמשים בספריות של JavaScript ליצירת ויזואליזציות כדי ליצור ויזואליזציות לקהילה
איך משלבים המחשה של הקהילה בלוח בקרה של Data Studio

הדרישות

כדי להשלים את ה-codelab הזה, תצטרכו:

גישה לאינטרנט, לדפדפן אינטרנט ולטרמינל, ולעורך הטקסט המועדף שלכם
חשבון Google
גישה לקטגוריה של Google Cloud Storage
היכרות עם Javascript,‏ Node.js ושורת הפקודה

ההנחות של ה-Codelab הזה הן:

כבר יצרתם תרשים להמחשת נתונים של הקהילה (נדרש קישור ל-codelab הראשון)
מכירים את Google Cloud Storage

כדי להתחיל, יוצרים עותק של הדוח הזה על ידי לחיצה על בפינה השמאלית העליונה. כדאי להשאיר אותו פתוח בכרטיסייה אחרת בזמן שקוראים את ה-codelab.

2. סקר מהיר

למה בחרת ב-Codelab הזה?

אני מתעניין בהמחשת נתונים באופן כללי.

אני רוצה ללמוד עוד על Data Studio

אני רוצה ליצור תרשים משלי של נתונים מהקהילה

אני מנסה לשלב את Data Studio עם פלטפורמה אחרת.

אני רוצה לקבל מידע על פתרונות של Google Cloud.

איך תשתמשו ב-codelab או במדריך הזה?

קוראים את המאמר ומבצעים את התרגילים

קוראים רק את הכותרות

איזה דירוג מגיע לדעתך לחוויית השימוש שלך ב-Data Studio?

לא שמעתי על זה אף פעם

אני יודע מה זה אבל אני לא משתמש בזה

אני משתמש בו באופן קבוע.

אני משתמש מומחה.

מה מתאר את הרקע שלך בצורה הטובה ביותר?

מפתח

אנליסט עסקי / מנתח נתונים

מדען נתונים / מהנדס מערכות מידע

אנליסט פיננסי

מומחה לשיווק / למדיה חברתית / לניתוח נתונים דיגיטליים

אנליסט עסקי

מעצב

אחר

עוברים לדף הבא כדי לשלוח את פרטי הסקר.

3. פיתוח של תרשימים קהילתיים באמצעות dscc-gen

dscc-gen

‫dscc-gen הוא כלי לשורת פקודה שמספק תבניות וזרימות עבודה מובנות לתרשימים קהילתיים ולמחברים קהילתיים. תבנית ההמחשה של הקהילה מספקת המחשה פעילה ותהליך עבודה שמאפשר לכם לראות מיד את השינויים בקוד ההמחשה, וסקריפטים לאימות, ליצירה ולפריסה של ההמחשות.

הגדרה

‫dscc-gen משתמש ב-gsutil בסקריפטים של פריסה, וב-npm וב-webpack כדי ליצור קוד JavaScript של תרשימים של הקהילה.

התקנת npm במחשב המקומי
עוברים על המדריך למתחילים של gsutil ומגדירים קטגוריה של Google Cloud Storage
עוברים לספרייה מקומית שבה רוצים לאתר את הפרויקט.

4. התחלת פרויקט חדש של ויזואליזציה קהילתית באמצעות dscc-gen

פותחים טרמינל ומריצים את הפקודה:

npx @google/dscc-gen viz

הכלי dscc-gen יבקש מכם שם פרויקט, מיקום אחסון ב-GCS של 'פיתוח' ומיקום אחסון של 'ייצור'. מזינים את המיקום כ-URI עם הפרוטוקול gs, לדוגמה gs://my-gs-project/example-dev. 'מיקום' יכול להיות קטגוריה של 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

ייפתח דפדפן עם דף אינטרנט שנראה כך:

מידע נוסף מופיע בשלב הבא.

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.

כדי לטעון את התרשים, פותחים את הדוח שהעתקתם קודם.

עוברים אל 'עריכת הדוח'
בסרגל הכלים, לוחצים על 'תרשימים להמחשה ורכיבים של הקהילה'.

לוחצים על 'מידע נוסף'.

לוחצים על 'יצירת תרשים משלכם'.
מזינים את הנתיב למניפסט (המיקום gs://... שמופיע בהדפסה במסוף) ולוחצים על 'שליחה'.

לוחצים על הכרטיס שנוצר כדי להוסיף אותו לדוח.

ההדמיה צריכה לעבד JSON שנראה בערך כך:

מעתיקים את כל ההודעה באמצעות לחיצה ימנית ובחירה באפשרות 'הכול', ומחליפים את התוכן של 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});
}

אם השרת המקומי עדיין פועל, צריך לבדוק את הדפדפן. עכשיו בדף האינטרנט של הפיתוח המקומי אמור להופיע תרשים עמודות, כמו זה שמופיע בהמשך.

10. עדכון המניפסט (אופציונלי)

מניפסט ההצגה החזותית מכיל מטא-נתונים על ההצגה החזותית, וגם את המיקום של ה-JavaScript, ההגדרה וה-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"
      }
    }
  ]
}

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 לפלט לא מכווץ, ומחליפה את הערכים במניפסט כדי להשבית את השמירה במטמון ולהפנות אל מאגר ה-bucket 'dev' שהגדרתם קודם.

הפקודה push:dev מעלה את משאבי הוויזואליזציה לקטגוריה dev שהגדרתם בשלב 1, ומדפיסה את מיקום הקטגוריה במסוף.

רענון הדוח ב-Data Studio. יוצג תרשים עמודות. אפשר לנסות לשנות את אפשרויות הנתונים והסגנון בחלונית המאפיינים. שינוי הנתונים ישנה את העמודות. עם זאת, הכלי לבחירת סגנון הצבע של הסרגל עדיין לא יפעל.

12. שימוש בבחירות צבעים בכלי הדוחות בתרשים העמודות

כדי לערוך את הקוד באופן מקומי, קודם צריך לעדכן את המשתנה const LOCAL ב-src/index.js ל-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 וחוזרים לסשן הדפדפן המקומי. אפשר לראות את הפונקציה פועלת באופן מקומי, ואז לשנות את הערך של הקבוע LOCAL ל-false.

כדי להעלות את הקבצים המעודכנים ל-Google Cloud Storage, מריצים את הפקודה:

npm run build:dev
npm run push:dev

מרעננים את הדוח ב-Data Studio. עכשיו אמורה להיות לך אפשרות לשנות את הצבע של העמודות.

13. פריסות בסביבת הייצור

פריסות בסביבת הייצור

אחרי שאתם מרוצים מהוויזואליזציה, מוודאים שהערך של const LOCAL ב-src/index.js הוא false, ואז מריצים.

npm run build:prod
npm run push:prod

הפעולה הזו תפרוס את הקבצים במיקום של דלי GCS 'prod'. בנוסף, ייעשה שימוש במטמון, וקובץ ה-JavaScript המצורף ימוזער בצורה מתאימה.

בדיוק כמו קודם, המיקום של הפריסה יודפס במסוף. משתמשים בנתיב המניפסט הזה כדי לטעון את ההמחשה הוויזואלית של הסביבה 'prod' בדוח של Data Studio.

מעולה! הרגע יצרתם את הוויזואליזציה הראשונה של הקהילה באמצעות הכלי dscc-gen.

14. השלבים הבאים

הרחבת התצוגה החזותית

הוספת אינטראקציות לתצוגה החזותית
מידע נוסף על רכיבי סגנון זמינים והוספת סגנון נוסף להמחשה

עוד פעולות שאפשר לבצע בעזרת ויזואליזציות קהילתיות

כדאי לעיין בהפניות ל- dscc helper library, ל- manifest ול- קובץ התצורה.
שליחת התצוגה החזותית לגלריית התצוגות החזותיות של הקהילה.
ליצור פלאגין חיבור למקור נתונים ל-Data Studio.

מקורות מידע נוספים

בהמשך מפורטים מקורות מידע שונים שאפשר לגשת אליהם כדי להעמיק בחומר שמופיע ב-Codelab הזה.

סוג משאב	תכונות למשתמשים	תכונות למפתחים
מסמכי תיעוד	מרכז העזרה	מאמרי עזרה למפתחים
חדשות ועדכונים	נרשמים ב-Data Studio > הגדרות משתמש	רשימת תפוצה למפתחים
שאלת שאלות	פורום משתמשים	Stack Overflow [google-data-studio]פורום המפתחים של Data Studio
סרטונים	Data Studio ב-YouTube	בקרוב!
דוגמאות	Report Gallery	מאגר קוד פתוח