The directory structure for each plugin will look like this
```
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 //
```
Now 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 for ease of optimization in the future.
```js
export default function transformData({ payload, formData }) {
return props;
}
```
### 4. metadata.js
Description of this chart
```js
export default new ChartMetadata({
key: 'word-cloud',
name: 'WordCloud',
description: 'Lorem ipsum dolor sit amet',
thumbnail: 'WordCloud.jpg',
});
```
### 5. adaptor.jsx
Shim to make it work with current Superset app. **This will be deleted** after
we completely move to the plugin system. The logic here will be handled by
`SuperChart` instead.
```js
export default function adaptor(slice, payload, setControlValue) {
ReactDOM.render(
<MyChart {...transformProps({ slice, payload, setControlValue })} />,
document.querySelector(slice.selector);
);
}
```
### 6. plugin.js
This is how a chart plugin is defined. It will replace `adaptor.jsx`.
```js
import BigNumber from './BigNumber';
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
<SuperChart type="word-cloud" xxx={...} />
```
There is an ongoing work for plugin system in #5882. Please see the PR for more
details.
[ Full content available at:
https://github.com/apache/incubator-superset/issues/5692 ]
This message was relayed via gitbox.apache.org for [email protected]
