diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-small-sice-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-small-sice-visually-looks-correct-1-snap.png index 039cf7cfed..1193a5e021 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-small-sice-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-small-sice-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-very-small-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-very-small-visually-looks-correct-1-snap.png index 11f3d0eabd..eb2fc58df3 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-very-small-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-very-small-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-with-linked-text-labels-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-with-linked-text-labels-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..98f08019ab Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-with-linked-text-labels-visually-looks-correct-1-snap.png differ diff --git a/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts index 446f704ddb..901969dfb5 100644 --- a/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts +++ b/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; diff --git a/stories/sunburst/6_pie_chart_linked_labels.tsx b/stories/sunburst/6_pie_chart_linked_labels.tsx new file mode 100644 index 0000000000..1ffa4c2276 --- /dev/null +++ b/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 = () => ( + + 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 } }} + /> + +); diff --git a/stories/sunburst/sunburst.stories.tsx b/stories/sunburst/sunburst.stories.tsx index 6566a9586a..6719fff022 100644 --- a/stories/sunburst/sunburst.stories.tsx +++ b/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';