feat(xy): mutilayer time axis step 1

integration/server/webpack.config.js

@@ -41,6 +41,16 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.(ttf|eot|woff|woff2|svg)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'fonts/',
+          },
+        },
+      },
       {
         test: /\.tsx?$/,
         loader: 'ts-loader',

packages/charts/api/charts.api.md

@@ -642,7 +642,7 @@ export const DEFAULT_TOOLTIP_SNAP = true;
 export const DEFAULT_TOOLTIP_TYPE: "vertical";
 
 // @public (undocumented)
-export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption';
+export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption';
 
 // @public (undocumented)
 export const DEPTH_KEY = "depth";
@@ -1872,7 +1872,6 @@ export interface SettingsSpec extends Spec, LegendSpec {
     debugState?: boolean;
     // @alpha
     externalPointerEvents: ExternalPointerEventsSettings;
-    hideDuplicateAxes: boolean;
     minBrushDelta?: number;
     noResults?: ComponentType | ReactChild;
     onAnnotationClick?: AnnotationClickListener;

packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts

@@ -405,8 +405,7 @@ export function geoms(
   const angleScale = (x: number) => angleStart + (angleRange * (x - domain[0])) / domainExtent;
   const clockwise = angleStart > angleEnd; // todo refine this crude approach
 
-  const geomObjects = abstractGeoms
-    .slice()
+  return [...abstractGeoms]
     .sort((a, b) => a.order - b.order)
     .map(({ landmarks, aes }) => {
       const at = get(landmarks, 'at', '');
@@ -465,5 +464,4 @@ export function geoms(
         return new Section(x0, y0, x1, y1, lineWidth, strokeStyle);
       }
     });
-  return geomObjects;
 }

packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts

@@ -22,11 +22,6 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
     y: margin.top + innerHeight / 2,
   };
 
-  const pickQuads: PickFunction = (x, y) =>
-    -innerWidth / 2 <= x && x <= innerWidth / 2 && -innerHeight / 2 <= y && y <= innerHeight / 2
-      ? [bulletViewModel]
-      : [];
-
   const {
     subtype,
     base,
@@ -91,6 +86,11 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
     angleEnd,
   };
 
+  const pickQuads: PickFunction = (x, y) =>
+    -innerWidth / 2 <= x && x <= innerWidth / 2 && -innerHeight / 2 <= y && y <= innerHeight / 2
+      ? [bulletViewModel]
+      : [];
+
   return {
     config: theme.goal,
     chartCenter,

packages/charts/src/chart_types/partition_chart/state/selectors/tree.ts

@@ -69,21 +69,14 @@ function getTreesForSpec(
       group.push(next);
       return map;
     }, new Map<string, HierarchyOfArrays>());
-    return Array.from(groups)
-      .sort(getPredicateFn(sort))
-      .map(([groupKey, subData], innerIndex) => ({
-        name: format(groupKey),
-        smAccessorValue: groupKey,
-        style: smStyle,
-        tree: partitionTree(
-          subData,
-          valueAccessor,
-          layers,
-          configMetadata.partitionLayout.dflt,
-          config.partitionLayout,
-          [{ index: innerIndex, value: String(groupKey) }],
-        ),
-      }));
+    return [...groups].sort(getPredicateFn(sort)).map(([groupKey, subData], innerIndex) => ({
+      name: format(groupKey),
+      smAccessorValue: groupKey,
+      style: smStyle,
+      tree: partitionTree(subData, valueAccessor, layers, configMetadata.partitionLayout.dflt, config.partitionLayout, [
+        { index: innerIndex, value: String(groupKey) },
+      ]),
+    }));
   } else {
     return [
       {

packages/charts/src/chart_types/xy_chart/annotations/tooltip.ts

@@ -24,11 +24,10 @@ export function computeRectAnnotationTooltipState(
   chartRotation: Rotation,
   chartDimensions: Dimensions,
 ): AnnotationTooltipState | null {
-  // allow picking up the last spec added as the top most or use it's zIndex value
+  // allow picking up the last spec added as the top most or use its zIndex value
   const sortedAnnotationSpecs = annotationSpecs
     .filter(isRectAnnotation)
-    .reverse()
-    .sort(({ zIndex: a = Number.MIN_SAFE_INTEGER }, { zIndex: b = Number.MIN_SAFE_INTEGER }) => b - a);
+    .sort(({ zIndex: a = Number.MIN_SAFE_INTEGER }, { zIndex: b = Number.MIN_SAFE_INTEGER }) => a - b);
 
   for (let i = 0; i < sortedAnnotationSpecs.length; i++) {
     const spec = sortedAnnotationSpecs[i];
@@ -69,11 +68,10 @@ export function computeMultipleRectAnnotationTooltipState(
   chartRotation: Rotation,
   chartDimensions: Dimensions,
 ): AnnotationTooltipState[] {
-  // allow picking up the last spec added as the top most or use it's zIndex value
+  // allow picking up the last spec added as the top most or use its zIndex value
   const sortedAnnotationSpecs = annotationSpecs
     .filter(isRectAnnotation)
-    .reverse()
-    .sort(({ zIndex: a = Number.MIN_SAFE_INTEGER }, { zIndex: b = Number.MIN_SAFE_INTEGER }) => b - a);
+    .sort(({ zIndex: a = Number.MIN_SAFE_INTEGER }, { zIndex: b = Number.MIN_SAFE_INTEGER }) => a - b);
   return sortedAnnotationSpecs.reduce<AnnotationTooltipState[]>((acc, spec) => {
     const annotationDimension = annotationDimensions.get(spec.id);
     if (!spec.hideTooltips && annotationDimension) {

packages/charts/src/chart_types/xy_chart/axes/axes_sizes.ts

@@ -11,15 +11,16 @@ import { Position } from '../../../utils/common';
 import { innerPad, outerPad, PerSideDistance } from '../../../utils/dimensions';
 import { AxisId } from '../../../utils/ids';
 import { AxisStyle, Theme } from '../../../utils/themes/theme';
+import { AxesTicksDimensions } from '../state/selectors/compute_axis_ticks_dimensions';
 import { getSpecsById } from '../state/utils/spec';
 import { isVerticalAxis } from '../utils/axis_type_utils';
-import { AxisViewModel, getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
+import { getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
 import { AxisSpec } from '../utils/specs';
 
 /** @internal */
 export function computeAxesSizes(
   { axes: sharedAxesStyles, chartMargins }: Theme,
-  axisDimensions: Map<AxisId, AxisViewModel>,
+  axisDimensions: AxesTicksDimensions,
   axesStyles: Map<AxisId, AxisStyle | null>,
   axisSpecs: AxisSpec[],
   smSpec?: SmallMultiplesSpec,

packages/charts/src/chart_types/xy_chart/domains/x_domain.ts

@@ -40,7 +40,7 @@ export function mergeXDomain(
     seriesXComputedDomains = computeOrdinalDataDomain(values, identity, false, true);
     if (customDomain) {
       if (Array.isArray(customDomain)) {
-        seriesXComputedDomains = customDomain;
+        seriesXComputedDomains = [...customDomain];
       } else {
         if (fallbackScale === ScaleType.Ordinal) {
           Logger.warn(`xDomain ignored for fallback ordinal scale. Options to resolve:
@@ -140,7 +140,7 @@ export function findMinInterval(xValues: number[]): number {
   if (valuesLength === 1) {
     return 1;
   }
-  const sortedValues = xValues.slice().sort(compareByValueAsc);
+  const sortedValues = [...xValues].sort(compareByValueAsc);
   let i;
   let minInterval = Math.abs(sortedValues[1] - sortedValues[0]);
   for (i = 1; i < valuesLength - 1; i++) {

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/index.ts

@@ -10,7 +10,7 @@ import { Dimensions, Size } from '../../../../../utils/dimensions';
 import { Point } from '../../../../../utils/point';
 import { AxisStyle } from '../../../../../utils/themes/theme';
 import { PerPanelAxisGeoms } from '../../../state/selectors/compute_per_panel_axes_geoms';
-import { AxisTick, AxisViewModel, shouldShowTicks } from '../../../utils/axis_utils';
+import { AxisTick, TickLabelBounds, shouldShowTicks } from '../../../utils/axis_utils';
 import { AxisSpec } from '../../../utils/specs';
 import { renderAxisLine } from './line';
 import { renderTick } from './tick';
@@ -25,7 +25,7 @@ export interface AxisProps {
   axisSpec: AxisSpec;
   size: Size;
   anchorPoint: Point;
-  dimension: AxisViewModel;
+  dimension: TickLabelBounds;
   ticks: AxisTick[];
   debug: boolean;
   renderingArea: Dimensions;

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts

@@ -16,7 +16,7 @@ export function renderTickLabel(
   ctx: CanvasRenderingContext2D,
   tick: AxisTick,
   showTicks: boolean,
-  { axisSpec: { position, labelFormat }, dimension, size, debug, axisStyle }: AxisProps,
+  { axisSpec: { position }, dimension, size, debug, axisStyle }: AxisProps,
 ) {
   const labelStyle = axisStyle.tickLabel;
   const tickLabelProps = getTickLabelProps(
@@ -46,7 +46,7 @@ export function renderTickLabel(
   renderText(
     ctx,
     center,
-    labelFormat ? labelFormat(tick.value) : tick.label,
+    tick.axisTickLabel,
     {
       fontFamily: labelStyle.fontFamily,
       fontStyle: labelStyle.fontStyle ?? 'normal',

packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx

@@ -9,6 +9,7 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable jest/no-conditional-expect */
 
+import 'jest-extended';
 import React from 'react';
 import { Store } from 'redux';
 
@@ -79,7 +80,6 @@ const settingSpec = MockGlobalSpec.settings({
   tooltip: {
     type: TooltipType.VerticalCursor,
   },
-  hideDuplicateAxes: false,
   theme: {
     chartPaddings: { top: 0, left: 0, bottom: 0, right: 0 },
     chartMargins: { top: 10, left: 10, bottom: 0, right: 0 },
@@ -1289,7 +1289,7 @@ describe('Clickable annotations', () => {
 
     expect(onAnnotationClick).toBeCalled();
     const callArgs = onAnnotationClick.mock.calls[0][0];
-    expect(callArgs.rects).toEqual([
+    expect(callArgs.rects).toIncludeSameMembers([
       {
         id: 'rect2',
         datum: {