Follow-up to Victory Native: Support polar charts, which merged initial <victorypie> support as part of #90546.
Per PR review, the following items were deferred and should be addressed in this follow-up.
Tasks
1. Refactor pie label parsing for performance
Apply @situchan's suggestion: move computations that are not slice-specific from VictoryChartPieLabel to VictoryChartPie to avoid per-slice HTML re-parse on every render.
Currently VictoryChartPieLabel re-parses the label component HTML inside the per-slice render callback. The suggested refactor:
- Parse
labelcomponent, labels, dataLabels, and labelRadius once in VictoryChartPie
- Pass parsed
labelTemplate, labels, dataLabels, and labelRadius as props to VictoryChartPieLabel
- Keep only slice-specific positioning logic in
VictoryChartPieLabel
The full suggested code diff is in the review comment linked above.
2. Add line label indicator support
Support the labelindicatorinneroffset and labelindicatorouteroffset attributes on <victorypie>. These draw connector lines from pie slices to their external labels.
The sample HTML from PR #91895 uses:
labelindicatorinneroffset="15" labelindicatorouteroffset="8"
3. Add padangle support
Support the padangle attribute on <victorypie> to create gaps between pie slices. Also support style.data.stroke for slice borders.
Currently the renderer only parses radii and renders bare <Pie.Slice>, dropping slice separation. See Codex review comment.
The sample HTML uses:
padangle="0.5" style="{ data: { stroke: '#F7F2EF' }, }"
4. Support Expensify New Kansas font
Support the Expensify New Kansas font family in chart labels. The center "Total" label in the sample HTML uses fontFamily: 'Expensify New Kansas' for the dollar amount line.
Verify the font renders correctly on all platforms (Android, iOS, web).
Follow-up to Victory Native: Support polar charts, which merged initial
<victorypie>support as part of #90546.Per PR review, the following items were deferred and should be addressed in this follow-up.
Tasks
1. Refactor pie label parsing for performance
Apply @situchan's suggestion: move computations that are not slice-specific from
VictoryChartPieLabeltoVictoryChartPieto avoid per-slice HTML re-parse on every render.Currently
VictoryChartPieLabelre-parses the label component HTML inside the per-slice render callback. The suggested refactor:labelcomponent,labels,dataLabels, andlabelRadiusonce inVictoryChartPielabelTemplate,labels,dataLabels, andlabelRadiusas props toVictoryChartPieLabelVictoryChartPieLabelThe full suggested code diff is in the review comment linked above.
2. Add line label indicator support
Support the
labelindicatorinneroffsetandlabelindicatorouteroffsetattributes on<victorypie>. These draw connector lines from pie slices to their external labels.The sample HTML from PR #91895 uses:
3. Add padangle support
Support the
padangleattribute on<victorypie>to create gaps between pie slices. Also supportstyle.data.strokefor slice borders.Currently the renderer only parses radii and renders bare
<Pie.Slice>, dropping slice separation. See Codex review comment.The sample HTML uses:
4. Support Expensify New Kansas font
Support the
Expensify New Kansasfont family in chart labels. The center "Total" label in the sample HTML usesfontFamily: 'Expensify New Kansas'for the dollar amount line.Verify the font renders correctly on all platforms (Android, iOS, web).