mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
refactor: Migrate word cloud to superset-ui-plugins (#110)
refactor: Migrate word cloud to superset-ui-plugins
This commit is contained in:
Krist Wongsuphasawat
Yongjie Zhao
parent
0332e8d602
commit
8fe9e2f2cb
@ -21,7 +21,6 @@ applications that leverage a Superset backend :chart_with_upwards_trend:
|
||||
| [@superset-ui/number-format](https://github.com/apache-superset/superset-ui/tree/master/packages/superset-ui-number-format) | [](https://img.shields.io/npm/v/@superset-ui/number-format.svg?style=flat-square) |
|
||||
| [@superset-ui/time-format](https://github.com/apache-superset/superset-ui/tree/master/packages/superset-ui-time-format) | [](https://img.shields.io/npm/v/@superset-ui/time-format.svg?style=flat-square) |
|
||||
| [@superset-ui/translation](https://github.com/apache-superset/superset-ui/tree/master/packages/superset-ui-translation) | [](https://img.shields.io/npm/v/@superset-ui/translation.svg?style=flat-square) |
|
||||
| [@superset-ui/plugin-chart-word-cloud](https://github.com/apache-superset/superset-ui/tree/master/packages/superset-ui-plugin-chart-word-cloud) | [](https://img.shields.io/npm/v/@superset-ui/plugin-chart-word-cloud.svg?style=flat-square) |
|
||||
|
||||
#### Coming :soon:
|
||||
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
## @superset-ui/plugin-chart-word-cloud
|
||||
|
||||
[](https://img.shields.io/npm/v/@superset-ui/plugin-chart-word-cloud.svg?style=flat-square)
|
||||
[](https://david-dm.org/apache-superset/superset-ui?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-legacy/?selectedKind=plugin-chart-word-cloud) for more details.
|
||||
|
||||
```js
|
||||
<SuperChart
|
||||
chartType="word-cloud"
|
||||
chartProps={{
|
||||
width: 600,
|
||||
height: 600,
|
||||
formData: {...},
|
||||
payload: {
|
||||
data: {...},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "@superset-ui/plugin-chart-word-cloud",
|
||||
"version": "0.9.5",
|
||||
"description": "Superset UI plugin-chart-word-cloud",
|
||||
"sideEffects": false,
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
"files": [
|
||||
"esm",
|
||||
"lib"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/apache-superset/superset-ui.git"
|
||||
},
|
||||
"keywords": [
|
||||
"superset"
|
||||
],
|
||||
"author": "Superset",
|
||||
"license": "Apache-2.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/apache-superset/superset-ui/issues"
|
||||
},
|
||||
"homepage": "https://github.com/apache-superset/superset-ui#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^1.2.4",
|
||||
"@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": "^2.1.2",
|
||||
"d3-selection": "^1.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@superset-ui/chart": "^0.9.x",
|
||||
"@superset-ui/color": "^0.9.x",
|
||||
"@superset-ui/translation": "^0.9.x"
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
import { reactify } from '@superset-ui/chart';
|
||||
import Component, { Props } from './WordCloud';
|
||||
|
||||
export default reactify<Props>(Component);
|
||||
@ -1,81 +0,0 @@
|
||||
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';
|
||||
|
||||
const ROTATION = {
|
||||
flat: () => 0,
|
||||
/* eslint-disable-next-line no-magic-numbers */
|
||||
random: () => Math.floor(Math.random() * 6 - 3) * 30,
|
||||
/* eslint-disable-next-line no-magic-numbers */
|
||||
square: () => Math.floor(Math.random() * 2) * 90,
|
||||
};
|
||||
|
||||
interface Datum {
|
||||
size: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
colorScheme: string;
|
||||
data: Datum[];
|
||||
height: number;
|
||||
rotation: 'flat' | 'random' | 'square';
|
||||
sizeRange: number[];
|
||||
width: number;
|
||||
}
|
||||
|
||||
function WordCloud(element: Element, props: Props) {
|
||||
const { data, width, height, rotation, sizeRange, colorScheme } = props;
|
||||
|
||||
const chart = d3Select(element);
|
||||
const size: [number, number] = [width, height];
|
||||
const rotationFn = ROTATION[rotation] || ROTATION.flat;
|
||||
|
||||
const scale = scaleLinear()
|
||||
.range(sizeRange)
|
||||
.domain(d3Extent(data, d => d.size) as [number, number]);
|
||||
|
||||
const layout = cloudLayout<Datum>()
|
||||
.size(size)
|
||||
.words(data)
|
||||
/* eslint-disable-next-line no-magic-numbers */
|
||||
.padding(5)
|
||||
.rotate(rotationFn)
|
||||
.font('Helvetica')
|
||||
.fontWeight('bold')
|
||||
.fontSize(d => scale(d.size));
|
||||
|
||||
const colorFn = CategoricalColorNamespace.getScale(colorScheme);
|
||||
|
||||
function draw(words: d3.layout.cloud.Word[]) {
|
||||
chart.selectAll('*').remove();
|
||||
|
||||
const [w, h] = layout.size();
|
||||
|
||||
chart
|
||||
.append('svg')
|
||||
.attr('width', w)
|
||||
.attr('height', h)
|
||||
.append('g')
|
||||
.attr('transform', `translate(${w / 2},${h / 2})`)
|
||||
.selectAll('text')
|
||||
.data(words)
|
||||
.enter()
|
||||
.append('text')
|
||||
.style('font-size', d => `${d.size}px`)
|
||||
.style('font-weight', 'bold')
|
||||
.style('font-family', 'Helvetica')
|
||||
.style('fill', d => colorFn(d.text))
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('transform', d => `translate(${d.x}, ${d.y}) rotate(${d.rotate})`)
|
||||
.text(d => d.text!);
|
||||
}
|
||||
|
||||
layout.on('end', draw).start();
|
||||
}
|
||||
|
||||
WordCloud.displayName = 'WordCloud';
|
||||
|
||||
export default WordCloud;
|
||||
@ -1,9 +0,0 @@
|
||||
import { ChartFormData } from '@superset-ui/chart';
|
||||
|
||||
// FormData for wordcloud contains both common properties of all form data
|
||||
// and properties specific to wordcloud vizzes
|
||||
type WordCloudFormData = ChartFormData & {
|
||||
series: string;
|
||||
};
|
||||
|
||||
export default WordCloudFormData;
|
||||
@ -1,12 +0,0 @@
|
||||
import { buildQueryContext } from '@superset-ui/chart';
|
||||
import WordCloudFormData from './WordCloudFormData';
|
||||
|
||||
export default function buildQuery(formData: WordCloudFormData) {
|
||||
// Set the single QueryObject's groupby field with series in formData
|
||||
return buildQueryContext(formData, baseQueryObject => [
|
||||
{
|
||||
...baseQueryObject,
|
||||
groupby: [formData.series],
|
||||
},
|
||||
]);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB |
@ -1,24 +0,0 @@
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
|
||||
import buildQuery from './buildQuery';
|
||||
import WordCloudFormData from './WordCloudFormData';
|
||||
import transformProps from './transformProps';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
credits: ['https://github.com/jasondavies/d3-cloud'],
|
||||
description: '',
|
||||
name: t('Word Cloud'),
|
||||
thumbnail,
|
||||
});
|
||||
|
||||
export default class WordCloudChartPlugin extends ChartPlugin<WordCloudFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
buildQuery,
|
||||
loadChart: () => import('./ReactWordCloud.js'),
|
||||
metadata,
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { ChartProps } from '@superset-ui/chart';
|
||||
|
||||
function transformData(data: ChartProps['payload'][], formData: ChartProps['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: ChartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const { colorScheme, rotation, sizeTo, sizeFrom } = formData;
|
||||
|
||||
return {
|
||||
colorScheme,
|
||||
data: transformData(payload.data, formData),
|
||||
height,
|
||||
rotation,
|
||||
sizeRange: [sizeFrom, sizeTo],
|
||||
width,
|
||||
};
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
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']);
|
||||
});
|
||||
});
|
||||
@ -1,5 +0,0 @@
|
||||
describe('My Test', () => {
|
||||
it('tests something', () => {
|
||||
expect(1).toEqual(1);
|
||||
});
|
||||
});
|
||||
@ -1,34 +0,0 @@
|
||||
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,
|
||||
payload: {
|
||||
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' }],
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1 +0,0 @@
|
||||
declare module '*.png';
|
||||
Loading…
Reference in New Issue
Block a user