Skip to content

Commit

Permalink
feat: add pie size prop (#392)
Browse files Browse the repository at this point in the history
  • Loading branch information
zibs authored Oct 15, 2024
1 parent 349a8ab commit 0225751
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/hip-worms-cover.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"victory-native": patch
---

Add pie size prop
7 changes: 5 additions & 2 deletions lib/src/pie/PieChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ type PieChartProps = {
innerRadius?: number | string;
circleSweepDegrees?: number;
startAngle?: number;
size?: number;
};

export const PieChart = (props: PieChartProps) => {
Expand All @@ -20,6 +21,7 @@ export const PieChart = (props: PieChartProps) => {
circleSweepDegrees = CIRCLE_SWEEP_DEGREES,
startAngle: _startAngle = 0,
children,
size,
} = props;
const {
canvasSize,
Expand All @@ -35,12 +37,13 @@ export const PieChart = (props: PieChartProps) => {
0,
);

const { width, height } = canvasSize; // Get the dynamic canvas size
const width = size ?? canvasSize.width; // Get the dynamic canvas size
const height = size ?? canvasSize.height; // Get the dynamic canvas size

// The size of the chart will need to be adjusted if the labels are positioned outside the chart.
// ie we need to decrease the Pie Charts radius to account for the labels so the labels don't get cut off.
const radius = Math.min(width, height) / 2; // Calculate the radius based on canvas size
const center = vec(width / 2, height / 2);
const center = vec(canvasSize.width / 2, canvasSize.height / 2);

const data = React.useMemo(() => {
let startAngle = _startAngle; // Initialize the start angle for the first slice
Expand Down
4 changes: 4 additions & 0 deletions website/docs/polar/pie/pie-charts.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,10 @@ A `number` which defines how many degrees of the chart should be drawn. The defa

A `number` which defines the starting angle of the chart. Changing this prop will rotate the chart.

### `size`

A `number` which defines the size of the chart. This defaults to the canvas' width and height. This can be overriden with this prop (in case you want to position labels outside the chart, for example)

### `children`

The `children` prop is a render function which maps through the data and whose sole argument is each individual `slice` of the pie, allowing you to customize each slice as needed. E.g. this slice will have all the data needed to render a `Pie.Slice />`.
Expand Down

0 comments on commit 0225751

Please sign in to comment.