How to :: create a datawall

Warning

Disclaimer : This is a paid feature !

Overview

As we want to enable our clients to bring insights through data, we created a datawall to showcase dynamic reports on a tv screen, or on a wall, to bring the information to everybody in the company.

The datawall displays during a defined time (configurable) several pages with chosen charts.

The usage is quite different from the application. Example : you are having a break, and in the cafeteria there is a tv screen displaying the performance of the acquisition team.

With the Studio, you just have to select some stories from your application to create a clean datawall 🤩.

Don’t need to thing about the layout 📐, we take care of it for you.

datawall

When activated, the datawall will be available for all users from the bottom of the dashboard ⬇️.

Some advice

Follow the placeholders in front of you to create a splendid datawall in no time.

Below are some best practices, guidelines, cool tips to help you get the best of this crazy feature 💛 :

One rule! : Don’t forget to push to production your changes 🚨 ! You can preview the production version by removing the ``&stage=staging`` from the url in the preview mode.

Short is good : For a better user experience, we recommend not to exceed 6 charts by page/screen (3 rows, 3 charts by rows). Remember it’s a datawall, if your users need more, why not give access to the application?

Screens are not necessarily tactile : Keep in mind that stories with filters/requesters won’t be usable on the datawall. Imagine having someone standing next to each digital wall you have and pressing on the filters buttons every 15 seconds… 🤔. So make sure to switch to code mode to select a filter/requester value. See below for more info on how to do it 📝. Also, master/slave and double charts are not available in the datawall.

Put a name on it : Screens can me named, so use it to make your add even more context to your awesome datawall 😉.

Take a look at me : Before showing your datawall or pushing to production, always take a look at what you created 🤳. With the preview button, it’s easy as “abc” 🕺 to ensure your datawall is correct.

datawall creation

Convention over configuration

By default, the datawall is generated with the sender’s point of view. Meaning, the sender’s report and date selection will be used in the datawall.

The header is configured by default as follow,

  • if a date requester is configured in the application, it will appear on the right side of the header 📅
  • the application title will be shown in the header, unless a report is configured. If a report selector is setup, the report name will appear in the header
  • screen’s title will be shown in the header
  • by default, screen will appear 5 seconds before moving on to the next one, feel free to change the timer’s setting directly from the header
datawall header

Only the first two highlighted KPIs will be displayed in the story’s title. They will be displayed by default.

Code mode configuration

The datawall is reusing existing charts with the ability to override some options in order to better customized your display.

You can switch to code mode to update some of your chart’s configuration. Templating is accepted 🔥

Note

Use this carefully, the datawall is supposed to be a snapshot of the application. You should not be recreating charts here.

datawall

Add your overrides inside the following block to start updating your chart’s configuration.

overrides: {}
📌 Fix a filter value
filters

filters

You can fix filters in stories to show a specific value when the datawall is generated. Please note that for checkbox filters, all values are shown by default.

overrides:
  charts: [
    {
      filters:
        "upper-right":
          default : "value selected"
        "upper-middle":
          default : "value selected"
    }
  ]
filters:
  "bottom-right":
      default : "value selected"

Please refer to filters’ default advanced configuration if needed.

⚠️ first and last selections are not available for sliders filters.

📌 Fix a requester value
requesters

requesters

You can fix requesters in stories to show a specific value when the datawall is generated.

overrides:
  charts: [
    {
      requesters:
        "upper-right":
          default : "value selected"
        "upper-middle":
          default : "value selected"
    }
  ]
requesters:
  "bottom-right":
      default : "value selected"

It won’t be possible to fix different value to a requester with the same id. If stories are using the same requesters, with the same id, the selected requester value will be fixed for all of these stories.

📌 Fix the legend on a specific value

You can fix the legend to show a specific value when the datawall is generated. By default, the first value will be selected.

overrides:
  charts: [
    {
      defaultSelected: 'Label to select'
    }
  ]

This is available only for the following charts :

- barchart
- barlinechart
- bubblechart
- mapchart (new)
- radarchart
- stackedbarchart

Advanced header configuration

You can overwrite the default behavior of the datawall header.

You can do so from the Files interface, while editing the front_config file.

Add the following fields inside the dataWall block. It will overwrite the existing title or date.

dataWall:
  customTitle : "My new title"
  customDate : "My new date"