diff --git a/docusaurus.config.js b/docusaurus.config.js index ce3beebd..121bf672 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -31,7 +31,7 @@ const config = { "https://github.com/deneb-viz/deneb-viz.github.io/edit/source/", versions: { current: { - label: "1.6 🚧", + label: "v.next 🚧", }, }, }, diff --git a/versioned_docs/version-1.6/archive/changelog-001.md b/versioned_docs/version-1.6/archive/changelog-001.md new file mode 100644 index 00000000..a008f6fc --- /dev/null +++ b/versioned_docs/version-1.6/archive/changelog-001.md @@ -0,0 +1,161 @@ +--- +id: changelog-001 +description: Deneb Change Log - All changes prior to version 1.0 +title: Previous Releases (< 1.0) +--- + +# Previous Release Change Log (< 1.0) + +:::caution Archived Page +This page is an archive of the change log from initial public preview (0.1) to the final preview version before AppSource publication (0.6). +::: + +## 0.6.0 (2021-10-11) + +#### **IMPORTANT NOTES** + +- In preparation for AppSource submission (hopefully soon) and to leverage modern tooltips, the Power BI visual APIs have been updated to the latest versions. As such, if you're using Power BI Report Server, you will need to be running [September 2021](https://powerbi.microsoft.com/en-us/blog/power-bi-report-server-september-2021-feature-summary/)) or later. +- If you are currently using external URLs in your specifications, these will not be permitted upon submission to AppSource due to certification requirements. + - This feature is still enabled in 0.6 but may be switched off in future. + - If and when this happens, we will make a separate version available with the feature enabled. + +#### **New Features and Enhancements** + +- [Context Menu](../interactivity-context-menu) (#5) and [Cross-Filtering](../interactivity-selection) support (#6) have been added. + - Due to the flexible nature of Vega/Vega-Lite, and how data point reconciliation works across visuals and to the data model within Power BI, there are some things to take into consideration. + - Please refer to the appropriate Interactivity Features pages for more specific information. +- [Modern tooltip support](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-visual-tooltips) has been added. These will display instead of conventional tooltips, if you have them enabled in your report. (#121) +- Loader feature is now correctly disabled, which is intended to ensure that external URLs cannot be accessed for certification purposes. Please refer to **important notes** section above regarding this feature. (#114) +- Tooltip ['redaction' of interactivity reserved words](../interactivity-tooltips#debugging-with-tooltips) (introduced in 0.5/#80) are now recursively applied to deeper-nested objects. (#118) + +#### **Bugs Fixed** + +- If the dataset contained a date/time column with a `null`/`(blank)` value, this would cause data mapping to fail and result in an empty dataset (#126) +- If the height of the settings pane exceeded the visible window, it would not scroll properly (#122) +- If using the canvas renderer, quickly mousing-out of the visual would leave tooltips visible if they were in the process of being displayed (#16) +- When a template is selected in the _Create New Specification_ dialog, and provider is changed, the selected template is reset but the highlight in the list is incorrect (#3) + +#### **Performance and Stability** + +- Vega builds have been updated: + - Vega **5.21.0** + - Vega-Lite **5.1.1** +- Import issue w/lodash and initial CI for contributed code - many thanks to [@sgratzl](https://github.com/sgratzl)! (#132 & #133) + +## 0.5.0 (2021-08-30) + +#### **New Features and Enhancements** + +- Common pre-defined pattern fills for SVG renderer. **This is Deneb-specific** and not native to Vega or Vega-Lite specifications, so please read the [Pattern Fills](../pattern-fills) page for further details on how to get started. (#30). +- Visual viewport preservation and "detail work" enhancements (#15). This is covered in more detail in the [Visual Editor](../visual-editor) page, but a short run-down is as follows: + + - Deneb will now record the dimensions of your visual in the report canvas when the advanced editor is opened, and use these dimensions when presenting your visual preview, rather than stretching it to fit available space, e.g.: + + ![0.5-previous-editor-viewport.png](/img/changelog/0.5-previous-editor-viewport.png) + + - The intention of this is to keep the visual scaled as it will be viewed at its current dimensions. + - Note that **Power BI does not allow visuals to resize themselves dynamically**, so if you wish to change the physical width and/or height of your visual in the report view, you will need to exit the advanced editor, resize and re-open the advanced editor. + - Additionally, a toolbar is available at the bottom of the preview area, which will allow you to adjust the zoom level of the preview: + + ![0.5-zoom-controls.png](/img/changelog/0.5-zoom-controls.png) + +- The top-level `height` and `width` properties can now be applied if necessary, rather than Deneb attempting to resolve them to the visual container (#48). + - This means that it is now possible to size single view or layered Vega-Lite specifications [by discrete step](https://vega.github.io/vega-lite/docs/size.html#specifying-width-and-height-per-discrete-step). + - For Vega specifications, two additional signals - `pbiContainerHeight` and `pbiContainerWidth` - are available to use the desired container dimension. These are automatically patched into a Vega spec if the `height` and/or `width` properties are omitted. +- New Specification and Export JSON Template dialogs now use more real-estate (#85). +- Rather than creating a new line for and occurrence of each collection/object, list/array or property, the [Repair and Format JSON](../visual-editor#repair-and-format-json-ctrl--alt--r) command will now try to pretty-print JSON more effectively, i.e. only creating line breaks where sensible to do so. (#110) +- Objects in tooltips are now more readable (#80). + - For example, if using techniques to expose the full tooltip datum, e.g. using `{ "tooltip" { "content": "data" } }` for Vega-Lite, the tooltip handler would expose any nested objects as `[object Object]`. + - These objects are now converted to a text representation of the object structure: ![0.5-previous-tooltip-object.png](/img/changelog/0.5-previous-tooltip-object.png) + - Note that the presence of an `__identity__` and/or `__key__` and `identityIndex` properties means that the underlying data point can be reconciled back to Power BI and may help with confirming that a mark will resolve for [interactivity purposes](../interactivity-overview#signaling-back-to-power-bi). +- The **en-GB** locale has been added to the standard Vega (D3) formatter (#111). + +#### **Bugs Fixed** + +- Keyboard shortcut bindings were being "stacked" each time editor was closed and re-opened (#105). +- Editor font size was not always immediately re-bound after minimizing and restoring the editor pane (#107). + +**Performance and Stability** + +- Second-stage of service layer re-write (continuing from 0.4). Again, this should result in no visible changes other than those detailed above. +- Dependencies have been audited and replaced with latest/secure versions where possible. + +## 0.4.0 (2021-07-26) + +#### **New Features & Enhancements** + +- Tooltip resolution has been improved: + + - Default tooltip formatting resolves better against data model (#8). + + ![0.4-default-tooltip-formatting.png](/img/changelog/0.4-default-tooltip-formatting.png) + + - Report page tooltip resolution is more thorough for `transform`s that preserve row context (#37). + + Here's an example of behavior for a series of transforms that produces a _Top N + Others_ dataset. The _Top N_ results ultimately have the same grain as the source data so we can work out the correct selector for the data model. For _Others_, we cannot resolve this, but can display a default tooltip (with better formatting resolution from above): + + ![0.4-context-resolution-tooltip.gif](/img/changelog/0.4-context-resolution-tooltip.gif) + +- SVG is now the default render mode for visuals rather than canvas (#68). Please refer to the [Performance Considerations](../performance#selection-of-renderer) page for further details on potential risks and mitigation approaches when it comes to selecting a renderer. +- Editor font size is now available in the properties pane. Refer to the [Visual Editor](../visual-editor#json-editor-font-size) page for further details. +- Editors now track whether they are 'dirty', i.e. you've made changes but not yet applied them (#10). + - The _Apply_ button will be greyed-out if no changes have been made, or changes revert to the spec currently visible. + - If exiting back to report view with unapplied changes, you will now get a 'last chance' prompt to apply any pending changes. Please refer to the [Visual Editor](../visual-editor#unapplied-changes) page for more details if required. + - If changes are discarded after choosing this option, they cannot be recovered. +- Landing and status pages have better contrast and no redundant elements or styling (#40). +- If you're in the JSON editor and wish to navigate out of this with the keyboard (and presuming the operation shortcut keys are not useful), you can now press _\[ Esc ]_ to have Deneb set focus to the tabs above the editor (#25). + +#### **Bugs Fixed** + +- If you had selected a template file to import and tried to import it again (for instance, after editing it externally and wanting to re-import), this did not work. This has now been resolved (#36). + +#### **Performance & Stability** + +- Application icons have been optimized and initialization is now much more performant on first run (#77). +- Deneb service layer has been completely re-written as part of ongoing review and optimizations. All being well, this should result in no visible changes for you πŸ™‚ +- The packaged visual (.pbiviz) is \~10% smaller (1.35MB > 1.22MB). + +## 0.3.0 (2021-05-31) + +#### **New Features & Enhancements** + +- Template import and generation added. This is covered more in the [Templates](../templates) page, but high-level features are as follows: + - When editing a specification, there is now a _Generate JSON Template_ button in the editor. + - Selecting this presents a dialog that an author can use to customize aspects of the specification, prior to export to (a) provide descriptive detail for anyone wanting to import the template, and (b) make column and measure metadata more suitable for general consumption (particularly if sensitive names are used). + - The template JSON is made available for you to review and then copy to the clipboard. This can then be saved as a `.json` file for import by yourself or others. + - Additionally, the _Create New Specification_ dialog has an additional _Import from Template_ tab. Here you can import a valid Deneb template (generated using the above functionality) and allocate columns and measures from your _Values_ data role, in the same way as the built-in examples. +- \[INTERNAL] the data view mapping has been swapped from `table` to `categorical`. + - This currently results in no net change for end-users, but will potentially allow us more functionality with selectors than the `table` data view mapping offers. + - One such benefit is that to date, a report page tooltip could only be created and referenced using a column from the dataset; we can now use a single measure if we so want. + +#### **Bugs Fixed** + +- If overriding the visual `data` within the specification (e.g. when pasting in an example with static data), or adding custom datasets for a particular layer, then Deneb would refuse to render. This has been fixed. (#33) +- Columns or measures added from the data model containing characters that require special handling, now have these characters replaced in the dataset. Refer to the [documentation regarding this](../dataset#special-characters-in-column-and-measure-names) for further details (#38) + +## 0.2.0 (2021-03-19) + +#### **New Features & Enhancements** + +- Custom formatter added, which if specified, allows creators to use Power BI format strings instead of D3 ones. Refer to [Formatting Values](../formatting) page for details (#13) +- Keyboard shortcuts now available for all portions of the advanced UI; not just when a user is inside the specification or config editor (#23) +- Editor pane toggle has keyboard shortcut - `Ctrl + Alt + Space` (#24) +- Editor tabs now have shortcuts (#2): + - Specification - `Ctrl + Alt + 1` + - Config - `Ctrl + Alt + 2` + - Settings - `Ctrl + Alt + 3` +- Added switchable locale in dev tools, which will assist with debugging formatting and other i18n stuff (#19) + +#### **Bugs Fixed** + +- Toggling the editor pane lost any changes in-progress. This has been amended to apply changes prior to unmounting the 'expanded' view. +- Vega templates had incorrect reference to `values` named dataset, rather than `dataset`. These have been re-pointed to be correct. + +#### **Housekeeping** + +- Fixed linting issues with chevron icon in header (#17) +- Renamed anything to do with editor pane sizing to be more appropriate for the current interface logic (#14) + +## 0.1.0 (2021-03-15) + +Initial beta release for early access. diff --git a/versioned_docs/version-1.6/archive/changelog-002.md b/versioned_docs/version-1.6/archive/changelog-002.md new file mode 100644 index 00000000..61a4de07 --- /dev/null +++ b/versioned_docs/version-1.6/archive/changelog-002.md @@ -0,0 +1,219 @@ +--- +id: changelog-002 +description: Deneb Change Log - Version 1.0 - 1.3 +title: Previous Releases (1.0 - 1.3) +--- + +# Previous Release Change Log (1.0 - 1.3) + +:::caution Archived Page +This page is an archive of the change log from version 1.0 to 1.3. +::: + +## 1.3.0 (2022-07-06) + +### Debug Area (#7, #217) + +The Visual Editor interface has been modified to accommodate viewers for Data, Signals and Logs in what was formerly known as the Preview Area Toolbar. Similar to [vega-editor](https://vega.github.io/editor/#/), these expose more information about the underlying Vega view and will provide creators with more information when designing and debugging specifications within Power BI. + +![The Preview Area toolbar now includes a debugging pane, which exposes information on Vega datasets, signals and logs.](/img/changelog/1.3.0/debug-area.png "The Preview Area toolbar now includes a debugging pane, which exposes information on Vega datasets, signals and logs.") + +These changes also make the Preview Area toolbar resizable and collapsible, much like the Editor Pane. As this functionality is now greatly increased from before, this is being renamed as the [**Debug Pane**](visual-editor#debug-pane). + +As this change affects a lot of the existing documentation, the relevant areas are updated with sections pertinent to the Debug Pane, but a short overview is as follows: + +- The **Data** pane provides visibility of data sets from the Vega view. + +- The **Signals** pane exposes signal details from the Vega view, which will also include things like parameter bindings. + +- The **Logs** pane exposes anything that the Vega logger records for the specified log level. + + - Valid levels are **None**, **Error**, **Warn** (default) and **Info**. + - As a result of this work, it was discovered that some scenarios - such as duplicating params by putting them at the top level for layered plots - were not being correctly trapped and Deneb would 'white out'. + - The resilience around trapping these errors has been improved and they should display an appropriate error state in the visual (and may expose more details around in the Logs pane). + +### Individual Report Theme Colors (#197) + +A new expression, `pbiColor` has been added. This allows you to access your report theme's colors by a (zero-based) index. There is also an optional parameter, which will allow you to darken or lighten the color by this value (allowing similar results): + +![The pbiColor function allows you to access individual theme colors using a zero-based index.](../deeper-concepts/img/pbiColor-simple-grid.png "The pbiColor function allows you to access individual theme colors using a zero-based index.") + +Please refer to the [Theme Colors & Schemes](schemes#expression-based-access-using-pbicolor) page for further details. + +### Preview Image in Exported Template (#228) + +When exporting a template, you can now opt to include a preview image, e.g.: + +![Templates can now provide the option to include a base64-encoded preview image of the current window.](/img/changelog/1.3.0/export-enter-template-information-preview-image.png "Templates can now provide the option to include a base64-encoded preview image of the current window.") + +Images are generated [using the Vega View APIs](https://vega.github.io/vega/docs/api/view/#image-export). The generated image will be how the image currently looks in the editor, and are capped at a maximum of 150 x 150 pixels (using the largest dimension to constrain the aspect ratio within this area). This is documented in more detail on the [Templates](templates#including-a-preview-image) page, but the high-level overview is as follows: + +The generated image will be encoded in your template using base64, so there's a couple of things to consider here: + +- This can potentially increase the size of your JSON template considerably. +- This image may potentially expose information about your data if included. + +As such, the option is disabled by default and you will need to opt-in. + +### Other Minor Enhancements + +- Deneb will now retain Cross-Filter and/or Cross-Highlight context for multiple charts when Ctrl+clicking (#213) +- When creating a new Vega-Lite visual using the _[empty]_ template, this will now provide a specification with empty layers (`[]`) rather than a `null` mark. This prevents the display of errors and should serve as a more friendly state for the new user (#51). + +### Performance and Stability + +- Vega has been upgraded to version **5.22.1**, from 5.21.0 (#221). You can read more about the changes in the Vega release notes: + + - [5.22.0](https://github.com/vega/vega/releases/tag/v5.22.0) + - [5.22.1](https://github.com/vega/vega/releases/tag/v5.22.1) + +- Code and events have been reviewed and refactored to ensure that Vega re-renders are only done when absolutely necessary (#222). This should have an appreciable effect on general UI performance. + +## 1.2.0 (2022-04-21) + +### Cross-Highlighting Support (#134) + +To date, Deneb has only had two supported [interactions](https://docs.microsoft.com/en-us/power-bi/create-reports/service-reports-visual-interactions#change-the-interaction-behavior) from other visuals: **Filter** (default) and **None**. + +In this version, we have enabled support for the **Highlight** interaction. Much like [Cross-Filtering](interactivity-selection), it is opt-in - as you will need to ensure that marks have the necessary encodings for orginal vs. highlight values for any active interactions, e.g.: + +![Cross-Highlight functionality can now be leveraged, so you can bind encodings for original and highlight values.](/img/changelog/1.2.0/cross-highlight-example.gif "Cross-Highlight functionality can now be leveraged, so you can bind encodings for original and highlight values.") + +To see more about how you can get started, please check out the [Cross-Highlighting](interactivity-highlight) page for details. The built-in **Simple Bar Chart** template for both Vega and Vega-Lite has been updated with a sample binding and encoding (as well as the [Simple Worked Example](simple-example)). + +:::caution Check Default Interactions +Because this change affects the dataset that the main window sends to a visual, this may make your visuals appear differently that prior to the update if your default interaction is set to **Highlight** (as this is now an option on a Deneb visual when setting interactions). We do try our best to manage this in Deneb if not, but it is recommended that you do this the "Power BI way" and explicitly set interactions to **Filter**. +::: + +### Improved Visibility of Vega Versions (#185) + +Because Deneb embeds the Vega and Vega-Lite libraries, any new releases are not automatically available to you; these need to be packaged, tested and published via AppSource. As such, there can be a lag between what Deneb supports and any language features in the Vega or Vega-Lite documentation. A good example of this was Vega-Lite 5.2.0 releasing very shortly after Deneb 1.0.0 went live. + +To assist with checking compatability of the embedded runtimes vs. their documentation, we previously included the embedded Vega and or Vega-Lite versions on the landing page. However once you began editing your visual, this became hard to (re) discover. To assist with this, the version of the selected language provider is now displayed in the Preview Area toolbar, e.g.: + +![The current runtime version is now shown in the Visual Editor toolbar.](/img/changelog/1.2.0/preview-toolbar-vega-version.png "The current runtime version is now shown in the Visual Editor toolbar.") + +### Recalculate During Resize (#180) + +Due to the dynamic nature of Power BI visual containers, any change to the sizing can trigger an update to a visual's logic and this can cause your visual specification to get re-calculated during the process. This may not be noticeable for visuals that use a small amount of marks, but for those that are more complex, this might create more overhead than you need for something you don't do frequently. + +To assist with this, a **Performance Tuning** property menu has been made available, with the option to toggle **Recalculate during resize**. When version 1.2.0 becomes active, the default for this property is **OFF**, which means that Deneb will delay any further calculations until you have finished resizing your visual, e.g.: + +![recalculate-during-resize.gif.](/img/changelog/1.2.0/recalculate-during-resize.gif "Our raincloud plot example contains many data points and calculations, which can be computationally expensive if resizing the visual container. By turning off the 'Recalculate during resize' property, you can delay any calculations until you have finished resizing your visual.") + +The documentation for this feature has also been added to the [Performance Considerations](performance#recalculate-during-resize) page. + +### Other Minor Enhancements + +- Deneb will now persist the visual container size, as viewed in the report as of the last change. This means that if Deneb is re-initialized while the Visual Editor is open (e.g. by changing to another visual and back again), then it won't "forget" the size of the visual as viewed normally (#178). + +### Bugs Fixed + +#### Templates + +- Specification Field Mapping will replace property keys if they match a dataset field name (#190) +- Exported templates cannot be re-imported without manual corrections (#198) +- Successful import of a template would show the 'Deneb has been updated' prompt (#207) +- When importing a template, if a dataset field name matches a placeholder name, it will now be flagged as allocated, without needing to manually select it (#210) + +#### Tooltips + +- If using `"tooltip": false` against a Vega-Lite mark (instead of omitting the `tooltip` property), an empty tooltip would be displayed (#191) +- Tooltip signals that are single values rather than field/value pairs are not being correctly converted to Power BI tooltips (#201) +- Updates would trigger an initial console error/warning with tooltip handler enabled (#218) + +## 1.1.0 (2022-01-22) + +### Report Theme Integration (#124) + +Provided via [Vega Color Schemes](https://vega.github.io/vega/docs/schemes/). + +- When encoding a `scale`, there are 4 schemes available for inclusion that will bind to the current report theme at run time. +- If you change any colors in your report theme matching these schemes, then the specification will update to match. +- This is documented in more detail on the [Color Schemes](schemes) page. + +![If using the new schemes when encoding a color scale, these will live-bind to the currently selected report theme.](/img/changelog/1.1.0/theme-changes.gif "If using the new schemes when encoding a color scale, these will live-bind to the currently selected report theme.") + +### Specification Field Mapping (#160) + +- This provides means to re-map any columns or measures that have been bound to encodings or expressions. +- If a field is removed from the **Values** data role, the dialog will also be displayed, in order to provide a more convenient way to add and re-assign a field without having to hunt it down manually. +- This is documented in more detail on the [Dataset](dataset#edit-specification-field-mapping) page. + + ![Example of the Edit Specification Field Mapping dialog, which allows you to change the allocation of any fields from the dataset that are used in encodings or expressions within your specification.](/img/changelog/1.1.0/edit-mapping.png "Example of the Edit Specification Field Mapping dialog, which allows you to change the allocation of any fields from the dataset that are used in encodings or expressions within your specification.") + +### Template Changes + +- Placeholders have been changed to a more compact layout, making better use of available space (#156) +- If a template's `usermeta.information.previewImageBase64PNG` property is populated with a valid base64 representation, this will now be rendered in the **Create New Specification** dialog (#159) +- Packaged templates now include preview images (#159) +- Column/measure restrictions have been removed from placeholders (#157) + + ![Example of template changes in 1.1.0.](/img/changelog/1.1.0/template-changes.png "Example of template changes in 1.1.0.") + +### Editor Properties + +Available in the Power BI Format pane. + +- Visual Editor [**Word Wrap** property](visual-editor#word-wrap) added (#154) +- Visual Editor [**Line Gutter** and **Line Numbers** properties](visual-editor#line-gutter--line-numbers) added (#155) + +### Other Minor Enhancements + +- The keyboard shortcut for the Generate JSON Template was failing on some Windows environments, so this has been re-mapped to **Ctrl + Alt + T** (#153) +- Visual scrollbars have been updated to be less intrusive (#164) +- The font named as **DIN** in core visuals can be accessed by specifying `wf_standard-font` wherever you're able to specify the font family (#151) +- To help with understanding when new versions have gone live in your reports, Deneb will display a notification in the Visual Editor pane if you edit an existing visual created with a prior version (#179), e.g.: + + ![Example of version change notification in the Visual Editor pane.](/img/changelog/1.1.0/update-notification.png "Example of version change notification in the Visual Editor pane.") + + Manually dismissing the notification or applying changes to the current specification will prevent this appearing until the next update. + +### Performance and Stability + +- Vega-Lite has been upgraded to **5.2.0** (#158) + + - You can read about the changes in the [Vega-Lite release notes](https://github.com/vega/vega-lite/releases/tag/v5.2.0). + - A Vega-Lite **Grouped Bar Chart** template has also been added to Deneb to help illustrate usage of the `xOffset` / `yOffset` encoding changes. + +- Dataset field references in expressions are re-coded for template generation (#139) + + - When generating a JSON template, or re-mapping fields, any expression using a `datum.Field` reference will be Automatically re-coded to use `datum['Field']` syntax. + - This is to ensure that replacing (or tokenizing) fields can support changes for fields that contain whitespace. + +- The Vega-Lite **Simple Bar Chart** template `opacity` encoding has been improved (#152) + + - This includes an explicit value for the `opacity` encoding if a datum's `__selected__` value is not `"off"`. + - This is to preserve logic if a creator changes the view composition to something more complex than a single mark. + +- The mechanism for handling interactivity events outside the main plot required unorthodox (and potentially expensive) manipulation of the Vega DOM each time the visual updates. This has been revised to work with the standard DOM (#181) + +- The Redux store has been replaced with [Zustand](https://github.com/pmndrs/zustand), and refactored (#147) + +### Known Issues + +All current known issues are scheduled to be fixed in version 1.2. Workarounds for each are detailed on its linked GitHub issue. + +- Exported templates cannot be re-imported without manual corrections ([#198](https://github.com/deneb-viz/deneb/issues/198)) +- Specification Field Mapping will replace property keys if they match a dataset field name ([#190](https://github.com/deneb-viz/deneb/issues/190)) + +## 1.0.0 (2021-11-13) + +### IMPORTANT NOTES + +- This is the promotion of the preview codebase into [the official AppSource release](https://appsource.microsoft.com/en-us/product/power-bi-visuals/coacervolimited1596856650797.deneb) πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰ +- Fetching via remote URLs (e.g. for image marks) has been disabled to comply with Power BI certification requirements. This can be mitigated by [downloading the standalone build](getting-started#standalone-version). +- There a no major changes in this release; just those that help with QA. + +### Bugs Fixed + +- Swapping editor position causes editor UI to crash (#137) + +### Performance and Stability + +- Improved target area of whitespace for clearing an active selection (#140) +- Visual rendering events synced-up with Vega View API (#141) + +## Older Versions + +To keep the change log (reasonably) tidy, the details of older versions get archived from time to time. Each archive can be found as a sub-page of this section (and you can follow the navigation below to continue reading). diff --git a/versioned_docs/version-1.6/changelog.md b/versioned_docs/version-1.6/changelog.md new file mode 100644 index 00000000..2bebf9a9 --- /dev/null +++ b/versioned_docs/version-1.6/changelog.md @@ -0,0 +1,233 @@ +--- +id: changelog +description: Deneb Change Log - high-level details of new features and fixes for each version +--- + +# Change Log + +## 1.6.0 (2023-11-01) + +:::info Pending Deployment +Deneb 1.6 has been approved and certified by Microsoft but may take a few days to reach your reports. +::: + +This update concentrates on making changes that improve performance and architecture for the next planned updates. A lot of these were slated for version 2, but this has become too large of a task to do in one go. As such, version 2's scope will change to focus on features that may result in breaking changes for templates and the next few updates will focus on delivering long-awaited or commonly requested features that will improve the UI and productivity experience for creators. + +### Supported Power BI Versions + +In order to improve visual loading time and access new features, the Power BI Visuals API has been updated to 5.3.0. This will require a minimum of **April 2023** of Power BI Desktop (or **May 2023** of Power BI Desktop for Report Server). + +For older versions Power BI Desktop, you can install previous versions of Deneb as an [organizational visual in your Power BI tenant](https://learn.microsoft.com/en-us/power-bi/developer/visuals/power-bi-custom-visuals-organization). Builds of Deneb are included as assets under the appropriate release [in the GitHub repository](https://github.com/deneb-viz/deneb/releases) and follow the pattern `Deneb_AppSource*.pbiviz`. + +### Vega Updates + +- Vega updated to **5.25.0** (from 5.23.0). +- Vega-Lite updated to **5.16.1** (from 5.6.1). + +### Parsing and Validation Workflow Changes + +These would normally be listed under _Performance and Stability_, but there have been significant changes to how Deneb parses the editor content and renders specifications. This will result in much faster output, improve synchronization between the Debug Pane and the rendered output, and stop superfluous rendering of specifications in the UI in-general. + +:::caution Please check your specs! +It is anticipated that changes will have a positive effect. However, if you find a use case that is negatively impacted, then please let us know so that we can investigate as soon as possible. +::: + +The key impacts on creators and viewers are as follows: + +- Transition time between the report canvas and the Advanced Editor (and back again) has significantly improved. + +- In conjunction with the visual dataset, specifications and config are memoized, so they are only (re)parsed when a suitable change occurs. The full list of events that can affect memoization are: + + - Specification or Config content is applied (and is different to the last saved values). + - Changes to the visual dataset, including adding and removing columns or measures and filters being applied (essentially anything that causes the visual to be re-queried, resulting in a change of resulting dataset). + - Enabling or disabling cross-filtering of data points or cross-highlight values (as these affect the visual dataset). + - A change to the [Discrete ordinal colors](schemes#discrete-ordinal-colors) property in the _Report theme integration_ menu (as this requires re-generation of the custom Vega ordinal scale that is bound to that value). + - Enabling or disabling the Power BI tooltip handler. + - Changing the provider (e.g. from _Vega-Lite_ to _Vega_). + - Changing the render mode (e.g. from _SVG_ to _Canvas_). + - Changing the log level in the _Logs_ viewer. + - When you have finished resizing the visual container in the report canvas. + +- If any errors are encountered when parsing (or by the Vega view post-render), the visual is no longer replaced with an error status and shows as blank. All issues will be present in the _Logs_ viewer (providing the level is not set to _None_). + +- Vega parsing would not previously catch errors in the _Logs_ viewer. This has been fixed. + +:::info Parsing Changes and Effect on Vega Lite Specifications +If you created a visual from the previous internal templates, you may see warnings in the **Logs** viewer. This is due to an issue with the way that the previous templates were configured. If you wish to remove these warnings, remove the following objects from your Config (as they relate to Vega only): + +- `path` +- `shape` +- `symbol` + +::: + +### General UI Changes + +![Deneb's Advanced Editor UI has been updated to use the latest Fluent UI libraries from Microsoft. This image shows the main editor view with the new changes.](/img/changelog/1.6.0/new-ui-layout.png "Deneb's Advanced Editor UI has been updated to use the latest Fluent UI libraries from Microsoft. This image shows the main editor view with the new changes.") + +Deneb's Advanced Editor UI has been completely migrated from Fluent UI v8 to v9. Some of these changes will be detailed in below sections where necessary, but the overview is as follows: + +- The menu in the settings pane has been moved out to the top of the visual and encompasses the entire width. This provides ~11% more vertical space for the JSON editor at the cost of a bit less vertical space for the visual preview. +- The landing page has been redesigned to provide more detailed onboarding for new users. +- Theme brand color has been updated to match Power BI's recent changes. + +### Create New Specification Dialog and Packaged Template Changes + +![The 'Create or import new specification' dialog has been modified to provide some further resources for thos elooking for templates. Templates can also be pasted from the clipboard or dragged and dropped into the dialog.](/img/changelog/1.6.0/new-create-dialog.png "The 'Create or import new specification' dialog has been modified to provide some further resources for thos elooking for templates. Templates can also be pasted from the clipboard or dragged and dropped into the dialog.") + +As part of the UI changes, the **Create new specification** dialog has received some enhancements: + +- The layout has changed to allow more room on the right for template content when it is selected or loaded. +- Using an existing template is the default option. +- For an existing template, the import button has been swapped for a drop zone: + + - You can click this to manually select a template file, or you can drag and drop a valid file to this area for Deneb to import it (if WebView2 is enabled). + - This will also support copy and paste for files and clipboard text, providing that they are valid Deneb templates. + - For Vega and Vega-Lite specifications without Deneb metadata, it's recommended that you create a blank specification for the appropriate language and paste these into the editor. + +- Links to Deneb's [community page](/community/resources), the Vega examples gallery and the Vega-Lite examples gallery have been added to the initial screen, to assist with discoverability of existing examples or ideas. + +- Packaged templates have been refactored: + + - By default, templates no longer use Power BI theming for their look and feel, as this is not necessarily data visualization best practice. + - A new template named _\[empty (with Power BI theming)]_ has been added for both Vega and Vega-Lite, which will include the relevant config to simulate the default Power BI look and feel. + - The bar chart templates have been split into two versions: (1) a standard one with basic encodings only, and (2) an interactive one to show how simple Power BI interactivty can be set up. + - The other simple templates have been removed. + +### Generate JSON Template Changes + +![The 'Generate JSON template' dialog has now been condensed into a single pane and has the option to download templates to files directly (provided that your tenant administrator has enabled this).](/img/changelog/1.6.0/new-export-dialog.png "The 'Generate JSON template' dialog has now been condensed into a single pane and has the option to download templates to files directly (provided that your tenant administrator has enabled this).") + +- The dialog for this operation has been consolidated into a single pane, rather than having three panes as part of the workflow to export a template. +- You can also download the template directly to a `.deneb.json` file, provided that your tenant administrator has allowed [downloads from custom visuals](https://learn.microsoft.com/en-us/power-bi/admin/organizational-visuals#export-data-to-file). +- If you aren't permitted to download, you can still copy the template to the clipboard. + +### Debug Pane Enhancements + +In conjunction with the parsing and rendering changes above, the Debug Pane has been re-written with updated logic and UI. + +![The Debug Pane has undergone many enhancements, including space optimization, a pagination toolbar for data tables and increased zoom capabilities.](/img/changelog/1.6.0/new-debug-pane.png "The Debug Pane has undergone many enhancements, including space optimization, a pagination toolbar for data tables and increased zoom capabilities.") + +Key changes are as follows: + +- The option to select the data set (Data viewer) or the log level (Logs viewer) has been moved to the bottom status bar of the debug pane, which frees up some vertical space. +- Tables in the Data and Signals viewers use a new component, have improved pagination, plus the ability to choose from either 10, 25, 50 or 100 rows per page. +- The algorithm for monitoring changes of the data and signals in the Vega view has been improved and this should result in Data and Signal values being correctly up to date (in some cases they might previously have been one update behind). +- The maximum zoom level has been increased to **400%**. +- The _Reset Zoom_ button has been removed and replaced with a popover on the zoom level - this allows you to choose a pre-defined or custom zoom level: + + ![The zoom level indicator on the toolbar allows more finer-grained setting of zoom level of the visual preview.](/img/changelog/1.6.0/new-zoom-popover.png "The zoom level indicator on the toolbar allows more finer-grained setting of zoom level of the visual preview.") + + Note that the 'reset zoom to 100%' hotkey ([Ctrl+Alt+0]) will still work as intended. + +### Dynamic Format String Support Fields for Calculation Groups and Measures + +Deneb has always been able to accommodate calculation groups in its dataset, but access to dynamic format strings has not been part of its feature set. As Power BI now introduces dynamic format string support [for measures as of April 2023](https://powerbi.microsoft.com/en-cy/blog/power-bi-april-2023-feature-summary/#post-23001-_Toc433340751), then this is now becoming less niche and more commonplace. + +In this release, new fields are introduced into the dataset to provide additional access to these values if they are present in the query result from Power BI. + +See the section in the [Formatting Values](formatting#working-with-dynamic-format-strings-for-measures-and-calculation-groups) page for a detailed explanation as to how these work. + +### Scrollbar Appearance Configuration + +Some new properties have been introduced to the **Rendered visual** menu in the formatting pane, which give you a bit more control over the display of scrollbars in the rendered output: + +- Scrollbar color: allows you to adjust the displayed color of the scrollbar. This is black (_#000000_) by default. +- Scrollbar opacity (%): allows you to adjust the opacity of the scrollbar. This is _20%_ by default, to ensure that the underlying visual can still be seen through the overlaid scrollbar. +- Scrollbar radius (px): allows you to change the curvature of the end of the scrollbars. This is _0_ (square) by default. + +Additionally, there is a **Show scrollbars on overflow** in the **Advanced editor** menu, that will allow you to preview the scrollbars in the advanced editor, if your visual will overflow the boundaries of the viewport. + +This is covered in more detail in the [Scrolling and Overflow](scrolling-overflow) page. + +### Other Enhancements + +- The properties pane has been converted to use the new formatting cards that were recently introduced in core visuals. +- The DIN font has had a more sensible alias assigned (this is known internally as `wf_standard-font`) and can now be specified as 'DIN' wherever you're using it. + +### Bugs Fixed + +- Tooltip with signal of `item` will no longer cause call 'stack size exceeded' errors (#273) +- Vega specifications are restored with the correct visual dimensions upon exiting the Advanced Editor (#286) +- The landing page will no longer be temporarily displayed when a visual is initialized in the Service (#325) +- Handler for keyboard shortcuts should no longer trigger modal dialogs when Alt+F or Alt+N are used in Czech locales (#262) + +### Performance and Stability + +- The Data viewer in the debug pane now processes data asynchronously. This prevents the whole UI waiting for the processing to complete and will again improve the responsiveness of the editor UI overall. +- Data and Signals viewers now use a monospace font. This is to improve readability of the content, but also to improve performance of calculating the table content (as column widths need to be computed each time the content changes). +- The **Performance Tuning** and **Recalculate during resize** property have been removed from the formatting pane, due to the above enhancements. + +## 1.5.0 (2023-03-29) + +### Enhancements + +- The field name limit for template fields has been increased from 30 to 150 characters. + +:::danger Field name limit relaxations are not backwards compatible +If exporting a template with > 30 characters in a field name, it cannot be imported into earler versions and will require you to manually correct the field name in the template JSON if you wish for this to work. +::: + +- The `pbiFormat` expression function has an optional third parameter that can be used to specify additional options that are available to custom visual developers. + + Please refer to the [Formatting Values](formatting#pbiformat-expression-function-full-implementation-details) page for more information. + +- The `pbiColor` expression function now supports the following named color values: + + ![The pbiColor function has been extended to allow access to named colors from the Power BI theme. These are detailed below.](deeper-concepts/img/pbiColor-named.png "The pbiColor function has been extended to allow access to named colors from the Power BI theme. These are detailed below.") + + Color names should be surrounded with single quotes and valid values are as follows: + + - Divergent colors: + + - `min` + - `middle` + - `max` + + - Sentiment colors: + - `negative` (or `bad`) + - `neutral` + - `positive` (or `good`) + + Please refer to the [Theme Colors & Schemes](schemes#expression-based-access-using-pbicolor) page for more information. + +### Bugs Fixed + +- When importing templates created using Vega, the provider would be incorrectly set to Vega-Lite (#278). +- The theme color binding for "middle" divergent color was actually using "neutral" (#283). + +### Performance and Stability + +- Vega has been updated to version **5.23.0** (from 5.22.1). You can read more about the changes in the [Vega release notes](https://github.com/vega/vega/releases/tag/v5.23.0). + +- Vega-Lite has been updated to version **5.6.1** (from 5.4.0). As there have been many small and incremental changes between these versions, it may be easier to review [the commit history for this span](https://github.com/vega/vega-lite/compare/v5.4.0...v5.6.1) rather than inspecting each individual release if you wish to catch up on what's new. + +- Published visual size reduced by 8% (down from 1.42MB to 1.32MB). + +## 1.4.0 (2022-08-31) + +### Enhancements + +- When using the AppSource visual, there's now a warning in the visual header if you're attempting to load external resources such as images or geojson (#244). + + ![If your specification contains URLs to remote resources the AppSource (certified) version will display a warning in the visual header, confirming that these cannot be loaded.](/img/changelog/1.4.0/external-resources-header.png "If your specification contains URLs to remote resources the AppSource (certified) version will display a warning in the visual header, confirming that these cannot be loaded.") + + ![Clicking on the warning message in the visual header will provide further information as to why resources cannot be loaded.](/img/changelog/1.4.0/external-resources-dialog.png "Clicking on the warning message in the visual header will provide further information as to why resources cannot be loaded.") + +- If a mark contains a hyperlink to an external URL, Deneb will request that Power BI perform navigation to the specified location (#177). + + - Note that hyperlinks in custom visuals are consent-based, so Power BI will always display an alert to the user asking if they wish to navigate to the specified URL. + +- Vega-Lite has been updated to **5.4.0**, from 5.2.0 (#257). You can read more about the changes [in the Vega-Lite release notes](https://github.com/vega/vega-lite/releases/tag/v5.4.0). + +- The **Visual Editor** heading text has been removed when the Editor Pane is expanded, and the Command Bar has been moved up to fill the space (#230). This provides a little bit more vertical space for the JSON editor. + +### Bugs Fixed + +- When using Vega, the Cross-Filtering checkbox was disabled. Cross-filtering would work, but could not easily be toggled (#251). + +- The _Data Point Limit_ property for cross-filtering was being ignored (#252). + +- Checkbox and radio button param elements could not change state with cross-filtering enabled (#254). + +- `null` dates were causing an infinite rendering loop (#259). diff --git a/versioned_docs/version-1.6/deeper-concepts/color-schemes.md b/versioned_docs/version-1.6/deeper-concepts/color-schemes.md new file mode 100644 index 00000000..ae7fb8cf --- /dev/null +++ b/versioned_docs/version-1.6/deeper-concepts/color-schemes.md @@ -0,0 +1,162 @@ +--- +id: schemes +description: Using custom Vega schemes in Deneb to bind to the Power BI report theme, as well as accessing Power BI report theme colors in-general. +slug: /schemes +title: Theme Colors and Schemes +--- + +Deneb provides some means to bind to your report's current theme, in the form of: + +- Expression-based access using a custom function +- Custom [Vega Color schemes](https://vega.github.io/vega/docs/schemes/) + +This functionality will dynamically reference the theme are run-time, meaning that if you change your colors, Deneb will keep these references in-sync. + +## Expression-Based Access Using `pbiColor` + +Deneb provides a custom function, named `pbiColor` that you can use in [Vega or Vega-Lite expressions](https://vega.github.io/vega/docs/expressions/): + +``` +pbiColor(index|name, shadePercent = 0) +``` + +- The first parameter (`index` or `name`) provides access to the associated theme color: + + - `index` is a [zero-based](https://en.wikipedia.org/wiki/Zero-based_numbering) reference to the Power BI theme palette. This means that: + + - `0` = Theme color 1 + - `1` = Theme color 2 + - `2` = Theme color 3 + - ...and so on + + - `name` is a string value (surrounded by single quotes) that specifies a named color from the theme configuration. Valid names are: + + - `min` / `middle` / `max` for divergent colors. + - `negative` / `neutral` / `positive` for sentiment colors. + - Power BI also exposes `bad` and `good` for sentiment colors, which can also be used instead of `negative` or `positive`, should you prefer to use these instead. + + ![Valid color names for the `pbiColor` expression function (as detailed above).](img/pbiColor-named.png "Valid color names for the `pbiColor` expression function (as detailed above).") + +- `shadePercent` is optional, and is a decimal value between `-1` (-100%) and `1` (100%). + + - If supplied, this will darken (< 0) or lighten (> 0) the color by the specificed amount. + - This is to provide variants of the theme colors, much like how Power BI does in its color picker. + +For example, to specify a `bar` mark's `color` to use Theme color 1, you could use the following in your mark's properties: + +```json +{ + ... + "mark": { + ... + "color": { + "expr": "pbiColor(0)" + } + } +} +``` + +Assuming that you are using the standard theme, output should look like the following for the theme's first two colors (`#118DFF` and `#12239E`): + +![The pbiColor function allows you to access individual theme colors using a zero-based index.](img/pbiColor-simple-grid.png "The pbiColor function allows you to access individual theme colors using a zero-based index.") + +## Power BI Schemes + +The schemes can be used wherever you might reference a color scheme in a Vega or Vega-Lite scale, e.g.: + +```json title=Vega-Lite showLineNumbers +{ + ... + "encoding": { + "color": { + "field": "City", + "legend": null, + "scale": {"scheme": "pbiColorNominal"} + } + } + ... +} +``` + +```json title=Vega showLineNumbers +{ + ... + "scales": [ + { + "name": "color", + "type": "ordinal", + "domain": { + "data": "dataset", + "field": "City", + "sort": true + }, + "range": { + "scheme": "pbiColorOrdinal" + } + } + ], + ... +} +``` + +The available schemes are detailed further below. + +### `pbiColorNominal` + +The `pbiColorNominal` scheme is intended to be used for nominal/categorical discrete categories, and matches the current Power BI theme colors, e.g.: + +![Example of standard theme colors from the Power BI's Customize theme dialog.](./img/report-theme-colors.png "Example of standard theme colors from the Power BI's Customize theme dialog.") + +![Example of applying the pbiColorNominal scheme in a specification.](./img/nominal-scheme-example.png "Example of applying the pbiColorNominal scheme in a specification.") + +### `pbiColorOrdinal` + +The `pbiColorNominal` scheme can be used for ordinal categories, and uses a ramped scale from the Min divergent Color to the Max divergent color from the current Power BI theme (excluding Middle color), e.g.: + +![Example of divergent theme colors from the Power BI's Customize theme dialog.](./img/report-theme-divergent-colors.png "Example of divergent theme colors from the Power BI's Customize theme dialog.") + +![Example of applying the pbiColorOrdinal scheme in a specification.](./img/ordinal-scheme-example.png "Example of applying the pbiColorOrdinal scheme in a specification.") + +:::caution Ordinal Scheme has Limited Discrete Colors +The total number of colors to allocate to the ordinal palette is a fixed number. This is **10** by default. + +When this limit is reached, the palette 'wraps' back around, which might not be ideal. Similarly, if you don't have enough discrete values, then you may not see an adequate gradient. We have ways of assisting you with this - refer to the [Discrete Ordinal Colors](#discrete-ordinal-colors) section below for more details. +::: + +### `pbiColorLinear` + +The `pbiColorLinear` scheme will produce an interpolated gradient from the Min divergent Color to the Max divergent color from the current Power BI theme (excluding Middle color), e.g.: + +![Example of applying the pbiColorLinear scheme in a specification.](./img/linear-scheme-example.png "Example of applying the pbiColorLinear scheme in a specification.") + +### `pbiColorDivergent` + +The `pbiColorDivergent` scheme will produce an interpolated gradient from the Min divergent Color to the Max divergent color from the current Power BI theme (including Middle color), e.g.: + +![Example of applying the pbiColorDivergent scheme in a specification.](./img/divergent-scheme-example.png "Example of applying the pbiColorDivergent scheme in a specification.") + +### Discrete Ordinal Colors + +As mentioned higher-up, we only have a limited number of colors in an ordinal palette as they are manually specified values, rather than a linear ramp. We could potentially see issues like the following examples if we don't get this right. The functionality to mitigate these issues follows on afterwards. + +#### Issue #1: Not Enough Discrete Colors = "Wrapping" + +If we were to allocate, say, 5 discrete colors to our palette but had more values than this, we get a "Wrapping" effect, e.g.: + +![An ordinal palette with less discrete colors that there are values of an ordinal variable can produce a 'color wrapping' effect, where after the last value has been reached, the next mark will start from the first value.](./img/ordinal-scheme-wrapping-effect.png "An ordinal palette with less discrete colors that there are values of an ordinal variable can produce a 'color wrapping' effect, where after the last value has been reached, the next mark will start from the first value.") + +#### Issue #2: Not Enough Discrete Values = Indistinct Gradient + +If we try to mitigate this by guessing a hypothetical number of colors - say, 50 - then we perhaps don't get desired results at a lower cardinality than that, e.g.: + +![Providing too may colors in an ordinal palette can mean that lower cardinality series do not have enough distinction between them, as all assigned colors are at the lower end of this spectrum.](./img/ordinal-scheme-inadequate-gradient.png "Providing too may colors in an ordinal palette can mean that lower cardinality series do not have enough distinction between them, as all assigned colors are at the lower end of this spectrum.") + +#### Managing via Properties + +The **Report Theme Integration** menu in the Power BI Format pane allows you to configure the number of values using the **Discrete Ordinal Colors** property, e.g.: + +![The 'Discrete Ordinal Colors' property in the Power BI format pane allows us to specify the number of values to use when computing the intervening colors.](./img/discrete-ordinal-property-static.png "The 'Discrete Ordinal Colors' property in the Power BI format pane allows us to specify the number of values to use when computing the intervening colors.") + +As you may not know what this number is going to be, the property supports [Conditional Formatting](https://docs.microsoft.com/en-us/power-bi/visuals/service-tips-and-tricks-for-color-formatting?WT.mc_id=DP-MVP-5003712#conditional-formatting-for-visualizations), so that you could bind a measure that could count the number of distinct category values. This would then allow dynamic assignment (and calculation) of the intervening colors, e.g.: + +![The 'Discrete Ordinal Colors' property also supports Conditional Formatting, so the number of discrete colors can be supplied via a measure.](./img/ordinal-scheme-conditional-formatting.gif "The 'Discrete Ordinal Colors' property also supports Conditional Formatting, so the number of discrete colors can be supplied via a measure.") diff --git a/versioned_docs/version-1.6/deeper-concepts/formatting-values.md b/versioned_docs/version-1.6/deeper-concepts/formatting-values.md new file mode 100644 index 00000000..6be18d47 --- /dev/null +++ b/versioned_docs/version-1.6/deeper-concepts/formatting-values.md @@ -0,0 +1,214 @@ +--- +id: formatting +description: Understanding how to format numeric values in Deneb +slug: /formatting +--- + +# Formatting Values + +## Default Formatting Behavior + +When it comes to formatting values (if you're just using simple encodings), then Vega or Vega-Lite will use its own deterministic behavior to figure out things like decimal precision or other elements. + +You can provide your own overrides to these wherever they are used. [Vega](https://vega.github.io/vega/docs/api/locale/) and [Vega-Lite](https://vega.github.io/vega-lite/docs/format.html) both use the D3 formatting convention for [numbers](https://github.com/d3/d3-format) and [date & time](https://github.com/d3/d3-time-format) values (incidentally, so does [Charticulator](https://charticulator.com/docs/user-interaction.html#text-formatting)). + +Power BI [has its own syntax](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-custom-format-strings?WT.mc_id=DP-MVP-5003712#supported-custom-format-syntax), which is probably your preference for applying any customized formatting strings into a specification. + +To ensure correct compatibility with Vega and Vega-Lite, particularly if you're bringing examples in (or even looking to take them out!) Deneb will use the D3 convention by default, but there's some help at hand if that's not your preference. + +## Power BI Custom Formatter + +If you prefer working with Power BI format strings, Deneb has a [custom format type](https://vega.github.io/vega-lite/docs/config.html#custom-format-type) named `pbiFormat` that you can use in lieu of the D3 format convention. + +## Vega-Lite Implementation + +In Vega-Lite, we can specify `"pbiFormat"` as a `formatType` wherever you're specifying a `format`. + +#### Quantitative Axis Example + +Let's say we have a simple bar chart that uses the Power BI financial sample dataset, which shows `[$ Sales]` for each `[Country]`: + +```json showLineNumbers +{ + "data": { + "name": "dataset" + }, + "mark": { + "type": "bar" + }, + "encoding": { + "y": { + "field": "Country", + "type": "nominal" + }, + "x": { + "field": "$ Sales", + "type": "quantitative" + } + } +} +``` + +And this will result in the following output: + +![vega-lite-default.png](./img/vega-lite-default.png "Simple bar chart using Financial sample dataset (with [$ Sales] as a measure). The measure axis displays raw values, with a maximum of 1,000,000,000.") + +That's a lot of zeroes! What might be nicer is if his were a little easier to read. If we want to use a Power BI format string for this, we can modify the specification as follows to show values in $bn to one decimal place (changes highlighted): + +```json highlight={8-11} showLineNumbers +{ + ... + "encoding": { + ... + "x": { + "field": "$ Sales", + "type": "quantitative", + "axis": { + "format": "$#0,,,.0bn", + "formatType": "pbiFormat" + } + } + } +} +``` + +This results in something a little more human-readable: + +![vega-lite-billions.png](./img/vega-lite-billions.png "After applying a Power BI format string and specifying our custom formatter, the axis becomes much more human readable. This updates to show tick values as $bn, to one decimal place.") + +#### Quantitative & Temporal Axes Example + +If instead, we had a line chart using the same dataset, but this time we wanted to plot `[$ Sales]` by `[Date]` then we could express this as follows: + +```json showLineNumbers +{ + "data": { + "name": "dataset" + }, + "mark": { + "type": "line" + }, + "encoding": { + "x": { + "field": "Date", + "type": "temporal" + }, + "y": { + "field": "$ Sales", + "type": "quantitative" + } + } +} +``` + +And here's how it looks out of the gate: + +![vega-lite-line-default.png](./img/vega-lite-line-default.png "Simple line chart using Financial sample dataset (with [$ Sales] as a measure and [Date] along the x-axis). The measure axis displays raw values, with a maximum of just over 400,000,000.") + +We could use a similar approach as above for both axes, to get them how we want (changes highlighted): + +```json highlight={6-9,13-16} showLineNumbers +{ + ... + "encoding": { + "x": { + ... + "axis": { + "format": "MMM yyyy", + "formatType": "pbiFormat" + } + }, + "y": { + ... + "axis": { + "format": "$#0,,,.0bn", + "formatType": "pbiFormat" + } + } + } +} +``` + +And now, we have both axes formatted as we like: + +![vega-lite-line-formatted.png](./img/vega-lite-line-formatted.png "After specifying format strings and the Power BI custom formatter for both axes, the specification updates as required.") + +## Vega Implementation + +If using Vega, you'd call the custom formatter in lieu of the [format](https://vega.github.io/vega/docs/expressions/#format) expression, e.g. for an axis tick label: + +```json highlight={10} showLineNumbers +{ + ... + "axes": [ + { + ... + "encode": { + "labels": { + "update": { + "text": { + "signal": "pbiFormat(datum.value, '$#0,,,.0bn')" + } + } + } + } + }, + ... + ], + ... +} +``` + +## Locale-Awareness + +If using the `pbiFormat` formatter, Deneb currently will resolve your locale [according to your Power BI configuration](https://docs.microsoft.com/en-us/power-bi/fundamentals/supported-languages-countries-regions?WT.mc_id=DP-MVP-5003712#choose-the-language-or-locale-of-power-bi-desktop) for any values. + +For example, we can view the live chart example from above _en franΓ§ais_ (fr-FR), and the formatting strings will work as expected: + +![vega-lite-line-fr-FR.png](./img/vega-lite-line-fr-FR.png "If we are in a different locale, e.g. French, then our [$ Sales] and [Date] format string update to use locale-specific decimal separators and month naming.") + +### Overriding User Locale + +If you wish to specify a different local to Power BI's one (for example, you wish values to be norrmalized to the same currency for your users irrespective of location), you can either override this using the `locale` property of a specification's config ([V](https://vega.github.io/vega/docs/config/#:~:text=%22strokeWidth%22.-,locale,-Object) | [VL](https://vega.github.io/vega-lite/docs/config.html#aria-config)), or manually specify a valid Power BI locale within the `options.cultureSelector` property in an expression function for `pbiFormat` (more on this below). + +## `pbiFormat` Expression Function Full Implementation Details + +When using `pbiFormat` in an expression function, you have a bit more versatility over using in the encoding properties directly. The full signature for this function when used in expressions is as follows: + +``` +pbiFormat(value, format, options = {}) +``` + +- The `value` parameter is the number value that you wish to format. + +- The `format` parameter is a [valid Power BI format string](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-custom-format-strings?WT.mc_id=DP-MVP-5003712#supported-custom-format-syntax). + +- The `options` parameter is an optional object, where you can supply any of the optional `ValueFormatterOptions` properties from [Microsoft's formatting library for custom visuals](https://learn.microsoft.com/en-us/power-bi/developer/visuals/utils-formatting?WT.mc_id=DP-MVP-5003712#valueformatteroptions). + + Not all properties will translate to useful functionality within Deneb, so the key ones that you might find useful are: + + - `format` - format string to use **\*** + + - `precision` - the maximum number of decimal places to show **\*** + + - `value` - the value to use when formatting. For example: + + - `1e3` for values to be formatted as thousands. + - `1e6` for values to be formatted as millions. + - `1e9` for values to be formatted as billions. + - `1e12` for values to be formatted as trillions. + - A dynamic value (e.g. that of your measure) to auto format to thouands, millions, etc., like Power BI does. + + - `cultureSelector` - a valid Power BI culture code, which will enforce formatting to a specific locale, e.g. `en-GB`, `fr-FR`. + + _**\*** will override the `format` parameter if specified_ + +## Working with Dynamic Format Strings (for Measures and Calculation Groups) + +Power BI has the capability for dynamic format strings to be applied for [calculation groups](https://learn.microsoft.com/en-us/analysis-services/tabular-models/calculation-groups#dynamic-format-strings) (and as of May 2023) [for regular measures](https://learn.microsoft.com/en-us/power-bi/create-reports/desktop-dynamic-format-strings). This now means that in some cases, formatting for a measure (or calculation item) may be applied at the row level rather than measure level. + +When numeric or date/time-based measures are present in the dataset, Deneb will create support fields for these at a row level: + +- `[measure name]__format` - the format string for the measure. This is in case you need direct access to it for use in the `pbiFormat` function, or using the `pbiFormat` custom format type. + +- `[measure_name]__formatted` - the measure value formatted according to the format string in the same row. diff --git a/versioned_docs/version-1.6/deeper-concepts/img/discrete-ordinal-property-static.png b/versioned_docs/version-1.6/deeper-concepts/img/discrete-ordinal-property-static.png new file mode 100644 index 00000000..89d51ba1 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/discrete-ordinal-property-static.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/divergent-scheme-example.png b/versioned_docs/version-1.6/deeper-concepts/img/divergent-scheme-example.png new file mode 100644 index 00000000..5f733ede Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/divergent-scheme-example.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/export-enter-dataset-information.png b/versioned_docs/version-1.6/deeper-concepts/img/export-enter-dataset-information.png new file mode 100644 index 00000000..19307dfc Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/export-enter-dataset-information.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/export-enter-template-information.png b/versioned_docs/version-1.6/deeper-concepts/img/export-enter-template-information.png new file mode 100644 index 00000000..4275c8d5 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/export-enter-template-information.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/export-review-template-content.png b/versioned_docs/version-1.6/deeper-concepts/img/export-review-template-content.png new file mode 100644 index 00000000..6d2b7faf Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/export-review-template-content.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/import-placeholder-expand.png b/versioned_docs/version-1.6/deeper-concepts/img/import-placeholder-expand.png new file mode 100644 index 00000000..058339c6 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/import-placeholder-expand.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/import-placeholders-assigned.png b/versioned_docs/version-1.6/deeper-concepts/img/import-placeholders-assigned.png new file mode 100644 index 00000000..a4f13c28 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/import-placeholders-assigned.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/import-template-complete.png b/versioned_docs/version-1.6/deeper-concepts/img/import-template-complete.png new file mode 100644 index 00000000..d1a1e1b8 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/import-template-complete.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/import-template-details-initial.png b/versioned_docs/version-1.6/deeper-concepts/img/import-template-details-initial.png new file mode 100644 index 00000000..126c6283 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/import-template-details-initial.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/import-template-location.png b/versioned_docs/version-1.6/deeper-concepts/img/import-template-location.png new file mode 100644 index 00000000..e1a35241 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/import-template-location.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/linear-scheme-example.png b/versioned_docs/version-1.6/deeper-concepts/img/linear-scheme-example.png new file mode 100644 index 00000000..3c5514bc Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/linear-scheme-example.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/nominal-scheme-example.png b/versioned_docs/version-1.6/deeper-concepts/img/nominal-scheme-example.png new file mode 100644 index 00000000..f6206bf3 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/nominal-scheme-example.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-conditional-formatting.gif b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-conditional-formatting.gif new file mode 100644 index 00000000..09025a45 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-conditional-formatting.gif differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-example.png b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-example.png new file mode 100644 index 00000000..6fdd7b3b Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-example.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-inadequate-gradient.png b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-inadequate-gradient.png new file mode 100644 index 00000000..d4e49371 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-inadequate-gradient.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-wrapping-effect.png b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-wrapping-effect.png new file mode 100644 index 00000000..27f08019 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/ordinal-scheme-wrapping-effect.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/pbiColor-named.png b/versioned_docs/version-1.6/deeper-concepts/img/pbiColor-named.png new file mode 100644 index 00000000..ff807c5d Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/pbiColor-named.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/pbiColor-simple-grid.png b/versioned_docs/version-1.6/deeper-concepts/img/pbiColor-simple-grid.png new file mode 100644 index 00000000..0e6fa51f Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/pbiColor-simple-grid.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/pbiPatternSVG-simple-fg-bg.png b/versioned_docs/version-1.6/deeper-concepts/img/pbiPatternSVG-simple-fg-bg.png new file mode 100644 index 00000000..80006d6a Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/pbiPatternSVG-simple-fg-bg.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/recalculate-during-resize.gif b/versioned_docs/version-1.6/deeper-concepts/img/recalculate-during-resize.gif new file mode 100644 index 00000000..c03a0b71 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/recalculate-during-resize.gif differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/report-theme-colors.png b/versioned_docs/version-1.6/deeper-concepts/img/report-theme-colors.png new file mode 100644 index 00000000..0469b69c Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/report-theme-colors.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/report-theme-divergent-colors.png b/versioned_docs/version-1.6/deeper-concepts/img/report-theme-divergent-colors.png new file mode 100644 index 00000000..5696c688 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/report-theme-divergent-colors.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-overflow-default.png b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-overflow-default.png new file mode 100644 index 00000000..9d612bb2 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-overflow-default.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-overflow-property.png b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-overflow-property.png new file mode 100644 index 00000000..559efa0e Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-overflow-property.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-scrollbars-enabled.png b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-scrollbars-enabled.png new file mode 100644 index 00000000..c0e640cb Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-editor-scrollbars-enabled.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/scrolling-scrollbar-properties.png b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-scrollbar-properties.png new file mode 100644 index 00000000..b5985860 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-scrollbar-properties.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/scrolling-simple-overflow.png b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-simple-overflow.png new file mode 100644 index 00000000..d4756788 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/scrolling-simple-overflow.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-billions.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-billions.png new file mode 100644 index 00000000..c2a36b6a Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-billions.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-default.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-default.png new file mode 100644 index 00000000..10a659eb Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-default.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-30.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-30.png new file mode 100644 index 00000000..928cf4c6 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-30.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-solid-layer.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-solid-layer.png new file mode 100644 index 00000000..f1cb1723 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-solid-layer.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-stroke.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-stroke.png new file mode 100644 index 00000000..78a6a243 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1-stroke.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1.png new file mode 100644 index 00000000..4425ef44 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-diagonal-stripe-1.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-default.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-default.png new file mode 100644 index 00000000..8b094014 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-default.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-formatted.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-formatted.png new file mode 100644 index 00000000..163f2dc5 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-formatted.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-fr-FR.png b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-fr-FR.png new file mode 100644 index 00000000..bc6977b7 Binary files /dev/null and b/versioned_docs/version-1.6/deeper-concepts/img/vega-lite-line-fr-FR.png differ diff --git a/versioned_docs/version-1.6/deeper-concepts/pattern-fills.md b/versioned_docs/version-1.6/deeper-concepts/pattern-fills.md new file mode 100644 index 00000000..838bd6bd --- /dev/null +++ b/versioned_docs/version-1.6/deeper-concepts/pattern-fills.md @@ -0,0 +1,235 @@ +--- +id: pattern-fills +title: Pattern Fills +description: Understanding how to work with pattern fills in Deneb +slug: /pattern-fills +--- + +# Pattern Fills + +:::caution Pattern fills are not a Vega feature +They are only supported for the SVG renderer and will not work for Canvas. Please bear these points in mind if looking to port a specification elsewhere. +::: + +## Overview + +There are a range of SVG fill patterns available wherever a `color`, `stroke` or `fill` can be used in a mark's property. These are based on [the excellent work of Irene Ros](https://iros.github.io/patternfills/). + +Because SVG patterns have to be explicitly defined inside a web page, we can't add all possible combinations of colors and patterns without significant performance reduction. Therefore the functionality is split into two components: + +1. **Default Patterns**: pre-defined monochrome patterns, which are a good starting point for many data visualization use cases. +2. **Dynamic Variations**: a custom expression function to generate variations of the default patterns with a specific foreground and/or background color. + +## Default Patterns + +Default patterns are referenced using the following syntax: + +``` +url(#[pattern name]) +``` + +For example, if we want to use the `diagonal-stripe-1` pattern, we would refer to this as follows: + +``` +url(#diagonal-stripe-1) +``` + +So, instead of shading our example bar chart from the formatting page with a color, we could use this instead, e.g.: + +```json {5} showLineNumbers +{ + "data": { "name": "dataset" }, + "mark": { + "type": "bar", + "fill": "url(#diagonal-stripe-1)" + }, + "encoding": { + "y": { + "field": "Country", + "type": "nominal" + }, + "x": { + "field": "$ Sales", + "type": "quantitative" + } + } +} +``` + +And instead of a solid fill, we would now get the following rendered visual: + +![vega-lite-diagonal-stripe-1.png](./img/vega-lite-diagonal-stripe-1.png "Simple bar chart using Financial sample dataset (with [$ Sales] as a measure). The measure axis displays raw values, with a maximum of 1,000,000,000. We have specified the 'diagonal-stripe-1' pattern fill to fill the bars with a pattern instead of a solid color.") + +We could augment this with a `stroke` to provide a boundary to the mark, e.g.: + +```json highlight={6} showLineNumbers +{ + "data": { "name": "dataset" }, + "mark": { + "type": "bar", + "fill": "url(#diagonal-stripe-1)", + "stroke": "black" + }, + "encoding": { + "y": { + "field": "Country", + "type": "nominal" + }, + "x": { + "field": "$ Sales", + "type": "quantitative" + } + } +} +``` + +![vega-lite-diagonal-stripe-1-stroke.png](./img/vega-lite-diagonal-stripe-1-stroke.png "We can add a stroke property to border a mark with a pattern fill.") + +### Backgrounds + +Default patterns have a transparent background, and this can be observed in the above example with the x-axis gridlines. If you want to provide a solid background, you can either use the [dynamic pattern variation expression](#dynamic-variations), or layer a mark behind it with a solid fill, e.g.: + +```json highlight={3-10,16-17} showLineNumbers +{ + "data": { "name": "dataset" }, + "layer": [ + { + "mark": { + "type": "bar", + "fill": "white" + } + }, + { + "mark": { + "type": "bar", + "fill": "url(#diagonal-stripe-1)", + "stroke": "black" + } + } + ], + "encoding": { + "y": { + "field": "Country", + "type": "nominal" + }, + "x": { + "field": "$ Sales", + "type": "quantitative" + } + } +} +``` + +![vega-lite-diagonal-stripe-1-solid-layer.png](./img/vega-lite-diagonal-stripe-1-solid-layer.png "Adding a layer and a mark with a solid fill behind our mark with a pattern fill can remove transparency.") + +### Intensity Modifier + +Default patterns also have a modifier suffix that can be added to reduce the intensity of the stroke from `black (#000000)` to a softer color. These are in intervals of 10, from `10` to `90`, and also at the 1st and 3rd quartiles (`25` and `75`). + +So, for our above example, if we wish to reduce the stroke intensity down to 30%, we can use `url(#diagonal-stripe-1-30)`, e.g.: + +```json highlight={13} showLineNumbers +{ + "data": { "name": "dataset" }, + "layer": [ + { + "mark": { + "type": "bar", + "fill": "white" + } + }, + { + "mark": { + "type": "bar", + "fill": "url(#diagonal-stripe-1-30)", + "stroke": "black" + } + } + ], + "encoding": { + "y": { + "field": "Country", + "type": "nominal" + }, + "x": { + "field": "$ Sales", + "type": "quantitative" + } + } +} +``` + +![vega-lite-diagonal-stripe-1-30.png](./img/vega-lite-diagonal-stripe-1-30.png "Adding a '-30' suffix to the 'diagonal-stripe-1' SVG URL will apply a stroke color of 30% intensity of black.") + +### Available Patterns + +The following Power BI report shows all available pre-defined patterns and their SVG URL IDs. + +- You can hover over a pattern to get a tooltip showing its ID in a larger font, as well as how the SVG URL should look in order to apply it. +- The slicer at the bottom of the page can be used to observe the patterns at the specified intensity, and the SVG URL ID required to apply it. + + + +    _[Download this workbook](/pbix/Deneb-Simple-Vega-Lite-Bar-Chart-Example-1.6.0.pbix)_ + +## Our Starting Data + +From the sample workbook, we'll use a single column and measure. Here's how this looks in raw form: + +![simple-data-table.png](./img/simple-data-table.png "A simple category column (City) and measure (Mean Temperature).") + +Here, the `[City]` column represents a nominal category, and `[Mean Temperature]` is a simple measure that calculates the average temperature value for the given row context. + +:::tip Think with Tables + +Try to think about the dataset you wish to add to a Deneb visual in terms of how it will work as a table visual. This will help to understand the granularity of the dataset, and help to "think visually" when it comes to creating marks and layouts. + +::: + +## Adding the Visual + +:::info No Visual in your Report? +If you need assistance with this, refer to the [Getting Started](getting-started) page. +::: + +Once you have added Deneb to your report, you should see it in the _Visualizations_ pane, eg.: + +![Power BI Visualizations pane, showing Deneb loaded.](./img/viz-added.png "The visual gets added to the 'Visualizations' pane in your report.") + +You can then click the visual to add it to the report canvas, e.g.: + +![Adding a Deneb visual to the canvas present the landing page.](./img/viz-landing.png "Adding a Deneb visual to the canvas present the landing page.") + +## Adding the Data + +We'll now add the `[City]` column and `[Mean Temperature]` measure to Deneb's **Values** data role, e.g.: + +![Adding columns and/or measures to the Values data role changes the landing page prompt to indicate that a specification is needed before a visual can be shown.](./img/viz-needs-spec.png "Adding columns and/or measures to the Values data role changes the landing page prompt to indicate that a specification is needed before a visual can be shown.") + +At this point, we need to create a specification, which is required to instruct Vega-Lite (or Vega) how your visualization should be rendered. + +:::info Dataset requirements +There is a limitation with custom visuals where at least one measure needs to be present in the visual dataset for it to be able to persist properties back to the report for retrieval later on. +::: + +## Opening the Visual Editor + +We can now open the Visual Editor by selecting the visual header (...) and then _Edit_, e.g.: + +![Opening the Visual Editor from the visual header](./img/opening-editor.png "Opening the Visual Editor from the visual header") + +This will display the Visual Editor in focus mode, and the _Create New Specification_ dialog will be shown, e.g.: + +![The Create New Specification dialog allows you to choose from a set of simple, pre-defined templates, or import one created by somebody else.](./img/create-new-spec.png "The Create New Specification dialog allows you to choose from a set of simple, pre-defined templates, or import one created by somebody else.") + +:::info Can't See the Dialog? +If you accidentally dismiss the dialog, or it doesn't show, you can bring it up by clicking on the **New Specification** button on the command bar, or using **\[Ctrl + Alt + N]** +::: + +## Selecting the Template + +Using Vega or Vega-Lite requires a specification to be written using JSON. You can either select the **\[empty]** template to begin editing with a bare-minimum specification with the dataset bound to it, or use a predefined template. + +Let's choose **Create using...** > **Vega-Lite** > **Interactive bar chart** template by clicking on it. Note that we now get some additional details about the template, as well as some required placeholders: + +![Selecting a pre-defined template allows you to assign columns or measures from the Values data role to placeholders](./img/bar-chart-template-initial.png "Selecting a pre-defined template allows you to assign columns or measures from the Values data role to placeholders.") + +## Assigning Placeholders + +This template expects two placeholders: one for the the category axis and another for the measure axis. As we've already added our data, we can see these are already available in the dropdown lists, e.g.: + +![Clicking the dropdown in a field placeholder allows you to select one of your columns or measures.](./img/category-placeholder.png "Clicking the dropdown in a field placeholder allows you to select one of your columns or measures.") + +In our case, we'll add **City** to the **Category** placeholder. + +:::info About Data Types +You can choose either the column or the measure - the recommended data type is shown next to each one so that you can visually confirm the right type of field to bind to the placeholder. Using an different type _might_ work, but be prepared to have to make some changes afterwards if you proceed with this. + +Deneb can only see columns or measures added to the **Values** data role. This is a limitation of visuals in Power BI so that they cannot know more about your data model than they are supposed to. You can add or swap out a column or measure if it's not the one you want and the dropdown list will update accordingly. +::: + +Next, we'll click on the **Measure** placeholder and select the **Mean Temperature** measure: + +![Assigning the Mean Temperature measure to our template's Measure placeholder.](./img/measure-placeholder.png "Assigning the Mean Temperature measure to our template's Measure placeholder.") + +## Creating the Initial Specification + +Now that all placeholders have been filled, the **Create** button is enabled: + +![The Create button becomes enabled when all placeholders are assigned.](./img/create-button-enabled.png "The Create button becomes enabled when all placeholders are assigned.") + +Clicking on this will show the visual specification in the Visual Editor with our assigned placeholders, e.g.: + +![The Visual Editor now contains our specification, and a preview of our visual.](./img/created-from-template.png "The Visual Editor now contains our specification, and a preview of our visual.") + +## Reviewing Generated Specification + +In our editor's **Specification** tab, we'll now have the following [Vega-Lite JSON specification](http://vega.github.io/vega-lite/docs/spec.html): + +```json title="Generated Specification" showLineNumbers +{ + "data": { "name": "dataset" }, + "layer": [ + { + "mark": { + "type": "bar", + "opacity": 0.3, + "tooltip": true + }, + "encoding": { + "x": { "field": "Mean Temperature" } + } + }, + { + "mark": { + "type": "bar", + "tooltip": true + }, + "encoding": { + "x": { + "field": "Mean Temperature__highlight" + }, + "opacity": { + "condition": { + "test": { + "field": "__selected__", + "equal": "off" + }, + "value": 0 + }, + "value": 1 + } + } + } + ], + "encoding": { + "y": { + "field": "City", + "type": "nominal" + }, + "x": { + "type": "quantitative", + "axis": { "title": "Mean Temperature" } + } + } +} +``` + +This breaks down as follows: + +- There's a `data` object, which has a mapping of `"dataset"` (line 2). + - This is required for the specification, instructs that our visual's dataset should be used and should be left as-is. + - Refer to the [Dataset](dataset) page for more details on how this works. +- We have a [`layer`](http://vega.github.io/vega-lite/docs/layer.html) view, which allows us to superimpose chart elements (lines 3-35). Within this layer, we have: + + - One [`bar` mark](http://vega.github.io/vega-lite/docs/bar.html) for each data point (lines 4-13). + + - The width (`x` encoding channel) of this bar is bound to our `Mean Temperature` measure (line 11). + - We're displaying a `tooltip` for this mark (line 8). + - This is used to display orginal values in the event of a cross-highlight from another visual (more on this below) + + - One `bar` mark for each data point that is bound to our `Mean Temperature` measure's cross-highlight values in the `x` encoding channel (lines 14-34). + + - The `opacity` of our mark (how 'solid' the color appears) is linked to a special field called `__selected__`, which manages cross-filtering for us (lines 23-32). This is also explained further below, so just bear with us for now. + +- The [encoding for the visual's top-level](http://vega.github.io/vega-lite/docs/encoding.html) (lines 36-45) maps our data as follows: + - `City` is mapped to the y-axis and is a nominal/categorical field (lines 37-40). + - Our x-axis is a quantitative/linear (lines 41-44). + +As noted above, this is a [layered](https://vega.github.io/vega-lite/docs/layer.html) view, so that we can try and show you how to make your visual work with Power BI's interactivity features in as simple a way as possible. Vega-Lite also has [single](http://vega.github.io/vega-lite/docs/spec.html#single), [concatenated](https://vega.github.io/vega-lite/docs/concat.html) or [faceted](https://vega.github.io/vega-lite/docs/facet.html) views as well, wo it's worth checking those out (with their associated examples) to learn more. + +We also have some other stuff going on in the editor's **Config** tab, thanks to our template... + +## Reviewing Generated Config + +In our editor's **Config** tab, we currently have an empty JSON object: + +```json title="Generated Config" showLineNumbers +{} +``` + +Config is there for you to be able to apply specific cosmetic attributes to things in your specification, without having everything tightly-coupled. You can do this in your specification if you like, but abstracting as much as you can into this editor allows you to make cosmetic changes more easily. It's very versatile and you can read more about it for each language in more detail on each documentation site ([Vega](https://vega.github.io/vega/docs/config/) | [Vega-Lite](https://vega.github.io/vega-lite/docs/config.html)). + +One thing that's handy for Power BI - due to the ability to dynamically size visuals - is [automatic sizing for simpler (single or layered) views](http://vega.github.io/vega-lite/docs/size.html#autosize) - and this is automatically applied for you without needing to specify it. + +By default, this template doesn't apply any config, so that you can learn what the defaults look like and build from there. Power BI does not always have sensible defaults for a lot of their core chart types, so you can learn a lot about what is available and how much you can customize by experimenting with this. + +## Intial Config for Our Visual + +We will make some changes to this config so that we can see how we might go about making a design look "at home" with the Power BI defaults. Modify the JSON as follows and click the **Apply** (▢️) button (or pressing [Ctrl + Enter]): + +```json title=Updated Initial Config showLineNumbers +{ + "view": { "stroke": "transparent" }, + "font": "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif", + "axis": { + "domain": false, + "labelColor": "#605E5C", + "labelFontSize": 12, + "ticks": false, + "titleFont": "din", + "titleColor": "#252423", + "titleFontSize": 16, + "titleFontWeight": "normal" + }, + "axisX": { + "gridColor": "#C8C6C4", + "gridDash": [1, 5], + "labelFlush": false, + "labelPadding": 5, + "tickCount": 3 + }, + "axisY": { + "grid": false, + "labelPadding": 10 + } +} +``` + +Our visual will update with these cosmetic changes: + +![config-inital-changes](img/config-inital-changes.png "Once we have applied our inital config, the visual updates to show the costmetic changes.") + +A brief summary of what this has done to our visual: + +- We've removed the border (stroke) from around our plot area. +- We've set the general font to use Segoe UI. Note that here we have added [fallback options](https://www.w3schools.com/css/css_font_fallbacks.asp) for non-Windows devices. +- We've made a generic configuration for both axes to: + - Remove the domain (origin) line. + - Set the color and font size of the axis labels. + - Remove the tick markers. + - Update the title to use the DIN font, and style it accordingly. +- We have styled the x-axis as follows: + - We have modified the color and style (dash) of the gridlines. + - We have modified the distance (padding) of the labels from the domain, and made the start and end labels sit central to their grid line, rather than flush to them. + - We have specified a reduced density of the ticks, which will also affect the labels. +- The y-axis has the following changes: + - We have turned off the grid lines. + - We have increased the padding of the labels from the domain line (slightly larger than the x-axis) + +:::info Extended Config Option for New Templates +If you want a more fully-featured config that matches Power BI more generically, you can create a new specification using the inbuilt **[empty (with Power BI theming)]** template, which uses the [`powerbi` vega theme](https://vega.github.io/vega-themes/?theme=powerbi). +::: + +## Further Bar Styling + +Let's make one more change, so that our bars look a little different to the conventional bar chart. After the closing brace on line 24, add the following: + +```json +{ + ... + "bar": { + "color": "#605E5C", + "cornerRadiusTopRight": 10, + "cornerRadiusBottomRight": 10 + } +} +``` + +Again, let's apply our changes and see the results. Your visual should update as follows: + +![After applying changes to the config, the bar each bar has rounded corners and a different fill color.](./img/config-applied.png "After applying changes to the config, the bar each bar has rounded corners and a different fill color.") + +## Interactivity Review + +There are some features of the specification and settings that allow the visual to be interactive with others in the report. Interactivity is a more advanced topic, but the goal of this example is to show you the art of the possible. It's worth reading up on the interactivity features and understanding the quirks of Power BI and how Deneb tries to bridge these gaps (available in the sidebar), but a short overview of these features and how they are applied in our example are as follows: + +### Tooltips + +Our template enables tooltips by default, so we can hover over a data point in our visual and this will display a default tooltip, e.g.: + +![Our bar chart, showing a standard tooltip when a tooltip-enabled mark is hovered over.](./img/standard-tooltip.png "Our bar chart, showing a standard tooltip when a tooltip-enabled mark is hovered over.") + +If we were to set up a tooltip page that included one of the columns from our visual, then, the visual can resolve this, providing that you specify to use a report page tooltip instead of a default one, e.g.: + +![Our bar chart, showing a report page tooltip, set up for the City field in our report.](./img/canvas-tooltip.png "Our bar chart, showing a report page tooltip, set up for the City field in our report.") + +:::caution Context is Key +Note that report page tooltips will only work if your data point hasn't been transformed or mutated from the row context passed-into your visual's dataset. In the cases where data points cannot be reconciled back to the data model, the visual will display a default tooltip instead. Please refer to the [Interactivity Features](interactivity-overview) or [Tooltips](interactivity-tooltips) pages for further details. +::: + +### Cross-Highlighting + +Creators often have their visuals enabled for cross-highlighting, which means that if another visual is clicked, then other visuals will adjust their display to show the highlighted values in context with their original ones. + +- In our visual, we show the original values with our first mark. + + ```json title="Cross-Highlighting: first (less opaque) mark" showLineNumbers + { + "mark": { + "type": "bar", + "opacity": 0.3, + "tooltip": true + }, + "encoding": { + "x": { "field": "Mean Temperature" } + } + } + ``` + + This is 30% opaque and is displayed underneath the second mark... + +- ...and the second mark is used to show the cross-highlight values. + + ```json title="Cross-Highlighting: second (solid) mark" showLineNumbers + { + "mark": { + "type": "bar", + "tooltip": true + }, + "encoding": { + "x": { + "field": "Mean Temperature__highlight" + }, + ... + } + } + ``` + + If there is no cross-highlight applied, the data point values are the same as the original, and this obscures the mark behind it. This encoding uses the same measure, but with a `__highlight` suffix, which Deneb uses to supply the value we need to show this. The rest of the `encoding` section has been omitted as it's used for the next section. + +:::caution Cross-Highlight Takes A Bit Of Work +It normally might be a bit much for a simple walkthrough, but it's likely that you're heare because you want to build your own visual that looks and feels at home in Power BI. Cross-highlighting is a part of this journey, so we want to give you a simple way in to this. You can read in more detail in the [Interactivity Features](interactivity-overview) or [Cross-Highlighting](interactivity-highlight) pages for further details. +::: + +### Cross-Filtering + +Many Power BI visuals allow you to cross-filter others by clicking (or Ctrl-clicking data points). We can also do this with Deneb, but there are elements of user experience that we need to consider: most Power BI visuals will dim or fade the un-selected data points so that our users understand what is happening between our visual and others. + +This is normally opt-in, but our template already has a simple version of this set-up already. The relevant section of our specification is on lines 25 through 35: + +```json title="Cross-Filtering: second mark encoding" showLineNumbers +{ + "mark": { ... }, + "encoding": { + ... + "opacity": { + "condition": { + "test": { + "field": "__selected__", + "equal": "off" + }, + "value": 0 + }, + "value": 1 + } + } +} +``` + +Deneb uses a special field called `__selected__` to track the status of each row of our dataset. We can use this in our `encoding`, along with a `test` to set the `opacity` value of our mark to `0` (or hidden) if it is not one of those that we've clicked (or Ctrl-clicked) on, e.g.: + +![cross-filtering-opacity.png](./img/cross-filtering-opacity.png "The opacity encoding changes based on whether a mark has been flagged as selected or not.") + +:::caution Context _Really_ is Key +Note that much like report page tooltips, Cross-Filtering will only work well if your data point hasn't been transformed or mutated from the row context passed-into your visual's dataset. In the cases where data points cannot be reconciled back to the data model, this may not work as intended. You also need to manage the visual effects of your selected and un-selected marks. Please refer to the [Interactivity Features](interactivity-overview) or [Cross-Filtering (Selection)](interactivity-selection) pages for further details. +::: + +## Viewing the Finished Product + +When you're finished, click on _Back to report_ to bring you back out of focus mode and to the report canvas. Our visual will now be 'regular sized', thanks to the `autosize` configuration we applied earlier on: + +![regular-sized-bar](img/regular-sized-bar.png "Returning to the report shows our visual specification in place.") + +## Where Next? + +We've used one of the inbuilt templates to produce a simple example, and add some integration features in the form of tooltips, and customized its appearance using config. A simple visual like this is just the tip of the iceberg and the way ahead is quite broad and expansive. + +The purpose of this site is to provide detail on how to make the visual work for you within Power BI, rather than repeating the wealth of great documentation that's already out there. To learn more about some of the additional things the visual can offer (or understand some of its limitations) then please continue to read on or use the menu to explore further. + +If you're hungry for more examples or further inspiration, then a good place to start is [Vega-Lite's own gallery](http://vega.github.io/vega-lite/examples/), or even [Vega's gallery](https://vega.github.io/vega/examples/). diff --git a/versioned_docs/version-1.6/getting-started/visual-editor.mdx b/versioned_docs/version-1.6/getting-started/visual-editor.mdx new file mode 100644 index 00000000..67d2de15 --- /dev/null +++ b/versioned_docs/version-1.6/getting-started/visual-editor.mdx @@ -0,0 +1,305 @@ +--- +id: editor +description: Introduction to Deneb's visual editor +slug: /visual-editor +title: Visual Editor +--- + +import ReactPlayer from "react-player"; + +The Visual Editor is used to define your specification, configuration and any other options. + +## Opening the Editor + +The Visual Editor is only available when your report is in edit mode - when you're editing in Power BI Desktop or in the Service. If the report is being viewed in the Power BI Service or other application, then it is not eligible for editing and any such options will be unavailable to your end-users. + +To use the editor, your visual first needs some data, so please ensure that you have added any appropriate columns or measures to the **Values** data role. + +Once data has been provided, the Visual Editor is accessed by selecting the visual header (...) and then **Edit**, e.g.: + +![Opening the Visual Editor from the visual header.](img/opening-editor.png "Opening the Visual Editor from the visual header.") + +This will put the visual into focus mode and display the Visual Editor for you to begin creating or amending your specification. + +## Finding your Way Around + +The Visual Editor has 3 main components, or panes: + +1. Command Bar - for performing actions on your visual and the editor. +2. Editor Pane - for creating your visual's definitions. +3. Preview Area - for seeing what your visual will look like in your report. +4. Debug Pane - for assisting with the development and refinement process. + +![Overview of the Visual Editor.](img/editor-interface-overview.svg "Overview of the Visual Editor.") + +:::info Here's One We Made Earlier +We're showing a pre-built specification here; if this is your first time opening the editor in a new visual, then the **New Specification** dialog will be visible, to help you get started. Refer to the [Simple Worked Example](simple-example) page for an example of this functionality, or the [New Specification](#new-specification-ctrl--alt--n) section below for more details. +::: + +## The Command Bar + +![Command bar icons.](./img/command-bar.png "Command bar icons.") + +The Command Bar contains the following operations (from left to right): + +#### Specification Editor pane (Ctrl + Alt + 1) + +- Selecting this option will display the Specification Editor pane. You can read more about this in the [Specification Editor Pane section below](#specification-editor-pane). + +#### Config Editor pane (Ctrl + Alt + 2) + +- Selecting this option will display the Config Editor pane. You can read more about this in the [Config Editor Pane section below](#config-editor-pane). + +#### Settings pane (Ctrl + Alt + 3) + +- Selecting this option will display the Settings pane. You can read more about this in the [Settings Pane section below](#settings-pane). + +#### Apply Changes (Ctrl + Enter) + +- Selecting this option will apply any changes you have made in either the _Specification_ or _Config_ and update your visual. +- This option is disabled if you have _Auto-Apply_ enabled (see below). + +:::caution Apply Often +If you exit focus mode (and out of the Visual Editor) **any unapplied changes may not be saved**, so please ensure that you apply changes before returning to the standard view. Refer to the [Unapplied Changes](#unapplied-changes) section below for more details as to how you can mitigate this. +::: + +#### Auto-Apply Changes as you Type (Ctrl + Shift + Enter) + +- Selecting this option will apply changes to the _Specification_ or _Config_ editors as you type them. +- Enabling this option will disable the _Apply_ command. + +:::caution Consider Performance +Whilst this option is convenient for seeing changes take effect immediately, it can have negative performance implications if you're working with a large number of data points or elements within your visualization. Please refer to the [Performance Considerations](performance) page for further details on potential risks and mitigation approaches. +::: + +#### **Format JSON (Ctrl + Alt + R)** + +- Selecting this option will attempt to repair any simple typographical issues in your JSON, and re-format it with indentation. +- The tooling does its best to fix anything straightforward but in some cases it will not be possible to repair the JSON and manual corrections may be required and a banner will be shown above the editor. +- In these cases, you can select the error details in the bottom-right to investigate further and use this information to correct it. + +#### **Edit Specification Field Mapping (Ctrl + Alt + F)** + +- Selecting this option allows you to re-assign any columns or measures that are bound to an encoding or expression in your specification. +- This is documented in more detail [on the Dataset page](dataset#edit-specification-field-mapping). + +#### New Specification (Ctrl + Alt + N) + +- Selecting this option will open the _Create New Specification_ dialog. +- The dialog can be used to replace the current Specification and Config with either an bare-minimum set of JSON for each, or you can choose from a number of simple templates to get started. +- Templates are currently packaged in with the visual and it's not yet possible to import them, although hopefully this will be something we can work on bringing in later on. + +:::info First Time Use +This dialog is also displayed by default if this is the first time opening the Visual Editor for any new instance of Deneb that you add to the report canvas. +::: + +#### Generate JSON Template (Ctrl + Alt + E) + +- Selecting this option will open the **Generate JSON Template** dialog. +- The dialog can be used to create an exportable version of the your specification. Refer to the [appropriate section in the Templates page](templates#generating-a-template) for more information on usage. + +#### **Help (Ctrl + Alt + H)** + +- Selecting this option will cause Power BI to confirm you wish to open the link to this documentation site. Selecting **OK** will open it in a new browser tab. + +## Editor Pane + +The Editor Pane is where you will edit your specification, config and apply any other settings you need to. + +### Resizing the Editor Pane + +The Editor Pane can be resized, or collapsed if you wish to allocate more space on the screen for your Preview and/or Debug panes. + +Some points to note: + +- Use [Ctrl + Alt + Space] to toggle the editor pane between collapsed and expanded. +- The pane can be resized to use a maximum of 60% of the visible canvas by click-dragging. +- Double-clicking the resizer will revert the pane to its default size (40% of the visible canvas). + +### JSON Editor Properties + +The **Advanced editor > JSON editor** property card in Power BI's formatting pane lets you modify the following properties of the JSON editor: + +![JSON editor properties](img/json-editor-settings.png "The Power BI formatting pane exposes some additional properties for formatting the JSON editor, under the Advanced editor menu.") + +#### Position + +Allows you to toggle the position of the Editor Pane between the left and right-hand sides of the screen. By default, the editor is on the left. + +#### JSON Editor Font Size + +Allows you to modify the size of the font used in the JSON editor. By default, this is set to 10px. + +#### Word Wrap + +By default, any content in the editor that overflows the width will wrap onto a new line. By disabling this property, you can keep content on a single line, and the editor will display a horizontal scrollbar as appropriate. + +#### Line Gutter & Line Numbers + +By default, the editor will show line numbers in the left-hand gutter. + +- You can disable this gutter by disabling the **Line gutter** property. +- Alternatively, you can keep the gutter (so that sections of JSON can still be expanded and collapsed as needed) but hide the line numbers by disabling the **Line numbers** property. + +### Specification Editor Pane + +:::note Keyboard shortcut +**\[ Ctrl + Alt + 1 ]** +::: + +- This pane contains an editor that you can use to enter and amend your specification's JSON as desired. + + - The Vega JSON specification reference [can be found here](https://vega.github.io/vega/docs/specification/). + - The Vega-Lite JSON specification reference [can be found here](https://vega.github.io/vega-lite/docs/spec.html). + +- To view the results of your changes, you can either **Apply** your changes, or ensure that **Auto-apply changes as you type** is enabled. +- The JSON must produce a valid specification for your selected provider (either Vega or Vega-Lite). +- The editor will perform validation against the schema for the specified provider and warnings are displayed that you can inspect, e.g.: + +![The Specification editor will validate your JSON against the Vega or Vega-Lite language schema, as appropriate.](./img/schema-validation-example.png "The Specification editor will validate your JSON against the Vega or Vega-Lite language schema, as appropriate.") + +### Config Editor Pane + +:::note Keyboard shortcut +**\[ Ctrl + Alt + 2 ]** +::: + +- This pane contains an editor that you can use to enter and amend any JSON you wish to add for your visual's config as desired. + - The Vega JSON config reference [can be found here](https://vega.github.io/vega/docs/config/). + - The Vega-Lite JSON config reference [can be found here](https://vega.github.io/vega-lite/docs/config.html). +- To view the results of your changes, you can either **Apply** your changes, or ensure that **Auto-apply changes as you type** is enabled. +- The JSON must produce a valid config for your selected provider (either Vega or Vega-Lite). +- It's generally advised to try and use the config for anything that can "theme" your chart and keep this separate from the specification. This makes easier to port across to other instances of the visual. + +### Settings Pane + +:::note Keyboard shortcut +**\[ Ctrl + Alt + 3 ]** +::: + +- This pane is used to configure specific behavior of Deneb when generating output: + + ![The Settings pane in the Visual Editor.](./img/settings-tab.png "The Settings pane in the Visual Editor.") + +- The **Provider** section allows you to specify whether to use Vega or Vega-Lite for your Specification and Config. + + - Vega-Lite is much simpler for newcomers as it is much more concise and abstracts away a lot of the things that you would normally need to prescribe when using Vega. + - Vega does provide a lot more in the way of control over your visualization at the cost of a higher-learning curve. + +- _The_ **Render mode** section specifies whether to use either Vega's SVG renderer or Canvas renderer when compiling, parsing and producing your design. + - _Canvas_ renders your design as pixel graphics. + - _SVG_ creates your design from vector graphics, results in a number of component elements within the visual to produce the output. + - Please refer to the [Performance Considerations](performance#selection-of-renderer) page for further details on potential risks and mitigation approaches when it comes to selecting a renderer. +- The **Vega > Power BI interactivity** section specifies which interactivity features to enable. + - As these require some additional setup in your specification, as well as some internal logic to link everything together you are able to specify whether they should be set-up or not. + - Please refer to the [Interactivity Features](interactivity-overview) and related pages ([Tooltips](interactivity-tooltips) | [Context-Menu](interactivity-context-menu) | [Cross-Filtering](interactivity-selection) | [Cross-Highlighting](interactivity-highlight)) for further details on how to configure these for your specification. + +### Column and Measure Completion + +:::note Specification editor only +::: + +As the specification is text-based, it can be onerous to look-up or type the names for measures or columns in manually. For any that are added to the **Values** data role, they will be offered (along with a qualifier as to their type) in the Specification editor’s auto-completion, e.g.: + +![Example of auto-completion from the visual dataset.](./img/completer.png "Example of auto-completion from the visual dataset.") + +### Unapplied Changes + +If you've made changes in the Visual Editor and select _Back to report_ without applying them, you will get a prompt alerting you of this: + +![The 'Unapplied Changes' dialog attempts to allow you to save any changes made in the editor before they can be lost.](./img/unapplied-changes.png "The 'Unapplied Changes' dialog attempts to allow you to save any changes made in the editor before they can be lost.") + +:::caution +This is a 'last chance' to make sure that any changes you want to keep are applied. If changes are discarded, they cannot be recovered. +::: + +## Preview Area + +Deneb captures the dimensions of your visual prior to opening the Visual Editor and shows this at 100% scale. This is so that you know how your design should look within the confines of the visual viewport when you return to the report, e.g.: + +![The Preview Area shows a preview of your visual, using the dimensions of the container on the Power BI report canvas.](./img/editor-interface-preview-pane.png "The Preview Area shows a preview of your visual, using the dimensions of the container on the Power BI report canvas.") + +Your visual may not fit entirely into the preview area at 100% scale, so you can use the [Zoom Controls in the Debug Pane](#zoom-controls) (or collapse it) to adjust this accordingly, [or resize (or collapse) the editor pane](#the-visual-editor-pane) to accommodate. + +The **Advenced editor > Preview area** property card in Power BI's formatting pane lets you modify the following properties of the Preview Area: + +![Preview area properties](img/preview-area-settings.png "The Power BI formatting pane exposes some additional properties for formatting the Preview area, under the Advanced editor menu.") + +#### Viewport Marker + +The dashed line represents the viewport (boundaries) of your visual in standard view. **Power BI does not allow visuals to resize themselves dynamically**, so if you wish to change the physical width and/or height of your visual in the report view, you will need to exit the Visual Editor, resize your visual, and then re-open the Visual Editor. + +If you would prefer to not see the viewport marker, you can disable this in the properties pane by selecting **Show viewport marker > Off**. + +#### Show Scrollbars + +If your visual specification overflows the viewport, the default behavior of the preview area is to show the output overflowing the content. This is so that you can see the full output of your specification and what might get truncated in the report view. + +If you wish to mimic the behavior of the report view, you can enable the **Show scrollbars on overflow** property. This will cause the preview area to use scrollbars as appropriate rather than overflowing the content outside the viewport marker area. + +To learn more about scrolling and overflow behavior, please refer to the [Scrolling and Overflow](scrolling-overflow) page. + +## Debug Pane + +The Debug Pane provides you with additional tooling to inspect and debug your visual design, as well as exposing information about the Vega or Vega-Lite view used to generate it. + +![The Debug Pane provides you with additional tooling to inspect and debug your visual design, as well as exposing information about the Vega or Vega-Lite view used to generate it.](img/editor-interface-debug-pane.png "The Debug Pane provides you with additional tooling to inspect and debug your visual design, as well as exposing information about the Vega or Vega-Lite view used to generate it.") + +From left to right, the components of the pane are as follows: + +### Data Pane + +The Data Pane exposes information about data sets from the Vega view, and is the default view in the Debug Pane. Assuming that your visual parses correctly, this will provide a dropdown to choose the desired data stream to inspect, and the details of this will then be shown in the table underneath. + +- The default selection is the `dataset` entry, which is the data supplied to Deneb from your data model. This includes [any additional fields](interactivity-overview#additional-datum-fields) Deneb adds to assist you for interactivity purposes, so that you can inspect their values much more easily than [using tooltips to expose a mark's datum](interactivity-tooltips#debugging-with-tooltips). + +- Complex objects will only render if they are small enough; larger ones will be truncated with `{...}` (but can be inspected further in a tooltip by hovering over the placeholder value), e.g.: + + ![If a table cell is too complex to display, Deneb will attempt to prettify its contents in a tooltip if hovered-over.](img/editor-interface-data-pane-complex-tooltip.png "If a table cell is too complex to display, Deneb will attempt to prettify its contents in a tooltip if hovered-over.") + +- Tooltips for interactivity values and headers are also contextual, to better assist you with what things might mean, e.g.: + + ![If a table cell is too complex to display, Deneb will attempt to prettify its contents in a tooltip if hovered-over.](img/editor-interface-data-pane-interactivity-tooltip.png "If a table cell is too complex to display, Deneb will attempt to prettify its contents in a tooltip if hovered-over.") + +- For performance reasons with rendering (mainly because a data stream can contain complex objects), the number of visible rows is capped at 10 per page. You may therefore need to navigate the table using the pagination tools underneath it to look at any specific records; however, columns can be sorted by clicking on the appropriate header. + +### Signals Pane + +The Signals Pane can be used to inspect the state of [signals](https://vega.github.io/vega/docs/signals/) from the Vega view. Signals are often auto-generated for features in Vega-Lite, such as [parameters](https://vega.github.io/vega-lite/docs/parameter.html). + +The functionality of the table is very much the same as for the Data Pane. + +### Logs Pane + +The Logs pane is used to monitor [logging](https://vega.github.io/vega/docs/api/util/#logging) events emitted by the Vega view. Here, you can set the desired log level and this will update when the specification is (re)parsed. + +- The default logging level is `warn`. +- Note that due to the verbosity of the output created by the `debug` level, this is not available in Deneb. + +### Provider and Version + +This are provides re-statement as to which provider you're using (Vega or Vega-Lite) and which version is embedded. + +:::tip Check the Provider Version Can Do What You're Looking Up +Deneb doesn't automatically support new releases of Vega or Vega-Lite. Because the runtimes are embedded, any new releases need to be be tested, implemented and deployed to AppSource, which can take some time. As such, you can use this information in the toolbar to confirm if the embedded version might be behind any new features published by the Vega team. +::: + +### Zoom Controls + +The Zoom Controls are intended to assist you with detail work; particularly as Power BI custom visuals can only occupy a certain amount of the main interface. These functions are: + +- Zoom preview out by 10% + +- Zoom level slider - allows manual adjustment of zoom level from 10% to 400%. + +- Zoom preview in by 10% + +- Current zoom level - click to set a specific zoom level: + + ![Clicking the zoom level indicator allows you to choose a specific zoom level for the preview area.](img/editor-interface-zoom-level-popover.png "Clicking the zoom level indicator allows you to choose a specific zoom level for the preview area.") + +- Zoom preview to fit available space + +### Collapse or Expand Debug Pane + +This control will allow you to toggle the visible state of the Debug Pane. diff --git a/versioned_docs/version-1.6/interactivity/context-menu.md b/versioned_docs/version-1.6/interactivity/context-menu.md new file mode 100644 index 00000000..01d9d2e9 --- /dev/null +++ b/versioned_docs/version-1.6/interactivity/context-menu.md @@ -0,0 +1,37 @@ +--- +id: context-menu +slug: /interactivity-context-menu +sidebar_label: Context Menu +--- + +# Context Menu + +If you or a user right-clicks the visual canvas, Deneb will display the Power BI context menu. + +The context menu is managed by the main Power BI window, so Deneb manages integration beetween the Vega view and Power BI, in order to delegate as much as possible on your behalf. + +## Context Menu Strategy + +The context menu works as follows: + +- The context menu will always be available when right-clicking the visual canvas (or within the boundary representing the visual viewport in the Advanced Editor's [Preview Area](visual-editor/#preview-area)) + +- You can configure whether Deneb should attempt to [resolve data points](#data-point-resolution) when invoking the context menu, through the **Resolve Data Points in Context Menu** property in the _Vega > Power BI Interactivity_ section of the [Settings pane in the Visual editor](visual-editor#settings-tab). This is enabled by default. + +## Data Point Resolution + +With the **Resolve Data Points in Context Menu** property enabled: if the right-click target area is a mark, and represents an un-transformed row from your `"dataset"`, Deneb will attempt to resolve the current row context and present any options that Power BI makes available from the main window, e.g.: + +![context-menu-data-point.png](./img/context-menu-data-point.png "By default, Deneb will attempt to resolve data point context if a mark is right-clicked.") + +## Regular Context Menu (or Resolution Not Possible) + +If the property is disabled or a datum cannot be resolved from a mark (or the target area is not a mark), Deneb will display the regular context menu, e.g.: + +![context-menu-no-data-point.png](./img/context-menu-no-data-point.png "By default, Deneb will attempt to resolve data point context if a mark is right-clicked.") + +## Limitations and Considerations + +- Data resolution integration with Power BI is wholly dependent on the correct row context. [Refer above](#data-point-resolution), or to the [Overview](interactivity-overview) page for more information about ensuring this is preserved. + +- The Power BI context menu only accepts a single datum, or row. This means that if you are aggregating rows into marks then we cannot resolve the context menu in these cases. diff --git a/versioned_docs/version-1.6/interactivity/highlight.md b/versioned_docs/version-1.6/interactivity/highlight.md new file mode 100644 index 00000000..d2a78945 --- /dev/null +++ b/versioned_docs/version-1.6/interactivity/highlight.md @@ -0,0 +1,313 @@ +--- +id: highlight +slug: /interactivity-highlight +sidebar_label: Cross-Highlighting +--- + +# Cross-Highlighting + +It is possible to make your visual respond to cross-highlight interactions from other visuals. Much like [Cross-Filtering](interactivity-selection), this requires some additional work to implement the necessary visual effects that you want your visual to have, so as such the properties are **disabled** by default. This page shows how to enable this, and provides some guidance on how you can work with the data that gets sent to the visual dataset. + +:::info This is A Deep and Info-Dense Topic +This whole page provides valuable knowledge about how cross-highlighting works in Power BI, and the theory you need to consider how to approach it in your own visuals. + +If you're the sort of person that just wants to get on with it, the one thing you absolutely need to bear in mind is: **any visual you want to build that supports cross-highlighting is really 2 visuals in one**: + +1. A visual that shows the original values. +2. A visual that shows the highlighted values in context with the originals. + +It is recommended that you read the page in order so you can best understand what cross-highlighting involves. If you want to jump straight in, you can head down to the [Recommended Approaches](#recommended-approaches) section, but for those who read the whole thing, it may make your life a bit easier πŸ™‚ +::: + +## Filtering vs. Highlighting: Conceptually + +Power BI offers three types of [interactions between visuals](https://docs.microsoft.com/en-us/power-bi/create-reports/service-reports-visual-interactions?WT.mc_id=DP-MVP-5003712): **Filter**, **Highlight** and **None**. + +As creators, a lot of what goes on under the hood is abstracted away from us with visuals that we directly consume in Power BI. If we want to tear off the mask and manage this ourselves, we need to know more about this at a basic level. What follows is a simple guide on how these interactions may work (this can also be dug into at a lower-level [in the custom visuals SDK documentation](https://docs.microsoft.com/en-us/power-bi/developer/visuals/highlight?WT.mc_id=DP-MVP-5003712)). + +Let's say we have a chart which shows **Sales** by **Country Code**, but we intend to build a visual with Deneb that used **Sales** by **Product**. For now we will represent this using a table visual: + +![cross-highlight-vs-cross-filter-01.png](./img/cross-highlight-vs-cross-filter-01.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amount.") + +### Filtering + +When it comes to the **Filter** interaction, our visual dataset's fields are directly updated by Power BI with the revised values, e.g.: + +![cross-highlight-vs-cross-filter-02.png](./img/cross-highlight-vs-cross-filter-02.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amount. The bar chart's US value is highlighted and the amounts in the table for Product are adjusted to show the values for the US rather than for all Countries in the bar chart.") + +It should be fairly evident that the totals have updated in our table to reflect the values from the _US_ category. In our Deneb dataset, the **Sales** field will contain the same value and our chart would update as we expect. + +### Highlighting + +With the **Highlight** interaction, we want to be able to show the values in context to the original values. With this enabled, things change a bit. Our dataset now looks similar to the following representation: + +![cross-highlight-vs-cross-filter-03.png](./img/cross-highlight-vs-cross-filter-03.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amounts. The bar chart's US value is highlighted and the amounts in the table show the original Sales amount for all Products (irrespective of Country), as well as the values for the current highlight, which is the US.") + +Here we can see that this is a combination of _both_ of the above tables - our **Sales** measure shows the original values that were provided, and we have an additional set of values showing the amount for the highlighted **Country** in our other visual. + +If we flip things the other way around and click on a row in our table, we can see a similar effect on the bar chart, e.g.: + +![cross-highlight-vs-cross-filter-04.png](./img/cross-highlight-vs-cross-filter-04.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amounts. The table's 'Amarilla' Product and the amounts in the bar chart show the original Sales amount for all Countries (irrespective of Country), as well as the values for the current highlight, which is the 'Amarilla' Product.") + +What we see in the bar chart, is almost the same thing as our table: (ignoring the data labels for a second) each **Country** has: + +- A solid bar - representing the **Sales** amount for the highlighted **Product**. +- A less opaque bar - representing the original **Sales** amount for each **Country** (for all **Products**). + +Without spoiling things too much, this is the type of approach we need to think about if we want to build a visual using Deneb that implements cross-highlighting. + +To complete the loop, if we have no filtering applied, but our visual is enabled for cross-highlight, we can consider that both of these "measures" exist in the dataset, but have the same value, e.g.: + +![cross-highlight-vs-cross-filter-05.png](./img/cross-highlight-vs-cross-filter-05.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amount. The table also has a 'Highlights' version of the Sales field, which is the same, because both visuals have no interactive highlights applied to them.") + +## What this Means for Deneb + +With the above in-mind, and before we talk about the strategy and how to work with cross-highlighting in Deneb, there are some other considerations to think about. + +### Deneb is the Visual + +- Deneb is the actual custom _Visual_ that you're adding to your report, and the features it supports at a high-level are what Power BI knows about. + +- Your specification is executed within Deneb's environment. + +- If a Power BI _Visual_ wants to support cross-highlighting, it's assumed that you're going to handle it in your code, and if you're writing a specific custom visual that you're going to package and distribute, that's normally fine. + +- Deneb is different in that it's a host for a language that lets you create your own visual, but as far as Power BI is concerned, it's the one that _should_ be cross-highlighting (as we told Power BI that the feature is supported at the _Visual_ level). + +- For us to offer the functionality for creators who wish to leverage it, we have to enable this support at the visual (Deneb) level. + +### Cross-Highlighting = Additional Thinking + +As such, having the feature enabled essentially creates the challenge that you need to start thinking about it: + +- With Deneb, you as a creator _might_ want to enable support and spend the time building everything around it. But, you might not, and that's fine too. + +- Many users have their default interaction set to cross-highlight rather than cross-filter in Power BI's **Options** dialog: + + ![powerbi-default-visual-interaction.png](./img/powerbi-default-visual-interaction.png "Partial view of the 'Report settings' pane in the Power BI 'Options' dialog. The 'Change default visual interaction from cross highlighting to cross-filtering' option is highlighted in red. This option is set to 'OFF', or unchecked.") + +- If you don't want to go to the effort of implementing cross-highlight, this situation may cause confusion if you haven't explicitly set all interactions from other visuals to your Deneb visual to highlight rather than filter. + +Based on the above explanation of how the different interaction modes work, you would normally see no change in your visual, because the 'base' or original values remain in-place. + +Whilst this is not intuitive, it is technically correct. However, we understand that there's a lot to think about when learning a language, and having to understand more about how Power BI works under the hood when it comes to this kind of thing. + +### "Out of the Box" Assumptions + +Therefore, Deneb's approach to cross-highlighting assumes the following: + +1. You're unlikely to want to implement it without understanding what all the above means. + +2. It may not make sense to you until you do. + +3. When you do understand, you're aware of what this might entail and are ready to opt-in. + +Therefore, we want to try and meet you halfway. As such, we assume that cross-highlighting functionality should not be on by default if you want to op-in to add cross-highlight functionality in your visual, it's a 2-stage process. This is detailed further below. + +## Recommended Approaches + +You probably want to get into this as quickly as possible, so use the appropriate directions under each section to set up the visual how you need it for the situation you want. However, the sections that follow afterwards are pretty much recommended reading if you want to understand how or why things work the way they do, and what you need to understand what's happening inside your visual. + +Bear in mind that **we cannot control the default interactions in the visual header from inside Deneb**; these are outside the body of the visual and as such need to be manually specified by the report creator. + +### Cross-Filtering Only + +If you don't want cross-highlighting support in your specification at all: + +- Ensure that the **Expose Cross-Highlight Values for Measures** property is disabled in the _Vega > Power BI Interactivity_ section of the [**Settings** pane](visual-editor#settings-tab) of the Visual Editor. This should be disabled by default, unless you have loaded a template that utilises it. + +- Confirm that any other visuals that can interact with your visual are set to **Filter** your visual in the visual header. + +#### How We Try to Help (if you don't do this) + +If the **Expose Cross-Highlight Values for Measures** property is disabled, but the interaction in the visual header has not been set, we will attempt to map highlight values to measure values by their original name internally, e.g.: + +![cross-highlight-example-without-highlight-prop.gif](./img/cross-highlight-example-without-highlight-prop.gif "Cross-Highlight functionality can now be leveraged, so you can bind encodings for original and highlight values.") + +:::warning Always Check Behavior +Note that this may not be 100% reliable but is the best we can do due to custom visual limitations. If leaving this as-is, you should really ensure that your data is correct for your readers, and explicitly set the correct interactions if not. +::: + +### Cross-Highlighting + +If you want to take-up cross-highlighting support in your specification: + +- Ensure that the **Expose Cross-Highlight Values for Measures** property is enabled in the _Vega > Power BI Interactivity_ section of the [**Settings** pane](visual-editor#settings-tab) of the Visual Editor. This should be disabled by default, unless you have loaded a template that utilises it. + +- Confirm that any other visuals that can interact with your visual are set to **Highlight** your visual in the visual header. + +To know more about how this works at a lower level, and how to access the necessary fields in your dataset to leverage the functionality, you can keep reading. + +## Cross-Highlighting Strategy + +Now, we can talk about how to get started. As this is a dense topic, some points may be repeated from above, just to ensure that everything is laid out in one place. + +- You can configure whether Deneb should expose highlight values to the dataset, through the **Expose Cross-Highlight Values for Measures** property is enabled in the _Vega > Power BI Interactivity_ section of the [**Settings** pane](visual-editor#settings-tab) of the Visual Editor. + +- This setting is **disabled** by default. + +- For each row in the visual dataset, Deneb will expose and generate [special fields for each measure](#special-__highlight-fields), which you can use to assign encoding of mark properties (or use other functionality such as conditions or expressions) and represent data points that are highlighted vs. their original values. + +- When data points in another visual are selected, **and** Deneb's interaction with the visual is set to **Highlight**, your dataset will respond to these changes: + + - The original measure value prior to the highlight operation is preserved. + - The highlight fields are updated with the information Power BI provides from the main window. + +- If there is no active selection in another visual, the highlight and original values of measures are equal to each other (but still exist). You can get a visual representation of what tis might look like in our [walkthrough of the concept above](#highlighting). + +- It is up to you as a creator to use this field to [manage the visual effects within your specification](interactivity-overview#visual-effects-and-behavior) for highlighted vs. original data points or field values. A simple illustration of this is covered [in the worked example](simple-example#cross-highlighting) and some further simple examples are [covered further down the page](#managing-highlight-state-visually-through-encodings). + +- We [try to map highlight values internally](#how-we-try-to-help-if-you-dont-do-this) to our regular values, if the option has not been enabled. + +## Special `__highlight` Fields + +Where [cross-filtering](interactivity-selection) works for the whole row, cross-highlighting works at the measure-level. If the the **Expose Cross-Highlight Values for Measures** property is enabled, then your visual dataset contains additional fields for each measure. + +- `[measure name]__highlight` - this is the highlight value for the measure, as opposed to its original value, which is stored in the regular measure field. This provides a way of being able to encode original vs. highlight. + +- `[measure_name]__highlightStatus` - this provides additional state about this specific measure for this particular row context has a higlight applied or not (like the `__selected__` field, but more-specific). This can be one of the following values: + + - **`on`**: the visual has an active cross-highlight state and the measure is actively highlighted + - **`off`**: the visual has an active cross-highlight state, but the measure is not highlighted (this tends to be a likely scenario when using multiple measures rather than a single measure) + - **`neutral`**: there is no cross-highlight state applied to the visual. The orginal and highlight values will be equal to each other. + +- `[measure_name]__highlightComparator` - this provides a pre-calculated way of determining if a highlight value is equal to its original value or not and allow you to apply conditional encodings without the need to derive this separately in a `calculate` transform or similar. This can be one of the following values: + + - **`eq`**: the original and highlight values are equal to each other + - **`lt`**: the highlight value is less than the original value + - **`gt`**: the highlight value is greater than the original value + - **`neq`**: the highlight value and original value are not equal, or not directly comparable (this will typically be used for text-based measures) + +#### Simple Example of How Fields Respond to Cross-Highlighting from Other Visuals + +Using a similar example as our walkthrough above (using the same Product column and $ Sales measure), here's how our dataset will look if we enable the **Expose Cross-Highlight Values for Measures** property: + +![cross-highlight-dataset-01.png](./img/cross-highlight-dataset-01.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amount. The table also shows Deneb's 'Highlights' version of the Sales field, which is the same as the original due to no active cross-highlight being applied. There is also a 'Highlight Status' field, which shows 'neutral', and a 'Highlight Comparator' field, which shows 'eq', again because there is no active cross-highlight applied.") + +Selecting a data point in our other visual will now cause Power BI to update our visual's higlight values, and Deneb will update the additional fields accordingly, e.g.: + +![cross-highlight-dataset-02.png](./img/cross-highlight-dataset-02.png "A bar chart, showing Sales by Country, and an accompanying table visual showing Product and corresponding Sales amount. The table also shows Deneb's 'Highlights' version of the Sales field, and the 'Highlight Status' and 'Highlight Comparator' fields. The bar chart's US value is highlighted and the amounts in the table show the original Sales amount for all Products (irrespective of Country), as well as the values for the current highlight, which is the US. The 'Highlight Status' fields shows 'on', indicating the measure is actively highlighted. The 'Highlight Comparator' value shows 'lt', which specifies that the highlighted value is less than the original value.") + +## Managing Highlight State Visually Through Encodings + +Much like for cross-filtering, you will need to ensure that you design your visual and its encodings to effectively communicate cross-highlight status for your readers. This is often uncharted territory when it comes to bespoke visuals in Power BI, as there are often no existing visuals or patterns to crib ideas from. + +It's generally regarded to try and communicate where your highlights are vs. your original values, so that your readers can contextually resolve this information. + +The [Simple Worked Examples](#simple-examples) section below shows how you may be able to get started with exploring this further. While these focus on Vega-Lite, both versions of the _Simple Bar Chart_ template available from the _New Specification_ dialog contain simple bindings for cross-highlighting to help you get started. + +## Limitations and Considerations + +:::info This Sounds Hard... +Well, it's not always straightforward! It is early days for this type of "visual thinking" within Power BI, and it is likely that the community will be able to uncover better design patterns than the ones outlined on this page. They will certainly help you get on your way. + +If you have found an alternative approach, or have a great idea on how to help us improve this, then [please let us know](https://github.com/deneb-viz/deneb/issues)! We would love to continue to evolve this functionality and make it more accessible if we can do so. +::: + +- Cross-highlight values are only applicable to measures; Power BI does not apply this to columns. + +## Simple Worked Examples + +The following examples are for Vega-Lite but similar principles can be applied for Vega. + +This report shows the three examples below how they would be rendered in Power BI, using a model based on the sample finanical data available in Power BI Desktop. In each case, the full tooltip data is exposed so that you can observe the state of the `__highlight` fields. A table is also visible to show what the highlight fields look like as the visual is being cross-highlighted from our core visual on the left. We'll provide basic example JSON for each underneath. + + + +_[Download this workbook](/pbix/Deneb-Simple-Cross-Highlighting-Examples.pbix)_ + +#### Example 1: Simple Cross-Highlight Handling Using Layers + +Here, we're altering the approach of our bar chart slightly, using [layers](http://vega.github.io/vega-lite/docs/layer.html) to draw 2 bars - one for the original values and another for the highlights. The `x` position of each bar is bound accordingly, e.g.: + +```json highlight={5-12,15-22} showLineNumbers +{ + "data": { "name": "dataset" }, + "layer": [ + { + "description": "Original Value", + "mark": { + "type": "bar", + "opacity": 0.3 + }, + "encoding": { + "x": { "field": "Sales" } + } + }, + { + "description": "Highlight Value", + "mark": { + "type": "bar" + }, + "encoding": { + "x": { + "field": "Sales__highlight" + } + } + } + ], + "encoding": { + "y": { + "field": "Product", + "type": "nominal" + }, + "x": { "type": "quantitative" } + } +} +``` + +#### Example 2: Extending Design to Include Cross-Filtering + +Example 1 will work for cross-highlight only; in order to ensure that our design allows our visual to cross-filter other visuals _and_ handle incoming cross-highlight, we extend the `opacity` encoding in our highlights layer to effectively toggle visibility of the mark if the `__selected__` field is off. This will utilise the underlying mark for the orignal values for the 'dimmed' value, e.g.: + +```json highlight={23-32} showLineNumbers +{ + "data": { "name": "dataset" }, + "layer": [ + { + "description": "Original Value", + "mark": { + "type": "bar", + "opacity": 0.3 + }, + "encoding": { + "x": { "field": "Sales" } + } + }, + { + "description": "Highlight Value", + "mark": { + "type": "bar" + }, + "encoding": { + "x": { + "field": "Sales__highlight" + }, + "opacity": { + "condition": { + "test": { + "field": "__selected__", + "equal": "off" + }, + "value": 0 + }, + "value": 1 + } + } + } + ], + "encoding": { + "y": { + "field": "Product", + "type": "nominal" + }, + "x": { "type": "quantitative" } + } +} +``` diff --git a/versioned_docs/version-1.6/interactivity/img/context-menu-data-point.png b/versioned_docs/version-1.6/interactivity/img/context-menu-data-point.png new file mode 100644 index 00000000..45b57541 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/context-menu-data-point.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/context-menu-no-data-point.png b/versioned_docs/version-1.6/interactivity/img/context-menu-no-data-point.png new file mode 100644 index 00000000..8cfb1c4d Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/context-menu-no-data-point.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-dataset-01.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-dataset-01.png new file mode 100644 index 00000000..5421155a Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-dataset-01.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-dataset-02.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-dataset-02.png new file mode 100644 index 00000000..d6e8549a Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-dataset-02.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-example-without-highlight-prop.gif b/versioned_docs/version-1.6/interactivity/img/cross-highlight-example-without-highlight-prop.gif new file mode 100644 index 00000000..82b1a25c Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-example-without-highlight-prop.gif differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-01.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-01.png new file mode 100644 index 00000000..547bc10e Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-01.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-02.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-02.png new file mode 100644 index 00000000..afa20cc5 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-02.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-03.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-03.png new file mode 100644 index 00000000..b8e1c5f3 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-03.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-04.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-04.png new file mode 100644 index 00000000..d07379e6 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-04.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-05.png b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-05.png new file mode 100644 index 00000000..04d7cfea Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/cross-highlight-vs-cross-filter-05.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/powerbi-default-visual-interaction.png b/versioned_docs/version-1.6/interactivity/img/powerbi-default-visual-interaction.png new file mode 100644 index 00000000..cd95f570 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/powerbi-default-visual-interaction.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/selection-data-limit-exceeded.png b/versioned_docs/version-1.6/interactivity/img/selection-data-limit-exceeded.png new file mode 100644 index 00000000..685cbc62 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/selection-data-limit-exceeded.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/selection-data-limit-property.png b/versioned_docs/version-1.6/interactivity/img/selection-data-limit-property.png new file mode 100644 index 00000000..fb7bd370 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/selection-data-limit-property.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/selection-simple-multiple-point.png b/versioned_docs/version-1.6/interactivity/img/selection-simple-multiple-point.png new file mode 100644 index 00000000..876980a1 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/selection-simple-multiple-point.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/selection-simple-single-point.png b/versioned_docs/version-1.6/interactivity/img/selection-simple-single-point.png new file mode 100644 index 00000000..402c2c18 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/selection-simple-single-point.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/simple-column-and-measure-result.png b/versioned_docs/version-1.6/interactivity/img/simple-column-and-measure-result.png new file mode 100644 index 00000000..b2909e50 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/simple-column-and-measure-result.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/simple-column-and-measure-roles.png b/versioned_docs/version-1.6/interactivity/img/simple-column-and-measure-roles.png new file mode 100644 index 00000000..102bc26f Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/simple-column-and-measure-roles.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/tooltip-datum-full.png b/versioned_docs/version-1.6/interactivity/img/tooltip-datum-full.png new file mode 100644 index 00000000..f698a901 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/tooltip-datum-full.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/tooltip-default-example.png b/versioned_docs/version-1.6/interactivity/img/tooltip-default-example.png new file mode 100644 index 00000000..cd68bd8e Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/tooltip-default-example.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/tooltip-modern.png b/versioned_docs/version-1.6/interactivity/img/tooltip-modern.png new file mode 100644 index 00000000..a8661a04 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/tooltip-modern.png differ diff --git a/versioned_docs/version-1.6/interactivity/img/tooltip-report-page-example.png b/versioned_docs/version-1.6/interactivity/img/tooltip-report-page-example.png new file mode 100644 index 00000000..86f1bfa5 Binary files /dev/null and b/versioned_docs/version-1.6/interactivity/img/tooltip-report-page-example.png differ diff --git a/versioned_docs/version-1.6/interactivity/index.md b/versioned_docs/version-1.6/interactivity/index.md new file mode 100644 index 00000000..da66964f --- /dev/null +++ b/versioned_docs/version-1.6/interactivity/index.md @@ -0,0 +1,136 @@ +--- +id: overview +slug: /interactivity-overview +sidebar_label: Interactivity Features +--- + +# Interactivity Features - An Overview + +Power BI provides the ability to create visuals using [R](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-r-visuals?WT.mc_id=DP-MVP-5003712) and [Python](https://docs.microsoft.com/en-us/power-bi/connect-data/desktop-python-visuals?WT.mc_id=DP-MVP-5003712). Whilst these extend your options significantly, these are typically rendered as a static image and mean that it's currently not possible for you to interact back from these visuals to the rest of the report. + +On occasion, these visuals may also require some additional dependencies if you want to share with a wider pool of end-users, or a library may not be available in the Power BI Service when it comes to deployment. + +## How Deneb Can Be Different from R & Python Options + +In addition to the JSON-based declarative syntax, Deneb is packaged with the Vega and Vega-Lite libraries. Because they are built for the web, anything you produce should ideally be portable within the Power BI ecosystem, irrespective of which device you're using. + +Both [Vega](https://vega.github.io/vega/docs/event-streams/) and [Vega-Lite](https://vega.github.io/vega-lite/docs/selection.html) have their own approaches to interactivity and it's only logical to start thinking about how we can make use of this to make the visual "fit in" with the functionality on offer in other Power BI visuals... + +## Managing your Expectations + +The interactivity part is one of the harder elements of developing your own custom visual and as such, it's going to be challenging to make this work in a visual like Deneb in a generic way, particularly as the Vega tooling provides a lot of creative freedom. + +We fundamentally have three challenges when it comes to building visuals that are interactive within Power BI: + +1. Ensuring that Deneb visuals can interact with the main Power BI window (which handles interactivity events on a visual's behalf). + +2. Reconciling data and row context to other visuals or the data model when events happen in our visual. + +3. Prescribing how the our visual should behave and respond _visually_ when our end-users interact with it. + +As such, we have some considerations to make when trying to deliver functionality are interactivity so that you can produce visuals that look and feel at home in Power BI, and your end-users get a consistent experience with your visual vs. others. + +The below is going to attempt to summarize some of the considerations we need to think about and this is a challenge to do concisely. For a deeper understanding, you're welcome to dive into the [developer documentation for visuals](https://docs.microsoft.com/en-us/power-bi/developer/visuals?WT.mc_id=DP-MVP-5003712). + +## Reconciliation of Data and/or Row Context + +### Getting Data from the Model + +- Visuals in Power BI can't read from the model of their own volition - they are effectively ring-fenced away from the main interface for a lot of (sensible) reasons. + +- When you add columns and measures to the data roles, this is part of Power BI's interface, rather than the visual's. + +- Power BI looks at all of these, plus the current filter context and runs a DAX query on the visual's behalf. + +To illustrate, we can use the Financial sample dataset that comes with Power BI Desktop to add the `Country` column and specify a sum of `Sales` to Deneb's _Values_ data role: + +![simple-column-and-measure-roles.png](./img/simple-column-and-measure-roles.png "Adding a column and an implicit measure to the data roles.") + +After doing this, Power BI will generate the following query against the data model (which can be verified using the [Performance Analyzer](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-performance-analyzer?WT.mc_id=DP-MVP-5003712)): + +```dax +// DAX Query +DEFINE + VAR __DS0Core = + SUMMARIZECOLUMNS ( + 'financials'[Country], + "Sumv_Sales", CALCULATE ( SUM ( 'financials'[ Sales] ) ) + ) + VAR __DS0PrimaryWindowed = + TOPN ( 10001, __DS0Core, 'financials'[Country], 1 ) +EVALUATE +__DS0PrimaryWindowed +ORDER BY 'financials'[Country] +``` + +This would produce the following dataset (visualized using a table): + +![simple-column-and-measure-result.png](./img/simple-column-and-measure-result.png "Results of a simple DAX query (using a table visual).") + +...and this dataset is supplied by Power BI into the visual. At this point, Deneb's logic will process the dataset and things continue as normal. + +:::tip +Refer to the [Dataset](/dataset#grain--row-context) page if you want to see how this data would get represented internally. +::: + +### Signaling Back to Power BI + +Now using the above as an example, we can talk about the following interactivity scenarios: + +- Displaying a report page tooltip or leveraging modern tooltip features +- Drilling-through from the context menu +- Cross-filtering other visuals +- Having other visuals cross-highlight ours + +All of these situations require the visual to tell Power BI what data it needs to work with... but here's the thing: just like how visuals can't just read whatever they like from the data model, they _definitely_ can't send anything back. + +For these situations, Power BI provides APIs for a visual to request that Power BI try to do these things on its behalf. For Power BI to fulfil this, it needs to know which row(s) from the orginal dataset it has to resolve. + +- If you have just taken the dataset as-is and created a mark using Vega or Vega-Lite, then a mark's datum still has the correct row context and identifying information that Power BI needs. + +- However, if you apply an operation in your specification that mutates the data from its original dataset - for example a transform ([Vega](https://vega.github.io/vega/docs/transforms/) | [Vega-Lite](https://vega.github.io/vega-lite/docs/transform.html)) - then we lose the ability to leverage this functionality in the resulting outputs. + +Any functionality we can deliver needs to bear these constraints in mind. + +#### Additional Datum Fields + +Provided that there are no such mutations, a Vega or Vega-Lite datum will contain the following additional fields for reconcilitation purposes. These field values represent the row of your dataset as a whole: + +- `__identity__` - this is the raw identity and true row context. + + - For those familiar with Power BI visuals development, it is a [`SelectionId`](https://docs.microsoft.com/en-us/power-bi/developer/visuals/selection-api), which can be passed to Power BI's Selection Manager for [delegation](#signaling-back-to-power-bi). + - This is a complex JavaScript object and therefore not something we can use in Vega directly. Complex objects are not comparable in the same way, say, text values are, so this should not be used for anything in your spec. + +- `__key__` - this is a representation of the `__identity__` object that can be used inside a spec, as it has been suitably processed. +- `__row__` - this is the (zero-based) index of the visual dataset's corresponding entry. +- `__selected__` - whether this particular row context is selected for [cross-filtering](interactivity-selection). + +These may become visible to you when [inspecting a datum using tooltips](interactivity-tooltips#debugging-with-tooltips) or similar, but they aren't currently supported for use outside of anything Deneb does for you. + +#### Additional Cross-Highlighting Fields for Measures + +The following additional entries will get created for all measures in your dataset in the event of having [cross-highlighting](interactivity-highlight) enabled on your visual: + +- `[measure name]__highlight` - this is the highlight value for the measure, as opposed to its original value, which is stored in the regular measure field. This provides a way of being able to encode original vs. highlight. + +- `[measure_name]__highlightStatus` - this provides additional state about this specific measure for this particular row context has a higlight applied or not (like the `__selected__` field, but more-specific). + +- `[measure_name]__highlightComparator` - this provides a pre-calculated way of determining if a highlight value is equal to its original value or not. + +These are covered in more detail on the [Cross-Highlighting](interactivity-highlight#special-__highlight__-fields) page. + +### What About..? + +There's a couple of interactivity scenarios we've missed out from above: + +- Default tooltips are different to report page or modern tooltips. + - In these cases Deneb can pass a list of values to display and ask Power BI to display them inside a standard tooltip. + - This is also the fall-back behavior if the row context cannot be resolved by Power BI, or a suitable tooltip page cannot be found. + - Tooltip functionality within Deneb is covered in much more detail on the [Tooltips](interactivity-tooltips) page. +- Slicer filtering works differently to cross-filtering, but as Deneb is not a slicer, we're skipping that one. + +## Visual Effects and Behavior + +Whilst this section is not as large as the above one, it is still very important to consider. + +In defining a specification, you have control over how Vega or Vega-Lite renders the output for interaction events. You may choose to employ dimming or opacity-based effects for non-selected marks, or you may choose to alter their color, or try something completely unique and original. You can read more about how to start working with these approaches on the [Cross-Filtering](interactivity-selection) and [Cross-Highlighting](interactivity-highlight) pages. diff --git a/versioned_docs/version-1.6/interactivity/selection.md b/versioned_docs/version-1.6/interactivity/selection.md new file mode 100644 index 00000000..dd202116 --- /dev/null +++ b/versioned_docs/version-1.6/interactivity/selection.md @@ -0,0 +1,256 @@ +--- +id: selection +slug: /interactivity-selection +sidebar_label: Cross-Filtering (Selection) +--- + +# Cross-Filtering (Selection) + +It is possible to enable cross-filtering of other visuals when a mark containing a resolvable datum is clicked (or Ctrl-Clicked for multi-select). + +However, cross-filtering is a bit of a special case vs. [tooltips](interactivity-tooltips) and the [context menu](interactivity-context-menu). As such, this is **disabled** by default, so as not to create potential UX issues prior to ensuring your visual effects are applied based on selection state. We'll explain on this page what you need to think about if you want to enable this for your visuals, and what to think about from an implementation perspective when creating your specification. + +## Cross-Filtering Strategy + +Both [Vega](https://vega.github.io/vega/docs/event-streams/) (with Signals and Events) and [Vega-Lite](https://vega.github.io/vega-lite/docs/parameter.html) (with Parameters) both have their own ways of managing interactivity internally when it comes to clicking on marks. However we also have to think about [how Power BI manages selection state between visuals](https://docs.microsoft.com/en-us/power-bi/developer/visuals/selection-api?WT.mc_id=DP-MVP-5003712) and apply this in a generic manner, so Deneb again bridges this particular gap as much as possible. Therefore, cross-filtering works as follows: + +- You can configure whether Deneb should attempt to [resolve data points](#data-point-resolution) when clicking on marks, through the **Cross-Filtering (Selection) of Data Points** property in the _Vega > Power BI Interactivity_ section of the [Settings pane in the Visual editor](visual-editor#settings-tab). + +- This setting is **disabled** by default. + +- For each row in the visual `"dataset"`, Deneb will generate a [special field for each row](#the-__selected__-field) called `"__selected__"`, and will update this based on click events, or eligible external events to your visual, such as restoring a bookmark with an active selection state. + +- If multiple data points are selected (i.e. by holding the Ctrl key), Deneb will add these to the current list of selected data points and update the `__selected__` value accordingly. + +- Clicking anything other than a mark within the visual canvas (or a mark that cannot be resolved to one or more data points) will clear the current selection from the visual, and signal to Power BI to do the same for other visuals on the page. + +- It is up to you as a creator to use this field to [manage the visual effects within your specification](interactivity-overview#visual-effects-and-behavior) for selected vs. unselected marks. A simple illustration of this is covered [in the worked example](simple-example#cross-filtering) and some further simple examples are [covered further down the page](#managing-selection-state-visually-through-encodings). + +## Data Point Resolution + +With the **Cross-Filtering (Selection) of Data Points** property enabled, Deneb will monitor marks for click events. If the mark represents an un-transformed row's datum from your `"dataset"` (or has enough information for Deneb to resolve it), it will be added to the list of currently selected data points and delegated to Power BI for handling other visuals in a page, e.g.: + +![selection-simple-single-point.png](./img/selection-simple-single-point.png "Enabling cross-filtering and clicking a resolvable data point will trigger selection in other visuals on the page.") + +:::caution You Must Manage Visual Effects and Encodings +Note that the above is based on the visual produced [in the worked example](simple-example#adding-cross-filtering). As such this has an encoding applied to add an effect to marks that are in the current list of selected data points and is to help illustrate the concept. You will need to [manage such encodings yourself](#managing-selection-state-visually-through-encodings). The card to the right of the visual is merely for illustrative purposes: it helps us to re-state the selected values via another measure and confirm selections are propagated. +::: + +Holding the Ctrl key and clicking additional marks that contain resolvable data points will add these to the current list and affect other visuals, e.g.: + +![selection-simple-multiple-point.png](./img/selection-simple-multiple-point.png "Ctrl-clicking additional resolvable data points will add these to the list of selected data points and update other visuals accordingly.") + +### Primitive Aggregate Resolution + +For marks or layers that contain simple aggregates, Deneb can attempt to resolve and collect the individual data points, based on the unique values of grouped fields. This can be useful but there are a couple of considerations here: + +- Any columns and measures need to be aliased in this new data stream as the corresponding columns and measures they are derived from. +- If you are applying filtering or additional transforms that remove the compent rows, this is not taken into account. +- As the data is a new stream, the granularity (and therefore the row context) is different to the base `"dataset"`. This means that there is no [corresponding `__selected__` field](#the-__selected__-field) to help manage selection state, but it is possible to be creative here and give the impression of selection at a higher level; there is an example of this below. + +## Data Point Limit + +A high number of active selections can give Power BI a lot of work to do in terms of managing state between all the visuals on a page and can potentially cause performance issues. Given the flexible nature of Vega/Vega-Lite and the types of visuals you can produce, there is a limit on the number of data points that can be supplied to Power BI. This can start to add up, particularly if you use a low level of granularity but are attempting to select a mark that [aggregates many data points](#primitive-aggregate-resolution). + +A **Data Point Limit** property is exposed in the **Settings** pane when cross-filtering is enabled, e.g.: + +![selection-data-limit-property.png](./img/selection-data-limit-property.png "The Data Point Limit property allows you to specify a maximum number of data points that Power BI should delegate for cross-filtering purposes within the current report page from Deneb.") + +As you can see from the above screenshot, this defaults at **50**, but can be set from anywhere between **1** and **250**. + +When interacting with your visual, if you accumulate enough data points in the current selection list, you will see this message in the visual header: + +![selection-data-limit-exceeded.png](./img/selection-data-limit-exceeded.png "If a selection exceeds the maximum limit, Deneb will prompt with a warning and prohibit further selection (but keep the current selection active).") + +In this situation, Deneb will keep the current selection active, but will not add any more rows to it. + +This warning can then be dismissed by either: + +- Clicking the **Dismiss** option (continuing to preserve the current selection) +- Clicking on another mark (initializing a new selection, if eligible) +- Clicking elsewhere in the visual, or on the **Clear selection** option (clearing the current selection) + +## The `__selected__` Field + +Deneb will maintain the value of this field for each row in your dataset as follows: + +- **`on`**: the visual has an active selection state and the row is **included** in the list of selected data points. +- **`off`**: the visual has an active selection state and the row is **excluded** from the list of selected data points. +- **`neutral`**: the visual has no current selection state and the data point should be displayed normally. + +:::tip Why 3 States? +The reason we have three states rather than a simple **`on`**/**`off`**, or binary state, is to allow us the (optional) opportunity to style elements that are explicitly highlighted differently to those that are displayed regulary (**`neutral`**) and open up further possibilities for our readers. +::: + +Some further examples of leveraging this state management are [detailed further below](#simple-examples). + +## Managing Selection State Visually through Encodings + +As mentioned higher up, if you want Cross-Filtering to work effectively for your readers, you will need to use the state of the `__selected__` field for each row and encode marks accordingly, so that your visuals communicate selected vs un-selected marks effectively. We'd recommend a similar approach to most other Power BI visuals in at least setting the opacity of effected marks accordingly, but the flexibility of the Vega languages gives you the ability to explore other possibilities. + +The [Simple Worked Examples](#simple-examples) section below shows how you may be able to get started with exploring this further. While these focus on Vega-Lite, both versions of the _Simple Bar Chart_ template available from the _New Specification_ dialog contain simple bindings for Cross-Filtering to help you get started. + +## Limitations and Considerations + +:::info This Sounds Hard... +Well, it's not always straightforward! It is early days for this type of "visual thinking" within Power BI, and it is likely that the community will be able to uncover better design patterns than the ones outlined on this page. They will certainly help you get on your way. + +If you have found an alternative approach, or have a great idea on how to help us improve this, then [please let us know](https://github.com/deneb-viz/deneb/issues)! We would love to continue to evolve this functionality and make it more accessible if we can do so. +::: + +- Data resolution integration with Power BI is wholly dependent on the correct row context. [Refer above](#data-point-resolution), or to the [Overview](interactivity-overview) page for more information about how to to try and ensure that this is preserved. + +- It might sometimes be possible to simulate a selection effect when using aggregates, but this will require some lateral thought. [Example 3 below](#example-3-approach-for-styling-aggregate-marks) shows one potential approach to how this could be solved. + +## Simple Worked Examples + +The following examples are for Vega-Lite but similar principles can be applied for Vega. + +This report shows the three examples below how they would be rendered in Power BI, using a model based on the sample finanical data available in Power BI Desktop. In each case, the full tooltip data is exposed so that you can observe the state of the `__selected__` field. We've also added some additional marks to the examples to show this value explicitly as interaction events occur. We'll provide basic example JSON for each underneath. + + + +    _[Download this workbook](/pbix/Deneb-Simple-Cross-Filtering-Examples.pbix)_ + +#### Example 1: Simple Encoding of Opacity with Conditions + +As per the worked example and the in-built templates for the bar chart, we can encode our `opacity` based on the value of `__selected__` being set to `"off"`, e.g.: + +```json highlight={16-25} showLineNumbers +{ + "data": { "name": "dataset" }, + "mark": { + "type": "bar", + "tooltip": true + }, + "encoding": { + "y": { + "field": "Country (Short)", + "type": "nominal" + }, + "x": { + "field": "$ Sales", + "type": "quantitative" + }, + "opacity": { + "condition": { + "test": { + "field": "__selected__", + "equal": "off" + }, + "value": 0.3 + }, + "value": 1 + } + } +} +``` + +#### Example 2: Styling Explicitly Selected Marks vs. Standard (neutral) + +We can extend the above example to explicitly style selected marks when `__selected__` is set to `on` rather than just having a binary state if we so wish. Here we have applied a [pattern fill](pattern-fills) when `__selected__` for a row is `neutral`, making it more emphasized, e.g.: + +```json highlight={25-35} showLineNumbers +{ + "data": { "name": "dataset" }, + "mark": { + "type": "bar", + "tooltip": true + }, + "encoding": { + "y": { + "field": "City", + "type": "nominal" + }, + "x": { + "field": "Mean Temperature", + "type": "quantitative" + }, + "opacity": { + "condition": { + "test": { + "field": "__selected__", + "equal": "off" + }, + "value": 0.3 + } + }, + "fill": { + "condition": { + "test": { + "field": "__selected__", + "equal": "on" + }, + "value": { + "expr": "pbiPatternSVG('diagonal-stripe-6', '#605E5C', '#ffffff')" + } + } + } + } +} +``` + +#### Example 3: Approach for Styling Aggregate Marks + +This scenario is much more complicated, as many transforms tend to create separate data streams; this will often cause us to the lose the row context information. This example uses aggregates internally to group rows. The top 3 have the same grain but the row identifies are not preserved in the output data stream. The _'All Others'_ group contains three underlying data points but these are aggregated down to a single row and our lineage is not available. + +As mentioned above, Deneb will attempt a simple reconciliation against the original `"dataset"`, much like it does for tooltips, but this is currently very basic. However we can use approaches, such as [layers](https://vega.github.io/vega-lite/docs/layer.html) to give the impression of selection effects. This example is detailed more in the embedded report page above, but the high-level strategy is as follows: + +1. At the top level, [`calculate` a column](https://vega.github.io/vega-lite/docs/calculate.html) that conditionally sums our measure value if a row's `__selected__` value is not `off`. Otherwise, treat the value as `0`. +2. Add a layer that calculates two additional marks: + - A `bar` with reduced opacity that is the total sum of the primary measure. + - A fully opaque `bar` based on the `sum` of the calculated value in step 1. As this is drawn after the dimmed bar above, it will be zero-width if the value is `0`; otherwise it will have the same width as our primary measure and sit over the top of the underlying mark. + +```json showLineNumbers +{ + "data": { "name": "dataset" }, + "transform": [ + { + "calculate": "datum.__selected__ === 'off' ? 0 : datum['$ Sales']", + "as": "Sales_Selected" + } + ], + "layer": [ + { + "description": "Dimmed Bar; width = sum of Sales", + "mark": { + "type": "bar", + "opacity": 0.3, + "tooltip": true + }, + "encoding": { + "x": { + "aggregate": "sum", + "field": "$ Sales", + "tooltip": true + } + } + }, + { + "description": "Fully Opaque Bar; width = Selected_Sales", + "mark": { "type": "bar" }, + "encoding": { + "x": { + "aggregate": "sum", + "field": "Sales_Selected" + } + } + } + ], + "encoding": { + "y": { + "field": "Product Group", + "type": "nominal", + "sort": { + "field": "Product Group Sort" + } + } + } +} +``` diff --git a/versioned_docs/version-1.6/interactivity/tooltips.md b/versioned_docs/version-1.6/interactivity/tooltips.md new file mode 100644 index 00000000..84e16f23 --- /dev/null +++ b/versioned_docs/version-1.6/interactivity/tooltips.md @@ -0,0 +1,106 @@ +--- +id: tooltips +slug: /interactivity-tooltips +sidebar_label: Tooltips +--- + +# Tooltips + +We saw [in the worked example](simple-example#tooltips), that it's fairly straightforward to add tooltips to a specification, but we'll unpack on this page in a bit more detail. + +If you haven't read it already, it's worth reviewing the [preceding page](interactivity-overview) to understand some of the considerations that need to be made with integrating back to Power BI. It will certainly help with understanding the logistics around report page tooltips in particular. + +## Tooltip Strategy + +[Vega](https://github.com/vega/vega-tooltip/blob/master/docs/creating_your_tooltip.md#step-4-define-your-tooltip-in-vega-or-vega-lite) and [Vega-Lite](https://vega.github.io/vega-lite/docs/tooltip.html) both provide the ability to customize how their tooltip events can be interpreted. Deneb contains a tooltip handler writen specifically for Power BI, which will display under the following conditions: + +1. **Tooltip Handler** is enabled in the _Vega > Power BI Interactivity_ section of the [Settings pane in the Visual editor](visual-editor#settings-tab). This is enabled by default. + +2. An appropriate `tooltip` property is assigned to a mark. Refer [below](#vega-lite-syntax) for the recommended syntax for each provider. + +3. A tooltip-enabled mark is hovered over. + +## Data Point Resolution + +Provided that your mark's datum is not transformed or mutated away from the `"dataset"` and represents the _"pure"_ row context passed-in, Deneb can resolve this back to Power BI for delegation. + +If a report page exists with at least one of the columns in the current datum, then Power BI will display it for the current row context, e.g.: + +![tooltip-report-page-example.png](./img/tooltip-report-page-example.png "Deneb resolving a mark's datum back to a report page tooltip.") + +If there is no suitable report page for the current datum or you have specified a default tooltip in the _Tooltip_ menu in Power BI's _Properties_ pane, then a default tooltip will be displayed, e.g.: + +![tooltip-default-example.png](./img/tooltip-default-example.png "Deneb resolving a mark's datum back to a default tooltip.") + +:::note +A default tooltip will display all values for the current mark's datum, including any other columns or measures bound to its particular row context. +::: + +If the title of a tooltip field matches the name of a column or measure from the **Values** data role, Deneb will attempt to see if it has a format string set in the data model and apply this automatically. If this cannot be resolved, then you can consider [applying a format manually](formatting). + +If you have enabled [modern tooltip support](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-visual-tooltips) in your report, and a data point has a corresponding drill through page, this is resolved in the tooltip, e.g.: + +![tooltip-modern.png](./img/tooltip-modern.png "Deneb resolving a mark's datum back to a default tooltip. In this case, modern tooltip support is enabled, and a drill through page is available.") + +## Default Tooltip Styling + +This is done in the usual way, i.e. in the _Tooltip_ menu in Power BI's properties pane. + +## Vega-Lite Syntax + +The [simplest approach for this](https://vega.github.io/vega-lite/docs/tooltip.html#encoding) is recommended, e.g.: + +```json +{ + ... + "mark": { + ... + "tooltip": true, + ... + }, + ... +} +``` + +## Vega Syntax + +With Vega, you need to specify the `tooltip` signal in your mark's `encode` property, e.g.: + +```json +{ + ... + "encode": { + "enter": { + ... + "tooltip": { + "signal": "datum" + }, + ... + } + }, + ... +} +``` + +## 'Debugging' with Tooltips + +If you're using an approach to display the underlying data point ([e.g. Vega-Lite](https://vega.github.io/vega-lite/docs/tooltip.html#data)) rather than the resolved tooltip info that Vega provides by setting to `true`, we're able to see a bit further under the hood, .e.g: + +![tooltip-datum-full.png](./img/tooltip-datum-full.png "The raw underlying tooltip datum exposes additional properties.") + +This can be useful to understand what additional fields or calculations may be applied to a datum for usage in expressions. It can also help to understand if a mark still [has row context](interactivity-overview/#reconciliation-of-data-andor-row-context) and can be reconciled back to Power BI for interactivity purposes. If a tooltip's `datum` contains the following properties, then this is a slam-dunk: + +- `__identity__` +- `__key__` +- `identityIndex` +- `__selected__` + +Please refer to the [interactivity documentation](interactivity-overview/#additional-datum-fields) for a further explanation of what these mean. + +## Limitations and Considerations + +- Tooltip integration with Power BI is wholly dependent on the correct row context. [Refer above](#data-point-resolution), or to the [Overview](interactivity-overview) page for more information about ensuring this is preserved. + +- Adding a tooltip does not automatically add visual feedback or effects. If you want to track the position of the resolved data point more visually (e.g. like for a line chart), you will need to add a suitable set of marks to do this. Both [Vega](https://vega.github.io/vega/examples/) and [Vega-Lite](https://vega.github.io/vega-lite/examples/) have examples you can refer to. + +- Development so far has been focused on Power BI integration. It's possible that if you deviate from the above patterns, then tooltips may not display correctly. If you find any such use cases, please [create an issue](https://github.com/deneb-viz/deneb/issues) with the appropriate reproduction steps (e.g. example specification and/or data) and we'll see what we can do about it. diff --git a/versioned_docs/version-1.6/intro.md b/versioned_docs/version-1.6/intro.md new file mode 100644 index 00000000..73154c23 --- /dev/null +++ b/versioned_docs/version-1.6/intro.md @@ -0,0 +1,26 @@ +--- +id: introduction +slug: / +sidebar_position: 0 +sidebar_label: Introduction +--- + +# Declarative Visualization in Power BI + +Deneb is a [certified custom visual](https://docs.microsoft.com/en-us/power-bi/developer/visuals/power-bi-custom-visuals-certified?WT.mc_id=DP-MVP-5003712) for [Microsoft Power BI](https://www.powerbi.com), which allows developers to use the declarative [JSON](https://www.json.org/json-en.html) syntax of the [Vega](http://vega.github.io/vega) or [Vega-Lite](http://vega.github.io/vega-lite) languages to create their own data visualizations. + +This is similar to the approaches used for creating [R](https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-r-visuals?WT.mc_id=DP-MVP-5003712) and [Python](https://docs.microsoft.com/en-us/power-bi/connect-data/desktop-python-visuals?WT.mc_id=DP-MVP-5003712) visuals in Power BI, with the following additional benefits: + +- Libraries are packaged with the visual, so no additional dependencies on local libraries or gateways for your end-users when publishing reports. +- Specifications are rendered inside the Power BI client, rather than being delegated to another location, typically resulting in faster render times for end-users. +- Built for the web, meaning that it's possible to integrate with Power BI's interactivity features, with some additional setup. + +#### Starting Out? + +- Deneb is [available in AppSource](https://deneb.link/appsource?source=website&mktcmpid=homepage), and this is the most straightforward way of getting started and staying up-to-date with the latest versions. + + + +- You can use the menu to start learning more about Deneb and how to build visuals with the Vega languages in Power BI. + +- For community resources and examples, follow the **[Community](/community/resources)** link at the top of the page. diff --git a/versioned_sidebars/version-1.6-sidebars.json b/versioned_sidebars/version-1.6-sidebars.json new file mode 100644 index 00000000..7feb5039 --- /dev/null +++ b/versioned_sidebars/version-1.6-sidebars.json @@ -0,0 +1,82 @@ +{ + "mainSidebar": [ + "introduction", + { + "type": "category", + "label": "Getting Started", + "collapsible": true, + "collapsed": false, + "link": { + "type": "doc", + "id": "getting-started/introduction" + }, + "items": [ + "getting-started/example", + "getting-started/editor", + "getting-started/dataset", + "getting-started/keyboard" + ] + }, + { + "type": "category", + "label": "Deeper Concepts", + "collapsible": true, + "collapsed": false, + "items": [ + "deeper-concepts/formatting", + "deeper-concepts/scrolling-overflow", + "deeper-concepts/schemes", + "deeper-concepts/pattern-fills", + "deeper-concepts/templates", + "deeper-concepts/performance-considerations" + ] + }, + { + "type": "category", + "label": "Interactivity Features", + "collapsible": true, + "collapsed": false, + "link": { + "type": "doc", + "id": "interactivity/overview" + }, + "items": [ + "interactivity/tooltips", + "interactivity/context-menu", + "interactivity/selection", + "interactivity/highlight" + ] + }, + { + "type": "category", + "label": "Change Log", + "collapsible": true, + "link": { + "type": "doc", + "id": "changelog" + }, + "items": [ + "archive/changelog-002", + "archive/changelog-001" + ] + }, + { + "type": "category", + "label": "Further Resources", + "collapsible": true, + "collapsed": false, + "items": [ + { + "type": "link", + "label": "Vega Documentation", + "href": "https://vega.github.io/vega/docs/" + }, + { + "type": "link", + "label": "Vega-Lite Documentation", + "href": "http://vega.github.io/vega-lite/docs/" + } + ] + } + ] +} diff --git a/versions.json b/versions.json index ad8a1028..009d391c 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,5 @@ [ + "1.6", "1.5", "1.4", "1.3",