Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add pie size prop #392

Merged
merged 2 commits into from
Oct 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading