My company, Aktiun, was tasked by Zoomdata to build three data applications a few weeks ago. These data applications would validate and showcase the new SDK that comes with Zoomdata v2.2. This blog describes my experience using the new Zoomdata's SDK and the application functionality that we built on top of it.
Many benefits exist when using Zoomdata to build data applications. The Aktiun team did not need to worry about writing back-end code to access the data or if this data was static or constantly generated. Since Zoomdata provides a rich library of connectors to most big data sources, it was transparent if the data was stored in Spark or MongoDB for example. Performance was also transparent since Zoomdata's technology focuses on addressing that problem together with the big data store.
It was also great to be able to use any JavaScript framework of Aktiun's choice. The SDK dependencies are managed in such way that no conflicts exist regardless of the different libraries and frameworks that a modern browser-based application requires.
Finally, the security concern is addressed by integrating with Zoomdata's OAuth2 support. This way, data apps leverage its authentication and authorization services which in turn leverage data source security features to provide as fine-grained access control to the data as possible. No need to re-invent the wheel there.
Therefore, Aktiun's time was invested on actually building the data applications so that they are as beautiful, insightful, and easy to interact with as possible.
Let's start with the first application (video above) which we call Acme Lending. Credentials are: zoomdata/zoomdata. It helps analyze the performance of a peer-to-peer lending website. It is ReactJS-based and includes the following features:
OAuth integration
Multi-tab navigation across visualizations without resetting their content
Single and multi-select filter controls for the trend visualization (first tab)
KPI filtering by selecting a loan grade slice on the donut chart (second tab)
Detail table showing multiple metrics for loan grade, loan status, and lendee state dimensions (third tab). It also re-uses filter controls to allow filtering by loan grade and loan status.
The table is an Ag-Grid component that supports multi-column sorting and re-ordering out of the box. The visualizations use the ECharts library except for the KPI bullet visualizations which use HighCharts. Redux Sagas are used to orchestrate the asynchronous functions of the application, mainly using the SDK to obtain the aggregates to display on different users actions.
The second application (video above) is built using Ionic, which is an HTML5 hybrid mobile app framework based on Angular. Credentials are: zoomdata/zoomdata. The application uses OAuth to leverage Zoomdata's security. After users authenticate, the application lists the Real Time Sales, Peer Lending, and Ticket Sales dashboards.
The first dashboard, Real Time Sales, features five different visualizations that continuously update as new data is generated. The second and third dashboards show three visualizations each on static data. When using the app on Mobile Safari, users can use the Share option to add the app icon on their device's home screen. When opening the app in this way, Safari hides the URL and status bars, which gives it a mobile app feeling. Of course, it can also be deployed as a real app if needed.
The third application (video above) is a Ticket Sales dashboard. Credentials are: zoomdata/zoomdata. It is ReactJS-based, just as the first application, and it includes the following features:
OAuth integration
Draggable and resizable widgets
Horizontal scrolling
2-dimensional tree map for Venue Cities and Venue Names. It allows users to select different metrics by using the gear button on the top right of the widget
Line area chart with range and metric selectors
Table with multi-column sort and re-ordering
Resizable KPI widgets for the current and previous month
Dashboard-level filter control which is resizable and draggable so that users can place it exactly where they need to
As in the first application, ECharts is used to implement its visualizations. Redux Sagas are used to orchestrate the asynchronous functions of the application, mainly using the SDK to obtain the aggregates to display on different users actions. Additionally, Gridster is used to provide the widgets and dashboard functionality.
Finally, these data applications can be easily embedded within Zoomdata's bookmarks menu and visualizations home page as shown in the next video. Since the apps are OAuth-enabled, they automatically leverage the current user's permissions. This way, users have the best of both worlds, a great data exploration experience using fully configurable visualizations, and guard-railed dashboards built on top of the SDK to implement visualization experiences and interactions in any way desired.
In summary, the new Zoomdata SDK allows to create advanced data applications that are performant, scalable, secured, easy to interact with, and beautiful using the frameworks and libraries of your choice.