open-index/open-npm huggingface dataset:
npm package: @keell0renz/metagit
Description: MetaGit is a program which automates git commit naming with AI.
Author: Bohdan Agarkov
Latest version: 0.0.4

# MetaGit: Never write your commit messages again

MetaGit looks at your `git diff`, and instructs a language model to write a commit message instead of you.

## Usage

### 1. Set environment variables (into your interpreter config)

```sh
export OPENAI_API_KEY=<key>
```

### 2. Install from repository

```sh
npm install -g @keell0renz/metagit
```

### 3. Use

> You were cooking something...

```sh
metagit
```

```txt
Added something...
? Do you want to proceed with this commit message? (Y/n)
```

> If you want to guide...

```sh
metagit some shit fixin the bugs lmao
```

```txt
Commit message...
? Do you want to proceed with this commit message? (Y/n)
```
npm package: @keels/remove-powered
Description: Removes X-Powered-By header from Express.js servers
Author: Keelan Daye
Latest version: 1.0.2

# remove-powered

This package provides middleware for Express.js to remove the X-Powered-By header. By default, Express sets the X-Powered-By header to "Express". This can potentially be exploited, though using this middleware does not entirely obscure the use of Express.

## Installation

```bash
npm install @keels/remove-powered --save
```

## Usage

Use this package as Express middleware.

```
const rp = require('@keels/remove-powered');

app.use(rp.removePowered);
```

## Development

This project uses [ESLint](https://eslint.org) and [EditorConfig](https://editorconfig.org) to standardise code styles.

This project uses [Jest](https://jestjs.io) and [SuperTest](https://github.com/visionmedia/supertest) for tests. To run tests, execute:

```bash
npm test
```
npm package: @keelvin/performance
Description: 性能数据统计
Author: 364257231@qq.com
Latest version: 1.0.5

# Useage
### Step1: 安装
```
npm i --save-dev @keelvin/performance
```


### Setp1: head结束之前植入代码
```
<script type="text/javascript">
    window.whiteScreenEndTime = +new Date();
    window.pageId = "xfapp"
</script>

```


### Setp2: 入口处```import```
 

```
import { getPerformanceData } from '@keelvin/performance';
```



# API
### getPerformanceData

- Fn : 获取页面性能数据以供它用
- Useage : 

```
// 异步调用
getPerformanceData((data) => {
    console.log(data);
})

```
npm package: @keen.io/charts
Description: Keen charts
Author: Keen.IO
Latest version: 2.40.10

# `@keen.io/charts`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/charts/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/charts/package.json)

The `@keen.io/charts` is set of reusable plots components built with [React](https://reactjs.org/) and [D3](https://d3js.org/).
Charts are part of a `@keen.io/widgets` and `@keen.io/dataviz` packages that could be used to seamlessly embed and deliver metrics within your user interface.

Charts plots theme could be fully customized by providing `theme` object. Each of chart plot supports a lot of configuration options to adjust it to Your own needs.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn add @keen.io/charts
```

## Examples

```js
import { BarChart } from '@keen.io/charts';

const chartData = [
  { name: 'Windows', users: 3, licenses: 52, shops: 12 },
  { name: 'MacOS', users: 19, licenses: 82, shops: 15 },
  { name: 'Linux', users: 20, licenses: 15, shops: 23 },
  { name: 'Android', users: 3, licenses: 15, shops: 30 },
];

<BarChart data={chartData} useDynamicLayout labelSelector="name" keys={['users', 'licenses', 'shops']} />
```

For more examples check the Keen [Storybook](https://keen.github.io/keen/).
npm package: @keen.io/charts-utils
Description: Keen utilities
Author: Keen.IO
Latest version: 1.15.4

# `@keen.io/charts-utils`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/charts-utils/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/utils/package.json)

Set of utilities and helper functions used in `keen.io` charts and widgets components.
npm package: @keen.io/colors
Description: Keen colors
Author: Keen.IO
Latest version: 1.1.1

# `@keen.io/colors`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/colors/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/colors/package.json)

Basic color palette used in `keen.io` projects.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn install @keen.io/colors
```

## Examples

```js
import { colors } from '@keen.io/colors';

const blue = colors.blue['500'];
```
npm package: @keen.io/data-export
Description: Keen data export utilities
Author: Keen.IO
Latest version: 1.2.49

# `@keen.io/data-export`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/parser/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/parser/package.json)

This package contains set of utility function responsible for exporting analysis results data.
npm package: @keen.io/dataviz
Description: Data Visualization SDK for Keen IO
Author: Keen.IO
Latest version: 2.18.14

# `@keen.io/dataviz`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/dataviz/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/dataviz/package.json)

The `@keen.io/dataviz` is abstraction layer that connects `Keen API` with visualization components.
It allows to seamlessly embed and deliver metrics within your user interface with minimal effort.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn add @keen.io/dataviz
```

For direct website integration embed a script with `@keen.io/dataviz` that is hosted on CDN.

```js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@keen.io/dataviz@latest/dist/dataviz.min.js"></script>
```

## API

### render

Renders metrics based on specified settings and analysis results.

```typescript
const result = await client.query({
 analysisType: 'count',
 eventCollection: 'pageviews',
 timeframe: 'this_14_days'
});

const chart = new DataViz({ type: 'bar', container: '#container' })
 .render(result);
```

## Timezones

The **presentationTimezone** argument could be used to adjust visualizations to specified timezone or convert UTC ISO string dates based on defined offset in minutes.

```typescript
const result = await client.query({
 analysisType: 'count',
 eventCollection: 'pageviews',
 interval: 'daily',
 timeframe: 'this_7_days'
});

const chart = new DataViz({
  type: 'area',
  container: '#container',
  presentationTimezone: 'America/New_York' // -600
}).render(result);
```

For more code examples check the Keen [Storybook](https://keen.github.io/keen/).

## Supported Browsers

This project targeting all modern browsers.
npm package: @keen.io/embedded-registration
Description: Embeddable registration component
Author: Keen.IO
Latest version: 2.1.160

# `@keen.io/embedded-registration`

This package contains Front-end codebase for Keen.io embeddable registration component used for HubSpot integration.
It allows to sign up users for the plans that do not require `credit card` details.

#### configuration

| Argument            | Description                                    |
| ------------------- | ---------------------------------------------- |
| `container`         | HTML Element used to mount registration form   |
| `offerHandle`       | Offer identifier used in registration process. |
| `ctaLabel`          | CTA button label.                              |
| `apiUrl`            | Keen API url.                                  |
| `onSuccess`         | Success callback handler.                      |
| `useOAuthProviders` | Show / hide OAuth providers.                   |
| `oauthConfig`       | OAuth applications configuration               |

#### CDN

```typescript
<script src="https://cdn.jsdelivr.net/npm/@keen.io/embedded-registration@latest/dist/embedded-registration.min.js" type="text javascript"></script>
```

#### example

```typescript
  new KeenEmbeddedRegistration({
    container: '#form',
    ctaLabel: "Get Started for Free",
    onSuccess: function() {},
    offerHandle: 'public-trial-30-days',
    apiUrl: 'https://keen.io',
  }).render();
```

#### 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                             |
| ------- | --------------------------------------- |
| `start` | run application on `localhost:8080`.    |
| `build` | build the application UMD distribution. |
npm package: @keen.io/icons
Description: Icons library
Author: Keen.IO
Latest version: 1.6.0

# `@keen.io/icons`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/icons/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/icons/package.json)

Set of reusable icons for `React` ecosystem - used in `keen.io` projects.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn install @keen.io/icons
```

## Examples

```js
import { Icon } from '@keen.io/icons';

<Icon type="arrow-up" />
```
npm package: @keen.io/metakeen
Description: Core pageview tracking shared across all Keen web projects.
Author: Keen
Latest version: 2.0.6

# Metakeen.js

## What is this project?

This project is meant to be a simple to use Javascript library that we include on all Keen IO web projects to track pageviews with a consistent approach and data model. It's meant to be dropped into Keen-Statics, Keen-Web and all other upcoming web projects to track pageviews without requiring any advanced configuration. Core things to know about this library:

* It tracks `pageviews` events automatically on any page it's loaded on.
* It requests the currently logged in user's data (if available) from Keen-Web.
* It stores the `firstInternalReferrer`, `firstExternalReferrer`, and other referrer properties in a cookie to be sent along with each `pageview` event.
* It sends along all the user, organization, project and page data is has available to it with each event that is tracked through it, so you only need to add the specific custom properties you want tracked.

## What's under the hood?
* Makes use of the `keen-tracking.js` library to handle tracking pageviews, setting up cookies, etc.

## How to use it

Include the script from the CDN:

```
<!-- Metakeen.js -->
<script src="https://d26b395fwzu5fz.cloudfront.net/metakeen-1.2.1.min.js"></script>
<script>
  $(document).ready(function(){
    window.metakeenClient = new window.Metakeen({
      enabled: true,
      debug: true,
      projectId: PROJECT_ID,
      writeKey: PROJECT_WRITE_KEY
    });
  });
</script>
```

## Contributing to this project:

1. Create the PR, including the build files created with `npm run build`.
2. Get a +1.
3. Merge into `master`.
4. Create a new PR with a new release of metakeen, essentially just a version bump in `package.json`.
5. Merge that PR.
6. Run the `deploy` npm task to get the new version on to our CDN.
7. Update `keen-statics`, `keen-web` and any other project that uses this library to the latest version.
npm package: @keen.io/parser
Description: Keen parser
Author: Keen.IO
Latest version: 2.8.144

# `@keen.io/parser`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/parser/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/parser/package.json)

This package contains set of parsers that are used internally to transform Keen API responses into `@keen.io/charts` friendly format.

#### Transformations

| Type                              | Query Semantic                                               |
| --------------------------------- | ------------------------------------------------------------ |
| singular                          | `standard` query without additional settings                 |
| categorical                       | `standard` query with group by settings                      |
| nominal                           | simple `select_unique` analysis                              |
| categorical-nominal               | `select_unique` analysis with group by settings              |
| chronological-nominal             | `select_unique` analysis with interval                       |
| chronological-categorical-nominal | `select_unique` analysis with group by settings and interval |
| chronological                     | `standard` query with interval                               |
| categorical-chronological         | `standard` query with group by settings and interval         |
| funnel                            | `funnel` analysis                                            |
| extraction                        | `extraction` analysis                                        |

-   A query is categorized as `standard` when `analysis_type` is different than `select_unique`, `funnel` or `extraction`.
npm package: @keen.io/pricing-calculator
Description: Pricing calculator for Keen.io plan recommendation
Author: Keen.IO
Latest version: 2.0.10

# `@keen.io/pricing-calculator`


This package contains Front-end codebase for Keen.io pricing calculator. It allows to
recommend users the most suited plan based on defined `query` / `events` usage.

#### 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                                                                       |
| --------------------- | --------------------------------------------------------------------------------- |
| `start`               | run application on `localhost:3000`.                                              |
| `build`               | build the application UMD distribution.                                           |
npm package: @keen.io/query
Description: Keen Query utilities
Author: Keen.IO
Latest version: 1.2.2

# `@keen.io/query`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/query/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/utils/package.json)

Set of utilities and helper functions related with `Query` used in `keen.io` projects.
npm package: @keen.io/query-creator
Description: Query Creator
Author: Keen IO
Latest version: 1.13.3

# Query Creator

[![written in typescript](https://img.shields.io/badge/written%20in-typescript-blue.svg)](https://www.typescriptlang.org) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-yellow.svg)](https://github.com/prettier/prettier) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://facebook.github.io/jest/) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![yarn](https://img.shields.io/badge/maintained%20with-yarn-cc00ff.svg)](https://yarnpkg.com/en/)

The Query Creator is an open source point-and-click interface used to create Keen Query structure. It's maintained by the team at [Keen IO](https://keen.io/).

<img width="100%" src="https://user-images.githubusercontent.com/23423731/99073586-790b6e80-25b6-11eb-8d9a-0ed493cc3744.png">

### Install

```ssh
npm install query-creator --save
```

or

```ssh
yarn add query-creator
```

### Integration

```typescript
<QueryCreator
  modalContainer={modalContainer}
  projectId={projectId}
  readKey={readKey}
  masterKey={masterKey}
  host={host}
  onUpdateQuery={(query) => {}}
  onUpdateChartSettings={(chartSettings) => {}}
  httpProtocol={httpProtocol}
/>
```
## Build

The `@keen.io/query-creator` use two step build to address issues with CSS specificity.

##### Typescript

First stage is responsible for transpilation Typescript code to `esnext` and emiting type declarations.

##### Babel

Second stage is responsible for code transpilation based on supported browserlist defined in `package.json` file and increasing `styled-components` css specificity by using plugins from `.babelrc` file.
Generator functions transformations are disabled so applications that use this package should take care of it on their own. 

### 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. |
npm package: @keen.io/react-hooks
Description: Keen custom hooks for React
Author: Keen.IO
Latest version: 1.4.7

# `@keen.io/react-hooks`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/react-hooks/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/react-hooks/package.json)

Set of reusable custom hooks for `React` ecosystem - used in `keen.io` projects.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn install @keen.io/react-hooks
```

## Examples

```js
import { useLegend } from '@keen.io/react-hooks';

const { disabledKeys, updateKeys } = useLegend();
```
npm package: @keen.io/storybook-utils
Description: Keen utils
Author: Keen.IO
Latest version: 2.2.54

# `@keen.io/storybook-utils`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/storybook-utils/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/storybook-utils/package.json)

Helper functions used internally in Keen [Storybook](https://keen.github.io/keen/).
npm package: @keen.io/time-utils
Description: Keen time utilities
Author: Keen.IO
Latest version: 1.3.0

# `@keen.io/time-utils`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/charts-utils/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/utils/package.json)

Set of utilities and helper functions responsible for dates and time conversion.

## API

### getOffsetFromDate

 Extracts UTC offset from provided date.

```typescript
getOffsetFromDate('2021-03-14T16:00:00+03:00');  // 180
```

### formatDate

Formats date based on provided pattern and timezone.

```typescript
formatDate('2021-03-30T12:00:00+02:00', 'Europe/Warsaw', 'YYYY-MM-DD HH:mm'); // 2021-03-30 12:00
```

### convertDate

Converts date based on provided offset in minutes or named timezone. Respects daylight saving time offsets.

```typescript
convertDate('2021-03-14T16:00:00', 180);  // 2021-03-14T19:00:00
convertDate('2021-03-14T16:00:00', -60);  // 2021-03-14T15:00:00
convertDate('2021-03-14T16:00:00', 'Europe/Warsaw');  // 2021-03-14T17:00:00
```

### setTimezoneOffset

Replaces timezone offset without modifying date.

```typescript
setTimezoneOffset('2021-03-14T16:00:00-12:00', 'Europe/Warsaw');  // 2021-03-14T16:00:00+02:00
```

### getDefaultAbsoluteTime

Creates default date range aligned with Keen API absolute `Timeframe` interface.

```typescript
// new Date() => 2021-03-31T00:00:00

getDefaultAbsoluteTime();  
/* Object {
  "start": "2021-03-30T00:00:00",
  "end": "2021-03-31T00:00:00",
} */
```
npm package: @keen.io/toast-notifications
Description: Keen.io wrapper for react-toast-notifications
Author: Keen.IO
Latest version: 1.2.27

# `@keen.io/toast-notifications`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/toast-notifications/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/toast-notifications/package.json)

`keen.io` wrapper for `react-toast-notifications` package.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn install @keen.io/toast-notifications
```
npm package: @keen.io/tracking-lite
Description: Light version of tracking for Google Tag manager
Author: Keen.IO
Latest version: 1.0.2

# `@keen.io/tracking-lite`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/tracking-lite/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/tracking-lite/package.json)

Light and simple version on Keen Tracking library - used for integration with `Google Tag Manager`.

## Installing

For direct website integration embed a script with `@keen.io/tracking-lite` that is hosted on CDN.

```js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@keen.io/tracking-lite@latest/dist/tracking-lite.min.js"></script>
```

## Examples

Access `KeenTrackingLite` from browser `window` object.

```js
KeenTrackingLite.sendEvent(projectId, authorizationKey, eventCollection, eventPayload);
```

#### 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                             |
| ------- | --------------------------------------- |
| `start` | run application on `localhost:3000`.    |
| `build` | build the application UMD distribution. |
npm package: @keen.io/translations-cli
Description: Keen Query utilities
Author: Keen.IO
Latest version: 1.1.0

# `@keen.io/translations-cli`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/query/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/utils/package.json)

CLI allowing to merge translations jsons into one.

## Installing

Can be installed globally with yarn:

```sh
yarn global @keen.io/translations-cli
```

or npm:

```sh
npm install -g @keen.io/translations-cli
```

## Examples

After installation can be run with command:

```sh
keen-translations <SOURCE_DIR> <TARGET_FILE>
```

To run it, two arguments need to be set, SOURCE_DIR and TARGET_FILE. The script will take translations from TARGET_FILE(api call or json file) and merge it with translations locally, available in SOURCE_DIR. In the end in terminal diff between the files will be printed and in SOURCE_DIR new file will be created with two files merged(output.json);

Example:

```sh
keen-translations explorer/public/locales/en https://cdn.jsdelivr.net/npm/@keen.io/dashboard-creator@next/dist/locales/en/translation.json
```

```sh
keen-translations explorer/public/locales/en dashboard-creator/public/locales/en/translation.json
```
npm package: @keen.io/typography
Description: Typography components for Keen
Author: Keen.IO
Latest version: 1.3.5

# `@keen.io/typography`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/typography/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/typography/package.json)

Typography - set of components used to display text across Keen applications.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn install @keen.io/typography
```

## Examples

```js
import { Headline } from '@keen.io/typography';

<Headline {...props} />
```
npm package: @keen.io/ui-core
Description: Keen visual components library
Author: Keen.IO
Latest version: 2.50.9

# `@keen.io/ui-core`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/ui-core/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/ui-core/package.json)

Set of reusable visual `React` components used in `keen.io` Front-End projects.

## Build

The `@keen.io/ui-core` use two step build to address issues with CSS specificity.

##### Typescript

First stage is responsible for transpilation Typescript code to `esnext` and emiting type declarations.

##### Babel

Second stage is responsible for code transpilation based on supported `.browserslistrc` file and increasing `styled-components` css specificity by using plugins from `.babelrc` file.

### 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                      |
| ------- | -------------------------------- |
| `test`  | run unit tests.                  |
| `build` | builds application distribution. |
npm package: @keen.io/widget-customization
Description: Widget customization user interface
Author: Keen IO
Latest version: 0.1.6

# Widget Customization

[![written in typescript](https://img.shields.io/badge/written%20in-typescript-blue.svg)](https://www.typescriptlang.org) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-yellow.svg)](https://github.com/prettier/prettier) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://facebook.github.io/jest/) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![yarn](https://img.shields.io/badge/maintained%20with-yarn-cc00ff.svg)](https://yarnpkg.com/en/)

The Widget Settings is an open source point-and-click interface used to setup visualization settings. It's maintained by the team at [Keen IO](https://keen.io/).

<img width="100%" src="https://user-images.githubusercontent.com/7753369/114176569-9cef9800-993b-11eb-9c3f-065acc3e305b.png">

### Install

```ssh
npm install @keen.io/widget-customization --save
```

or

```ssh
yarn add  @keen.io/widget-customization
```

## Build

The `@keen.io/widget-customization` use two step build to address issues with CSS specificity.

##### Typescript

First stage is responsible for transpilation Typescript code to `esnext` and emiting type declarations.

##### Babel

Second stage is responsible for code transpilation based on supported browserlist defined in `package.json` file and increasing `styled-components` css specificity by using plugins from `.babelrc` file.
Generator functions transformations are disabled so applications that use this package should take care of it on their own.

### 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. |
npm package: @keen.io/widget-picker
Description: Keen widget picker component
Author: Keen.IO
Latest version: 1.5.27

# `@keen.io/widget-picker`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/widget-picker/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/widget-picker/package.json)

Widget picker - component responsible for rendering user interface that allows user to select and configure visualization widget.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn install @keen.io/widget-picker
```

## Examples

```js
import { WidgetPicker } from '@keen.io/widget-picker';

<WidgetPicker {...props} />
```
npm package: @keen.io/widgets
Description: Keen widgets
Author: Keen.IO
Latest version: 2.18.11

# `@keen.io/widgets`

[![Known Vulnerabilities](https://snyk.io/test/github/keen/keen/badge.svg?targetFile=packages/widgets/package.json)](https://snyk.io/test/github/keen/keen?targetFile=packages/ui-core/package.json)

The `@keen.io/widgets` package is a higher visualization layer that connects `@keen.io/charts` with other components
that could be used to interact with charts plots.

## Installing

For Front-End applications use standard `npm` or [yarn](https://yarnpkg.com/lang/en/) package manager.

```sh
yarn add @keen.io/widgets
```

## Examples

```js
import { FunnelChartWidget } from '@keen.io/widgets';

const chartData = [
  { name: 'Emails', value: 17000 },
  { name: 'Visits', value: 13050 },
  { name: 'Logins', value: 5900 },
  { name: 'Purchases', value: 4021 },
  { name: 'Payments', value: 3011 },
];

<FunnelChartWidget data={chartData} labelSelector="name" />
```

For more examples check the Keen [Storybook](https://keen.github.io/keen/).