Deneb Template - Toggle Button

Deneb Showcase
1

A “toggle button” experience can be implemented in a standard Power BI report using the built-in objects, but requires bookmarks. A Deneb visual can implement an enhanced toggle button experience without using bookmarks, and I enclose herein a Deneb template for an example of such a toggle button using dark mode and light mode display options.

deneb.toggle_button.0.2

This template illustrates a number of Deneb/Vega-Lite features, including:

  • a “layer of layers” approach: 2 overlapping option layer blocks (option 1, option 2), each with 3 overlapping marks (bar, circle, text)
  • a transform block to extend the dataset through calculation of the position and alignment of the circle and text marks depending on the currently-selected option
  • a filter block inside a transform block in each option to retain only the currently-selected option
  • a black stroke and magenta fill from the Power BI theme as made accessible by Deneb (actually, used the Pantone Color of the Year 2023 [Viva Magenta] as a basis for the Enterprise DNA Colour Theme Generator\Colours Fan application to generate the colour theme)
  • a conditional opacity block in the encoding block of each mark that uses the internal Deneb-only selected field that checks the click-state of the visual and “hide” the currently-selected state

This example uses a simple “Options” supporting table

deneb.toggle_button.options_table
deneb.toggle_button.options_table954×551 29.5 KB

This example uses only the simplest of DAX code:

Sales CY =
SUMX(
    Sales,
    Sales[Order Quantity] * Sales[Unit Price]
)

Sales PY =
CALCULATE(
    [Sales CY],
    DATEADD( Dates[Date], -1, YEAR )
)

The intent of this template is not to provide a finished visual, but rather to serve as a starting point for further custom visual development.

Also included is the sample PBIX used to develop this template that uses the Enterprise DNA practice dataset as a demo.

This template is provided as-is for information purposes only, and its use is solely at the discretion of the end user; no responsibility is assumed by the author.

Greg
deneb.toggle_button.0.2.json (8.3 KB)
Deneb - Toggle Button.pbix (1.7 MB)

4 Likes
2

marking as solved

1 Like
3

Hi @Greg, thanks for this exercice.
Something I don’t understand with the toggle button.

I understand “Toggle” measure is always equal to “Light”

Toggle Measure

Toggle =
VAR _Option = SELECTEDVALUE( Options[Option Name] )
VAR _Result = IF( ISBLANK( _Option ), “Light”, _Option )
RETURN
_Result

What i cannot understant with “Toggle Opposite” measure is :

  • Why the use of max function for a text column ?
  • How come it sends bak “Light” or “Dark” whereas we only have [Toggle] = “light” ?
Toggle Opposite Measure

CALCULATE( MAX( Options[Opposite Name] ), FILTER( Options, Options[Option Name] = [Toggle] ) )

Thanks in advance

4

The “Toggle” measure checks the current selection in the Options[Option Name] column. If no option is selected, it defaults to “Light”, ensuring that without a user selection, the default is “Light”.

This measure seeks to return the “opposite” of the “Toggle” measure’s current value from the Options[Opposite Name] column.

The MAX function, when applied to a text column, returns the maximum value based on alphanumeric ordering. Here, its primary purpose is to ensure a scalar value is returned from a potentially filtered table, addressing the scalar versus vector input nuances in Power BI.

For instance, when the “Toggle” measure indicates “Light”, the FILTER function isolates the row in the Options table where Options[Option Name] is “Light”. The MAX function then retrieves the corresponding “Dark” value from the Options[Opposite Name] column.

The “Toggle Opposite Measure” determines the counterpart of the “Toggle” measure. Hence, if “Toggle” reads “Light”, this measure will output “Dark”, and vice versa. The FILTER function discerns the appropriate row in the Options table based on the “Toggle” value, and then the MAX function extracts the opposite value from the Options[Opposite Name] column.

5

Thanks for explanations @HufferD.
What a code for a little toggle button… :sweat_smile: I understand :

  • The [toggle] measure always returns “light” but with the first row if toggle is not blank, with all the rows of the table otherwise
    image
    image886×140 11.5 KB

If [Toggle Opposite] Measure determines the counterpart depending on the selected Option :

  • If [Toggle]=“Light” (Option selected = first row) then MAX() is Dark
  • If [Toggle]=“Light” (No option selected = all 2 rows) then MAX() filtering [Option Name] with “light” should return Dark as well, which is not the case. I assume that the filter expression is not working at all, thus making the max() of the 2 rows “Light”

Thanks in advance

6

It’s all about what you can achieve by “wiring up” actions to the selector, like the page background measure below. When you switch the toggle from Light to Dark, the value returned by Page Background Colour is #380F19 and when you switch the toggle to Light it returns #FFFFFF. Then you can place that measure in an fx where you’d normally hardcode a color so that its is controlled by the toggle.

2023-08-28_18-47-55

7

Thanks @HufferD, I perfectly understand the colour process with [toggle opposite] measure.
I only focus on this DAX measure that triggers “light” or “dark”.
I tried to describe it above, particularly the filtering process [Option Name] with “light” that seems odd to me unless the [Option Name] filter expression is not working?
Can you enlight me with that ?
Thanks in advance

8

Is it possible to use this change of colors of labels, bars and axes with Deneb visuals?

9

Hi @FabianaSantos.

Posting new questions to sovled threads is discouraged. Please create a new thread for each new question.

@EnterpriseDNA, please break this question into its’ own thread entitled “Deneb - How to change label, bar, and axes colours”.

Nevertheless, yes, you have full control over all visual elements in Deneb/Vega-Lite visuals.

Greg