# Get Started

This section features the steps to get you started with xViz Performance Flow.

xViz Performance Flow is a custom visual in Power BI. The first step to using Performance Flow is to add it to the Power BI canvas before we start working on it.

## Overview of Key Components:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2Fgldf48Xsw5gee0m7Rb93%2Fpf.png?alt=media&#x26;token=1663227a-c850-4177-b59e-4bc9e04c92b0" alt="" width="563"><figcaption><p><em>Image 1: Components in xViz Performance Flow</em></p></figcaption></figure>

Here's a breakdown of its key elements:

### Toolbar

1. Map Fields: Show additional details using the Map field.
2. Design
   * Orientation: Ability to change the direction of flow of the visual.
   * Layout: Ability to change the way leaf level nodes are arranged in the hierarchy.
   * Template: A bunch of interesting, predefined templates for the view of the nodes.
   * Display: Provides a range of formatting options to customize the visuals.
   * Autofit: Provides the various options to fit the canvas view optimally.
3. Sparkline: Visualize the trend of the KPIs.
4. KPI/Variance: Provides a KPI value for each node along with its variance compared to a benchmark or reference value.
5. Links: Displays the relationships between nodes with additional connectors.
6. Analyze
   * Conditional Formatting: Highlight nodes using data-driven rules.
   * Notes: Display additional textual notes on nodes for the storytelling.
   * Search: Find specific text values within the hierarchical structure.
   * Filter: Filter the canvas view based on specific condition.
   * Filter Context: Allows to add descriptive notes to specific nodes for specific filter selections.
7. Reset: Reset all settings in the visual to default.

### Levels

1. Levels: Expand or collapse hierarchy levels based on level selection.

### Canvas Controls

1. Zoom: Zoom in and out the canvas view for better readability.
2. Mini Map: Provides an overview of the entire visual for easy navigation.
3. Expand All: Fully expands all hierarchy levels.
4. Fit: Automatically adjusts the visual to fit within the available space.

## Setting Up Performance Flow:

### 1. Add Visual

Click on the Performance Flow icon from the Visualizations pane to add visual to the canvas. Resize it to fit your needs.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2Fa9PkPRJg4yiixGBoWytU%2Fimage.png?alt=media&#x26;token=38c55000-47f9-46ab-b334-e2cb2ee69826" alt="" width="563"><figcaption><p><em>Image 2: Click on the Performance Flow icon.</em></p></figcaption></figure>

### 2. Populate Data

The visual supports two kinds of hierarchical structures. Id & Parent Id Structure and Multiple Category Structure.

1. Hierarchy Field & Parent Field

   * Id & Parent Id Structure: Populate Hierarchy Field with Id column and Parent Field with Parent Id column.

   <figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FxshMIudOMrJDmbnRBUmS%2Fimage.png?alt=media&#x26;token=eb04205b-8f2e-4a8a-a6da-48f20bca373a" alt="" width="180"><figcaption><p><em>Image 3: Hierarchy Field &#x26;</em> <br><em>Parent Id Field</em></p></figcaption></figure>

   * Multiple Category Structure: Populate Hierarchy Field with at least two columns.

   <figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FSpk0TGuReeajQOBfp6iB%2Fimage.png?alt=media&#x26;token=71d70d42-52db-4827-8711-6d272ebfe7ae" alt="" width="181"><figcaption><p><em>Image 4: Hierarchy Field</em></p></figcaption></figure>

2. Sparkline: Populate the Date or Time series column to show the trend.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FfNhFy86kEFm2bCgVM6ST%2Fimage.png?alt=media&#x26;token=41f125a0-59f9-46d8-84a7-e5b7eb8e187f" alt="" width="180"><figcaption><p><em>Image 5: Sparkline Field</em></p></figcaption></figure>

3. Values: Populate Numeric column or DAX Measure to display KPIs.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FUsVJALyAYFQYbeL6wrvu%2Fimage.png?alt=media&#x26;token=dd774072-e884-445b-af19-1e2210491c61" alt="" width="181"><figcaption><p><em>Image 6: Values Field</em></p></figcaption></figure>

4. Fields: Populate the multiple columns to for the additional details.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2F5gksj46CuOpDiBryYD6j%2Fimage.png?alt=media&#x26;token=9f81ae0a-41d7-44ab-bafb-ada9b9e8e4f2" alt="" width="181"><figcaption><p><em>Image 6: Fields Data Field</em></p></figcaption></figure>

5. Tooltip: Populate additional columns to display information on tooltip.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FwfobocU0orBPwYGD3jwL%2Fimage.png?alt=media&#x26;token=17a970a9-40fc-4dd4-8dbc-b54776f108d6" alt="" width="183"><figcaption><p><em>Image 7: Tooltip Field</em></p></figcaption></figure>
