This repository was archived by the owner on Dec 10, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 272
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* scaffold * resolve dependency issues * use d3 v4 * - Update peer dependencies - Getting src to build * Type word cloud * Add tests for transformProps * Update and simplify d3-cloud typing as the fix we've been waiting was merged. * resolve all tests * update unit tests * fix unit test * update readme
- Loading branch information
Showing
21 changed files
with
321 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| ## @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: {...}, | ||
| }, | ||
| }} | ||
| /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| { | ||
| "name": "@superset-ui/plugin-chart-word-cloud", | ||
| "version": "0.0.0", | ||
| "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" | ||
| }, | ||
| "devDependencies": { | ||
| "@superset-ui/chart": "^0.9.x", | ||
| "@superset-ui/color": "^0.9.x", | ||
| "@superset-ui/number-format": "^0.9.x", | ||
| "@superset-ui/time-format": "^0.9.x", | ||
| "@superset-ui/translation": "^0.9.x" | ||
| }, | ||
| "peerDependencies": { | ||
| "@superset-ui/chart": "^0.9.x", | ||
| "@superset-ui/color": "^0.9.x", | ||
| "@superset-ui/number-format": "^0.9.x", | ||
| "@superset-ui/time-format": "^0.9.x", | ||
| "@superset-ui/translation": "^0.9.x" | ||
| } | ||
| } |
12 changes: 12 additions & 0 deletions
12
packages/superset-ui-plugin-chart-word-cloud/src/FormData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { FormData as GenericFormData } from '@superset-ui/chart'; | ||
|
|
||
| // FormData specific to the wordcloud viz | ||
| interface WordCloudFormData { | ||
| series: string; | ||
| } | ||
|
|
||
| // FormData for wordcloud contains both common properties of all form data | ||
| // and properties specific to wordcloud vizzes | ||
| type FormData = GenericFormData & WordCloudFormData; | ||
|
|
||
| export default FormData; |
4 changes: 4 additions & 0 deletions
4
packages/superset-ui-plugin-chart-word-cloud/src/ReactWordCloud.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { reactify } from '@superset-ui/chart'; | ||
| import Component, { Props } from './WordCloud'; | ||
|
|
||
| export default reactify<Props>(Component); |
81 changes: 81 additions & 0 deletions
81
packages/superset-ui-plugin-chart-word-cloud/src/WordCloud.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| 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; |
12 changes: 12 additions & 0 deletions
12
packages/superset-ui-plugin-chart-word-cloud/src/buildQuery.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { buildQueryContext } from '@superset-ui/chart'; | ||
| import FormData from './FormData'; | ||
|
|
||
| export default function buildQuery(formData: FormData) { | ||
| // Set the single QueryObject's groupby field with series in formData | ||
| return buildQueryContext(formData, baseQueryObject => [ | ||
| { | ||
| ...baseQueryObject, | ||
| groupby: [formData.series], | ||
| }, | ||
| ]); | ||
| } |
Binary file added
BIN
+23.5 KB
packages/superset-ui-plugin-chart-word-cloud/src/images/thumbnail.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+115 KB
packages/superset-ui-plugin-chart-word-cloud/src/images/thumbnailLarge.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { t } from '@superset-ui/translation'; | ||
| import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; | ||
| import buildQuery from './buildQuery'; | ||
| import FormData from './FormData'; | ||
| 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<FormData> { | ||
| constructor() { | ||
| super({ | ||
| buildQuery, | ||
| loadChart: () => import('./ReactWordCloud.js'), | ||
| metadata, | ||
| transformProps, | ||
| }); | ||
| } | ||
| } |
26 changes: 26 additions & 0 deletions
26
packages/superset-ui-plugin-chart-word-cloud/src/transformProps.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| 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, | ||
| }; | ||
| } |
Oops, something went wrong.