רכיבי ההמחשה של Looker הם חבילה של רכיבים מבוססי React שזמינים בחבילת @looker/visualizations קוד פתוח.
רכיבי הוויזואליזציה מקבלים ערך Query.client_id או מזהה שאילתה מ-Looker Explore או מזהה לוח בקרה מלוח בקרה של Looker ומציגים ויזואליזציה בצד הלקוח ללא iframe.
אפשר להשתמש ברכיבים האלה כמו שהם, להתאים אותם אישית או להתייחס אליהם כאל מעצבי נתונים בלבד כדי להעביר נתונים נקיים מ-Looker Explore, וכך ליצור תרשימים מותאמים אישית משלכם.
רכיבי הוויזואליזציה של Looker מיועדים לשימוש בסביבת React שעברה אימות באמצעות API של Looker באמצעות TypeScript/JavaScript SDK. השלב הזה מתבצע אוטומטית כשמשתמשים ב-framework של תוספים ב-Looker.
יצירת המחשות חזותיות באמצעות רכיבי ההמחשה של Looker
חבילת רכיבים להמחשה של Looker כוללת שני רכיבים ברמה גבוהה לעבודה עם הנתונים:
-
Query— אחראי לאחזור הנתונים ולטעינת התגובה אל React context -
Visualization– מקבל את הנתונים שמוחזרים על ידיQueryומשתמש במתאמי הגדרה כדי להציג תרשים מותאם אישית בדף
נכון לעכשיו, אפשר להציג את הנתונים כתרשימים מהסוגים הבאים:
- קו
- אזור
- פיזור
- Sparkline
- ערך יחיד
- עמודה
- עמודה
- טבלה
- עוגה
אנחנו מפתחים עוד סוגים של תרשימים.
כדי לראות את טבלאות המאפיינים של כל סוג תרשים, אפשר לעיין בדף התיעוד בנושא טבלאות מאפיינים של ויזואליזציה ושאילתות.
כדי לראות את אפשרויות ההגדרה הזמינות לכל סוג תרשים, אפשר לעיין בסביבת המשחקים של כלי הוויזואליזציה.
למה כדאי להשתמש ברכיבים להמחשה?
רכיבים להמחשה משפרים ומפשטים את תהליך הרינדור של ויזואליזציה מ-Looker באפליקציה, חוסכים זמן למפתחים ומעניקים להם יותר אפשרויות להתאמה אישית ולהרחבה של הוויזואליזציות שלהם מ-Looker.
- הטמעה משופרת – רכיבי ההמחשה מאפשרים למפתחים להטמיע המחשה של Looker באפליקציה בלי להשתמש ב-iframe. כך אפשר לשפר את הביצועים, את המעקב ואת היכולת להתאים אישית.
- שילוב קל – אפשר לשלב רכיבים להמחשה עם רכיבים אחרים מ-
@looker/componentsכדי ליצור קומפוזיציות חדשות לגמרי וחוויות חדשות בחלק הקדמי של האתר. - התאמה אישית – קל יותר להתאים אישית תצוגות חזותיות מוטמעות כשמשתמשים ברכיבים להמחשה מאשר כשמשתמשים ב-iframe. בנוסף, רכיבי הוויזואליזציה מאפשרים למפתחים ליצור אפליקציות בהתאמה אישית הרבה יותר מהר, בלי ליצור שכבת ויזואליזציה מאפס.
- פישוט – רכיבים להמחשה משפרים את הניידות של הוויזואליזציות ב-Looker ומפשטים את האינטראקציות עם Looker API.
התקנת רכיבים להמחשה
כדי להתחיל, מוסיפים את חבילת ה-NPM של רכיבי ההמחשה של Looker:
- NPM:
npm install @looker/visualizations - YARN:
yarn add @looker/visualizations
תצטרכו גם לעמוד בכמה תלות עמיתים – Looker/components, React ו-Styled Components:
- NPM:
npm install @looker/components react react-dom styled-components - YARN:
yarn add @looker/components react react-dom styled-components
מידע על התקנה ושימוש בחבילת רכיבים להמחשה זמין במסמך ה-README ב-GitHub וב-NPM.