Merge branch 'master' into dependabot/npm_and_yarn/semantic-release-1…

…7.2.3

CHANGELOG.md

@@ -1,3 +1,21 @@
+# [24.1.0](https://github.com/elastic/elastic-charts/compare/v24.0.0...v24.1.0) (2020-11-24)
+
+
+### Bug Fixes
+
+* **area_charts:** correctly represent baseline with negative data points ([#896](https://github.com/elastic/elastic-charts/issues/896)) ([d1243f1](https://github.com/elastic/elastic-charts/commit/d1243f1612e43ca454db5ff48bc6689ca48bb80a))
+* **legend:** legend sizes with ordinal data ([#867](https://github.com/elastic/elastic-charts/issues/867)) ([7559e0d](https://github.com/elastic/elastic-charts/commit/7559e0dd43c76f4217c136a902f724bc0e406672)), closes [#811](https://github.com/elastic/elastic-charts/issues/811)
+* render orphan data points on lines and areas ([#900](https://github.com/elastic/elastic-charts/issues/900)) ([0be282b](https://github.com/elastic/elastic-charts/commit/0be282b2d46e867348708f74ff752ca7dbd493fd)), closes [#783](https://github.com/elastic/elastic-charts/issues/783)
+* specs swaps correctly reflected in state ([#901](https://github.com/elastic/elastic-charts/issues/901)) ([7fba882](https://github.com/elastic/elastic-charts/commit/7fba88254ce3d8f874acec34307fe2d75ffff6a6))
+
+
+### Features
+
+* **legend:** allow legend text to be copyable ([#877](https://github.com/elastic/elastic-charts/issues/877)) ([9cd3459](https://github.com/elastic/elastic-charts/commit/9cd34591b6216b8aab208177e0e4a31e1c7268d7)), closes [#710](https://github.com/elastic/elastic-charts/issues/710)
+* allow clearing series colors from memory ([#899](https://github.com/elastic/elastic-charts/issues/899)) ([ab1af38](https://github.com/elastic/elastic-charts/commit/ab1af382e6b351f4607b90024afa60a7d5f3968a))
+* merge series domain with the domain of another group ([#912](https://github.com/elastic/elastic-charts/issues/912)) ([325b013](https://github.com/elastic/elastic-charts/commit/325b013199004e45bd59bc419431656bd8c3830f))
+* small multiples for XY charts (alpha) ([#793](https://github.com/elastic/elastic-charts/issues/793)) ([d288208](https://github.com/elastic/elastic-charts/commit/d28820858d013326b3c660381e70696e9382166d)), closes [#500](https://github.com/elastic/elastic-charts/issues/500) [#500](https://github.com/elastic/elastic-charts/issues/500)
+
 # [24.0.0](https://github.com/elastic/elastic-charts/compare/v23.2.1...v24.0.0) (2020-10-19)
 
 

api/charts.api.md

@@ -1538,7 +1538,7 @@ export interface SeriesSpec extends Spec {
     // (undocumented)
     specType: typeof SpecTypes.Series;
     tickFormat?: TickFormatter;
-    useDefaultGroupDomain?: boolean;
+    useDefaultGroupDomain?: boolean | string;
     // Warning: (ae-forgotten-export) The symbol "AccessorFormat" needs to be exported by the entry point index.d.ts
     y0AccessorFormat?: AccessorFormat;
     y1AccessorFormat?: AccessorFormat;

integration/tests/axis_stories.test.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { Rotation } from '../../src';
 import { common } from '../page_objects';
 
 describe('Axis stories', () => {
@@ -76,4 +77,15 @@ describe('Axis stories', () => {
       'http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-debug_general=true&knob-disable%20axis%20overrides_general=false&knob-Tick%20label%20rotation_bottom=47&knob-Tick%20label%20rotation_left=-54&knob-Tick%20label%20rotation_top=69&knob-Tick%20label%20rotation_right=48&knob-Tick%20label%20rotation_shared=30',
     );
   });
+
+  it.each<[string, Rotation]>([
+    ['0', 0],
+    ['90', 90],
+    ['180', 180],
+    ['negative 90', -90],
+  ])('should render correctly rotated ticks - %s', async (_, rotation) => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      `http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-disable axis overrides_general=true&knob-Tick label rotation_shared=${rotation}`,
+    );
+  });
 });

integration/tests/bar_stories.test.ts

@@ -161,6 +161,20 @@ describe('Bar series stories', () => {
     });
   });
 
+  describe('different groupId', () => {
+    it('render different axis scale', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/bar-chart--dual-axis-same-y-domain&knob-Apply a different groupId to some series=true&knob-Use the same data domain for each group=`,
+      );
+    });
+
+    it('render the same domain with useDefaultGroupDomain', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/bar-chart--dual-axis-same-y-domain&knob-Apply a different groupId to some series=true&knob-Use the same data domain for each group=true`,
+      );
+    });
+  });
+
   describe('value labels positioning', () => {
     describe.each<[string, Rotation]>([
       ['0', 0],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "24.0.0",
+  "version": "24.1.0",
   "author": "Marco Vettorello <[email protected]>",
   "license": "Apache-2.0",
   "main": "dist/index.js",

src/chart_types/xy_chart/domains/y_domain.ts

@@ -24,10 +24,11 @@ import { identity } from '../../../utils/commons';
 import { computeContinuousDataDomain } from '../../../utils/domain';
 import { GroupId } from '../../../utils/ids';
 import { Logger } from '../../../utils/logger';
+import { getSpecDomainGroupId } from '../state/utils/spec';
 import { isCompleteBound, isLowerBound, isUpperBound } from '../utils/axis_type_utils';
 import { groupBy } from '../utils/group_data_series';
 import { DataSeries } from '../utils/series';
-import { BasicSeriesSpec, YDomainRange, DEFAULT_GLOBAL_ID, SeriesTypes, StackMode } from '../utils/specs';
+import { BasicSeriesSpec, YDomainRange, SeriesTypes, StackMode } from '../utils/specs';
 import { YDomain } from './types';
 
 export type YBasicSeriesSpec = Pick<
@@ -37,16 +38,11 @@ export type YBasicSeriesSpec = Pick<
 
 /** @internal */
 export function mergeYDomain(dataSeries: DataSeries[], domainsByGroupId: Map<GroupId, YDomainRange>): YDomain[] {
-  const dataSeriesByGroupId = groupBy(
-    dataSeries,
-    ({ spec: { useDefaultGroupDomain, groupId } }) => {
-      return useDefaultGroupDomain ? DEFAULT_GLOBAL_ID : groupId;
-    },
-    true,
-  );
+  const dataSeriesByGroupId = groupBy(dataSeries, ({ spec }) => getSpecDomainGroupId(spec), true);
 
   return dataSeriesByGroupId.reduce<YDomain[]>((acc, groupedDataSeries) => {
-    const [{ groupId }] = groupedDataSeries;
+    const [{ spec }] = groupedDataSeries;
+    const groupId = getSpecDomainGroupId(spec);
 
     const stacked = groupedDataSeries.filter(({ isStacked }) => isStacked);
     const nonStacked = groupedDataSeries.filter(({ isStacked }) => !isStacked);
@@ -76,7 +72,8 @@ function mergeYDomainForGroup(
     yScaleType,
   }));
   const groupYScaleType = coerceYScaleTypes(yScaleTypes);
-  const [{ stackMode, groupId }] = dataSeries;
+  const [{ stackMode, spec }] = dataSeries;
+  const groupId = getSpecDomainGroupId(spec);
 
   let domain: number[];
   if (stackMode === StackMode.Percentage) {
@@ -200,28 +197,6 @@ export function isStackedSpec(spec: YBasicSeriesSpec, histogramEnabled: boolean)
   return isBarAndHistogram || hasStackAccessors;
 }
 
-/**
- * Get the stack mode for every groupId
- * @param specs
- * @internal
- */
-export function getStackModeForYGroup(specs: YBasicSeriesSpec[]) {
-  return specs.reduce<Record<GroupId, StackMode | undefined>>((acc, { groupId, stackMode }) => {
-    if (!acc[groupId]) {
-      acc[groupId] = undefined;
-    }
-
-    if (acc[groupId] === undefined && stackMode !== undefined) {
-      acc[groupId] = stackMode;
-    }
-    if (stackMode !== undefined && acc[groupId] !== stackMode) {
-      Logger.warn(`Is not possible to mix different stackModes, please align all stackMode on the same GroupId
-      to the same mode. The default behaviour will be to use the first encountered stackMode on the series`);
-    }
-    return acc;
-  }, {});
-}
-
 /**
  * Coerce the scale types of a set of specification to a generic one.
  * If there is at least one bar series type, than the response will specity
@@ -249,13 +224,3 @@ function coerceYScale(scaleTypes: Set<ScaleContinuousType>): ScaleContinuousType
   }
   return ScaleType.Linear;
 }
-
-export function getYScaleTypeByGroupId(specs: BasicSeriesSpec[]): Map<GroupId, ScaleContinuousType> {
-  const groups = groupBy(specs, ['groupId'], true);
-  return groups.reduce((acc, group) => {
-    const scaleType = coerceYScaleTypes(group);
-    const [{ groupId }] = group;
-    acc.set(groupId, scaleType);
-    return acc;
-  }, new Map());
-}

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

@@ -41,6 +41,7 @@ export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, s
     axisStyle,
     tick.position,
     position,
+    tickLabelRotation,
     size,
     axisTicksDimensions,
     showTicks,

src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts

@@ -42,7 +42,7 @@ import { Point } from '../../../../utils/point';
 import { isPointOnGeometry } from '../../rendering/utils';
 import { formatTooltip } from '../../tooltip/tooltip';
 import { BasicSeriesSpec, AxisSpec } from '../../utils/specs';
-import { getAxesSpecForSpecId, getSpecsById } from '../utils/spec';
+import { getAxesSpecForSpecId, getSpecDomainGroupId, getSpecsById } from '../utils/spec';
 import { ComputedScales } from '../utils/types';
 import { getComputedScalesSelector } from './get_computed_scales';
 import { getElementAtCursorPositionSelector } from './get_elements_at_cursor_pos';
@@ -146,7 +146,7 @@ function getTooltipAndHighlightFromValue(
       const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);
 
       // yScales is ensured by the enclosing if
-      const yScale = scales.yScales.get(spec.groupId);
+      const yScale = scales.yScales.get(getSpecDomainGroupId(spec));
       if (!yScale) {
         return acc;
       }

src/chart_types/xy_chart/state/utils/spec.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Spec } from '../../../../specs';
+import { BasicSeriesSpec, DEFAULT_GLOBAL_ID, Spec } from '../../../../specs';
 import { GroupId } from '../../../../utils/ids';
 import { isVerticalAxis } from '../../utils/axis_type_utils';
 import { AxisSpec } from '../../utils/specs';
@@ -47,3 +47,11 @@ export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId) {
     yAxis,
   };
 }
+
+/** @internal */
+export function getSpecDomainGroupId(spec: BasicSeriesSpec): string {
+  if (!spec.useDefaultGroupDomain) {
+    return spec.groupId;
+  }
+  return typeof spec.useDefaultGroupDomain === 'boolean' ? DEFAULT_GLOBAL_ID : spec.useDefaultGroupDomain;
+}

src/chart_types/xy_chart/state/utils/utils.ts

@@ -76,7 +76,7 @@ import {
 } from '../../utils/specs';
 import { SmallMultipleScales } from '../selectors/compute_small_multiple_scales';
 import { isHorizontalRotation } from './common';
-import { getSpecsById, getAxesSpecForSpecId } from './spec';
+import { getSpecsById, getAxesSpecForSpecId, getSpecDomainGroupId } from './spec';
 import { SeriesDomainsAndData, ComputedGeometries, GeometriesCounts, Transform, LastValues } from './types';
 
 /**
@@ -425,7 +425,7 @@ function renderGeometries(
       continue;
     }
     // compute the y scale
-    const yScale = yScales.get(ds.groupId);
+    const yScale = yScales.get(getSpecDomainGroupId(ds.spec));
     if (!yScale) {
       continue;
     }

src/chart_types/xy_chart/utils/axis_utils.test.ts

@@ -728,6 +728,7 @@ describe('Axis computational utils', () => {
       getCustomStyle(0, 5),
       tickPosition,
       Position.Left,
+      0,
       axisPosition,
       axisDimensions,
       true,
@@ -749,6 +750,7 @@ describe('Axis computational utils', () => {
       getCustomStyle(90),
       tickPosition,
       Position.Left,
+      90,
       axisPosition,
       axisDimensions,
       true,
@@ -774,6 +776,7 @@ describe('Axis computational utils', () => {
       getCustomStyle(90),
       tickPosition,
       Position.Right,
+      90,
       axisPosition,
       axisDimensions,
       true,
@@ -799,6 +802,7 @@ describe('Axis computational utils', () => {
       getCustomStyle(),
       tickPosition,
       Position.Right,
+      0,
       axisPosition,
       axisDimensions,
       true,
@@ -829,6 +833,7 @@ describe('Axis computational utils', () => {
       getCustomStyle(0, 5),
       tickPosition,
       Position.Top,
+      0,
       axisPosition,
       axisDimensions,
       true,
@@ -854,6 +859,7 @@ describe('Axis computational utils', () => {
       getCustomStyle(90),
       tickPosition,
       Position.Top,
+      90,
       axisPosition,
       axisDimensions,
       true,
@@ -863,18 +869,19 @@ describe('Axis computational utils', () => {
     expect(rotatedLabelProps).toEqual({
       offsetX: 0,
       offsetY: -50,
-      textOffsetX: 0,
+      textOffsetX: 50,
       textOffsetY: 0,
       x: 0,
       y: -10,
-      align: 'center',
+      align: 'right',
       verticalAlign: 'middle',
     });
 
     const bottomRotatedLabelProps = getTickLabelProps(
       getCustomStyle(90),
       tickPosition,
       Position.Bottom,
+      90,
       axisPosition,
       axisDimensions,
       true,
@@ -884,18 +891,19 @@ describe('Axis computational utils', () => {
     expect(bottomRotatedLabelProps).toEqual({
       offsetX: 0,
       offsetY: 50,
-      textOffsetX: 0,
+      textOffsetX: -50,
       textOffsetY: 0,
       x: 0,
       y: 20,
-      align: 'center',
+      align: 'left',
       verticalAlign: 'middle',
     });
 
     const bottomUnrotatedLabelProps = getTickLabelProps(
       getCustomStyle(90),
       tickPosition,
       Position.Bottom,
+      90,
       axisPosition,
       axisDimensions,
       true,