How to use @superset-ui/plugin-chart-word-cloud - 2 common examples

const BIG_NUMBER = bigNumberFormData.viz_type;
const SANKEY = sankeyFormData.viz_type;
const SUNBURST = sunburstFormData.viz_type;
const WORD_CLOUD_LEGACY = wordCloudFormData.viz_type;
const WORD_CLOUD = 'new_word_cloud';

new LegacyBigNumberPlugin().configure({ key: BIG_NUMBER }).register();
// @ts-ignore
new LegacySankeyPlugin().configure({ key: SANKEY }).register();
// @ts-ignore
new LegacySunburstPlugin().configure({ key: SUNBURST }).register();
// @ts-ignore
new LegacyWordCloudPlugin().configure({ key: WORD_CLOUD_LEGACY }).register();
// @ts-ignore
new WordCloudPlugin().configure({ key: WORD_CLOUD }).register();

const VIS_TYPES = [BIG_NUMBER, SANKEY, SUNBURST, WORD_CLOUD, WORD_CLOUD_LEGACY];
const FORM_DATA_LOOKUP = {
  [BIG_NUMBER]: bigNumberFormData,
  [SANKEY]: sankeyFormData,
  [SUNBURST]: sunburstFormData,
  [WORD_CLOUD]: { ...wordCloudFormData, viz_type: WORD_CLOUD },
  [WORD_CLOUD_LEGACY]: wordCloudFormData,
};

export default [
  {
    renderStory: () => {
      const host = text('Set Superset App host for CORS request', 'localhost:9000');
      const visType = select('Chart Plugin Type', VIS_TYPES, VIS_TYPES[0]);
      const formData = text('Override formData', JSON.stringify(FORM_DATA_LOOKUP[visType]));

import AirbnbPalettes from '@superset-ui/color/lib/colorSchemes/categorical/airbnb';
import WordCloudChartPlugin from '@superset-ui/plugin-chart-word-cloud/lib';
import { SupersetClient } from '@superset-ui/connection/lib';
import { ChartClient, ChartProps } from '@superset-ui/chart/lib';
import SuperChart from '@superset-ui/chart/lib/components/SuperChart';

SupersetClient.configure({
  host: 'localhost:8080',
  mode: 'cors',
  csrfToken: '',
  credentials: 'include',
  headers: new Headers({
    'X-CSRF-Token': '',
  }),
}).init();
new WordCloudChartPlugin().configure({ key: 'word_cloud' }).register();

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chartProps: undefined,
    };
  }

  componentDidMount() {
    getCategoricalSchemeRegistry()
      .registerValue('bnbColors', AirbnbPalettes[0])
      .setDefaultKey('bnbColors');
    const client = new ChartClient({ client: SupersetClient });
    client.loadChartData({ sliceId: 433 }).then(({ queryData, formData }) => {
      const payload = queryData.json[0];