Merge branch 'master' into fix-legend-scroll-sizing

.storybook/config.ts

@@ -33,8 +33,7 @@ addParameters({
       base: 'light',
       brandTitle: 'Elastic Charts',
       brandUrl: 'https://github.com/elastic/elastic-charts',
-      brandImage:
-        'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt6ae3d6980b5fd629/5bbca1d1af3a954c36f95ed3/logo-elastic.svg',
+      brandImage: 'logo-name.svg',
     }),
     panelPosition: 'right',
     sidebarAnimations: true,

api/charts.api.md

@@ -1435,7 +1435,7 @@ export const Partition: React.FunctionComponent<SpecRequiredProps_7 & SpecOption
 //
 // @public (undocumented)
 export interface PartitionConfig extends StaticConfig {
-    // (undocumented)
+    // @alpha (undocumented)
     animation: {
         duration: TimeMs;
         keyframes: Array<AnimKeyframe>;
@@ -1741,7 +1741,7 @@ export type ScaleType = $Values<typeof ScaleType>;
 
 // Warning: (ae-missing-release-tag) "SectorGeomSpecY" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public
 export interface SectorGeomSpecY {
     // Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts
     //
@@ -2224,7 +2224,7 @@ export type TreeLevel = number;
 
 // Warning: (ae-missing-release-tag) "TreeNode" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public
 export interface TreeNode extends AngleFromTo {
     // (undocumented)
     fill?: Color;
@@ -2346,8 +2346,8 @@ export type YDomainRange = YDomainBase & DomainRange;
 // src/chart_types/heatmap/layout/types/config_types.ts:29: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:61: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:62: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:126: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:127:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:130: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:131:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 // src/common/series_id.ts:40:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)

integration/tests/grid_stories.test.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { common } from '../page_objects';
+
+describe('Grid stories', () => {
+  it('should render crosshair lines above grid lines', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/grids--lines&knob-Stroke_Crosshair line=red&knob-Stroke width_Crosshair line=10&knob-Dash_Crosshair line[0]=0&knob-Dash_Crosshair line[1]=0&knob-Stroke_Crosshair cross line=red&knob-Stroke width_Crosshair cross line=10&knob-Dash_Crosshair cross line[0]=0&knob-Dash_Crosshair cross line[1]=0&knob-debug=&knob-Tooltip type=cross&knob-Show gridline_Left axis=true&knob-Opacity_Left axis=1&knob-Stroke_Left axis=rgba(0,0,0,1)&knob-Stroke width_Left axis=2&knob-Dash_Left axis[0]=4&knob-Dash_Left axis[1]=4&knob-Show gridline_Bottom axis=true&knob-Opacity_Bottom axis=1&knob-Stroke_Bottom axis=rgba(0,0,0,1)&knob-Stroke width_Bottom axis=2',
+      { top: 115, right: 120 },
+    );
+  });
+});

src/chart_types/goal_chart/state/selectors/on_element_click_caller.ts

@@ -21,13 +21,11 @@ import createCachedSelector from 're-reselect';
 import { Selector } from 'reselect';
 
 import { ChartTypes } from '../../..';
-import { SeriesIdentifier } from '../../../../common/series_id';
-import { SettingsSpec, LayerValue } from '../../../../specs';
-import { GlobalChartState, PointerState } from '../../../../state/chart_state';
+import { getOnElementClickSelector } from '../../../../common/event_handler_selectors';
+import { GlobalChartState, PointerStates } from '../../../../state/chart_state';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getLastClickSelector } from '../../../../state/selectors/get_last_click';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
-import { isClicking } from '../../../../state/utils';
 import { getSpecOrNull } from './goal_spec';
 import { getPickedShapesLayerValues } from './picked_shapes';
 
@@ -39,32 +37,13 @@ import { getPickedShapesLayerValues } from './picked_shapes';
  * @internal
  */
 export function createOnElementClickCaller(): (state: GlobalChartState) => void {
-  let prevClick: PointerState | null = null;
+  const prev: { click: PointerStates['lastClick'] } = { click: null };
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartTypes.Goal) {
       selector = createCachedSelector(
         [getSpecOrNull, getLastClickSelector, getSettingsSpecSelector, getPickedShapesLayerValues],
-        (spec, lastClick: PointerState | null, settings: SettingsSpec, pickedShapes): void => {
-          if (!spec) {
-            return;
-          }
-          if (!settings.onElementClick) {
-            return;
-          }
-          const nextPickedShapesLength = pickedShapes.length;
-          if (nextPickedShapesLength > 0 && isClicking(prevClick, lastClick) && settings && settings.onElementClick) {
-            const elements = pickedShapes.map<[Array<LayerValue>, SeriesIdentifier]>((values) => [
-              values,
-              {
-                specId: spec.id,
-                key: `spec{${spec.id}}`,
-              },
-            ]);
-            settings.onElementClick(elements);
-          }
-          prevClick = lastClick;
-        },
+        getOnElementClickSelector(prev),
       )(getChartIdSelector);
     }
     if (selector) {

src/chart_types/goal_chart/state/selectors/on_element_out_caller.ts

@@ -21,6 +21,7 @@ import createCachedSelector from 're-reselect';
 import { Selector } from 'react-redux';
 
 import { ChartTypes } from '../../..';
+import { getOnElementOutSelector } from '../../../../common/event_handler_selectors';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
@@ -34,26 +35,13 @@ import { getPickedShapesLayerValues } from './picked_shapes';
  * @internal
  */
 export function createOnElementOutCaller(): (state: GlobalChartState) => void {
-  let prevPickedShapes: number | null = null;
+  const prev: { pickedShapes: number | null } = { pickedShapes: null };
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartTypes.Goal) {
       selector = createCachedSelector(
         [getSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
-        (spec, pickedShapes, settings): void => {
-          if (!spec) {
-            return;
-          }
-          if (!settings.onElementOut) {
-            return;
-          }
-          const nextPickedShapes = pickedShapes.length;
-
-          if (prevPickedShapes !== null && prevPickedShapes > 0 && nextPickedShapes === 0) {
-            settings.onElementOut();
-          }
-          prevPickedShapes = nextPickedShapes;
-        },
+        getOnElementOutSelector(prev),
       )(getChartIdSelector);
     }
     if (selector) {

src/chart_types/goal_chart/state/selectors/on_element_over_caller.ts

@@ -21,72 +21,28 @@ import createCachedSelector from 're-reselect';
 import { Selector } from 'react-redux';
 
 import { ChartTypes } from '../../..';
-import { SeriesIdentifier } from '../../../../common/series_id';
+import { getOnElementOverSelector } from '../../../../common/event_handler_selectors';
 import { LayerValue } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getSpecOrNull } from './goal_spec';
 import { getPickedShapesLayerValues } from './picked_shapes';
 
-function isOverElement(prevPickedShapes: Array<Array<LayerValue>> = [], nextPickedShapes: Array<Array<LayerValue>>) {
-  if (nextPickedShapes.length === 0) {
-    return;
-  }
-  if (nextPickedShapes.length !== prevPickedShapes.length) {
-    return true;
-  }
-  return !nextPickedShapes.every((nextPickedShapeValues, index) => {
-    const prevPickedShapeValues = prevPickedShapes[index];
-    if (prevPickedShapeValues === null) {
-      return false;
-    }
-    if (prevPickedShapeValues.length !== nextPickedShapeValues.length) {
-      return false;
-    }
-    return nextPickedShapeValues.every((layerValue, i) => {
-      const prevPickedValue = prevPickedShapeValues[i];
-      if (!prevPickedValue) {
-        return false;
-      }
-      return layerValue.value === prevPickedValue.value && layerValue.groupByRollup === prevPickedValue.groupByRollup;
-    });
-  });
-}
-
 /**
  * Will call the onElementOver listener every time the following preconditions are met:
  * - the onElementOver listener is available
  * - we have a new set of highlighted geometries on our state
  * @internal
  */
 export function createOnElementOverCaller(): (state: GlobalChartState) => void {
-  let prevPickedShapes: Array<Array<LayerValue>> = [];
+  const prev: { pickedShapes: LayerValue[][] } = { pickedShapes: [] };
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartTypes.Goal) {
       selector = createCachedSelector(
         [getSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
-        (spec, nextPickedShapes, settings): void => {
-          if (!spec) {
-            return;
-          }
-          if (!settings.onElementOver) {
-            return;
-          }
-
-          if (isOverElement(prevPickedShapes, nextPickedShapes)) {
-            const elements = nextPickedShapes.map<[Array<LayerValue>, SeriesIdentifier]>((values) => [
-              values,
-              {
-                specId: spec.id,
-                key: `spec{${spec.id}}`,
-              },
-            ]);
-            settings.onElementOver(elements);
-          }
-          prevPickedShapes = nextPickedShapes;
-        },
+        getOnElementOverSelector(prev),
       )({
         keySelector: getChartIdSelector,
       });

src/chart_types/partition_chart/layout/config.ts

@@ -181,6 +181,10 @@ export const configMetadata: Record<string, ConfigItem> = {
     type: 'string',
     values: Object.keys(PartitionLayout),
   },
+  drilldown: {
+    dflt: false,
+    type: 'boolean',
+  },
 
   // fill text layout config
   circlePadding: { dflt: 2, min: 0.0, max: 8, type: 'number' },

src/chart_types/partition_chart/layout/types/config_types.ts

@@ -88,6 +88,8 @@ export interface StaticConfig extends FillFontSizeRange {
   clockwiseSectors: boolean;
   specialFirstInnermostSector: boolean;
   partitionLayout: PartitionLayout;
+  /** @alpha */
+  drilldown: boolean;
 
   // general text config
   fontFamily: FontFamily;
@@ -115,13 +117,15 @@ export interface StaticConfig extends FillFontSizeRange {
 
 export type EasingFunction = (x: Ratio) => Ratio;
 
+/** @alpha */
 export interface AnimKeyframe {
   time: number;
   easingFunction: EasingFunction;
   keyframeConfig: Partial<StaticConfig>;
 }
 
 export interface Config extends StaticConfig {
+  /** @alpha */
   animation: {
     duration: TimeMs;
     keyframes: Array<AnimKeyframe>;

src/chart_types/partition_chart/layout/types/viewmodel_types.ts

@@ -144,6 +144,13 @@ export interface AngleFromTo {
   x1: Radian;
 }
 
+/** @internal */
+export interface LayerFromTo {
+  y0: TreeLevel;
+  y1: TreeLevel;
+}
+
+/** potential internal */
 export interface TreeNode extends AngleFromTo {
   x0: Radian;
   x1: Radian;
@@ -152,6 +159,7 @@ export interface TreeNode extends AngleFromTo {
   fill?: Color;
 }
 
+/** potential internal */
 export interface SectorGeomSpecY {
   y0px: Distance;
   y1px: Distance;