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

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';