fix(axis): dual axis x positioning of bars (#760)

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

@@ -278,6 +278,7 @@ export function computeSeriesGeometries(
     bubbles: 0,
     bubblePoints: 0,
   };
+
   formattedDataSeries.stacked.forEach((dataSeriesGroup) => {
     const { groupId, dataSeries, counts } = dataSeriesGroup;
     const yScale = yScales.get(groupId);
@@ -300,6 +301,7 @@ export function computeSeriesGeometries(
       enableHistogramMode,
     );
     orderIndex = counts.barSeries > 0 ? orderIndex + 1 : orderIndex;
+
     areas.push(...geometries.areas);
     lines.push(...geometries.lines);
     bars.push(...geometries.bars);
@@ -316,14 +318,16 @@ export function computeSeriesGeometries(
     geometriesCounts.bubbles += geometries.geometriesCounts.bubbles;
     geometriesCounts.bubblePoints += geometries.geometriesCounts.bubblePoints;
   });
+  orderIndex = 0;
   formattedDataSeries.nonStacked.forEach((dataSeriesGroup) => {
-    const { groupId, dataSeries } = dataSeriesGroup;
+    const { groupId, dataSeries, counts } = dataSeriesGroup;
     const yScale = yScales.get(groupId);
     if (!yScale) {
       return;
     }
+
     const geometries = renderGeometries(
-      stackedBarsInCluster,
+      stackedBarsInCluster + orderIndex,
       totalBarsInCluster,
       false,
       dataSeries,
@@ -336,6 +340,7 @@ export function computeSeriesGeometries(
       chartTheme,
       enableHistogramMode,
     );
+    orderIndex = counts.barSeries > 0 ? orderIndex + counts.barSeries : orderIndex;
 
     areas.push(...geometries.areas);
     lines.push(...geometries.lines);

stories/bar/49_test_dual_axis.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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, Chart, Position, ScaleType, Settings } from '../../src';
+
+export const Example = () => {
+  const stack13 = boolean('Stack bars1 and bars3', true);
+  const stack24 = boolean('Stack bars2 and bars4', false);
+  return (
+    <Chart className="story-chart">
+      <Settings showLegend />
+      <Axis id="count1" title="count" position={Position.Left} />
+      <Axis id="count2" groupId="2" title="count" position={Position.Right} />
+      <Axis id="x" title="goods" position={Position.Bottom} />
+      <BarSeries
+        id="bars1"
+        xScaleType={ScaleType.Ordinal}
+        groupId="2"
+        xAccessor="x"
+        yAccessors={['y']}
+        stackAccessors={stack13 ? ['y'] : undefined}
+        data={[
+          { x: 'trousers', y: 252 },
+          { x: 'watches', y: 499 },
+          { x: 'bags', y: 489 },
+          { x: 'cocktail dresses', y: 391 },
+        ]}
+      />
+
+      <BarSeries
+        id="bars2"
+        xScaleType={ScaleType.Ordinal}
+        xAccessor="x"
+        yAccessors={['y']}
+        stackAccessors={stack24 ? ['y'] : undefined}
+        data={[
+          { x: 'trousers', y: 390 },
+          { x: 'watches', y: 23 },
+          { x: 'bags', y: 750 },
+          { x: 'cocktail dresses', y: 853 },
+        ]}
+      />
+
+      <BarSeries
+        id="bars3"
+        groupId="2"
+        xScaleType={ScaleType.Ordinal}
+        xAccessor="x"
+        stackAccessors={stack13 ? ['y'] : undefined}
+        data={[
+          { x: 'trousers', y: 39 },
+          { x: 'watches', y: 2 },
+          { x: 'bags', y: 75 },
+          { x: 'cocktail dresses', y: 150 },
+        ]}
+      />
+
+      <BarSeries
+        id="bars4"
+        xScaleType={ScaleType.Ordinal}
+        xAccessor="x"
+        stackAccessors={stack24 ? ['y'] : undefined}
+        data={[
+          { x: 'trousers', y: 39 },
+          { x: 'watches', y: 2 },
+          { x: 'bags', y: 75 },
+          { x: 'cocktail dresses', y: 150 },
+        ]}
+      />
+    </Chart>
+  );
+};

stories/bar/bars.stories.tsx

@@ -78,3 +78,4 @@ export { Example as testDiscover } from './43_test_discover';
 export { Example as testSingleHistogramBarChart } from './44_test_single_histogram';
 export { Example as testMinHeightPositiveAndNegativeValues } from './46_test_min_height';
 export { Example as testTooltipAndRotation } from './48_test_tooltip';
+export { Example as testDualYAxis } from './49_test_dual_axis';