The directory structure for each plugin will look like this. Using `WordCloud`
as an example.
```
WordCloud
|--buildQuery.js
|--transformProps.js
|--transformData.js
|--metadata.js
|
// for the vanilla js / d3 components
|--WordCloud.js
|--ReactWordCloud.jsx // convert WordCloud.js to react component
// for the React components
|--WordCloud.jsx
|
// Use temporarily until the plugin system is fully implemented
|--adaptor.jsx
// This will replace adaptor.jsx once the plugin system is fully implemented
|--plugin.js
|
// TBD: Control configuration
|--controlConfig.js
|
// TBD: This could be class for input/output of the transformProps function
|--formDataSchema //
|--dataSchema //
```
## What is in each file?
### 1. buildQuery.js
```js
export default function buildQuery(formData) {
return queryObject;
}
```
### 2. transformProps.js
```js
export default function transformProps({
slice,
payload,
setControlValue,
}) {
// Return props that are compatible with <WordCloud />
// In the future can enforce type for the returned object if we use
TypeScript.
return props;
}
```
Note: In the future, will replace `slice` with specific fields, such as
`width`, `height`, or `formData` and perhaps add type (if we use typescript)
for `formData`
### 3. transformData.js
Transform props that are based on `payload`. The logic formerly in `get_data`
will be moved here.
For the first version, it will be called from `transformProps.js`, but
separated into another function can be useful for future optimization.
```js
export default function transformData({ payload, formData }) {
return props;
}
```
### 4. metadata.js
Description of this chart
```js
import thumbnail from './WordCloud.png';
export default new ChartMetadata({
key: 'word-cloud',
name: 'WordCloud',
description: 'Lorem ipsum dolor sit amet',
thumbnail,
});
```
### 5.1 WordCloud.js and ReactWordCloud.jsx
For vanilla components that are not React yet, we have been refactoring to make
it convertible
#### WordCloud.js
```js
export default function(element, props) { ... }
```
#### ReactWordCloud.jsx
```js
import reactify from '../../utils/reactify';
export default reactify(WordCloud);
```
### 5.2 WordCloud.jsx
For components that are already React component
```js
class WordCloud extends React.Component {
...
}
export default WordCloud;
```
### 6. adaptor.jsx
Shim to make it work with current Superset app. **This file will be deleted**
after we completely move to the plugin system.
```js
import createAdaptor from '../../utils/createAdaptor';
import WordCloud from './ReactWordCloud';
import transformProps from './transformProps';
// return function(slice, payload, setControlValue) that render the component
export default createAdaptor(WordCloud, transformProps);
```
### 7. plugin.js
This is how a chart plugin is defined. It will replace `adaptor.jsx`.
```js
import buildQuery from './buildQuery';
import transformProps from './transformProps';
import metadata from './metadata';
import WordCloud from './ReactWordCloud';
export default new ChartPlugin({
key: 'word-cloud',
metadata,
buildQuery,
transformProps,
Chart: WordCloud,
});
```
Plugins are installed like this
```js
import wordCloudPlugin from './WordCloud/plugin';
wordCloudPlugin.install();
```
Then you can use
```js
<SupersetDataProvider type="word-cloud" formData={...}>
<SuperChart type="word-cloud" xxx={...} />
</SupersetDataProvider>
```
There is an ongoing work for plugin system in #5882 which explains what happens
behind-the-scene in `.install()`. Please see the PR for more details.
-----
@conglei
[ Full content available at:
https://github.com/apache/incubator-superset/issues/5692 ]
This message was relayed via gitbox.apache.org for [email protected]
