npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

keen-explorer

v7.1.9

Published

Data Explorer by Keen IO

Downloads

20

Readme

Keen Explorer

Install

npm install keen-explorer --save

Live Demo

http://keen.github.io/explorer/

Example

import KeenExplorer from 'keen-explorer';

const myExplorer = new KeenExplorer({
  container: '#keen-explorer-container', // querySelector

  keenAnalysis: {
    // configuration for KeenAnalysis
    // https://github.com/keen/keen-analysis.js
    config: {
      projectId: 'PROJECT_ID',
      masterKey: 'MASTER_KEY',
      readKey: 'READ_KEY',
    },
  },

  keenDataviz: {
    // OPTIONAL configuration for KeenDataviz
    // https://github.com/keen/keen-dataviz.js
  }

  // Customize explorer UI
  // Default configuration:
  components: {
    eventCollection: true,
    previewCollections: true,
    analysisType: true,
    timeframe: true,
    timezone: true,
    filters: true,
    groupBy: true,
    interval: true,
    apiQueryUrl: true,
    actorProperty: true,
    step: true,
    savedQueryBrowser: true,
    results: true,
    saveButton: true,
    downloadButton: true,
    embedButton: true,
  },
});

Check out the demo here. The Keen IO 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 from CDN

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat%7CMontserrat:600%7CHind" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-explorer@6/dist/keen-explorer.min.css">
  <script crossorigin src="https://cdn.jsdelivr.net/npm/keen-explorer@6/dist/keen-explorer.bundle.min.js"></script>
</head>

<body class="keen-explorer-template">
  <div id="keen-explorer-container"></div>
  <script>
  const myExplorer = new KeenExplorer({
  container: '#keen-explorer-container', // querySelector

  keenAnalysis: {
    // configuration for KeenAnalysis
    // https://github.com/keen/keen-analysis.js
    config: {
      projectId: 'PROJECT_ID',
      masterKey: 'MASTER_KEY',
      readKey: 'READ_KEY',
    },
  },

  keenDataviz: {
    // OPTIONAL configuration for KeenDataviz
    // https://github.com/keen/keen-dataviz.js
  }
  });
  </script>
</body>

Get your project ID & API keys

If you don't have an account talk to our team to get started today. If you do, login to Keen IO to create a project for your app. The Project ID and API Keys are available on the Project Overview page. You will need these for the next steps.

Custom builds of the Explorer

  1. Clone our repo git clone https://github.com/keen/explorer.git
  2. Configure the Keen.js client in the demo file at test/demo/demo-config.js with your project ID and Keen IO API keys.
  3. Install the dependencies with npm install.
  4. Run the development script with npm run start.
  5. You can now view the demo locally at http://localhost:8080/ or your specified port.

Building the project:

The project is built with Webpack.

  • Run npm run build from the root directory of the project to build ALL files, including the minified versions for production use.

Testing

Run Unit Tests

  • Run npm run test to run all the tests. Currently there are only unit tests.

FAQ

Is this open source Keen Explorer different than the one on keen.io? Nope! We have recently moved all our development on the Keen Explorer to this open source version.

I have questions about using the project! Where/who do I ask? If you have any questions about using this project, Explorer feel free to contact us anytime at [email protected].

Contributing:

To contribute to this project:

  • Fork the repo.
  • Submit a Pull Request with test coverage.
  • Follow our PR template, which includes the following sections:

## What does this PR do? How does it affect users?

## How should this be tested?

Step through the code line by line. Things to keep in mind as you review:
 - Are there any edge cases not covered by this code?
 - Does this code follow conventions (naming, formatting, modularization, etc) where applicable?

Fetch the branch and/or deploy to staging to test the following:

- [ ] Does the code compile without warnings (check shell, console)?
- [ ] Do all tests pass?
- [ ] Does the UI, pixel by pixel, look exactly as expected (check various screen sizes, including mobile)?
- [ ] If the feature makes requests from the browser, inspect them in the Web Inspector. Do they look as expected (parameters, headers, etc)?
- [ ] If the feature sends data to Keen, is the data visible in the project if you run an extraction (include link to collection/query)?
- [ ] If the feature saves data to a database, can you confirm the data is indeed created in the database?

## Related tickets?

Screenshots encouraged! Would an animated GIF be more informative than a screenshot? Then we recommend Recordit.

Tech used in this project

These are the major technologies used in the project.

  • ReactJS for UI Components & input handling.
  • NPM for dependency management.

Deployments

The all commits pushed into master branch will be picked by CircleCI workflow that perform npm packages version and publish.