top of page
  • Writer's pictureLauri Hänninen

<DashboardView />: Advanced Embedded Analytics

The time for compromise is over

The process of developing an analytical application is full of compromises. In an ideal world, you would always have all the resources and all the time you need to develop and keep upgrading the application of your wildest dreams. Unfortunately, for you, your developers, and your users, the reality is often disappointing. You always face tough decisions when it comes to developing your embedded analytics solutions.


One of the most obvious tough development questions is about how you should integrate analytics with your main application. To solve this problem, there are usually two possible approaches:

  • Fast and easy embedding, but low performance and cumbersome interactivity.

  • Resource-consuming and custom-made integration, but great performance and seamless interactivity.

When resources are scarce, especially when it comes to time and money, we tend to choose the fastest way to embed our analytics — a static iFrame. But if your use case requires more advanced analytics, the only option is to invest more time or money, and more often both, to achieve the desired results.


Generally, the dev teams are not in a position to spend all the time and money they would like in order to create the best possible analytics solution, so they have to compromise between their dreams and reality. If only there was a way to enjoy the advantages of both of these approaches at the same time — fast and easy integration with great performance and seamless interactivity.


Luckily, at GoodData, we do not believe in compromises when it comes to building the analytics of your dreams.


DashboardView — faster & deeper integration with better control over your UX

The new <DashboardView /> component of GoodData.UI, a React-based JavaScript library, gives you the ability to combine the advantages of both the fast static iFrame embedding and the seamlessly interactive custom-made integration.


With this new approach, you can integrate GoodData’s intuitive drag-and-drop-built dashboards using React, and manipulate the content of the dashboard programmatically. It makes the dashboard a true component of your application, allowing you to customize the behavior of the dashboard and integrate it with the app more tightly.


In a nutshell, with the DashboardView component you can:

  • Embed your dashboards natively in React in view mode.

  • Integrate it with the rest of your application with provided mechanisms. For instance, it gives you the possibility to provide a custom filtering UI. Also, the users can create scheduled emails and set KPI alerts (unless you enable read-only mode).

  • Customize the way your dashboards are rendered — you can alter the layout and change the way particular widgets are rendered.

Basically, using the DashboardView component enables your front-end developers to focus on the front-end without having to concern themselves with back-end data structures and analytics — because the interactive dashboard with powerful analytics can be created by business users on the GD platform and then simply integrated into the front-end of your application.


In its most basic form, you need as little code as:


import React from "react";
import { DashboardView } from "@gooddata/sdk-ui-ext";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
const SimpleDashboardView = () => {
 return <DashboardView dashboard="dashboard-id" />;
};
export default SimpleDashboardView;

The reduced complexity of the development process empowers your developers to develop your analytical application faster and, at the same time, create a deep integration with the rest of the experience. All of this, while keeping the controls to extend the flexibility of the dashboard customization firmly in their hands.


Read more about the difference between embedding analytics with static iFrame and integrating your analytics with the DashboardView component. You can also check out a real-life example on how to replace a hardcoded table and two charts with an integrated Dashboard that is customizable, while maintaining the same look & feel and preserving the filtering capabilities of the whole environment.


Try advancing your embedded analytics yourself

Do you have a React-based analytics app and have specific requirements for UI design and UX interactions? Check out our DashboardView documentation and try the GoodData analytics platform for free. The time for compromise is over — provide state-of-the-art tools to your developers, and keep the technical complexity of customizing your powerful embedded analytics application to a minimum.

bottom of page