Skip to content

Commit

Permalink
Add highlighting / supportsHighlight documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Lenny Urbanowski committed Aug 15, 2016
1 parent b89fafc commit 7387612
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 1 deletion.
8 changes: 7 additions & 1 deletion Capabilities/Capabilities.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,10 @@ Types refer to what the property will be. See below for more information about t
}
```

[Learn more about objects](Objects.md)
[Learn more about objects](Objects.md)

##Handle partial highlighting - `supportsHighlight`

By default this value is set to false which means your "Values" will be automatically filtered when something on the page is selected which will in turn update your visual to display just the selected value. If you want display the full data, but just highlight the selected items you need to set `supportsHighlight` to true in your capabilities.json.

[Learn more about highlighting](Highlighting.md)
13 changes: 13 additions & 0 deletions Capabilities/Highlighting.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#Highlighting

By default whenever an element is selected the `values` array in the `dataView` object will be filtered to just the selected values. This will cause all other visuals on the page to display just the selected data.

![highlight dataview default behavior](images/highlightDataView.png)

##supportsHighlight

If you set the `supportsHighlight` property in your capabilities.json to true you will receive the full unfiltered `vaules` array along with a `highlights` array. The `highlights` array will be the same length as the values array and any non-selected values will be set to `null`. With this property enabled it is the visual's responsiblity to highlight the appropriate data by comparing the `values` array to the `highlights` array.

![highlight dataview supportsHighlight](images/highlightDataViewSupports.png)

In the example above you'll notice that the one bar that is selected is the only value in the highlights array. It is also important to note there could be multiple selections and partial highlight (where the corresponding numeric value in the values and highlights arrays will be present but different)
Binary file added Capabilities/images/highlightDataView.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Capabilities/images/highlightDataViewSupports.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ In this tutorial, you will be building a simple bar chart. The source code is lo
* [Data Roles](Capabilities/Capabilities.md#define-the-data-fields-your-visual-expects---dataroles)
* [Data View Mappings](Capabilities/DataViewMappings.md)
* [Objects](Capabilities/Objects.md)
* [Highlighting](Capabilities/Highlighting.md)
* [Visual Documentation](Visual/Visual.md)
* [Visual/IVisual Api](Visual/IVisualApi.md)
* [Handling Selection in Visuals](Visual/Selection.md)
Expand Down

0 comments on commit 7387612

Please sign in to comment.