fix(partition): small multiples panel title color (#1329)

Fix the small multiple panel title color for partition charts in dark mode. It now correctly uses the `axisPanelTitle` style for that. fix #1327
elastic · Aug 24, 2021 · 8762d5e · 8762d5e
1 parent bbc6c65
commit 8762d5e
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 117 deletions.
diff --git a/integration/server/generate/vrt_page_template.js b/integration/server/generate/vrt_page_template.js
@@ -44,13 +44,13 @@ ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElemen
 function pageTemplate(imports, routes, urls) {
   return `
 import React, { Suspense } from 'react';
-import { ThemeProvider, BackgroundProvider } from '../../storybook/use_base_theme';
+import { ThemeIdProvider, BackgroundIdProvider } from '../../storybook/use_base_theme';
 import { useGlobalsParameters } from '../server/mocks/use_global_parameters';
 
 export function VRTPage() {
   const {
-    themeName,
-    backgroundColor,
+    themeId,
+    backgroundId,
     setParams,
   } = useGlobalsParameters();
   const urlParams = new URL(window.location.toString()).searchParams;
@@ -70,13 +70,13 @@ export function VRTPage() {
     </>);
   }
   return (
-    <ThemeProvider value={themeName as any}>
-      <BackgroundProvider value={backgroundColor}>
+    <ThemeIdProvider value={themeId as any}>
+      <BackgroundIdProvider value={backgroundId}>
         <Suspense fallback={<div>Loading...</div>}>
           ${routes.join('\n          ')}
         </Suspense>
-      </BackgroundProvider>
-    </ThemeProvider>
+      </BackgroundIdProvider>
+    </ThemeIdProvider>
   );
 }
 

diff --git a/integration/server/mocks/use_global_parameters.ts b/integration/server/mocks/use_global_parameters.ts
@@ -32,7 +32,7 @@ const getThemeAllClasses = ({ themes }: Required<ThemeParameter>['theme']) =>
 const getTargetSelector = ({ selector }: Required<ThemeParameter>['theme']) =>
   (Array.isArray(selector) ? selector.join(', ') : selector) ?? 'body';
 
-function setTheme(themeId: string) {
+function applyThemeCSS(themeId: string) {
   const theme = themeParams.themes.find((t) => t.id === themeId);
   const selector = getTargetSelector(themeParams);
   const targets = selector ? document.querySelectorAll<HTMLElement>(selector) : null;
@@ -48,33 +48,25 @@ function setTheme(themeId: string) {
   }
 }
 
-function getBackground(backgroundId?: string) {
-  if (!backgroundId) return '';
-
-  const option = (backgroundParams.options ?? []).find(({ id }) => id === backgroundId);
-
-  return option ? option.background ?? option.color : '';
-}
-
 export function useGlobalsParameters() {
-  const [themeName, setThemeName] = useState<string>(ThemeId.Light);
-  const [backgroundColor, setBackgroundColor] = useState<string | undefined>('white');
+  const [themeId, setThemeId] = useState<string>(ThemeId.Light);
+  const [backgroundId, setBackgroundId] = useState<string | undefined>('white');
 
   /**
    * Handles setting global context values. Stub for theme and background addons
    */
   function setParams(params: URLSearchParams, parameters?: Parameters) {
     const globals = getGlobalParams(params) as Globals;
-    const themeId = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.Light;
-    const backgroundId = globals.background ?? parameters?.background?.default ?? backgroundParams.default;
-    setThemeName(themeId);
-    setTheme(themeId);
-    setBackgroundColor(getBackground(backgroundId));
+    const backgroundIdFromParams = globals.background ?? parameters?.background?.default ?? backgroundParams.default;
+    setBackgroundId(backgroundIdFromParams);
+    const themeIdFromParams = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.Light;
+    setThemeId(themeIdFromParams);
+    applyThemeCSS(themeIdFromParams);
   }
 
   return {
-    themeName,
-    backgroundColor,
+    themeId,
+    backgroundId,
     setParams,
   };
 }

diff --git a/...r-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png b/...r-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png
diff --git a/...s__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png b/...s__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png
diff --git a/integration/tests/dark_mode.test.ts b/integration/tests/dark_mode.test.ts
@@ -0,0 +1,17 @@
+/*
+ * 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 { common } from '../page_objects/common';
+
+describe('Small multiples - dark mode', () => {
+  it('renders panel titles', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      `http://localhost:9001/?path=/story/small-multiples-alpha--sunbursts&globals=theme:dark;background:black`,
+    );
+  });
+});
diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
@@ -101,7 +101,6 @@ export type PickFunction = (x: Pixels, y: Pixels, focus: ContinuousDomainFocus)
 
 /** @internal */
 export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors {
-  panelTitle: string;
   smAccessorValue: number | string;
   partitionLayout: PartitionLayout;
   top: SizeRatio;
@@ -114,8 +113,13 @@ export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors
   innerColumnIndex: number;
   marginLeftPx: Pixels;
   marginTopPx: Pixels;
-  panelInnerWidth: Pixels;
-  panelInnerHeight: Pixels;
+  panel: {
+    title: string;
+    innerWidth: Pixels;
+    innerHeight: Pixels;
+    fontFace: Font;
+    fontSize: number;
+  };
 }
 
 /** @internal */
@@ -145,7 +149,6 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou
   index: 0,
   innerIndex: 0,
   smAccessorValue: '',
-  panelTitle: '',
   top: 0,
   left: 0,
   width: 0,
@@ -156,9 +159,21 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou
   innerColumnIndex: 0,
   marginLeftPx: 0,
   marginTopPx: 0,
-  panelInnerWidth: 0,
-  panelInnerHeight: 0,
   partitionLayout,
+  panel: {
+    title: '',
+    innerWidth: 0,
+    innerHeight: 0,
+    fontSize: 10,
+    fontFace: {
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      fontFamily: 'sans-serif',
+      fontStyle: 'normal',
+      textOpacity: 1,
+      textColor: 'black',
+    },
+  },
 });
 
 /** @internal */

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts
@@ -15,13 +15,14 @@ import { config as defaultConfig, VALUE_GETTERS } from '../config';
 import { Config } from '../types/config_types';
 import {
   nullShapeViewModel,
+  PartitionSmallMultiplesModel,
   RawTextGetter,
   ShapeTreeNode,
   ShapeViewModel,
   ValueGetter,
 } from '../types/viewmodel_types';
 import { DEPTH_KEY, HierarchyOfArrays } from '../utils/group_by_rollup';
-import { PanelPlacement, shapeViewModel } from './viewmodel';
+import { shapeViewModel } from './viewmodel';
 
 function rawTextGetter(layers: Layer[]): RawTextGetter {
   return (node: ShapeTreeNode) => {
@@ -42,7 +43,7 @@ export function getShapeViewModel(
   tree: HierarchyOfArrays,
   containerBackgroundColor: Color,
   smallMultiplesStyle: SmallMultiplesStyle,
-  panelPlacement: PanelPlacement,
+  panelModel: PartitionSmallMultiplesModel,
 ): ShapeViewModel {
   const { width, height } = parentDimensions;
   const { layers, topGroove, config: specConfig } = partitionSpec;
@@ -67,6 +68,6 @@ export function getShapeViewModel(
     topGroove,
     containerBackgroundColor,
     smallMultiplesStyle,
-    panelPlacement,
+    panelModel,
   );
 }
diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -277,15 +277,6 @@ const rawChildNodes = (
   }
 };
 
-/** @internal */
-export type PanelPlacement = PartitionSmallMultiplesModel;
-
-/**
- * Todo move it to config
- * @internal
- */
-export const panelTitleFontSize = 16;
-
 /** @internal */
 export function shapeViewModel(
   textMeasure: TextMeasure,
@@ -299,7 +290,7 @@ export function shapeViewModel(
   topGroove: Pixels,
   containerBackgroundColor: Color,
   smallMultiplesStyle: SmallMultiplesStyle,
-  panel: PanelPlacement,
+  panelModel: PartitionSmallMultiplesModel,
 ): ShapeViewModel {
   const {
     width,
@@ -315,7 +306,7 @@ export function shapeViewModel(
     sectorLineWidth,
   } = config;
 
-  const { marginLeftPx, marginTopPx, panelInnerWidth, panelInnerHeight } = panel;
+  const { marginLeftPx, marginTopPx, panel } = panelModel;
 
   const treemapLayout = isTreemap(partitionLayout);
   const mosaicLayout = isMosaic(partitionLayout);
@@ -327,8 +318,8 @@ export function shapeViewModel(
 
   const diskCenter = isSunburst(partitionLayout)
     ? {
-        x: marginLeftPx + panelInnerWidth / 2,
-        y: marginTopPx + panelInnerHeight / 2,
+        x: marginLeftPx + panel.innerWidth / 2,
+        y: marginTopPx + panel.innerHeight / 2,
       }
     : {
         x: marginLeftPx,
@@ -347,8 +338,8 @@ export function shapeViewModel(
     partitionLayout,
     tree,
     topGroove,
-    panelInnerWidth,
-    panelInnerHeight,
+    panel.innerWidth,
+    panel.innerHeight,
     clockwiseSectors,
     specialFirstInnermostSector,
     maxDepth,
@@ -362,8 +353,8 @@ export function shapeViewModel(
 
   // use the smaller of the two sizes, as a circle fits into a square
   const circleMaximumSize = Math.min(
-    panelInnerWidth,
-    panelInnerHeight - (panel.panelTitle.length > 0 ? panelTitleFontSize * 2 : 0),
+    panel.innerWidth,
+    panel.innerHeight - (panel.title.length > 0 ? panel.fontSize * 2 : 0),
   );
   const outerRadius: Radius = Math.min(outerSizeRatio * circleMaximumSize, circleMaximumSize - sectorLineWidth) / 2;
   const innerRadius: Radius = outerRadius - (1 - emptySizeRatio) * outerRadius;
@@ -375,9 +366,9 @@ export function shapeViewModel(
     layers,
     config.sectorLineWidth,
     config.sectorLineStroke,
-    panel.smAccessorValue,
-    panel.index,
-    panel.innerIndex,
+    panelModel.smAccessorValue,
+    panelModel.index,
+    panelModel.innerIndex,
     config.fillLabel,
     sunburstLayout,
     containerBackgroundColor,
@@ -442,8 +433,8 @@ export function shapeViewModel(
         });
   const maxLinkedLabelTextLength = config.linkLabel.maxTextLength;
   const linkLabelViewModels = linkTextLayout(
-    panelInnerWidth,
-    panelInnerHeight,
+    panel.innerWidth,
+    panel.innerHeight,
     textMeasure,
     config,
     nodesWithoutRoom,
@@ -454,8 +445,8 @@ export function shapeViewModel(
     valueFormatter,
     maxLinkedLabelTextLength,
     {
-      x: width * panel.left + panelInnerWidth / 2,
-      y: height * panel.top + panelInnerHeight / 2,
+      x: width * panelModel.left + panel.innerWidth / 2,
+      y: height * panelModel.top + panel.innerHeight / 2,
     },
     containerBackgroundColor,
   );
@@ -480,22 +471,23 @@ export function shapeViewModel(
   // combined viewModel
   return {
     partitionLayout: config?.partitionLayout ?? defaultConfig.partitionLayout,
-    smAccessorValue: panel.smAccessorValue,
-    panelTitle: panel.panelTitle,
-    index: panel.index,
-    innerIndex: panel.innerIndex,
-    width: panel.width,
-    height: panel.height,
-    top: panel.top,
-    left: panel.left,
-    innerRowCount: panel.innerRowCount,
-    innerColumnCount: panel.innerColumnCount,
-    innerRowIndex: panel.innerRowIndex,
-    innerColumnIndex: panel.innerColumnIndex,
-    marginLeftPx: panel.marginLeftPx,
-    marginTopPx: panel.marginTopPx,
-    panelInnerWidth: panel.panelInnerWidth,
-    panelInnerHeight: panel.panelInnerHeight,
+    smAccessorValue: panelModel.smAccessorValue,
+
+    index: panelModel.index,
+    innerIndex: panelModel.innerIndex,
+    width: panelModel.width,
+    height: panelModel.height,
+    top: panelModel.top,
+    left: panelModel.left,
+    innerRowCount: panelModel.innerRowCount,
+    innerColumnCount: panelModel.innerColumnCount,
+    innerRowIndex: panelModel.innerRowIndex,
+    innerColumnIndex: panelModel.innerColumnIndex,
+    marginLeftPx: panelModel.marginLeftPx,
+    marginTopPx: panelModel.marginTopPx,
+    panel: {
+      ...panelModel.panel,
+    },
 
     config,
     layers,