refactor(wordcloud): cleanup config, types and theming (elastic#1358)

BREAKING CHANGES:

The `WorkcloudSpec.config` prop is removed as it was not used other than assigning `margins` even with erroneous properties. All wordcloud properties are now driven from the `WorkcloudSpec` directly. Since the wordcloud is unique in that it's styles are driven by the data I think keeping them on the spec is more favorable than moving them to the theme as they would be overridden more frequently. This does not provide a themed instance of the chart type but this could possibly come from `.brightening` the provided colors of the text elements.

Changes include

- `WorkcloudSpec.margin` deleted in favor of `Theme.chartMargins`.
- `WorkcloudConfigs` is removed in favor of singular `WordcloudViewModel` type which is extended to form `WordcloudSpec`.

.eslintrc.js

@@ -67,7 +67,7 @@ module.exports = {
     '@typescript-eslint/no-unsafe-return': 0,
     '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/restrict-plus-operands': 0, // rule is broken
-    '@typescript-eslint/no-unsafe-call': 1,
+    '@typescript-eslint/no-unsafe-call': 0, // seems to have issues with default import types
     '@typescript-eslint/unbound-method': 1,
     '@typescript-eslint/no-redeclare': 'off', // we use to declare enum type and object with the same name
     '@typescript-eslint/no-shadow': 'off', // we use shadow mostly within the canvas renderer function when we need a new context

integration/tests/wordcloud_stories.test.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { TEMPLATES } from '../../storybook/stories/wordcloud/1_wordcloud.story';
+import { common } from '../page_objects';
+
+describe('Scales stories', () => {
+  it.each(TEMPLATES.filter((t) => t !== 'edit'))('should render %s wordcloud template', async (template) => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      `http://localhost:9001/?path=/story/wordcloud-alpha--simple-wordcloud&knob-template=${template}`,
+    );
+  });
+});

package.json

@@ -82,6 +82,7 @@
     "@types/color": "^3.0.1",
     "@types/core-js": "^2.5.2",
     "@types/d3-array": "^1.2.6",
+    "@types/d3-cloud": "^1.2.5",
     "@types/d3-collection": "^1.0.8",
     "@types/d3-interpolate": "^1.3.1",
     "@types/d3-scale": "^2.1.1",

packages/charts/api/charts.api.md

@@ -2300,49 +2300,21 @@ export type WeightFn = $Values<typeof WeightFn>;
 export const Wordcloud: React_2.FunctionComponent<SpecRequiredProps_9 & SpecOptionalProps_9>;
 
 // @public (undocumented)
-export interface WordcloudConfigs {
-    // (undocumented)
-    count: number;
-    // (undocumented)
-    endAngle: number;
-    // (undocumented)
-    exponent: number;
-    // (undocumented)
-    fontFamily: string;
-    // (undocumented)
-    fontStyle: FontStyle;
-    // (undocumented)
-    fontWeight: number;
-    // (undocumented)
-    height: number;
-    // (undocumented)
-    maxFontSize: number;
-    // (undocumented)
-    minFontSize: number;
-    // (undocumented)
-    padding: number;
-    // (undocumented)
-    spiral: string;
-    // (undocumented)
-    startAngle: number;
+export type WordCloudElementEvent = [WordModel, SeriesIdentifier];
+
+// @alpha (undocumented)
+export interface WordcloudSpec extends Spec, WordcloudViewModel {
     // (undocumented)
-    weightFn: WeightFn;
+    chartType: typeof ChartType.Wordcloud;
     // (undocumented)
-    width: number;
+    specType: typeof SpecType.Series;
 }
 
 // @public (undocumented)
-export type WordCloudElementEvent = [WordModel, SeriesIdentifier];
-
-// @alpha (undocumented)
-export interface WordcloudSpec extends Spec {
+export interface WordcloudViewModel {
     // (undocumented)
     angleCount: number;
     // (undocumented)
-    chartType: typeof ChartType.Wordcloud;
-    // (undocumented)
-    config: RecursivePartial<WordcloudConfigs>;
-    // (undocumented)
     data: WordModel[];
     // (undocumented)
     endAngle: number;
@@ -2363,8 +2335,6 @@ export interface WordcloudSpec extends Spec {
     // (undocumented)
     padding: number;
     // (undocumented)
-    specType: typeof SpecType.Series;
-    // (undocumented)
     spiral: string;
     // (undocumented)
     startAngle: number;

packages/charts/src/chart_types/wordcloud/layout/types/viewmodel_types.ts

@@ -6,13 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { Word as D3Word } from 'd3-cloud';
 import { $Values as Values } from 'utility-types';
 
 import { Color } from '../../../../common/colors';
-import { Pixels, PointObject, Rectangle } from '../../../../common/geometry';
+import { Pixels, PointObject } from '../../../../common/geometry';
 import { FontStyle } from '../../../../common/text_utils';
-import { config } from '../config/config';
-import { Config } from './config_types';
 
 /** @public */
 export interface WordModel {
@@ -32,49 +31,26 @@ export const WeightFn = Object.freeze({
 /** @public */
 export type WeightFn = Values<typeof WeightFn>;
 
-/** @internal */
-export interface Word extends Rectangle {
+/**
+ * Word properties extends `D3Word` except for explicitly defined values.
+ *
+ * `D3Word` values are added datum via d3TagCloud, but may be undefined
+ * @internal
+ */
+export interface Word extends D3Word {
+  datum: WordModel;
+  text: string;
   color: string;
-  font: string;
   fontFamily: string;
-  fontWeight: number;
-  hasText: boolean;
-  height: number;
-  padding: number;
-  rotate: number;
-  size: number;
   style: string;
-  text: string;
-  weight: number;
-  x: number;
-  xoff: number;
-  y: number;
-  yoff: number;
-  datum: WordModel;
-}
-
-/** @public */
-export interface Configs {
-  count: number;
-  endAngle: number;
-  exponent: number;
-  fontFamily: string;
-  fontStyle: FontStyle;
   fontWeight: number;
-  height: number;
-  maxFontSize: number;
-  minFontSize: number;
-  padding: number;
-  spiral: string;
-  startAngle: number;
-  weightFn: WeightFn;
-  width: number;
+  size: number;
 }
 
 /** @public */
 export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void;
 
-/** @internal */
+/** @public */
 export interface WordcloudViewModel {
   startAngle: number;
   endAngle: number;
@@ -90,7 +66,6 @@ export interface WordcloudViewModel {
   data: WordModel[];
   weightFn: WeightFn;
   outOfRoomCallback: OutOfRoomCallback;
-  // specType: string;
 }
 
 /** @internal */
@@ -105,7 +80,6 @@ export type PickFunction = (x: Pixels, y: Pixels) => Array<WordcloudViewModel>;
 
 /** @internal */
 export type ShapeViewModel = {
-  config: Config;
   wordcloudViewModel: WordcloudViewModel;
   chartCenter: PointObject;
   pickQuads: PickFunction;
@@ -141,10 +115,9 @@ export const nullWordcloudViewModel: WordcloudViewModel = {
 };
 
 /** @internal */
-export const nullShapeViewModel = (specifiedConfig?: Config, chartCenter?: PointObject): ShapeViewModel => ({
-  config: specifiedConfig || config,
+export const nullShapeViewModel = (): ShapeViewModel => ({
   wordcloudViewModel: nullWordcloudViewModel,
-  chartCenter: chartCenter || { x: 0, y: 0 },
+  chartCenter: { x: 0, y: 0 },
   pickQuads: () => [],
   specId: 'empty',
 });

packages/charts/src/chart_types/wordcloud/layout/viewmodel/viewmodel.ts

@@ -6,16 +6,17 @@
  * Side Public License, v 1.
  */
 
+import { Dimensions } from '../../../../utils/dimensions';
+import { Theme } from '../../../../utils/themes/theme';
 import { WordcloudSpec } from '../../specs';
-import { Config } from '../types/config_types';
 import { WordcloudViewModel, PickFunction, ShapeViewModel } from '../types/viewmodel_types';
 
 /** @internal */
-export function shapeViewModel(spec: WordcloudSpec, config: Config): ShapeViewModel {
-  const { width, height, margin } = config;
-
-  const innerWidth = width * (1 - Math.min(1, margin.left + margin.right));
-  const innerHeight = height * (1 - Math.min(1, margin.top + margin.bottom));
+export function shapeViewModel(spec: WordcloudSpec, theme: Theme, chartDimensions: Dimensions): ShapeViewModel {
+  const { width, height } = chartDimensions;
+  const { chartMargins: margin } = theme;
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
 
   const chartCenter = {
     x: width * margin.left + innerWidth / 2,
@@ -64,7 +65,6 @@ export function shapeViewModel(spec: WordcloudSpec, config: Config): ShapeViewMo
 
   // combined viewModel
   return {
-    config,
     chartCenter,
     wordcloudViewModel,
     pickQuads,