fix(partition): linked label on a larger than 180 degree slice (#726)

This commit fix an issue arose when a single large (>180 degrees) slice is forced to have a linked label, eg. via a large or infinite `maximumSection` value (the default is, fill text)
The root cause was that the preexisting calculation simply took the midpoint of the start and end angle, and if it was shorter to go along the other arc of the circle, then that's what it did. So it always resulted in an exact overlap with two slices where one was over 180 degrees and linked labels were forced.

fix #699

src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts

@@ -98,7 +98,7 @@ export function linkTextLayout(
       return dist1 - dist2;
     })
     .map((node: ShapeTreeNode) => {
-      const midAngle = trueBearingToStandardPositionAngle(meanAngle(node.x0, node.x1));
+      const midAngle = trueBearingToStandardPositionAngle((node.x0 + node.x1) / 2);
       const north = midAngle < TAU / 2 ? 1 : -1;
       const rightSide = TAU / 4 < midAngle && midAngle < (3 * TAU) / 4 ? 0 : 1;
       const west = rightSide ? 1 : -1;

stories/sunburst/6_pie_chart_linked_labels.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React from 'react';
+
+import { Chart, Datum, Partition, PartitionLayout } from '../../src';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
+
+export const Example = () => (
+  <Chart className="story-chart">
+    <Partition
+      id="spec_1"
+      data={[
+        { sitc1: 'Machinery and transport equipment', exportVal: 5 },
+        { sitc1: 'Mineral fuels, lubricants and related materials', exportVal: 4 },
+      ]}
+      valueAccessor={(d: Datum) => d.exportVal as number}
+      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`}
+      layers={[
+        {
+          groupByRollup: (d: Datum) => d.sitc1,
+          // nodeLabel: (d: Datum) => d,
+          fillLabel: { textInvertible: true },
+          shape: {
+            fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+          },
+        },
+      ]}
+      config={{ partitionLayout: PartitionLayout.sunburst, linkLabel: { maximumSection: 10000 } }}
+    />
+  </Chart>
+);

stories/sunburst/sunburst.stories.tsx

@@ -32,6 +32,7 @@ export { Example as valueFormattedWithCategoricalColorPalette } from './3_value_
 export { Example as withFillLabels } from './4_fill_labels';
 export { Example as donutChartWithFillLabels } from './5_donut';
 export { Example as withDirectTextLabels } from './6_pie_chart_labels';
+export { Example as withLinkedTextLabels } from './6_pie_chart_linked_labels';
 export { Example as someZeroValueSlice } from './7_zero_slice';
 export { Example as sunburstWithTwoLayers } from './8_sunburst_two_layers';
 export { Example as sunburstWithThreeLayers } from './9_sunburst_three_layers';