Awesome
Data Explorer
The Data Explorer is an open source point-and-click interface for querying and visualizing your event data. It's maintained by the team at Keen IO.
<img width="100%" src="https://user-images.githubusercontent.com/7753369/91156939-fc5aa980-e6c4-11ea-913b-d2984d5a843e.png">Install
npm install keen-explorer --save
or
yarn add keen-explorer
Visualizations Theme
The Data Explorer @keen.io/dataviz
theme could be overridden during initialization of application instance.
const explorer = new KeenExplorer({
container: '#root',
modalContainer: '#modal-root',
dataviz: {
theme: {
colors: ['red', 'blue', 'yellow']
}
}
});
Settings
The Data Explorer components configuration could be specified during creation of application instance.
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 explorer = new KeenExplorer({
defaultTimezoneForQuery: 'Africa/Nairobi',
});
Disable timezone selection
Disables possibility to change timezone
from user interface.
const explorer = new KeenExplorer({
disableTimezoneSelection: true,
});
Disable filter suggestions
Disable query creator filter suggestions
const explorer = new KeenExplorer({
disableQueryFilterSuggestions: true,
});
Translations
The default translations files for application are hosted on jsdelivr
CDN. You can easily replace the translations by overriding the loadPath
for files.
const explorer = new KeenExplorer({
container: '#root',
modalContainer: '#modal-root',
translations: {
backend: {
loadPath: 'https://cdn.jsdelivr.net/npm/@keen.io/explorer@$VERSION/dist/locales/{{lng}}/{{ns}}.json'
}
}
});
Confirm extraction limit
The default
threshold for rendering confirmation modal is 100
properties in event collection schema used for extraction.
You can easily change it by providing additional argument to constructor.
const explorer = new KeenExplorer({
confirmExtractionLimit: 50
});
PubSub interface
The Data Explorer could be controlled dynamically by using global @keen.io/pubsub
instance. By default after component is mounted in browser environment the pubsub
instance should be accessible in global
object.
Pubsub Events
Event | Meta | Description |
---|---|---|
@explorer/new-query | n/a | Changes view to editor mode with default query settings |
@explorer/change-view | { view: ViewMode } | Changes Explorer view mode |
Examples
Creating new query
window.KeenPubSub.publish('@explorer/new-query');
Change view
type ViewMode = 'browser' | 'editor';
window.KeenPubSub.publish('@explorer/change-view', { view: 'browser' });
Project Setup
prerequisites
- yarn - package manager
node
- make sure it's minimum 10.x.x
steps
- checkout repository
- run
yarn
- to install project dependencies - create a
config.js
file (useconfig.template.js
) and provideKeen
credentials - run application in development mode
yarn start
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. |
deployments
The all commits pushed into master
branch will be picked by CircleCI workflow that perform npm packages version and publish.
test environments
The all commits pushed into develop
branch will be picked by CircleCI workflow that allows to deploy artifiact on specific test environment.