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.

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

1. yarn - package manager
2. node - make sure it's minimum 10.x.x

steps

1. checkout repository
2. run yarn - to install project dependencies
3. create a config.js file (use config.template.js) and provide Keen credentials
4. 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.