feat(axis): small multiples axis improvements

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: {
@@ -927,7 +929,7 @@ export const GroupBy: React.FunctionComponent<GroupByProps>;
 export type GroupByAccessor = (spec: Spec, datum: any) => string | number;
 
 // @alpha (undocumented)
-export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort'>;
+export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'title'>;
 
 // Warning: (ae-forgotten-export) The symbol "Predicate" needs to be exported by the entry point index.d.ts
 //
@@ -936,12 +938,16 @@ export type GroupBySort = Predicate;
 
 // @alpha (undocumented)
 export interface GroupBySpec extends Spec {
-    // (undocumented)
     by: GroupByAccessor;
-    // (undocumented)
     sort: GroupBySort;
+    title?: GroupByTitleFormatter;
 }
 
+// Warning: (ae-incompatible-release-tags) The symbol "GroupByTitleFormatter" is marked as @public, but its signature references "GroupByAccessor" which is marked as @alpha
+//
+// @public (undocumented)
+export type GroupByTitleFormatter = (value: ReturnType<GroupByAccessor>) => string;
+
 // @public (undocumented)
 export type GroupId = string;
 

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',

src/chart_types/xy_chart/renderer/canvas/axes/title.ts → src/chart_types/xy_chart/renderer/canvas/axes/global_title.ts

@@ -20,16 +20,21 @@
 import { AxisProps } from '.';
 import { Position } from '../../../../../utils/common';
 import { getSimplePadding } from '../../../../../utils/dimensions';
-import { Font, FontStyle } from '../../../../partition_chart/layout/types/types';
+import { Point } from '../../../../../utils/point';
 import { isHorizontalAxis } from '../../../utils/axis_type_utils';
-import { shouldShowTicks } from '../../../utils/axis_utils';
+import { getTitleDimension, shouldShowTicks } from '../../../utils/axis_utils';
 import { renderText } from '../primitives/text';
 import { renderDebugRect } from '../utils/debug';
+import { getFontStyle } from './panel_title';
+
+type TitleProps = Pick<AxisProps, 'panelTitle' | 'axisSpec' | 'axisStyle' | 'size' | 'dimension' | 'debug'> & {
+  anchorPoint: Point;
+};
 
 /** @internal */
-export function renderTitle(ctx: CanvasRenderingContext2D, props: AxisProps) {
+export function renderTitle(ctx: CanvasRenderingContext2D, props: TitleProps) {
   const {
-    axisSpec: { title, position },
+    axisSpec: { position, title },
     axisStyle: { axisTitle },
   } = props;
   if (!title || !axisTitle.visible) {
@@ -41,93 +46,89 @@ export function renderTitle(ctx: CanvasRenderingContext2D, props: AxisProps) {
   return renderVerticalTitle(ctx, props);
 }
 
-function renderVerticalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) {
+function renderVerticalTitle(ctx: CanvasRenderingContext2D, props: TitleProps) {
   const {
     size: { height },
-    axisSpec: { position, hide: hideAxis },
+    axisSpec: { position, hide: hideAxis, title },
     dimension: { maxLabelBboxWidth },
-    axisStyle: { axisTitle, tickLine, tickLabel },
+    axisStyle: { axisTitle, axisPanelTitle, tickLine, tickLabel },
+    anchorPoint,
     debug,
-    title,
+    panelTitle,
   } = props;
+
   if (!title) {
     return null;
   }
+
+  const font = getFontStyle(axisTitle);
+  const titlePadding = getSimplePadding(axisTitle.visible && title ? axisTitle.padding : 0);
+  const panelTitleDimension = panelTitle ? getTitleDimension(axisPanelTitle) : 0;
   const tickDimension = shouldShowTicks(tickLine, hideAxis) ? tickLine.size + tickLine.padding : 0;
-  const titlePadding = getSimplePadding(axisTitle.visible ? axisTitle.padding : 0);
   const labelPadding = getSimplePadding(tickLabel.padding);
   const labelWidth = tickLabel.visible ? labelPadding.outer + maxLabelBboxWidth + labelPadding.inner : 0;
-  const top = height;
-  const left = position === Position.Left ? titlePadding.outer : tickDimension + labelWidth + titlePadding.inner;
+
+  const top = height + anchorPoint.y;
+  const left =
+    (position === Position.Left
+      ? titlePadding.outer
+      : tickDimension + labelWidth + titlePadding.inner + panelTitleDimension) + anchorPoint.x;
 
   if (debug) {
-    renderDebugRect(ctx, { x: left, y: top, width: height, height: axisTitle.fontSize }, undefined, undefined, -90);
+    renderDebugRect(ctx, { x: left, y: top, width: height, height: font.fontSize }, undefined, undefined, -90);
   }
 
-  const font: Font = {
-    fontFamily: axisTitle.fontFamily,
-    fontVariant: 'normal',
-    fontStyle: axisTitle.fontStyle ? (axisTitle.fontStyle as FontStyle) : 'normal',
-    fontWeight: 'normal',
-    textColor: axisTitle.fill,
-    textOpacity: 1,
-  };
   renderText(
     ctx,
     {
-      x: left + axisTitle.fontSize / 2,
+      x: left + font.fontSize / 2,
       y: top - height / 2,
     },
     title,
-    { ...font, fill: axisTitle.fill, align: 'center', baseline: 'middle', fontSize: axisTitle.fontSize },
+    font,
     -90,
   );
 }
-function renderHorizontalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) {
+
+function renderHorizontalTitle(ctx: CanvasRenderingContext2D, props: TitleProps) {
   const {
     size: { width },
-    axisSpec: { position, hide: hideAxis },
+    axisSpec: { position, hide: hideAxis, title },
     dimension: { maxLabelBboxHeight },
-    axisStyle: { axisTitle, tickLine, tickLabel },
+    axisStyle: { axisTitle, axisPanelTitle, tickLine, tickLabel },
+    anchorPoint,
     debug,
-    title,
+    panelTitle,
   } = props;
 
   if (!title) {
     return;
   }
 
+  const font = getFontStyle(axisTitle);
+  const titlePadding = getSimplePadding(axisTitle.visible && title ? axisTitle.padding : 0);
+  const panelTitleDimension = panelTitle ? getTitleDimension(axisPanelTitle) : 0;
   const tickDimension = shouldShowTicks(tickLine, hideAxis) ? tickLine.size + tickLine.padding : 0;
-  const titlePadding = getSimplePadding(axisTitle.visible ? axisTitle.padding : 0);
   const labelPadding = getSimplePadding(tickLabel.padding);
   const labelHeight = tickLabel.visible ? maxLabelBboxHeight + labelPadding.outer + labelPadding.inner : 0;
-  const top = position === Position.Top ? titlePadding.outer : labelHeight + tickDimension + titlePadding.inner;
 
-  const left = 0;
+  const top =
+    (position === Position.Top
+      ? titlePadding.outer
+      : labelHeight + tickDimension + titlePadding.inner + panelTitleDimension) + anchorPoint.y;
+  const left = anchorPoint.x;
+
   if (debug) {
-    renderDebugRect(ctx, { x: left, y: top, width, height: axisTitle.fontSize });
+    renderDebugRect(ctx, { x: left, y: top, width, height: font.fontSize });
   }
-  const font: Font = {
-    fontFamily: axisTitle.fontFamily,
-    fontVariant: 'normal',
-    fontStyle: axisTitle.fontStyle ? (axisTitle.fontStyle as FontStyle) : 'normal',
-    fontWeight: 'normal',
-    textColor: axisTitle.fill,
-    textOpacity: 1,
-  };
+
   renderText(
     ctx,
     {
       x: left + width / 2,
-      y: top + axisTitle.fontSize / 2,
+      y: top + font.fontSize / 2,
     },
     title,
-    {
-      ...font,
-      fill: axisTitle.fill,
-      align: 'center',
-      baseline: 'middle',
-      fontSize: axisTitle.fontSize,
-    },
+    font,
   );
 }