feat(axis): small multiples axis improvements (#1004)

- Add panel axis for sm chart with own style
- Add format prop to GroupBy for formatting sm titles by panel
- DRY up repeated types
- Simplify title dimensioning logic
- Fix check for sm with single bucket
- Fix bug with sm value of zero

api/charts.api.md

@@ -199,6 +199,8 @@ export interface AxisStyle {
     // (undocumented)
     axisLine: StrokeStyle & Visible;
     // (undocumented)
+    axisPanelTitle: TextStyle & Visible;
+    // (undocumented)
     axisTitle: TextStyle & Visible;
     // (undocumented)
     gridLine: {
@@ -926,8 +928,13 @@ export const GroupBy: React.FunctionComponent<GroupByProps>;
 // @alpha (undocumented)
 export type GroupByAccessor = (spec: Spec, datum: any) => string | number;
 
+// Warning: (ae-incompatible-release-tags) The symbol "GroupByFormatter" is marked as @public, but its signature references "GroupByAccessor" which is marked as @alpha
+//
+// @public
+export type GroupByFormatter = (value: ReturnType<GroupByAccessor>) => string;
+
 // @alpha (undocumented)
-export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort'>;
+export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;
 
 // Warning: (ae-forgotten-export) The symbol "Predicate" needs to be exported by the entry point index.d.ts
 //
@@ -936,9 +943,8 @@ export type GroupBySort = Predicate;
 
 // @alpha (undocumented)
 export interface GroupBySpec extends Spec {
-    // (undocumented)
     by: GroupByAccessor;
-    // (undocumented)
+    format?: GroupByFormatter;
     sort: GroupBySort;
 }
 

integration/tests/axis_stories.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Rotation } from '../../src';
+import { Position, Rotation } from '../../src';
 import { common } from '../page_objects';
 
 describe('Axis stories', () => {
@@ -88,4 +88,34 @@ describe('Axis stories', () => {
       `http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-disable axis overrides_general=true&knob-Tick label rotation_shared=${rotation}`,
     );
   });
+
+  describe('Small multiples', () => {
+    const allPositions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
+    const showAllParams = allPositions.map((p) => `knob-Hide_${p}=false`).join('&');
+
+    it('should render four axes with titles and panel titles', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&${showAllParams}`,
+      );
+    });
+
+    it('should render four axes with no gridlines', async () => {
+      const hideAllGridParams = allPositions.map((p) => `knob-Show grid line_${p}=false`).join('&');
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&${showAllParams}&${hideAllGridParams}`,
+      );
+    });
+
+    describe.each<Position>(allPositions)('Axis position - %s', (position) => {
+      it.each<[string, string]>([
+        ['should hide title', `knob-Hide title_${position}=true`],
+        ['should hide empty title', `knob-Title_${position}=%20&knob-Hide title_${position}=false`],
+        ['should hide panel titles', `knob-Hide panel titles_${position}=true`],
+      ])('%s', async (_, params) => {
+        await common.expectChartAtUrlToMatchScreenshot(
+          `http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&${showAllParams}&${params}`,
+        );
+      });
+    });
+  });
 });

src/chart_types/xy_chart/axes/axes_sizes.ts

@@ -16,12 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { SmallMultiplesSpec } from '../../../specs';
 import { Position } from '../../../utils/common';
 import { getSimplePadding } from '../../../utils/dimensions';
 import { AxisId } from '../../../utils/ids';
 import { AxisStyle, Theme } from '../../../utils/themes/theme';
 import { getSpecsById } from '../state/utils/spec';
-import { AxisTicksDimensions, shouldShowTicks } from '../utils/axis_utils';
+import { isVerticalAxis } from '../utils/axis_type_utils';
+import { AxisTicksDimensions, getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
 import { AxisSpec } from '../utils/specs';
 
 /**
@@ -37,6 +39,7 @@ export function computeAxesSizes(
   axisDimensions: Map<AxisId, AxisTicksDimensions>,
   axesStyles: Map<AxisId, AxisStyle | null>,
   axisSpecs: AxisSpec[],
+  smSpec?: SmallMultiplesSpec,
 ): { left: number; right: number; top: number; bottom: number; margin: { left: number } } {
   const axisMainSize = {
     left: 0,
@@ -56,17 +59,17 @@ export function computeAxesSizes(
     if (!axisSpec || isHidden) {
       return;
     }
-    const { tickLine, axisTitle, tickLabel } = axesStyles.get(id) ?? sharedAxesStyles;
+    const { tickLine, axisTitle, axisPanelTitle, tickLabel } = axesStyles.get(id) ?? sharedAxesStyles;
     const showTicks = shouldShowTicks(tickLine, axisSpec.hide);
     const { position, title } = axisSpec;
-    const titlePadding = getSimplePadding(axisTitle.padding);
     const labelPadding = getSimplePadding(tickLabel.padding);
     const labelPaddingSum = tickLabel.visible ? labelPadding.inner + labelPadding.outer : 0;
 
     const tickDimension = showTicks ? tickLine.size + tickLine.padding : 0;
-    const titleHeight =
-      title !== undefined && axisTitle.visible ? axisTitle.fontSize + titlePadding.outer + titlePadding.inner : 0;
-    const axisDimension = labelPaddingSum + tickDimension + titleHeight;
+    const titleDimension = title ? getTitleDimension(axisTitle) : 0;
+    const hasPanelTitle = Boolean(isVerticalAxis(position) ? smSpec?.splitVertically : smSpec?.splitHorizontally);
+    const panelTitleDimension = hasPanelTitle ? getTitleDimension(axisPanelTitle) : 0;
+    const axisDimension = labelPaddingSum + tickDimension + titleDimension + panelTitleDimension;
     const maxAxisHeight = tickLabel.visible ? maxLabelBboxHeight + axisDimension : axisDimension;
     const maxAxisWidth = tickLabel.visible ? maxLabelBboxWidth + axisDimension : axisDimension;
 

src/chart_types/xy_chart/domains/y_domain.test.ts

@@ -81,9 +81,9 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
 
-    expect(yDomain).toEqual([
+    expect(yDomains).toEqual([
       {
         type: 'yDomain',
         groupId: DEFAULT_GLOBAL_ID,
@@ -109,9 +109,9 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
 
-    expect(yDomain).toEqual([
+    expect(yDomains).toEqual([
       {
         type: 'yDomain',
         groupId: DEFAULT_GLOBAL_ID,
@@ -145,9 +145,9 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
 
-    expect(yDomain).toEqual([
+    expect(yDomains).toEqual([
       {
         groupId: 'a',
         domain: [2, 12],
@@ -183,9 +183,9 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
 
-    expect(yDomain).toEqual([
+    expect(yDomains).toEqual([
       {
         groupId: 'a',
         domain: [0, 17],
@@ -213,8 +213,8 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
-    expect(yDomain).toEqual([
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
+    expect(yDomains).toEqual([
       {
         groupId: 'a',
         domain: [0, 12],
@@ -402,9 +402,9 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
 
-    expect(yDomain).toEqual([
+    expect(yDomains).toEqual([
       {
         type: 'yDomain',
         groupId: 'a',
@@ -428,9 +428,9 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
 
-    expect(yDomain).toEqual([
+    expect(yDomains).toEqual([
       {
         type: 'yDomain',
         groupId: 'a',
@@ -456,7 +456,7 @@ describe('Y Domain', () => {
     );
 
     const {
-      yDomain: [{ domain }],
+      yDomains: [{ domain }],
     } = computeSeriesDomainsSelector(store.getState());
     expect(domain).toEqual([20, 20]);
 
@@ -478,8 +478,8 @@ describe('Y Domain', () => {
       store,
     );
 
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
-    expect(yDomain).toEqual([
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
+    expect(yDomains).toEqual([
       {
         type: 'yDomain',
         groupId: 'a',
@@ -505,7 +505,7 @@ describe('Y Domain', () => {
     );
 
     const {
-      yDomain: [{ domain }],
+      yDomains: [{ domain }],
     } = computeSeriesDomainsSelector(store.getState());
     expect(domain).toEqual([-1, -1]);
 
@@ -528,8 +528,8 @@ describe('Y Domain', () => {
       store,
     );
 
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
-    expect(yDomain).toEqual([
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
+    expect(yDomains).toEqual([
       {
         groupId: 'a',
         domain: [0, 1],
@@ -556,8 +556,8 @@ describe('Y Domain', () => {
       ],
       store,
     );
-    const { yDomain } = computeSeriesDomainsSelector(store.getState());
-    expect(yDomain).toEqual([
+    const { yDomains } = computeSeriesDomainsSelector(store.getState());
+    expect(yDomains).toEqual([
       {
         type: 'yDomain',
         groupId: 'a',