כתיבה מהירה יותר של התצוגות החזותיות באמצעות dscc-gen

תהליך העבודה הרגיל כדי לראות שינויים בסוג ויזואליזציית נתונים במאגר הקהילה (community visualization) הוא העלאה של הקבצים ל-GCS, ואז רענון של הדוח ב-Data Studio. השיטה הזו עובדת, אבל יכול להיות שתצטרכו לחכות הרבה זמן עד שתראו את השינויים. dscc-gen מאפשר לכם לראות את השינויים בקוד הוויזואליזציה באופן מיידי, וכך לקצר את הזמן שנדרש לכתיבת סוג ויזואליזציית נתונים במאגר הקהילה (community visualization).

כדי להתחיל, צריך לוודא שמותקנים npm 5.2.0 ואילך ו-gsutil. לאחר מכן, מריצים את הפקודה:

npx @google/dscc-gen viz

הגדרה בפעם הראשונה

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

  1. מעדכנים את ההגדרה בכתובת src/index.json.
  2. מריצים את npm run update_message. הפעולה הזו תפרוס הדמיה בדלי dev שלכם, שתציג את ההודעה בפורמט שקל להעתיק.
  3. יוצרים דוח חדש ומתחברים למערך נתונים שמייצג את הנתונים שרוצים להמחיש.
  4. מוסיפים סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) באמצעות קטגוריית dev כרכיב מזהה.
  5. מעתיקים את התוכן של הוויזואליזציה אל scripts/data/localData.js. הנתונים האלה ישמשו אתכם בפיתוח מקומי.

סקריפטים

הסקריפטים הבאים זמינים לפרויקטים של ויזואליזציה שנוצרו באמצעות dscc-gen.

פקודה פעולה
npm run start הפעלת השרת המקומי ותצוגה מקדימה של הוויזואליזציה
npm run update_message עדכון ההודעה באמצעות objectFormat
npm run build:dev בניית קבצים מ-./src ל-./build עם השבתה של שמירת נתונים במטמון.
npm run push:dev מעתיקים את הקבצים מ-build לקטגוריית dev.
npm run build:prod יצירת קבצים מ-./src ב-./build עם שמירת נתונים במטמון מופעלת.
npm run push:prod מעתיקים את הקבצים מ-build ל-bucket prod.

הפקודה update_message מוגדרת כברירת מחדל ל-objectFormat. כדי להשתמש ב-tableFormat, עורכים את הפרמטרים בסקריפט update_message ב-package.json מ--f object ל--f table.

Codelab

כדי ללמוד איך להשתמש בכלי, אפשר לעיין ב-codelab בנושא dscc-gen.

dscc-gen codelab