DevExpress Dashboard — Early Access Preview (v20.2)

Our next major update (v20.2) is a couple of months away. As such, we wanted to preview the features we expect to ship this Autumn and invite all active DevExpress Universal subscribers to download our Early Access Preview (EAP). Your feedback will help us refine the features described below and allow us to ship the best possible royalty-free Dashboard platform in the marketplace.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.

This EAP may not include all features/products we expect to ship in our v20.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

Active Universal Subscribers: Download the EAP Today

Angular & React Web Dashboard Components

Modern web app developers can now incorporate our Angular Web Dashboard or our React Web Dashboard component within their project.

DevExpress Angular and React components are delivered via npm packages and allow you to natively integrate our Web Dashboard Control as needed. You can bind your properties to the components using one and two-way bindings and handle events using native methodologies.

Angular

<dx-dashboard-control
  endpoint="https://demos.devexpress.com/services/dashboard/api"
  [workingMode]="workingMode"
  (onBeforeRender)="beforeRender($event)">
</dx-dashboard-control>

React

import DashboardControl from 'devexpress-dashboard-react';

function App() {
  return (
    <div>
      <DashboardControl  
        endpoint="https://demos.devexpress.com/services/dashboard/api"
        workingMode = { this.state.workingMode }
        onBeforeRender = { this.onBeforeRender }>
      </DashboardControl>
  </div>
  );
}

Our documentation has been updated accordingly:

We've created a simple Angular application with the DevExpress Web Dashboard Component. It is available on GitHub. To learn more, feel free to review its source code in our GitHub repo.

While these new Angular & React Components can be incorporated into new projects with ease, you can also integrate the components within existing projects.

Our Early Access Preview v20.2 does not include a Vue Dashboard Component. We have not determined whether Vue support will make it into our v20.2 release cycle. If you use Vue in your project and need a Web Dashboard Component for Vue – please comment below!

Chart Conditional Formatting

You can now specify rules to highlight Points and Series Lines in Dashboard Chart Item.

Conditional Formatting can be applied to any Line series, any Bar series (including Range Bars), Area series and Bubble chart type.

DevExpress Dashboard Chart Item Conditional Formatting

When a user specifies a Format Rule to highlight important points via Conditional Formatting, we gray out remaining points by default. We do this because enabling Conditional Formatting with a fully colored chart can often produce visually noise/overwhelming results. If this default behavior does not meet end-user requirements, you can explicitly enable coloring for chart Values.

DevExpress Web Dashboard Chart Item Conditional Formatting Coloring by Hue

You can specify a predefined conditions based on Values/Arguments/Series or Hidden Measure values, or set up a custom expression as needed

You can also select a predefined highlight colors or pick a custom color for every rule. Your rule can include Gradient coloring - this will allow you to display the difference in values as an auto-calculated difference using sequential or diverging coloring.

Finally, you can add a color for every rule in your Chart legend with a custom description.

We've created a help topic that describes Chart Conditional Formatting in greater detail.

Please note that our Early Access Preview only allows you to test Conditional Formatting for our WinForms Designer/Viewer and WPF Viewer.

Chart Conditional Formatting within the Web Dashboard is still in active development. We'll have more news to share in this regard as we get closer to official release.

Ongoing Desktop Async Enhancements

We understand the importance of Async functionality for our WinForms and WPF customers. In our v20.2 release cycle, we've addressed a series of known issues, improved performance and stabilized our code.

As you may already know, we've already released Async related features in our most recent build. (v20.1.6).

New Federation DataSource options

We added two new options for your Join Federation Queries.

You can now use "*" (all columns) operator when you initiate Join operations in you Federation Data Source. You can use this feature within our WinForms End-User Wizard and in our Federation Data Source API. You can also create unbound columns in your Join Federation Queries using custom Expressions.

DevExpress Dashboard Data Federation Expressions Select All

Data Source – Transform Nested Arrays

Federation Data Source now offers a Transformation option. You can use it to flatten (or expand, or denormalize) your data. Said differently, if one of your columns contains a data array, you can now transform it to a set of rows.

This option is especially useful for JSON, EF and XPO Data Sources.

Assume you have a JSON with nested arrays as follows:

[{
        "manager": "Ann",
        "sales": [{
            "state": "Florida",
            "amount": 132000
        }, {
            "state": "Alabama",
            "amount": 414000
        }]
    },
    {
        "manager": "Bob",
        "sales": [{
            "state": "California",
            "amount": 320000
        }]
    }
]

Though you can use this JSON as a data source for your Dashboard in v20.1.x, the only available field is manager.You cannot use sales or any nested properties.

With our most recent update, you can pass this JSON data source to the Federation Data Source and perform a Transformation.

DevExpress Dashboard Data Federation Transformation

Behind the scene, the original JSON is transformed into the following:

[
    { "manager": "Ann", "sale_state": "Florida", "sale_amount": 132000},
    { "manager": "Ann", "sale_state": "Alabama", "sale_amount": 414000},
    { "manager": "Bob", "sale_state": "California", "sale_amount": 320000}
]

As you would expect, this table can be used to build you dashboards as needed.

Early Access Preview - This feature is currently available in our WinForms End-User Federation Wizard and via code using the new TransformationNode.

Viewport Filter for Dashboard Items

You now include a new filter option within your Dashboard – Viewport Filter.

The Viewport Filter is applied to a dashboard item after calculations are executed and hides visual data without filtering out the underlying data used in a calculation.

DevExpress Dashboard Viewport Filter

A typical use cases for the Viewport Filter is as follows: Assume you want to display monthly sales differences within a Chart. In this instance, the value for the first Month is always null.

You can now use Viewport Filter to hide the first month and draw you chart from the second month onward.

HTML/JS Dashboard – changing options at runtime

You can now change every property of the Web Dashboard Control using option(args) method.

This change was introduced as part of our Angular & React integration initiative.

In the Works

Configuring Connection Pool in WinForms/WPF Dashboard

We expect to officially support parallel query execution mode for SQL Data Sources in Server Mode. You will be able to use a new API to configure pool size.

Other Changes

Neutral Filter Mode is enabled by default

We enabled Neutral Filter Mode by default for all our Dashboard Controls (Web, WinForms, WPF).

Neutral Filter Mode was announced in v18.1.5 and released in v18.2. Since its release, we've recommended its use (versus Standard Mode). As you may know, Neutral Filter Mode is also used in our demos and new Project Templates.

We've enabled Neutral Filter Mode by default in v20.2.1 because it addresses a few known UX and performance bottlenecks.

If you prefer Standard Filter Mode, please review this Breaking Change document.

Your Feedback Matters

As always, we welcome your feedback. Please post your comments below or create a new support ticket if you've beta tested our Early Access Preview.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
13 comment(s)
Jonatas Hudler
Jonatas Hudler
Good work on the Conditional Formatting for Charting! This will now enable some very interesting, eye-catching visuals that goes beyond traditional charting in BI suites. Keep on the good work!
24 August 2020
Gabriel
Gabriel
Hi im vue user and i like to use in my projects .
24 August 2020
Baldur Fürchau
Baldur Fürchau

Neutral Filter Mode is enabled by default

Good to know. I have tested it for performance reason, but i must reset it to the default. The reason is user experiance.
This means, if nothing is selected, all values are shown. Normal understanding is: if nothing is selected, nothing is shown.
I must set this property back to false, so the user can see that data is selected.

For performance it would be better to check, if all values are selected to optimize the filter.
On the other hand, if is use a widget additional as crossfilter, all items must be selected because the cross datasource must be filtered to these values. The cross datasource may have more values than visible in the widget.
If i select in the new dashbord "all", all items are automatically deselected. Which user should understand this?

So when the new version comes, i must set the property to false, because true is than the default.

25 August 2020
Aleksandr S.
Aleksandr S.

Hello DevExpress team,

i have a small question regarding the new `Transform Nested Arrays` feature.

Does it support nested arrays or only one level?

For example if i add "details" array to the "sales" object:

[{
        "manager": "Ann",
        "sales": [{
            "state": "Florida",
            "amount": 132000,
            "details":[{
                  "date": "2020-08-20"
              }]
        }]
    }
]


Only the code API is relevant to us.

27 August 2020
Andrey (DevExpress)
Andrey (DevExpress)

@Jonatas Hudler and @Gabriel

Thank you!

 

@Baldur Fürchau
Thank you for sharing your thoughts.

Our UX tests shows that most users are comfortable with this approach.

This user experience fully matches he filtering experience used in most of modern Online Shops (Amazon.com, otto.de and many others). As such, it’s not an unfamiliar concept for most Internet users.

Of course I understand that there are software areas which traditionally handle user tasks differently.

But before you make a final decision, I encourage you to give it a try: perform real-life testing with an unbiased user and check if this behavior leads to confusion. My hope and expectation is they will use this filtering concept without much regard to implementation details.

 

@Aleksandr S.

It is possible to un-nest any level of nested arrays using a series of Transform operations.

Specifically, while a single TrasformationNode can un-nest a single level, you can pass the result to other TranformationNode / Federation Query and apply the Trasformation operation again (and repeat it as many times as your data structure requires).
28 August 2020
Paulo Monteiro melo
Marcio Matos
Data federation is very important. Allowing the end user to merge sql sources with an excel spreadsheet for example is fantastic. Unfortunately it is not available to the end user on the web platform. Only via code. This is for me one of the few disadvantages that still exist on the platform in relation to other BI solutions on the market. I look forward to this feature.
29 August 2020
David Cardos
David Cardos

Hi,

I'm using Vue.js  and i would like to use in the DevExpress Dashboard on my projects.


30 August 2020
Jonatas Hudler
Jonatas Hudler

@Andrey, I would just like to record our experience regarding @Baldur Fürchau comments:

We had a similar situation with the neutral filter mode since we enabled it. During the interactively use of a given Dashboard, we had minimal issues (by "minimal", I mean we got some comments from of the users such as "Hmm, this is now different - ok!").

But some level of misunderstaing arose when users started to fully export Dashboards and send the prints to their managers. Many of them rather see their data in an old-school way, and like their reports static in paper (or in a e-mail). So they see the filters aside with all items unchecked and ask what is actually being considered in the report. We tell them that actually the filter is not being considered, so everything is there. Then comes up the next natural question: "why so print an unused and misleading filter anyway?"

(sigh) Not easy to please all minds...

31 August 2020
Johnny Hajjar 1
Johnny Hajjar 1
Data federation is very important, not yet available on webdashboard unless through code! -- When do we expect this to be released?
31 August 2020
Benny Buchle
Benny Buchle
Data federation on the webdashboard and webreporting would be very helpful.
1 September 2020
Andrey (DevExpress)
Andrey (DevExpress)

@Jonatas Hudler

Thank you for sharing your valuable experience!

I agree that dramatic differences exist between an internet-based (online) experience vs a printed copy. We will take your feedback into account as we consider options going forward, but for now, we’re wondering if you’re open to the idea of removing "empty" filter elements from the Layout by handling the BeforeExportDocument event?

If you are interested, contact us via the DevExpress Support Center so we could discuss this workaroud in greater detail with you.

 

@Marcio Matos, @Johnny Hajjar 1 and @Benny Buchle

Glad to see the demand for a Data Federation Web Wizard. 

I hope this feature will make its way onto the Dashboard’s 2021 Roadmap.

4 September 2020
Brett Zook
Brett Zook
I'd also love to see Data Federation capability in the Web Dashboard UI.
2 October 2020
wilson mota 1
wilson mota 1
I agree with them. Data Federation for Web platform is very relevant!
10 October 2020

Please login or register to post comments.