[partition] Centering labels in partitions

[chao813]

Is there a way to center the fill labels in the partitions? I've been looking at the PartialTheme FillLabelConfig but can't find a way to center the labels.

Expected:

Current:

[nickofthyme]

Hey @chao813 unfortunately no, and I don't see a real workaround to this as it currently stands.

There is an issue open here #2128 to improve the current label positioning/sizing for partition charts. I think this would be a good case to add when there is a full circle.

[chao813]

Hi @nickofthyme, what does the padding in the fillLabel do then?

partition: { fillLabel: { padding: { top: 100, bottom: 100, left: 100, right: 100 }, } }

[nickofthyme]

Strangely nothing 🤔

After testing and seeing no affect I dug into the code and found the padding is only passed to the getSectorRowGeometry function, shown below, but the function definition is actually missing two parameters from the GetShapeRowGeometry function type signature after the rotation param, one of which is the padding.

So it's passed in but never accounted for. This is definitely a bug I'll open up a new issue for this to be address alongside #2128 and this centering issue.

elastic-charts/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts

Lines 49 to 77 in 7e319d5

	export const getSectorRowGeometry: GetShapeRowGeometry<RingSectorConstruction> = (
	ringSector,
	cx,
	cy,
	totalRowCount,
	linePitch,
	rowIndex,
	fontSize,
	rotation,
	) => {
	const offset = (totalRowCount / 2) * fontSize + fontSize / 2 - linePitch * rowIndex;
	const topCircline = makeRowCircline(cx, cy, offset, rotation, fontSize, 1);
	const bottomCircline = makeRowCircline(cx, cy, offset, rotation, fontSize, -1);
	const midCircline = makeRowCircline(cx, cy, offset, rotation, 0, 0);
	const valid1 = conjunctiveConstraint(ringSector, { ...topCircline, from: 0, to: TAU })[0];
	if (!valid1) return { rowAnchorX: cx, rowAnchorY: cy, maximumRowLength: 0 };
	const valid2 = conjunctiveConstraint(ringSector, { ...bottomCircline, from: 0, to: TAU })[0];
	if (!valid2) return { rowAnchorX: cx, rowAnchorY: cy, maximumRowLength: 0 };
	const from = Math.max(valid1.from, valid2.from);
	const to = Math.min(valid1.to, valid2.to);
	const midAngle = (from + to) / 2;
	const cheapTangent = Math.max(0, to - from); /* Math.tan(Math.max(0, to - from)) */ // https://en.wikipedia.org/wiki/Small-angle_approximation
	const rowAnchorX = midCircline.r * Math.cos(midAngle) + midCircline.x;
	const rowAnchorY = midCircline.r * Math.sin(midAngle) + midCircline.y;
	const maximumRowLength = cheapTangent * INFINITY_RADIUS;
	return { rowAnchorX, rowAnchorY, maximumRowLength };
	};

But this code is original to the partition chart implementation 3 years ago and hasn't been touched since.