mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
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
This commit is contained in:
parent
a77029fe4d
commit
72cc39b4e0
@ -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"
|
||||
|
@ -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>;
|
@ -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);
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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==
|
||||
|
Loading…
Reference in New Issue
Block a user