3MW (Creating value boxes with {shiny})

Guten Tag!

Many greetings from Ulm, Germany.

Welcome to the first 3MW edition of 2023. Also, big shout-out to the many new subscribers that signed-up over the winter break.

As you may recall, this newsletter is currently on a Shiny path. In the last issue, we talked about creating interactive visualizations. I've also announced a one-hour long micro-course. It shows you how to build a Twitter analytics dashboard with {bs4Dash} (by the way it's 43% off right now).

Today, we want to talk about interactive value boxes. I like them because they are eye-catching and let you convey key information (like metrics) very fast and clearly. For example, I've used value boxes to show Twitter metrics in my micro-course:

Value boxes with {bslib}

The newest version of {bslib} brings you many new UI elements. One of which is value boxes. The syntax to add them to a UI is incredibly simple.

Here, icons of the value boxes are handled via the {bsicons} package (which gives you bs_icon()). Just throw all of that code into your UI function and you're good to go. To use multiple boxes it's best if you wrap all of them into the layout_column_wrap() function.

Want to interactively update the value in the box as the user works with the app? Then you will have to wrap this box into a UIoutput() and use renderUI() in the server function. For example, in the following app I've linked a button to one of the boxes. Notice how the value of the box increases as I click the button.

The code for this app can be found here.  For more interactivity of the boxes, take a look at the {bslib} docs. There, you will find a value box that contains an interactive line chart which you can toggle to full screen.

Value boxes with {bs4Dash}

The value boxes from {bs4Dash} come as classical output/render pair. For example, the following code generates a similar click app from before.

Notice that we couldn't just throw the value box into the UI. We had to create an output in the UI and render the box in the server. Unlike the previous boxes, value boxes from {bs4Dash} cannot be used to show additional texts or enlarge anything. If you want to tinker with the app yourself, you can find the code on GitHub.

That's a wrap! As always, I'm happy to hear your feedback about this week's issue. Feel free to write me on Twitter or reply to this mail.

Enjoy the rest of your day!Albert

Did you like this post and want to support more content like this? Whenever you feel like it, you can support me with a coffee or a membership.

Need help visualizing your data? Or need to build a Shiny app? I'm open to freelance work. You can book a free 30-minute Zoom meeting with me and we can find out if I'm a good match for your project.