feat: merge series domain with the domain of another group (opensearc…

…h-project#912)

This commit will fix a regression that prevents the correct use of `useDefaultGroupDomain`.
It also includes a small feature that allows the consumer to specify a `groupId` on the same prop to allow merging the series domain with the domain of a different `groupId`.

Co-authored-by: nickofthyme <[email protected]>

packages/osd-charts/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;

packages/osd-charts/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],

packages/osd-charts/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());
-}

packages/osd-charts/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;
       }

packages/osd-charts/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;
+}

packages/osd-charts/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;
     }

packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts

@@ -350,8 +350,12 @@ export interface SeriesSpec extends Spec {
    * @defaultValue {@link DEFAULT_GLOBAL_ID}
    */
   groupId: string;
-  /** when using a different groupId this option will allow compute in the same domain of the global domain */
-  useDefaultGroupDomain?: boolean;
+  /**
+   * When specify a groupId on this series, this option can be used to compute this series domain as it was part
+   * of the default group (when using the boolean value true)
+   * or as the series was part of the specified group (when issuing a string)
+   */
+  useDefaultGroupDomain?: boolean | string;
   /** An array of data */
   data: Datum[];
   /** The type of series you are looking to render */

packages/osd-charts/stories/bar/52_multi_group_same_domain.tsx

@@ -0,0 +1,148 @@
+/*
+ * 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 { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Axis, BarSeries, Settings, Chart, Position, ScaleType } from '../../src';
+import { SB_KNOBS_PANEL } from '../utils/storybook';
+
+export const Example = () => {
+  const data1 = [
+    [1, 2],
+    [2, 2],
+    [3, 3],
+    [4, 5],
+  ];
+  const data2 = [
+    [1, 1],
+    [2, 2],
+    [3, 3],
+    [4, 4],
+  ];
+  const data3 = [
+    [1, 6],
+    [2, 6],
+    [3, 3],
+    [4, 2],
+  ];
+  const data4 = [
+    [1, 2],
+    [2, 6],
+    [3, 2],
+    [4, 9],
+  ];
+  const data5 = [
+    [1, 1],
+    [2, 7],
+    [3, 5],
+    [4, 6],
+  ];
+  const useDifferentGroup = boolean('Apply a different groupId to some series', false);
+  const useDefaultDomain = boolean('Use the same data domain for each group', false);
+
+  return (
+    <Chart renderer="canvas" className="story-chart">
+      <Settings />
+      <Axis id="bottom" position={Position.Bottom} />
+      <Axis
+        id="left y"
+        title="Default groupId"
+        position={Position.Left}
+        tickFormat={(d: any) => Number(d).toFixed(2)}
+      />
+      <Axis
+        id="right y"
+        groupId={useDifferentGroup && !useDefaultDomain ? 'otherGroupId' : undefined}
+        title={useDifferentGroup ? 'Other groupId' : 'Default groupId'}
+        position={Position.Right}
+        tickFormat={(d: any) => Number(d).toFixed(2)}
+      />
+      <BarSeries
+        id="stacked bar 1"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        stackAccessors={[0]}
+        data={data1}
+      />
+      <BarSeries
+        id="stacked bar 2"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        stackAccessors={[0]}
+        data={data2}
+      />
+
+      <BarSeries
+        id="stacked bar A"
+        groupId={useDifferentGroup ? 'otherGroupId' : undefined}
+        useDefaultGroupDomain={useDefaultDomain}
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        stackAccessors={[0]}
+        data={data4}
+      />
+      <BarSeries
+        id="stacked bar B"
+        groupId={useDifferentGroup ? 'otherGroupId' : undefined}
+        useDefaultGroupDomain={useDefaultDomain}
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        stackAccessors={[0]}
+        data={data5}
+      />
+      <BarSeries
+        id="non stacked bar"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        data={data3}
+      />
+    </Chart>
+  );
+};
+
+// storybook configuration
+Example.story = {
+  parameters: {
+    options: { selectedPanel: SB_KNOBS_PANEL },
+    info: {
+      text: `You can group together series specifying a \`groupId\` prop on the series.
+In the case of barchart, series with the same \`groupId\` will be grouped and eventually stacked together.
+
+The data Y domain of each group, specified by \`groupId\`, is computed independently. This is reflected also on the rendering
+where the Y value position is scaled independently on the Y axis from the other groups. An axis with the same \`groupId\`
+will reflect that scale.
+
+Use \`useDefaultGroupDomain\` if the same domain is required on every series. If you sent a \`boolean\` value, it will use
+the group id applied by default on every series with no specific groupId. You can also pass a \`string\` to use a different \`groupId\`
+see next storybook example.
+      `,
+    },
+  },
+};