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

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"

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<WordCloudEncodingConfig>({
-  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<WordCloudEncodingConfig>;

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<WordCloudEncodingConfig>;
+
+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<WordCloudEncodingConfig>({
+    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);

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';
 

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 {

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';
 

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==