The directory structure for each plugin will look like this
```
MyChart
|--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?
### buildQuery.js
```js
export default function buildQuery(formData) {
return queryObject;
}
```
### 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`
### transformData.js
Transform props that are based on `payload`. 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;
}
```
### metadata.js
Description of this chart
```js
export default new ChartMetadata({
key: 'word-cloud',
name: 'WordCloud',
description: 'Lorem Ipsum',
thumbnail: 'WordCloud.jpg',
});
```
### adaptor.jsx
Shim to make it work with current app. **This will be deleted** after we
completely move to the plugin system. The logic here will be handled by
`SuperChart`
```js
export default function adaptor(slice, payload, setControlValue) {
ReactDOM.render(
<MyChart {...transformProps({ slice, payload, setControlValue })} />,
document.querySelector(slice.selector);
);
}
```
### 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]
