feat(heatmap): dark mode with theme controls

.eslintrc.js

@@ -68,7 +68,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/heatmap_stories.test.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { eachTheme } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Heatmap stories', () => {
@@ -16,10 +17,28 @@ describe('Heatmap stories', () => {
       { left: 300, top: 300 },
     );
   });
+
+  eachTheme.describe((_, themeParams) => {
+    it('should render basic heatmap', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/heatmap-alpha--basic&${themeParams}`,
+      );
+    });
+
+    it('should render correct brush area', async () => {
+      await common.expectChartWithDragAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/heatmap-alpha--basic&${themeParams}`,
+        { left: 200, top: 100 },
+        { left: 400, top: 250 },
+      );
+    });
+  });
+
   it('should maximize the label with an unique fontSize', async () => {
     await page.setViewport({ width: 450, height: 600 });
     await common.expectChartAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/heatmap-alpha--categorical');
   });
+
   it('should maximize the label fontSize', async () => {
     await page.setViewport({ width: 420, height: 600 });
     await common.expectChartAtUrlToMatchScreenshot(

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

@@ -83,6 +83,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

@@ -937,7 +937,7 @@ export function getNodeName(node: ArrayNode): string;
 // Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
 //
 // @alpha (undocumented)
-export const Goal: React_2.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
+export const Goal: React_2.FunctionComponent<SpecRequiredProps_9 & SpecOptionalProps_9>;
 
 // @alpha (undocumented)
 export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
@@ -1061,8 +1061,11 @@ export type GroupId = string;
 // @public (undocumented)
 export type GroupKeysOrKeyFn<T> = Array<keyof T> | GroupByKeyFn<T>;
 
+// Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
+//
 // @alpha (undocumented)
-export const Heatmap: React_2.FunctionComponent<Pick<HeatmapSpec, 'id' | 'data' | 'colorScale'> & Partial<Omit<HeatmapSpec, 'chartType' | 'specType' | 'id' | 'data'>>>;
+export const Heatmap: React_2.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
 
 // @alpha (undocumented)
 export interface HeatmapBandsColorScale {
@@ -1081,10 +1084,60 @@ export type HeatmapBrushEvent = {
 };
 
 // @public (undocumented)
-export interface HeatmapConfig {
+export type HeatmapElementEvent = [Cell, SeriesIdentifier];
+
+// @alpha (undocumented)
+export interface HeatmapSpec extends Spec {
+    // (undocumented)
+    chartType: typeof ChartType.Heatmap;
+    // (undocumented)
+    colorScale: HeatmapBandsColorScale;
+    // (undocumented)
+    data: Datum[];
+    // (undocumented)
+    highlightedData?: {
+        x: Array<string | number>;
+        y: Array<string | number>;
+    };
+    // (undocumented)
+    name?: string;
+    // Warning: (ae-forgotten-export) The symbol "HeatmapBrushEvent" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    onBrushEnd?: (brushArea: HeatmapBrushEvent_2) => void;
+    // (undocumented)
+    specType: typeof SpecType.Series;
+    // (undocumented)
+    timeZone: string;
+    // (undocumented)
+    valueAccessor: Accessor | AccessorFn;
+    // (undocumented)
+    valueFormatter: (value: number) => string;
+    // (undocumented)
+    xAccessor: Accessor | AccessorFn;
+    // (undocumented)
+    xAxisLabelFormatter: (value: string | number) => string;
+    // (undocumented)
+    xAxisLabelName: string;
+    // (undocumented)
+    xScale: RasterTimeScale | OrdinalScale | LinearScale;
+    // (undocumented)
+    xSortPredicate: Predicate;
+    // (undocumented)
+    yAccessor: Accessor | AccessorFn;
+    // (undocumented)
+    yAxisLabelFormatter: (value: string | number) => string;
+    // (undocumented)
+    yAxisLabelName: string;
+    // (undocumented)
+    ySortPredicate: Predicate;
+}
+
+// @public (undocumented)
+export interface HeatmapStyle {
     brushArea: {
         visible: boolean;
-        fill: Color;
+        fill?: Color;
         stroke: Color;
         strokeWidth: number;
     };
@@ -1113,10 +1166,6 @@ export interface HeatmapConfig {
             stroke: Color;
         };
     };
-    // Warning: (ae-forgotten-export) The symbol "FontFamily" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    fontFamily: FontFamily;
     // (undocumented)
     grid: {
         cellWidth: {
@@ -1133,40 +1182,24 @@ export interface HeatmapConfig {
         };
     };
     // (undocumented)
-    height: Pixels;
-    // (undocumented)
-    margin: {
-        left: SizeRatio;
-        right: SizeRatio;
-        top: SizeRatio;
-        bottom: SizeRatio;
-    };
-    // (undocumented)
     maxColumnWidth: Pixels;
     // (undocumented)
     maxLegendHeight?: number;
     // (undocumented)
     maxRowHeight: Pixels;
-    // (undocumented)
-    timeZone: string;
-    // (undocumented)
-    width: Pixels;
     // Warning: (ae-forgotten-export) The symbol "Font" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
     xAxisLabel: Font & {
-        name: string;
         fontSize: Pixels;
         width: Pixels | 'auto';
         align: TextAlign;
         baseline: TextBaseline;
         visible: boolean;
         padding: number;
-        formatter: (value: string | number) => string;
     };
     // (undocumented)
     yAxisLabel: Font & {
-        name: string;
         fontSize: Pixels;
         width: Pixels | 'auto' | {
             max: Pixels;
@@ -1179,46 +1212,7 @@ export interface HeatmapConfig {
             top?: number;
             bottom?: number;
         };
-        formatter: (value: string | number) => string;
-    };
-}
-
-// @public (undocumented)
-export type HeatmapElementEvent = [Cell, SeriesIdentifier];
-
-// @alpha (undocumented)
-export interface HeatmapSpec extends Spec {
-    // (undocumented)
-    chartType: typeof ChartType.Heatmap;
-    // (undocumented)
-    colorScale: HeatmapBandsColorScale;
-    // (undocumented)
-    config: RecursivePartial<HeatmapConfig>;
-    // (undocumented)
-    data: Datum[];
-    // (undocumented)
-    highlightedData?: {
-        x: Array<string | number>;
-        y: Array<string | number>;
     };
-    // (undocumented)
-    name?: string;
-    // (undocumented)
-    specType: typeof SpecType.Series;
-    // (undocumented)
-    valueAccessor: Accessor | AccessorFn;
-    // (undocumented)
-    valueFormatter: (value: number) => string;
-    // (undocumented)
-    xAccessor: Accessor | AccessorFn;
-    // (undocumented)
-    xScale: RasterTimeScale | OrdinalScale | LinearScale;
-    // (undocumented)
-    xSortPredicate: Predicate;
-    // (undocumented)
-    yAccessor: Accessor | AccessorFn;
-    // (undocumented)
-    ySortPredicate: Predicate;
 }
 
 // @public
@@ -2119,9 +2113,6 @@ export interface SimplePadding {
     outer: number;
 }
 
-// @public (undocumented)
-export type SizeRatio = Ratio;
-
 // @alpha (undocumented)
 export const SmallMultiples: React_2.FunctionComponent<SmallMultiplesProps>;
 
@@ -2213,11 +2204,6 @@ export interface StrokeStyle<C = Color> {
     strokeWidth: number;
 }
 
-// Warning: (ae-forgotten-export) The symbol "TEXT_ALIGNS" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export type TextAlign = typeof TEXT_ALIGNS[number];
-
 // @public
 export interface TextAlignment {
     // (undocumented)
@@ -2226,11 +2212,6 @@ export interface TextAlignment {
     vertical: VerticalAlignment;
 }
 
-// Warning: (ae-forgotten-export) The symbol "TEXT_BASELINE" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export type TextBaseline = typeof TEXT_BASELINE[number];
-
 // @public
 export interface TextOffset {
     reference: 'global' | 'local';
@@ -2315,6 +2296,8 @@ export interface Theme {
     // (undocumented)
     goal: GoalStyles;
     // (undocumented)
+    heatmap: HeatmapStyle;
+    // (undocumented)
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
@@ -2341,9 +2324,6 @@ export type TickStyle = StrokeStyle & Visible & {
 // @public (undocumented)
 export function timeFormatter(format: string): TickFormatter;
 
-// @public (undocumented)
-export type TimeMs = number;
-
 // @public (undocumented)
 export interface TimeScale {
     // (undocumented)
@@ -2499,52 +2479,24 @@ export type WeightFn = $Values<typeof WeightFn>;
 // Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
 //
 // @alpha (undocumented)
-export const Wordcloud: React_2.FunctionComponent<SpecRequiredProps_9 & SpecOptionalProps_9>;
+export const Wordcloud: React_2.FunctionComponent<SpecRequiredProps_10 & SpecOptionalProps_10>;
 
 // @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;
@@ -2565,8 +2517,6 @@ export interface WordcloudSpec extends Spec {
     // (undocumented)
     padding: number;
     // (undocumented)
-    specType: typeof SpecType.Series;
-    // (undocumented)
     spiral: string;
     // (undocumented)
     startAngle: number;
@@ -2623,6 +2573,12 @@ export interface YDomainBase {
 // @public (undocumented)
 export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 
+// Warnings were encountered during analysis:
+//
+// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
+// src/utils/themes/theme.ts:216:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```