Dashboard Creator
The Dashboard Creator is an open source point-and-click interface for creating dashboards. It's maintained by the team at Keen IO.
Install
npm install @keen.io/dashboard-creator --save
or
yarn add @keen.io/dashboard-creator
Settings
The Dashboard Creator components configuration could be specified during creation of application instance.
Visualizations Theme
The Dashboard Creator @keen.io/dataviz
theme could be overridden during initialization of application instance.
const dashboardCreator = new KeenDashboardCreator({
theme: {
colors: ['green', 'navy', 'orange'],
metric: {
value: {
typography: {
fontColor: 'black',
fontSize: 23
},
},
}
},
});
Routing integration
Additional handler could be used to get information about the current view rendered in the application.
export type View = 'management' | 'editor' | 'viewer';
const dashboardCreator = new KeenDashboardCreator({
onViewChange: (view: View, dashboardId: string | null) => {}
});
Render initially dashboard viewer
The render
method accepts initialView
and dashboardId
argument that could be used to present specific dashboard initially.
For editor
provided as initial view the dashboard in viewer
mode will be rendered.
export type View = 'management' | 'editor' | 'viewer';
const dashboardCreator = new KeenDashboardCreator({});
dashboardCreator.render('viewer', '@dashboardId');
Define user privileges
By default all users are allowed to edit and share dashboards. To restrict privileges - specify scopes by using userPermissions
argument. In example below user will be able to edit dashboards - however the share feature will be not available.
type Scopes = 'share-dashboard' | 'edit-dashboard' | 'edit-dashboard-theme';
const dashboardCreator = new KeenDashboardCreator({
userPermissions: ['edit-dashboard', 'edit-dashboard-theme'],
});
Set default timezone for queries
Specify default timezone
used for new created queries. Provided argument must be compatible with IANA Time Zone Database standard.
const dashboardCreator = new KeenDashboardCreator({
defaultTimezoneForQuery: 'Europe/Warsaw',
});
Disable query filter suggestions
Disables suggestions in query creator filters
const dashboardCreator = new KeenDashboardCreator({
disableQueryFilterSuggestions: true,
});
Disable timezone selection
Disables possibility to change timezone
for queries from user interface.
const dashboardCreator = new KeenDashboardCreator({
disableTimezoneSelection: true,
});
Date Picker
Setup default timezone in widget and disable timezone selection.
const dashboardCreator = new KeenDashboardCreator({
widgetsConfiguration: {
datePicker: {
defaultTimezone: 'Etc/UTC',
disableTimezoneSelection: true
}
},
});
Examples
Unmount application
Unmounts Dashboard Creator application from root container.
const dashboardCreator = new KeenDashboardCreator();
...
dashboardCreator.destroy();
Project Setup
prerequisites
- yarn - package manager
-
node
- make sure it's minimum 10.x.x
steps
- checkout repository
- run
yarn
- to install project dependencies - run application in development mode
yarn start:dashboard-creator
npm scripts
List of useful commands that could be used by developers. Execution in the command-line interface should be prefixed with yarn
package manager.
Command | Description |
---|---|
lint |
run linter against current application codebase. |
test |
run unit tests. |
build |
builds application distribution. |
prettier |
run code formatter process against current codebase. |
commit
This project uses Conventional Commits to enforce common commit standards.
Command | Description |
---|---|
npx git-cz |
run commit command line interface. |