From 72cc39b4e0257b8a5672b66c42029ff0ed9a0b87 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 26 May 2020 21:28:00 -0700 Subject: [PATCH] feat: Word cloud typography update (#518) * feat: adding style package for Emotion support * importing supersetTheme * using theme (directly) * updating encoder with direct font implementation * fixing query bug! * remove groupby * using theme via Emotion for type styles - various TS-driven refactoring * bug: whoops, this file is effectively a duplicate! * cleaning up package paths. * another relative path * nixing debug junk --- .../plugin-chart-word-cloud/package.json | 2 + .../src/chart/Encoder.ts | 28 ------------ .../src/chart/WordCloud.tsx | 44 ++++++++++++++++--- .../src/legacyPlugin/index.ts | 2 +- .../src/legacyPlugin/transformProps.ts | 3 +- .../src/plugin/index.ts | 2 +- .../superset-ui/yarn.lock | 2 +- 7 files changed, 44 insertions(+), 39 deletions(-) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json index 206235e32a..4067bafa63 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json @@ -33,12 +33,14 @@ "@types/react": "^16.3.0", "d3-cloud": "^1.2.5", "d3-scale": "^3.0.1", + "emotion-theming": "^10.0.27", "encodable": "^0.3.3" }, "peerDependencies": { "@superset-ui/chart": "^0.13.0", "@superset-ui/color": "^0.13.0", "@superset-ui/query": "^0.13.0", + "@superset-ui/style": "^0.13.11", "@superset-ui/translation": "^0.13.0", "@superset-ui/validator": "^0.13.0", "react": "^16.3.0" diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/Encoder.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/Encoder.ts index db350938a8..e69de29bb2 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/Encoder.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/Encoder.ts @@ -1,28 +0,0 @@ -import { createEncoderFactory, DeriveEncoding } from 'encodable'; - -type WordCloudEncodingConfig = { - color: ['Color', string]; - fontFamily: ['Category', string]; - fontSize: ['Numeric', number]; - fontWeight: ['Category', string | number]; - text: ['Text', string]; -}; - -export const wordCloudEncoderFactory = createEncoderFactory({ - channelTypes: { - color: 'Color', - fontFamily: 'Category', - fontSize: 'Numeric', - fontWeight: 'Category', - text: 'Text', - }, - defaultEncoding: { - color: { value: 'black' }, - fontFamily: { value: 'Helvetica' }, - fontSize: { value: 20 }, - fontWeight: { value: 'bold' }, - text: { value: '' }, - }, -}); - -export type WordCloudEncoding = DeriveEncoding; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx index f6a5284a62..04f7488822 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx @@ -1,7 +1,8 @@ import React from 'react'; import cloudLayout, { Word } from 'd3-cloud'; -import { PlainObject } from 'encodable'; -import { WordCloudEncoding, wordCloudEncoderFactory } from './Encoder'; +import { PlainObject, createEncoderFactory, DeriveEncoding } from 'encodable'; +import { SupersetThemeProps } from '@superset-ui/style'; +import { withTheme } from 'emotion-theming'; export const ROTATION = { flat: () => 0, @@ -12,6 +13,16 @@ export const ROTATION = { export type RotationType = keyof typeof ROTATION; +export type WordCloudEncoding = DeriveEncoding; + +type WordCloudEncodingConfig = { + color: ['Color', string]; + fontFamily: ['Category', string]; + fontSize: ['Numeric', number]; + fontWeight: ['Category', string | number]; + text: ['Text', string]; +}; + /** * These props should be stored when saving the chart. */ @@ -35,8 +46,8 @@ const defaultProps = { rotation: 'flat', }; -export default class WordCloud extends React.PureComponent< - WordCloudProps & typeof defaultProps, +class WordCloud extends React.PureComponent< + WordCloudProps & typeof defaultProps & SupersetThemeProps, State > { // Cannot name it isMounted because of conflict @@ -47,7 +58,24 @@ export default class WordCloud extends React.PureComponent< words: [], }; - createEncoder = wordCloudEncoderFactory.createSelector(); + wordCloudEncoderFactory = createEncoderFactory({ + channelTypes: { + color: 'Color', + fontFamily: 'Category', + fontSize: 'Numeric', + fontWeight: 'Category', + text: 'Text', + }, + defaultEncoding: { + color: { value: 'black' }, + fontFamily: { value: this.props.theme.typography.families.sansSerif }, + fontSize: { value: 20 }, + fontWeight: { value: 'bold' }, + text: { value: '' }, + }, + }); + + createEncoder = this.wordCloudEncoderFactory.createSelector(); static defaultProps = defaultProps; @@ -93,7 +121,9 @@ export default class WordCloud extends React.PureComponent< .padding(5) .rotate(ROTATION[rotation] || ROTATION.flat) .text(d => encoder.channels.text.getValueFromDatum(d)) - .font(d => encoder.channels.fontFamily.encodeDatum(d, 'Helvetica')) + .font(d => + encoder.channels.fontFamily.encodeDatum(d, this.props.theme.typography.families.sansSerif), + ) .fontWeight(d => encoder.channels.fontWeight.encodeDatum(d, 'normal')) .fontSize(d => encoder.channels.fontSize.encodeDatum(d, 0)) .on('end', this.setWords) @@ -128,3 +158,5 @@ export default class WordCloud extends React.PureComponent< ); } } + +export default withTheme(WordCloud); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/index.ts index 48f23996d5..d8a66f0083 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/index.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/index.ts @@ -1,7 +1,7 @@ import { t } from '@superset-ui/translation'; import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; -import buildQuery from '../plugin/buildQuery'; import transformProps from './transformProps'; +import buildQuery from '../plugin/buildQuery'; import thumbnail from '../images/thumbnail.png'; import { LegacyWordCloudFormData } from './types'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts index 088dc14897..b0648303ad 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts @@ -1,6 +1,5 @@ import { ChartProps } from '@superset-ui/chart'; -import { WordCloudEncoding } from '../chart/Encoder'; -import { WordCloudProps } from '../chart/WordCloud'; +import { WordCloudProps, WordCloudEncoding } from '../chart/WordCloud'; import { LegacyWordCloudFormData } from './types'; function getMetricLabel(metric: LegacyWordCloudFormData['metric']): string | undefined { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/plugin/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/plugin/index.ts index 3da1f9e747..5fbed8b869 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/plugin/index.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/plugin/index.ts @@ -1,8 +1,8 @@ import { t } from '@superset-ui/translation'; import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; +import transformProps from '../legacyPlugin/transformProps'; import buildQuery from './buildQuery'; import { WordCloudFormData } from '../types'; -import transformProps from '../legacyPlugin/transformProps'; import thumbnail from '../images/thumbnail.png'; import controlPanel from './controlPanel'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock b/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock index 89532aa751..ff21f6f055 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock +++ b/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock @@ -8332,7 +8332,7 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-theming@^10.0.19: +emotion-theming@^10.0.19, emotion-theming@^10.0.27: version "10.0.27" resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==