The application DynDash (Dynamic Dashboards) aims to provide users the ability to quickly create Dashboards that visualize diverse data types.
It allows users to:
- Create and manage Dashboards with multiple Slots, which can be rearranged and modified easily
- Populate those Slots with Components, Sources, and Settings, creating powerful visualizations
- Manage various Provider APIs that can be connected to the DynDash application, each supplying specialized entities
[!info] The API spec for Providers is laid out here
As a brief illustration, the following image shows how the application is structured:
This project was built using Node.js v23.2.0. It may be possible to run the App using other versions, but this has not been tested. Multiple installations of Node.js can be managed easily using the Node Version Manager.
To install all the necessary dependencies before initial boot, run npm install in the project's root directory.
[!info] If you want to build the project (typically not recommended, as the application relies on the webpack server's reloading functionality), you may need to use a lower Node.js version (like
v22.2.0).
You will need to register the URLs of any Providers you want the application to interface with. Per default, many exemplary Providers are already registered. These include:
| Application | Purpose |
|---|---|
| Dashboard Hub | Provides Dashboards and allows for simple CRUD functionality |
| Example Provider | Provides some dummy data Sources and Types for testing purposes |
| Component Compiler | Provides a set of default Components and has a web interface for manually compiling new ones |
Registering new Providers can be done through the application's /src/dd_config.json file, or through the interface found here while the application is running.
These Providers can be used as a basis for creating your own Provider application.
It must be noted that creating a Dashboard Provider is probably rarely necessary for many users, as simply modifying the
config.jsonof the existing/dashboard_provider/is likely enough. Additionally, Component Providers are also not something that users might want to develop regularly, due to the complexity compiling building the Components.Creating custom Sources however, is intended to be frequently done, which is why the
/example_provider/is the shortest and most simplified one of the helper applications.
Run npm start in the root of this directory, if you want to launch all of the applications simultaneously.
You can also run applications individually, or in small groups:
- The script
npm run dyndashwill start the application's frontend and config editor. - The script
npm run providerswill start all of the default Providers.
The start page will show all Dashboard that have been provided to the application.
Clicking on a folder path may reveal said path in the operating system's default file explorer.
Files can be created, imported, reloaded, renamed, modified, duplicated, deleted, and recovered using the buttons found in the header of the application.
It is also possible to import files by dragging them into the application. Valid drop targets include:
- folder path on start page (automatically inserts file into folder)
- file preview on start page (asks for replacement strategy)
- Dashboard area in detail view (asks for replacement strategy)
Clicking on a Dashboard will open said Dashboard in the application's detail view.
The detail view will allow you to view and edit your Dashboard.
- This view has a sidebar that can be toggled by pressing
T(default shortcut) - The application has four distinct "Tool Modes" that can be toggled through a click or by pressing the associated key
M(Move) Enables moving the Slots by dragging and dropping themD(Draw) Enables drawing new SlotsR(Rename, Resize, Remove) Allows for the renaming, resizing, and deletion of SlotsS(Select) Allows to select multiple Slots at once
Users can drag and drop Components and Sources onto these Slots while no tool is active (or while the select tool is made, enabling bulk operations).
Generally speaking, most non-button elements can be clicked to reveal a modal with more information about them. This includes:
- The icons of Providers
- The boxes in the sidebar
- The Components and Sources in the sidebar
- Any Type icon
Additionally, the application has modes to show keyboard shortcuts and more detailed information about the Dashboards and interface. Feel free to toggle through them using the header, and explore your Dashboards in different info modes.
This is an early version of the application, so some features are not implemented quite as well or optimized as they could be.
However, the application is in active development, with the goal of improving it in the areas where its implementation is lacking. An expansion of its features is also planned, though the details on the scope of that are currently unclear.
This also means that some things are subject to change in future versions.
[!info] The documentation of the application is currently quite rudimentary. This fact is known and one of the first areas that are likely to change a lot.
It is possible to extend the application by writing custom Components and Provider APIs for it. However, it is also possible to change the application itself and modify it, in order to fit your needs.
In both cases, there is a README that is intended to be used as a guideline for any person interested in the development of these things:
- Extending the Application (Components, Provider APIs)
- Modifying the Application (Changing the base functionality)
The project is licensed under the GNU AGPL v3 License