Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keen/explorer
Data Explorer by Keen - point-and-click interface for analyzing and visualizing event data.
https://github.com/keen/explorer
analysis analytics analytics-api charts data-exploration data-visualization dataviz keen-io native-analytics web-analytics
Last synced: 4 days ago
JSON representation
Data Explorer by Keen - point-and-click interface for analyzing and visualizing event data.
- Host: GitHub
- URL: https://github.com/keen/explorer
- Owner: keen
- License: mit
- Created: 2015-06-11T17:56:40.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2023-05-22T12:17:04.000Z (over 1 year ago)
- Last Synced: 2025-01-11T15:04:56.824Z (11 days ago)
- Topics: analysis, analytics, analytics-api, charts, data-exploration, data-visualization, dataviz, keen-io, native-analytics, web-analytics
- Language: TypeScript
- Homepage: http://keen.io/
- Size: 141 MB
- Stars: 748
- Watchers: 46
- Forks: 61
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Data Explorer
[](https://www.typescriptlang.org) [](https://github.com/prettier/prettier) [](https://facebook.github.io/jest/) [](http://commitizen.github.io/cz-cli/) [](https://yarnpkg.com/en/) [](https://codecov.io/gh/keen/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](https://keen.io/).
### Install
```ssh
npm install keen-explorer --save
```
or
```ssh
yarn add keen-explorer
```
### Visualizations Theme
The Data Explorer `@keen.io/dataviz` theme could be overridden during initialization of application instance.
```typescript
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](https://www.iana.org/time-zones) standard.
```typescript
const explorer = new KeenExplorer({
defaultTimezoneForQuery: 'Africa/Nairobi',
});
```
##### Disable timezone selection
Disables possibility to change `timezone` from user interface.
```typescript
const explorer = new KeenExplorer({
disableTimezoneSelection: true,
});
```
##### Disable filter suggestions
Disable query creator filter suggestions
```typescript
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.
```typescript
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.
```typescript
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
```typescript
window.KeenPubSub.publish('@explorer/new-query');
```
##### Change view
```typescript
type ViewMode = 'browser' | 'editor';
window.KeenPubSub.publish('@explorer/change-view', { view: 'browser' });
```
### Project Setup
##### prerequisites
1. [yarn](https://classic.yarnpkg.com/) - 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](https://www.conventionalcommits.org) 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.