feat(heatmap): dark mode with theme controls

.github/workflows/ci.yaml

@@ -9,15 +9,17 @@ env:
 
 on:
   push:
-    branches: 
+    branches:
       - master
+      - alpha
       - next
       - '[0-9]+.[0-9]+.[0-9]+'
       - '[0-9]+.[0-9]+.x'
       - '[0-9]+.x'
   pull_request:
     branches:
       - master
+      - alpha
       - next
       - '[0-9]+.[0-9]+.[0-9]+'
       - '[0-9]+.[0-9]+.x'

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,4 +17,20 @@ 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 },
+      );
+    });
+  });
 });

packages/charts/api/charts.api.md

@@ -795,7 +795,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>;
@@ -917,8 +917,11 @@ export interface GroupBySpec extends Spec {
 // @public (undocumented)
 export type GroupId = string;
 
+// 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 {
@@ -937,10 +940,58 @@ 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;
+    // (undocumented)
+    onBrushEnd?: (brushArea: HeatmapBrushEvent) => 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)
+    xScaleType: SeriesScales['xScaleType'];
+    // (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;
     };
@@ -969,10 +1020,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: {
@@ -989,44 +1036,26 @@ 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)
-    onBrushEnd?: (brushArea: HeatmapBrushEvent) => void;
-    // (undocumented)
-    timeZone: string;
     // Warning: (ae-forgotten-export) The symbol "Pixels" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    width: Pixels;
+    maxRowHeight: 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;
@@ -1039,48 +1068,9 @@ 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)
-    xScaleType: SeriesScales['xScaleType'];
-    // (undocumented)
-    xSortPredicate: Predicate;
-    // (undocumented)
-    yAccessor: Accessor | AccessorFn;
-    // (undocumented)
-    ySortPredicate: Predicate;
-}
-
 // @public
 export const HIERARCHY_ROOT_KEY: Key;
 
@@ -2128,6 +2118,8 @@ export interface Theme {
     // (undocumented)
     goal: GoalStyles;
     // (undocumented)
+    heatmap: HeatmapStyle;
+    // (undocumented)
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
@@ -2306,7 +2298,7 @@ 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 {
@@ -2433,11 +2425,10 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 
 // Warnings were encountered during analysis:
 //
-// src/chart_types/heatmap/layout/types/config_types.ts:20:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:51:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:52:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:139:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:140:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
+// src/utils/themes/theme.ts:214:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+// src/utils/themes/theme.ts:215:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)