docs: 'hello world' visualization plugin

packages/superset-ui-plugin-chart-hello-world/README.md

@@ -0,0 +1,32 @@
+## @superset-ui/plugin-chart-hello-world
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-word-cloud.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/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-plugin-chart-word-cloud&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-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: {...},
+  }}
+/>
+```

packages/superset-ui-plugin-chart-hello-world/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@superset-ui/plugin-chart-hello-world",
+  "version": "0.11.0",
+  "description": "Superset Chart Plugin - Word Cloud",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui-plugins.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui-plugins/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui-plugins#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@types/d3-array": "^2.0.0",
+    "@types/d3-cloud": "^1.2.1",
+    "@types/d3-scale": "^2.0.2",
+    "@types/d3-selection": "^1.3.4",
+    "d3-array": "^2.0.2",
+    "d3-cloud": "^1.2.5",
+    "d3-scale": "^3.0.1",
+    "d3-selection": "^1.3.2",
+    "prop-types": "^15.6.2"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.12.0",
+    "@superset-ui/color": "^0.12.0",
+    "@superset-ui/query": "^0.12.0",
+    "@superset-ui/translation": "^0.12.0"
+  }
+}

packages/superset-ui-plugin-chart-hello-world/src/HelloWorld.js

@@ -0,0 +1,28 @@
+import { extent as d3Extent } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { select as d3Select } from 'd3-selection';
+import cloudLayout from 'd3-cloud';
+import { CategoricalColorNamespace } from '@superset-ui/color';
+
+function HelloWorld(element, props) {
+  const { data, width, height, formData } = props;
+
+  const container = d3Select(element);
+  container.select('*').remove();
+  const div = container
+    .append('div')
+    .style('height', height)
+    .style('width', width)
+    .style('overflow', 'auto');
+  div
+    .append('h1')
+    .text('Hello World')
+    .append('h3')
+    .text('props')
+    .append('pre')
+    .text(JSON.stringify(props, null, 2));
+}
+
+HelloWorld.displayName = 'HelloWorld';
+
+export default HelloWorld;

packages/superset-ui-plugin-chart-hello-world/src/ReactHelloWorld.js

@@ -0,0 +1,4 @@
+import { reactify } from '@superset-ui/chart';
+import Component, { Props } from './HelloWorld';
+
+export default reactify(Component);

packages/superset-ui-plugin-chart-hello-world/src/buildQuery.js

@@ -0,0 +1,14 @@
+import { buildQueryContext } from '@superset-ui/query';
+
+export default function buildQuery(formData) {
+  // Set the single QueryObject's groupby field with series in formData
+  return buildQueryContext(formData, baseQueryObject => {
+    return [
+      {
+        ...baseQueryObject,
+        groupby: [formData.series],
+        metrics: [formData.metric],
+      },
+    ];
+  });
+}

packages/superset-ui-plugin-chart-hello-world/src/index.js

@@ -0,0 +1,88 @@
+import { t } from '@superset-ui/translation';
+import { ChartMetadata, ChartPlugin, ChartControlPanel } from '@superset-ui/chart';
+import buildQuery from './buildQuery';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+
+const metadata = new ChartMetadata({
+  credits: null,
+  description: '',
+  name: t('Hello World!'),
+  thumbnail,
+});
+
+const controlPanel = {
+  controlPanelSections: [
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [['series'], ['metric'], ['adhoc_filters']],
+    },
+    {
+      label: t('Options'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'size_from',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              label: t('Minimum Font Size'),
+              renderTrigger: true,
+              default: 10,
+              description: t('Font size for the smallest value in the list'),
+            },
+          },
+          {
+            name: 'size_to',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              label: t('Maximum Font Size'),
+              renderTrigger: true,
+              default: 70,
+              description: t('Font size for the biggest value in the list'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'rotation',
+            config: {
+              type: 'SelectControl',
+              label: t('Word Rotation'),
+              choices: [['random', 'random'], ['flat', 'flat'], ['square', 'square']],
+              renderTrigger: true,
+              default: 'square',
+              clearable: false,
+              description: t('Rotation to apply to words in the cloud'),
+            },
+          },
+        ],
+        ['color_scheme', 'label_colors'],
+      ],
+    },
+  ],
+  controlOverrides: {
+    series: {
+      clearable: false,
+    },
+    row_limit: {
+      default: 100,
+    },
+  },
+};
+
+export default class WordCloudChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('./ReactHelloWorld'),
+      metadata,
+      useLegacyApi: false,
+      transformProps,
+    });
+  }
+}

packages/superset-ui-plugin-chart-hello-world/src/transformProps.js

@@ -0,0 +1,23 @@
+import { ChartProps } from '@superset-ui/chart';
+
+function transformData(data, formData) {
+  const { metric, series } = formData;
+
+  const transformedData = data.map(datum => ({
+    size: datum[metric.label || metric],
+    text: datum[series],
+  }));
+
+  return transformedData;
+}
+
+export default function transformProps(chartProps) {
+  const { width, height, formData, queryData } = chartProps;
+
+  return {
+    data: transformData(queryData.data, formData),
+    formData,
+    height,
+    width,
+  };
+}

packages/superset-ui-plugin-chart-hello-world/test/buildQuery.test.ts

@@ -0,0 +1,17 @@
+import 'babel-polyfill';
+import buildQuery from '../src/buildQuery';
+
+describe('WordCloud buildQuery', () => {
+  const formData = {
+    datasource: '5__table',
+    granularity_sqla: 'ds',
+    series: 'foo',
+    viz_type: 'word_cloud',
+  };
+
+  it('should build groupby with series in form data', () => {
+    const queryContext = buildQuery(formData);
+    const [query] = queryContext.queries;
+    expect(query.groupby).toEqual(['foo']);
+  });
+});

packages/superset-ui-plugin-chart-hello-world/test/index.test.ts

@@ -0,0 +1,5 @@
+describe('My Test', () => {
+  it('tests something', () => {
+    expect(1).toEqual(1);
+  });
+});

packages/superset-ui-plugin-chart-hello-world/test/transformProps.test.ts

@@ -0,0 +1,35 @@
+import 'babel-polyfill';
+import { ChartProps } from '@superset-ui/chart';
+import transformProps from '../src/transformProps';
+
+describe('WordCloud tranformProps', () => {
+  const formData = {
+    colorScheme: 'bnbColors',
+    datasource: '3__table',
+    granularity_sqla: 'ds',
+    metric: 'sum__num',
+    rotation: 'square',
+    series: 'name',
+    sizeFrom: 10,
+    sizeTo: 70,
+  };
+  const chartProps = new ChartProps({
+    formData,
+    width: 800,
+    height: 600,
+    queryData: {
+      data: [{ name: 'Hulk', sum__num: 1 }],
+    },
+  });
+
+  it('should tranform chart props for word cloud viz', () => {
+    expect(transformProps(chartProps)).toEqual({
+      colorScheme: 'bnbColors',
+      width: 800,
+      height: 600,
+      rotation: 'square',
+      sizeRange: [10, 70],
+      data: [{ size: 1, text: 'Hulk' }],
+    });
+  });
+});

packages/superset-ui-plugin-chart-hello-world/types/external.d.ts

@@ -0,0 +1 @@
+declare module '*.png';