Treemaps

  1. סקירה כללית
  2. דוגמה
  3. נתוני שימוש
  4. טיפים
  5. בטעינה
  6. פורמט נתונים
  7. אפשרויות הגדרה
  8. שיטות
  9. אירועים
  10. המדיניות בנושא נתונים

סקירה כללית

ייצוג חזותי של עץ נתונים, שבו לכל צומת יכולים להיות אפס צאצאים או יותר, והורה אחד (למעט ברמה הבסיסית (root) שאין לה הורה). כל צומת מוצג כמלבן, בגודל ובצבע בהתאם לערכים שהקציתם. הגדלים והצבעים מוערכים ביחס לכל הצמתים האחרים בתרשים. אפשר לציין כמה רמות להציג בו-זמנית, ואפשר גם להציג רמות עמוקות יותר לפי הרמז. אם צומת הוא צומת עלה, אפשר לציין גודל וצבע. אם הוא לא עלה, הוא יוצג כתיבה תוחמת (bounding box) לצומתי עלים. התנהגות ברירת המחדל היא לזוז למטה בעץ כשמשתמש לוחץ לחיצה שמאלית על צומת, ולעבור חזרה למעלה לעץ כאשר המשתמש לוחץ לחיצה ימנית על התרשים.

הגודל הכולל של התרשים נקבע לפי גודל הרכיב שמכיל שמוסיפים בדף. אם יש לך צומתי עלים שהשמות שלהם ארוכים מדי להצגה, השם ייחתך ויופיע עם שלוש נקודות (...).

דוגמה

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

נתוני שימוש

ניתן לציין אם הרכיבים צריכים להדגיש, ולהגדיר צבעים ספציפיים שישמשו רכיבים מסוימים במקרה הזה. כדי להפעיל את ההדגשה, מגדירים את הערך highlightOnMouseOver:true (לגרסה v49 ומטה) או את enableHighlight: true (לגרסה v50 ואילך). אחר כך אפשר להגדיר את הצבעים לשימוש להדגשת רכיבים באמצעות האפשרויות השונות HighlightColor. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

טיפים

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

הסברים קצרים במפת עצים מותאמים אישית בצורה שונה מתרשימים אחרים: מגדירים פונקציה ואז מגדירים את האפשרות generateTooltip לפונקציה הזו. דוגמה פשוטה:

בתרשים שלמעלה אנחנו מגדירים פונקציה בשם showStaticTooltip שפשוט מחזירה מחרוזת עם קוד ה-HTML שיוצג בכל פעם שהמשתמש מעביר את סמן העכבר מעל תא של מפת העצים. רוצה לנסות? הקוד שיש ליצור:

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

הפונקציה generateTooltip יכולה להיות כל JavaScript שתרצו. בדרך כלל רצוי הסברים קצרים שמשתנים בהתאם לערכי הנתונים. הדוגמה הבאה מראה איך לגשת לכל שדה בטבלת הנתונים.

אם תעבירו את העכבר מעל התאים במפת העץ שלמעלה, תראו הסבר קצר שונה על כל תא. לכל הפונקציות הקצרות של מפת העצים יש שלושה ערכים: row, size ו-value.

  • row: השורה של התא בטבלת הנתונים
  • size: סכום הערך (עמודה 3) של התא הזה וכל הצאצאים שלו
  • value: צבע התא, מבוטא כמספר בין 0 ל-1

בפונקציה showFullTooltip, המחרוזת שאנחנו מחזירים היא תיבת HTML עם חמש שורות:

  • שורה 1 מציגה את השורה המתאימה מטבלת הנתונים, תוך שימוש ליברלי ב-data.getValue.
  • שורה 2 מציינת איזו שורה היא רק הפרמטר row.
  • בשורה 3 מופיע מידע מעמודה 3 של טבלת הנתונים: סכום הערך של עמודה 3 מהשורה הזו, בנוסף לערכים מהצאצאים.
  • שורה 4 מספקת מידע מעמודה 4 של טבלת הנתונים. זהו הערך, אבל הוא מבוטא כמספר בין 0 ל-1 התואם לצבע של התא.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

בטעינה

שם החבילה של google.charts.load הוא "treemap".

  google.charts.load("current", {packages: ["treemap"]});

שם הכיתה של התצוגה החזותית הוא google.visualization.TreeMap.

  var visualization = new google.visualization.TreeMap(container);

פורמט נתונים

כל שורה בטבלת הנתונים מתארת צומת אחד (מלבן בתרשים). לכל צומת (מלבד צומת הרמה הבסיסית (root)) יש צומת הורה אחד. הגודל והצבע של כל צומת נקבעים לפי הערכים שלו ביחס לצמתים האחרים שמוצגים כרגע.

טבלת הנתונים צריכה לכלול ארבע עמודות בפורמט הבא:

  • עמודה 0 - [string] מזהה לצומת הזה. היא יכולה להיות כל מחרוזת JavaScript חוקית, כולל רווחים וכל אורך שמחרוזת יכולה להכיל. הערך מוצג ככותרת הצומת.
  • עמודה 1 - [string] - המזהה של צומת ההורה. אם זהו צומת הרמה הבסיסית (root), יש להשאיר אותו ריק. לכל מפת עצים יכול להיות רק שורש אחד.
  • עמודה 2 - [מספר] - גודל הצומת. מותר להשתמש בכל ערך חיובי. הערך הזה קובע את גודל הצומת, המחושב ביחס לכל הצמתים האחרים שמוצגים כרגע. בצמתים ללא עלים, המערכת מתעלמת מהערך הזה ומחושב על סמך הגודל של כל הצאצאים שלו.
  • עמודה 3 – [אופציונלי, number] – ערך אופציונלי שמשמש לחישוב צבע בצומת הזה. מותר להשתמש בכל ערך, חיובי או שלילי. קודם כל, ערך הצבע מחושב מחדש בסולם מ-minColorValue עד maxColorValue, ולאחר מכן לצומת מוקצה צבע מההדרגתיות בין minColor ל-maxColor.

אפשרויות הגדרה

שם
הפעלת הדגשה (לגרסה v50 ומעלה)

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

סוג: בוליאני
ברירת מחדל: false
eventsConfig (עבור v50+ )

הגדרת האירוע להפעלת אינטראקציות במפת העץ. פורמט להגדרת אינטראקציות:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
אם מערך התצורה לא מוגדר או חסר לאינטראקציה, ייעשה שימוש בברירת המחדל.
אם ההגדרה היא מערך ריק, האינטראקציה תושבת.
כדי לקבל הגדרה חוקית, המאפיין mouse_event חייב להיות פרמטר נתמך בעכבר. בשלב הבא אפשר להשתמש בעד ארבעה מקשי צירוף מפתחות אופציונליים.
אינטראקציות נתמכות:
הדגשה, ביטול הדגשה, אוסף ערוצים, הצגת פירוט.
אירועי עכבר נתמכים:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. כאשר 'תפריט ההקשר' תואם ללחיצה ימנית.
מקשי צירוף נתמכים של אירועי עכבר:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
מקבלים את ההגדרות הנוכחיות:
שיטת שיחה getEventsConfig().
דוגמה לשימוש בפקודה Control+Shift+Right_Click כדי להעלות את העץ:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Type: object (סוג אובייקט)
ברירת המחדל: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

צבע הטקסט. מציינים ערך צבע של HTML.

סוג: מחרוזת
ברירת מחדל: #⌘
fontFamily

משפחת הגופנים לשימוש בכל הטקסט.

סוג: מחרוזת
ברירת מחדל: אוטומטי
fontSize

גודל הגופן של כל הטקסט, בנקודות.

סוג: מספר
ברירת מחדל: 12
forceIFrame

משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames).

סוג: בוליאני
ברירת מחדל: false
headerColor

הצבע של קטע הכותרת עבור כל צומת. מציינים ערך צבע של HTML.

סוג: מחרוזת
ברירת מחדל: #988f86
headerHeight

הגובה של קטע הכותרת בכל צומת, בפיקסלים (הוא יכול להיות אפס).

מספר סוג
ברירת מחדל: 0
headerHighlightColor

צבע הכותרת של צומת שמעליו מעבירים את העכבר. מציינים ערך של צבע HTML או ערך null. אם הערך הזה ריק, הערך של headerColor יואר ב-35%.

סוג: מחרוזת
ברירת מחדל: null
MarkOnMouseOver (הוצא משימוש עבור v50+ )

הוצא משימוש לגרסה 50 ואילך. לגרסה 50 ואילך, יש להשתמש ב-enableHighlight. ההגדרה קובעת אם רכיבים צריכים להציג אפקטים מודגשים כשמעבירים את העכבר מעליו. אם המדיניות מוגדרת לערך true, אפשר לציין את ההדגשה של רכיבים שונים באמצעות האפשרויות השונות של highlightColor.

סוג: בוליאני
ברירת מחדל: false
hintOpacity

כשהערך של maxPostDepth גדול מ-1, ולכן מוצגים צמתים שמתחת לעומק הנוכחי, המדיניות hintOpacity מציינת את מידת השקיפות שבה הוא צריך להיות. הוא צריך להיות בין 0 ל-1. ככל שהערך גבוה יותר, כך הצומת קטן יותר.

סוג: מספר
ברירת מחדל: 0.0
maxColor

הצבע של מלבן עם ערך עמודה 3 של maxColorValue. מציינים ערך צבע ל-HTML.

סוג: מחרוזת
ברירת מחדל: #00dd00
maxDepth

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

סוג: מספר
ברירת מחדל: 1
maxHighlightColor

צבע ההדגשה לשימוש עבור הצומת עם הערך הגדול ביותר בעמודה 3. מציינים ערך צבע HTML או ערך null. אם הערך הוא null, הערך הזה יהיה הערך של maxColor שהוא יבהיר ב-35%.

סוג: מחרוזת
ברירת מחדל: null
maxPostDepth

מספר רמות הצמתים מעבר ל-maxDepth שיוצגו באופן "רמז". צמתים עם רמזים מוצגים כמלבנים מוצללים בתוך צומת שנמצא במסגרת המגבלה של maxDepth.

סוג: מספר
ברירת מחדל: 0
maxColorValue

הערך המקסימלי המותר בעמודה 3. כל הערכים שגדולים מהערך הזה ייחתכו. אם הוא מוגדר כ-null, הוא יוגדר לערך המקסימלי בעמודה.

סוג: מספר
ברירת מחדל: null
midColor

הצבע של מלבן עם ערך בעמודה 3 באמצע בין maxColorValue ל-minColorValue. מציינים ערך צבע של HTML.

סוג: מחרוזת
ברירת מחדל: #000000
midHighlightColor

צבע ההדגשה שבו צריך להשתמש עבור הצומת עם ערך בעמודה 3 ליד החציון של minColorValue ו-maxColorValue. מציינים ערך של צבע HTML או null. אם הערך הוא null, הערך של midColor יוגדל ב-35%.

סוג: מחרוזת
ברירת מחדל: null
minColor

הצבע של מלבן שערך עמודה 3 שלו הוא minColorValue. מציינים ערך צבע ל-HTML.

סוג: מחרוזת
ברירת מחדל: #dd0000
minHighlightColor

צבע ההדגשה שבו צריך להשתמש לצומת עם הערך בעמודה 3 שהכי קרוב ל-minColorValue. צריך לציין ערך של צבע HTML או ערך null. אם הערך הוא null, הערך הזה יהיה הערך של minColor מואר ב-35%.

סוג: מחרוזת
ברירת מחדל: null
minColorValue

הערך המינימלי המותר בעמודה 3. כל הערכים הנמוכים יותר מהערך הזה ייחתכו לערך הזה. אם הערך שמוגדר הוא null, הוא יחושב כערך המינימלי בעמודה.

סוג: מספר
ברירת מחדל: null
noColor

הצבע של מלבן כאשר לצומת אין ערך בעמודה 3, והצומת הוא עלה (או מכיל רק עלים). מציינים ערך צבע של HTML.

סוג: מחרוזת
ברירת מחדל: #000000
noHighlightColor

הצבע שבו יש להשתמש למלבן שצבעו 'לא' מודגש. מציינים ערך צבע HTML או ערך null. אם הערך הוא null, הערך של noColor יוגדל ב-35%.

סוג: מחרוזת
ברירת מחדל: null
showScale

הגדרה שקובעת אם להציג סולם צבעים הדרגתי מ-minColor עד maxColor בחלק העליון של התרשים. צריך לציין True כדי להציג את קנה המידה.

סוג: בוליאני
ברירת מחדל: false
showTooltips

הגדרה שקובעת אם להציג הסברים קצרים.

סוג: בוליאני
ברירת מחדל: True
textStyle

אובייקט שמציין את סגנון הטקסט, לתרשימים מסוימים שבאזור התוכן שלהם יש טקסט, למשל מפת העץ. זהו הפורמט של האובייקט: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

טקסט להצגה מעל התרשים.

סוג: מחרוזת
ברירת מחדל: ללא שם
titleTextStyle

אובייקט שמציין את סגנון טקסט הכותרת. זהו הפורמט של האובייקט:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

הערך color יכול להיות כל מחרוזת של צבע HTML, לדוגמה: 'red' או '#00cc00'. ראו גם את fontName ואת fontSize.

Type: object (סוג אובייקט)
ברירת המחדל: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

האם להשתמש בממוצעים משוקללים לצורך צבירה.

סוג: בוליאני
ברירת מחדל: false

שיטות

שיטה
draw(data, options)

מצייר את התרשים.

סוג החזרה: ללא
getEventsConfig() (for v50+)

מחזירה את ההגדרה הנוכחית של האינטראקציה. אפשר להשתמש בו כדי לאמת את אפשרות ההגדרה eventsConfig

סוג החזרה: אובייקט
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

הטמעה רגילה של getSelection(). הרכיבים שנבחרו הם צמתים. ניתן לבחור רק צומת אחד בכל פעם.

סוג החזרה: מערך של רכיבי בחירה
setSelection()

הטמעה רגילה של setSelection(). הרכיבים שנבחרו הם צמתים. ניתן לבחור רק צומת אחד בכל פעם.

סוג החזרה: ללא
goUpAndDraw()

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

סוג החזרה: ללא
getMaxPossibleDepth()

מחזירה את העומק המרבי האפשרי של התצוגה הנוכחית.

סוג החזרה: מספר
clearChart()

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

סוג החזרה: ללא

אירועים

ב-eventsConfig מוסבר איך מגדירים טריגרים של אירועים.
שם
onmouseover

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

מאפיינים: שורה
highlight (for v50+)

מופעל כשהמשתמש מדגיש צומת. הטריגר שמוגדר כברירת מחדל הוא ריחוף עם העכבר. אפשר להגדיר אותו באמצעות eventsConfig עבור גרסה 50 ואילך. הגורם המטפל באירועים מועבר לאינדקס השורה של הרשומה המתאימה בטבלת הנתונים.

מאפיינים: שורה
onmouseout

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

מאפיינים: שורה
unhighlight (for v50+)

מופעל כשהמשתמש מבטל את ההדגשה של צומת. הטריגר שמוגדר כברירת מחדל הוא שחרור העכבר. אפשר להגדיר אותו באמצעות eventsConfig עבור גרסה 50 ואילך. הגורם המטפל באירועים מועבר לאינדקס השורה של הרשומה המתאימה בטבלת הנתונים.

מאפיינים: שורה
ready

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

מאפיינים: ללא
rollup

מופעל כשהמשתמש מנווט חזרה למעלה בעץ. טריגר ברירת המחדל הוא לחיצה ימנית. אפשר להגדיר אותו באמצעות eventsConfig עבור גרסה 50 ואילך. מאפיין השורה שמועבר ל-handler של אירועים הוא השורה של הצומת שהמשתמש מנווט שממנו, ולא השורה שאליה המשתמש מנווט אל.

מאפיינים: שורה
select

מופעל כשהמשתמש מציג פירוט או מגלגל צומת. מופעל גם כשמתבצעת קריאה ל-method setSelection() או goUpAndDraw(). כדי לדעת איזה צומת נבחר, קוראים לפונקציה getSelection().

מאפיינים:ללא
drilldown (for v50+)

מופעל כשהמשתמש מנווט עמוק יותר לתוך העץ. הטריגר שמוגדר כברירת מחדל הוא לחיצה. אפשר להגדיר אותו באמצעות eventsConfig לגרסה 50 ואילך. כדי לדעת על איזה צומת לחצו, יש להתקשר getSelection().

מאפיינים:ללא

המדיניות בנושא נתונים

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