open-index/open-npm huggingface dataset:
npm package: @superset-ui/chart-composition
Description: Superset UI chart-composition
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/chart-composition

[![Version](https://img.shields.io/npm/v/@superset-ui/chart-composition.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/chart-composition.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-chart-composition&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-chart-composition)

Description

#### Example usage

```js
import {
  ChartFrame,
  TooltipFrame,
  TooltipTable,
  WithLegend,
} from '@superset-ui/chart-composition';
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/color
Description: Superset UI color
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/color

[![Version](https://img.shields.io/npm/v/@superset-ui/color.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/color.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-color&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-color)

Description

#### Example usage

```js
import { xxx } from '@superset-ui/color';
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/control-utils
Description: Superset UI control-utils
Author: Superset
Latest version: 0.13.31
Deprecated: Please use @superset-ui/chart-controls

## @superset-ui/control-utils

[![Version](https://img.shields.io/npm/v/@superset-ui/control-utils.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/control-utils.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-control-utils&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-control-utils)

Description

#### Example usage

```js
import { xxx } from '@superset-ui/control-utils';
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/dimension
Description: Superset UI dimension
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/dimension

[![Version](https://img.shields.io/npm/v/@superset-ui/dimension.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/dimension.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-dimension&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-dimension)

Description

#### Example usage

```js
import { xxx } from '@superset-ui/dimension';
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/ignore-superset-export-not-found-webpack-plugin
Description: Webpack plugin for supressing warnings for superset exported interfaces
Author: Superset
Latest version: 0.1.1

# IgnoreSupersetExportNotFoundWebpackPlugin

## Installation

```bash
npm install --saveDev @superset-ui/ignore-superset-export-not-found-webpack-plugin
```

## Usage

```js
// webpack.config.js

const IgnoreSupersetExportNotFoundWebpackPlugin = require('@superset-ui/ignore-superset-export-not-found-webpack-plugin')

module.exports = {
  ...,
  plugins: [
    new IgnoreSupersetExportNotFoundWebpackPlugin(),
    ...,
  ],
}
```

## Publishing

**Prerequisite:** You'll need an [npmjs.com](https://npmjs.com) account that is part of the `superset-ui` organization.

1. Make sure you're logged in to NPM from your shell. Run `npm login` if necessary.
2. To make the release, run `npm run release` and follow the prompts.
npm package: @superset-ui/legacy-plugin-chart-force-directed
Description: Superset Legacy Chart - Force-directed Graph
Author: Superset
Latest version: 1.5.0

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/legacy-plugin-chart-force-directed

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-force-directed.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/legacy-plugin-chart-force-directed)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-force-directed&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-force-directed)

This plugin provides Force-directed Graph for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-force-directed';

new ChordChartPlugin().configure({ key: 'force-directed' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-force-directed)
for more details.

```js
<SuperChart
  chartType="force-directed"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/legacy-plugin-chart-iframe
Description: Superset Legacy Chart - Iframe
Author: Superset
Latest version: 0.14.9

## @superset-ui/legacy-plugin-chart-iframe

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-iframe.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-iframe.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-iframe&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-iframe)

This plugin provides Iframe for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import IframeChartPlugin from '@superset-ui/legacy-plugin-chart-iframe';

new IframeChartPlugin()
  .configure({ key: 'iframe' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-iframe) for more details.

```js
<SuperChart
  chartType="iframe"
  width={600}
  height={600}
  formData={...}
  queryData={{
    data: {...},
  }}
/>
```
npm package: @superset-ui/legacy-plugin-chart-markup
Description: Superset Legacy Chart - Markup
Author: Superset
Latest version: 0.14.9

## @superset-ui/legacy-plugin-chart-markup

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-markup.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-markup.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-markup&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-markup)

This plugin provides Markup for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import MarkupChartPlugin from '@superset-ui/legacy-plugin-chart-markup';

new MarkupChartPlugin()
  .configure({ key: 'markup' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-markup) for more details.

```js
<SuperChart
  chartType="markup"
  width={600}
  height={600}
  formData={...}
  queryData={{
    data: {...},
  }}
/>
```
npm package: @superset-ui/legacy-plugin-chart-pivot-table
Description: Superset Legacy Chart - Pivot Table
Author: Superset
Latest version: 2.1.0

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/legacy-plugin-chart-pivot-table

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-pivot-table.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/legacy-plugin-chart-pivot-table)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-pivot-table&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-pivot-table)

This plugin provides Pivot Table for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import PivottableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';

new PivottableChartPlugin().configure({ key: 'pivot-table' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-pivot-table)
for more details.

```js
<SuperChart
  chartType="pivot-table"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/legacy-plugin-chart-sunburst
Description: Superset Legacy Chart - Sunburst
Author: Superset
Latest version: 2.1.0

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/legacy-plugin-chart-sunburst

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-sunburst.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/legacy-plugin-chart-sunburst)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-sunburst&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-sunburst)

This plugin provides Sunburst for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import SunburstChartPlugin from '@superset-ui/legacy-plugin-chart-sunburst';

new SunburstChartPlugin().configure({ key: 'sunburst' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-sunburst)
for more details.

```js
<SuperChart
  chartType="sunburst"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/legacy-plugin-chart-table
Description: Superset Legacy Chart - Table
Author: Superset
Latest version: 0.14.9

## @superset-ui/legacy-plugin-chart-table

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-table.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-table.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-table&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=plugins/superset-ui-legacy-plugin-chart-table)

This plugin provides Table for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import TableChartPlugin from '@superset-ui/legacy-plugin-chart-table';

new TableChartPlugin().configure({ key: 'table' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-table)
for more details.

```js
<SuperChart
  chartType="table"
  width={600}
  height={600}
  formData={...}
  queryData={{
    data: {...},
  }}
/>
```
npm package: @superset-ui/legacy-plugin-chart-time-table
Description: Superset Chart Plugin - Time Table
Author: Superset
Latest version: 0.18.25

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/plugin-chart-time-table

[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-time-table.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/plugin-chart-time-table)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-plugin-chart-time-table&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-plugin-chart-time-table)

This plugin provides Time Table for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import TimeTableChartPlugin from '@superset-ui/legacy-plugin-chart-time-table';

new TimeTableChartPlugin().configure({ key: 'time-table' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-time-table)
for more details.

```js
<SuperChart
  chartType="time-table"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/legacy-plugin-chart-treemap
Description: Superset Legacy Chart - Treemap
Author: Superset
Latest version: 2.1.0

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/legacy-plugin-chart-treemap

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-treemap.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/legacy-plugin-chart-treemap)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-treemap&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-treemap)

This plugin provides Treemap for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import TreemapChartPlugin from '@superset-ui/legacy-plugin-chart-treemap';

new TreemapChartPlugin().configure({ key: 'treemap' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-treemap)
for more details.

```js
<SuperChart
  chartType="treemap"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/legacy-plugin-chart-word-cloud
Description: Superset Legacy Chart - Word Cloud
Author: Superset
Latest version: 0.11.15

## @superset-ui/legacy-plugin-chart-word-cloud

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-word-cloud.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-word-cloud.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-word-cloud&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-word-cloud)

This plugin provides Word Cloud for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import WordCloudChartPlugin from '@superset-ui/legacy-plugin-chart-word-cloud';

new WordCloudChartPlugin()
  .configure({ key: 'word-cloud' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-word-cloud) for more details.

```js
<SuperChart
  chartType="word-cloud"
  width={600}
  height={600}
  formData={...}
  queryData={{
    data: {...},
  }}
/>
```
npm package: @superset-ui/legacy-preset-chart-big-number
Description: Superset Legacy Chart - Big Number
Author: Superset
Latest version: 0.18.25

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/legacy-preset-chart-big-number

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-preset-chart-big-number.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/legacy-preset-chart-big-number)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-preset-chart-big-number&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=plugins/superset-ui-legacy-preset-chart-big-number)

This plugin provides Big Number for Superset.

### Usage

Import the preset and register. This will register the `BigNumber` and `BigNumberTotal` charts with
key `big-number` and `big-number-total`, respectively.

```js
import { BigNumberChartPreset } from '@superset-ui/legacy-preset-chart-big-number';

new BigNumberChartPreset().register();
```

or register charts one by one. Configure `key`, which can be any `string`, and register the plugin.
This `key` will be used to lookup this chart throughout the app.

```js
import {
  BigNumberChartPlugin,
  BigNumberTotalChartPlugin,
} from '@superset-ui/legacy-preset-chart-big-number';

new BigNumberChartPlugin().configure({ key: 'big-number' }).register();
new BigNumberTotalChartPlugin()
  .configure({ key: 'big-number-total' })
  .register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-big-number)
for more details.

```js
<SuperChart
  chartType="big-number"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/legacy-preset-chart-kepler
Description: Superset Chart - kerpler.gl
Author: Superset
Latest version: 0.4.6

## @superset-ui/legacy-preset-chart-deckgl

[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-preset-chart-deckgl.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-preset-chart-deckgl.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-preset-chart-deckgl&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-preset-chart-deckgl)

This plugin provides `deck.gl` for Superset.

### Usage

Import the preset and register. This will register all the chart plugins under `deck.gl`.

```js
import { DeckGLChartPreset } from '@superset-ui/legacy-preset-chart-deckgl';

new DeckGLChartPreset().register();
```

or register charts one by one. Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import { ArcChartPlugin } from '@superset-ui/legacy-preset-chart-deckgl';

new ArcChartPlugin()
  .configure({ key: 'deck_arc' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins-deckgl) for more details.

```js
<SuperChart
  chartType="deck_arc"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/number-format
Description: Superset UI number format
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/number-format

[![Version](https://img.shields.io/npm/v/@superset-ui/number-format.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/number-format.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-number-format&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-number-format)

Description

#### Example usage

Functions `getNumberFormatter` and `formatNumber` should be used instead of calling `d3.format` directly.

```js
import { getNumberFormatter } from '@superset-ui/number-format';
const formatter = getNumberFormatter('.2f');
console.log(formatter(1000));
```

or

```js
import { formatNumber } from '@superset-ui/number-format';
console.log(formatNumber('.2f', 1000));
```

It is powered by a registry to support registration of custom formatting, with fallback to `d3.format` and handle error for invalid format string.

```js
import { getNumberFormatterRegistry, formatNumber, NumberFormatter } from '@superset-ui/number-format';

getNumberFormatterRegistry().registerValue('my_format', new NumberFormatter({
  id: 'my_format',
  formatFunc: v => `my special format of ${v}`
});

console.log(formatNumber('my_format', 1000));
// prints 'my special format of 1000'
```

It also define constants for common d3 formats. See the full list of formats  in [NumberFormats.js](https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-number-format/src/NumberFormats.js).

```js
import { NumberFormats } from '@superset-ui-number-format';

NumberFormats.PERCENT // ,.2%
NumberFormats.PERCENT_3_POINT // ,.3%
```

There is also a formatter based on [pretty-ms](https://www.npmjs.com/package/pretty-ms) that can be used to format time durations:

```js
import { createDurationFormatter, formatNumber, getNumberFormatterRegistry } from from '@superset-ui-number-format';

getNumberFormatterRegistry().registerValue('my_duration_format', createDurationFormatter({ colonNotation: true });
console.log(formatNumber('my_duration_format', 95500))
// prints '1:35.5'
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/plugin-chart-icicle-event
Description: Superset Chart Plugin - Icicle Event
Author: Superset
Latest version: 0.11.15

## @superset-ui/plugin-chart-icicle

## WIP

This is a work in progress with the design being finalized.

This plugin provides Icicle Event Chart for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import IcicleEventVizPlugin from '@superset-ui/plugin-chart-icicle-event';

new IcicleEventVizPlugin()
  .configure({ key: 'icicle' })
  .register();
```

Then use it via `SuperChart`. A link to Storybook for the Icicle Event Chart will be available here in the future for more details.

```js
<SuperChart
  chartType="icicle"
  width={600}
  height={600}
  formData={...}
  queryData={{
    data: {...},
  }}
/>
```

### Current Prototype (Subject to Change)

![Current Prototype](./src/images/thumbnail.png)
npm package: @superset-ui/plugin-filter-antd
Description: Superset Filter - Plugin Filter AntD
Author: Superset
Latest version: 0.17.5

## @superset-ui/plugin-filter-antd

[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-filter-antd.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/plugin-filter-antd)

This plugin provides native filter plugins based on AntD.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

Below is an example of how to use the Select filter plugin.

```js
import { AntdFilterSelectPlugin } from '@superset-ui/plugin-filter-antd';

new AntdFilterSelectPlugin().configure({ key: 'plugin-filter-select' }).register();
```

Then use it via `SuperChart`.

```js
<SuperChart
  chartType="plugin-filter-select"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
    // this hook gets called
    hooks: { setExtraFormData: extraFormData => console.log(extraFormData) },
  }]}
/>
```
npm package: @superset-ui/preset-chart-xy
Description: Superset Chart - XY
Author: Superset
Latest version: 2.1.0

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

## @superset-ui/preset-chart-xy

[![Version](https://img.shields.io/npm/v/@superset-ui/preset-chart-xy.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/preset-chart-xy)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-preset-chart-xy&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-preset-chart-xy)

This plugin provides basic charts on cartesian coordinates (Line, Box Plot) for Superset.

> DISCLAIMER: It is still under heavy development and the APIs are subject to changes.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
lookup this chart throughout the app.

```js
import { BoxPlotChartPlugin } from '@superset-ui/preset-chart-xy';

new BoxPlotChartPlugin().configure({ key: 'box-plot' }).register();
```

Then use it via `SuperChart`. See
[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-box-plot)
for more details.

```js
<SuperChart
  chartType="box-plot"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-ui/query
Description: Superset UI query
Author: Superset
Latest version: 0.14.23
Deprecated: All @superset-ui packages are merged into @superset-ui/core

## @superset-ui/query

[![Version](https://img.shields.io/npm/v/@superset-ui/query.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/query.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-query&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-query)

Utility to build query object for chart data.

#### Example usage

```js
import { xxx } from '@superset-ui/query';
```

#### API

TODO
npm package: @superset-ui/style
Description: Component styles for Superset
Author: Aaron Suddjian
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/style

[![Version](https://img.shields.io/npm/v/@superset-ui/style.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/style.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-style&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-style)

Provides a style object containing a variety of style parameters for theming Superset components with Emotion. See [SIP-37](https://github.com/apache/incubator-superset/issues/9123) for additional context. This will eventually allow for custom themes to override default Superset styles. These parameters (and the styled-components/emotion design pattern) will, over time, be used to whittle away at widely-scoped LESS styles, making it easier to build and (re)style Superset components.

## Usage

```ts
import { styled, supersetTheme, ThemeProvider } from '@superset-ui/style';

// use emotion api as normal, but the theme uses the correct types
const MyHeader = styled.h1`
  color: ${props => props.theme.colors.primary.base};
  font-family: sans-serif;
`

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={supersetTheme}>
        <MyHeader>Properly styled text!</MyHeader>
      </ThemeProvider>
    );
  }
}
```

Note: the `ThemeProvider` is already included in the project's `Storybook` (as a decorator) meaning you should be able to apply/view any new Emotion-based theme attributes and see them reflected in the storybook without any additional setup.
npm package: @superset-ui/superset-ui
Description: One stop install for all superset-ui packages
Author: Superset
Latest version: 0.14.23

## @superset-ui/superset-ui

[![Version](https://img.shields.io/npm/v/@superset-ui/superset-ui.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/superset-ui.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-superset-ui&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-superset-ui)

Description

#### Example usage

```js
import { xxx } from '@superset-ui/superset-ui';
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/time-format
Description: Superset UI time-format
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/time-format

[![Version](https://img.shields.io/npm/v/@superset-ui/time-format.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/time-format.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-time-format&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-time-format)

Description

#### Example usage

Add `@superset-ui/time-format`, a module for formatting time. Functions `getTimeFormatter` and `formatTime` should be used instead of calling `d3.utcFormat` or `d3.timeFormat`  directly.

```js
import { getTimeFormatter } from '@superset-ui/time-format';
const formatter = getTimeFormatter('%Y-%m-d');
console.log(formatter(new Date()));
```

or

```js
import { formatTime } from '@superset-ui/time-format';
console.log(formatTime('%Y-%m-d', new Date()));
```

It is powered by a registry to support registration of custom formatting, with fallback to `d3.utcFormat` or `d3.timeFormat` (if the formatId starts with `local!`)

```js
import { getTimeFormatterRegistry, formatTime, TimeFormatter } from '@superset-ui/time-format';

getTimeFormatterRegistry().registerValue('my_format', new TimeFormatter({
  id: 'my_format',
  formatFunc: v => `my special format of ${utcFormat('%Y')(v)}`
});

console.log(formatTime('my_format', new Date(2018)));
// prints 'my special format of 2018'
```

It also define constants for common d3 time formats. See [TimeFormats.js](https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-time-format/src/TimeFormats.js).

```js
import { TimeFormats } from '@superset-ui/time-format';

TimeFormats.DATABASE_DATETIME // '%Y-%m-%d %H:%M:%S'
TimeFormats.US_DATE // '%m/%d/%Y'
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/translation
Description: Superset UI translation
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/translation

[![Version](https://img.shields.io/npm/v/@superset-ui/translation.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/translation.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-translation&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-translation)

`i18n` locales and translation for Superset

### SupersetTranslation

#### Example usage

```js
import { configure, t, tn } from '@superset-ui/translation';

configure({
  languagePack: {...},
});

console.log(t('text to be translated'));
console.log(tn('singular text', 'plural text', value));
```

#### API

`configure({ [languagePack] })`

- Initialize the translator
- Initialize with the default language if no `languagePack` is specified.

`t(text[, args])`

- Translate `text`.
- If `args` is provided, substitute `args` into the `sprintf` placeholders specified within `text` translation.

For example

```js
t('Hello %(name)s', user);
```

See [sprintf-js](https://github.com/alexei/sprintf.js) for more details on how to define placeholders.

`tn(singular, plural, num, [, args])`

- Translate and choose between `singular` and `plural` based on `num`.
- If `args` is provided, substitute `args` into the `sprintf` placeholders specified within `singular` or `plural` translations.

For example

```js
tn('%d duck', '%d ducks', 2, 2);
```

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-ui/validator
Description: Superset UI validator
Author: Superset
Latest version: 0.14.23
Deprecated: We merged all @superset-ui packages. Use @superset-ui/core instead.

## @superset-ui/validator

[![Version](https://img.shields.io/npm/v/@superset-ui/validator.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/validator.svg?style=flat)
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-validator&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-validator)

Description

#### Example usage

```js
import { xxx } from '@superset-ui/validator';
```

#### API

`fn(args)`

- Do something

### Development

`@data-ui/build-config` is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.
npm package: @superset-viz-plugins/plugin-chart-bubble
Description: Superset Chart - Bubble
Author: MAF
Latest version: 0.0.3

## @superset-ui/plugin-chart-bubble

[![Version](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-bubble.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/plugin-chart-bubble.svg?style=flat-square)
[![David (path)](https://img.shields.io/david/apache-superset/superset-viz-plugins.svg?path=packages%2Fsuperset-viz-plugin-chart-bubble&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-bubble)

This plugin provides Bubble for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import BubbleChartPlugin from '@superset-viz-plugins/plugin-chart-bubble';

new BubbleChartPlugin()
  .configure({ key: 'bubble' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-viz-plugins/?selectedKind=plugin-chart-bubble) for more details.

```js
<SuperChart
  chartType="bubble"
  width={600}
  height={600}
  formData={...}
  queryData={{
    data: {...},
  }}
/>
```

### File structure generated

```
├── README.md
├── package.json
├── src
│   ├── Bubble.tsx
│   ├── images
│   │   └── thumbnail.png
│   ├── index.ts
│   ├── plugin
│   │   ├── buildQuery.ts
│   │   ├── controlPanel.ts
│   │   ├── index.ts
│   │   └── transformProps.ts
│   └── types.ts
├── test
│   └── index.test.ts
└── types
    └── external.d.ts
```
npm package: @superset-viz-plugins/plugin-chart-composed
Description: Superset Chart - Chart Composed
Latest version: 0.36.6

## @superset-viz-plugins/plugin-chart-composed

[![Version](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-composed.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-composed.svg?style=flat-square)

This plugin provides Composed for Superset.

(Storybook)[https://5fec4c81935a8c002151e85f-abrnxxsiuy.chromatic.com/?path=/docs/plugins-composed-chart-playground--bars]


### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import ComposedChartPlugin from '@superset-viz-plugins/plugin-chart-composed';

new ComposedChartPlugin()
  .configure({ key: 'nielsen-oss-composed' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui/?selectedKind=plugin-chart-composed) for more details.

```js
<SuperChart
  chartType="nielsen-oss-composed"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-viz-plugins/plugin-chart-pie
Description: Superset Chart - Pie
Latest version: 0.10.1

## @superset-viz-plugins/plugin-chart-pie

[![Version](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-pie.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-pie.svg?style=flat-square)

This plugin provides Pie for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import DonutPieChartPlugin from '@superset-viz-plugins/plugin-chart-donut-pie';

new DonutPieChartPlugin()
  .configure({ key: 'nielsen-oss-pie' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui/?selectedKind=plugin-chart-pie) for more details.

```js
<SuperChart
  chartType="nielsen-oss-pie"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```

### File structure generated

```
├── README.md
├── package.json
├── src
│   ├── DonutPie.tsx
│   ├── images
│   │   └── thumbnail.png
│   ├── index.ts
│   ├── plugin
│   │   ├── buildQuery.ts
│   │   ├── controlPanel.ts
│   │   ├── index.ts
│   │   └── transformProps.ts
│   └── types.ts
├── test
│   └── index.test.ts
└── types
    └── external.d.ts
```
npm package: @superset-viz-plugins/plugin-chart-pivot-table
Description: Superset Chart - Pivot Table
Latest version: 0.14.0

## @superset-viz-plugins/plugin-chart-table-pivot

[![Version](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-table-pivot.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-table-pivot-new.svg?style=flat-square)

This plugin provides Table Pivot New for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import TablePivotNewChartPlugin from '@superset-viz-plugin/plugin-chart-table-pivot';

new TablePivotNewChartPlugin()
  .configure({ key: 'nielsen-oss-table-pivot' })
  .register();
```

```js
<SuperChart
  chartType="nielsen-oss-pivot-table"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-viz-plugins/plugin-chart-status
Description: Superset Chart - Status
Latest version: 0.4.0

## @superset-viz-plugins/plugin-chart-status

[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-status.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/plugin-chart-status.svg?style=flat-square)

This plugin provides Status for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import StatusChartPlugin from '@superset-ui/plugin-chart-status';

new StatusChartPlugin()
  .configure({ key: 'nielsen-oss-status' })
  .register();
```

Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui/?selectedKind=plugin-chart-status) for more details.

```js
<SuperChart
  chartType="nielsen-oss-status"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```
npm package: @superset-viz-plugins/plugin-chart-waterfall
Description: Superset Chart - Waterfall
Author: MAF
Latest version: 0.15.1

## @superset-viz-plugins/plugin-chart-waterfall

[![Version](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-waterfall.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-viz-plugins/plugin-chart-waterfall.svg?style=flat-square)

This plugin provides Waterfall for Superset.

### Usage

Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.

```js
import WaterfallChartPlugin from '@superset-viz-plugins/plugin-chart-waterfall';

new WaterfallChartPlugin()
  .configure({ key: 'nielsen-oss-waterfall' })
  .register();
```

```js
<SuperChart
  chartType="nielsen-oss-waterfall"
  width={600}
  height={600}
  formData={...}
  queriesData={[{
    data: {...},
  }]}
/>
```