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.

Sign up for GitHub

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

Support custom start #81

Closed
wants to merge 4 commits into from
Closed

Support custom start #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7df6f26
support a custom starting point
rkyle35242 Apr 25, 2024
175f551
merge dev
rkyle35242 Apr 25, 2024
4b688c1
properly calculate spacing
rkyle35242 Apr 25, 2024
0246dc4
Revert "properly calculate spacing"
rkyle35242 Apr 25, 2024
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
6 changes: 4 additions & 2 deletions src/SegmentedArc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const SegmentedArc = ({
rangesTextStyle = styles.rangeTextStyle,
capInnerColor = '#28E037',
capOuterColor = '#FFFFFF',
angleStart = 0,
children
}) => {
const [arcAnimatedValue] = useState(new Animated.Value(0));
Expand All @@ -41,7 +42,7 @@ export const SegmentedArc = ({
const totalSpacing = totalSpaces * spaceBetweenSegments;

const arcSegmentDegree = (arcDegree - totalSpacing) / totalArcs;
const arcsStart = 90 - arcDegree / 2;
const arcsStart = angleStart || 90 - arcDegree / 2;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think it's worth documenting any guidance on realistic values here? Or does it feel pretty obvious. Code makes sense, just thinking aloud

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there is an unrealistic value. Starting at 720 would just effectively be 0, since the value represents degrees.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example of 720 angleStart:

image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about arcStartDegree? Also, would you be able to update docs too along with the previously added arcDegreeScale property? Could be done separately. https://github.com/shipt/segmented-arc-for-react-native?tab=readme-ov-file#-props


const effectiveRadius = radius + Math.max(filledArcWidth, emptyArcWidth);
const margin = 12;
Expand Down Expand Up @@ -216,7 +217,8 @@ SegmentedArc.propTypes = {
rangesTextColor: PropTypes.string,
rangesTextStyle: PropTypes.object,
capInnerColor: PropTypes.string,
capOuterColor: PropTypes.string
capOuterColor: PropTypes.string,
angleStart: PropTypes.number
};
export { SegmentedArcContext };
export default SegmentedArc;
6 changes: 6 additions & 0 deletions src/__tests__/SegmentedArc.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,4 +154,10 @@ describe('SegmentedArc', () => {
expect(Animated.timing).toHaveBeenCalledTimes(1);
expect(Easing.out).toHaveBeenCalledWith(Easing.ease);
});

it('sets the arc starting point', () => {
props.angleStart = 420;
wrapper = getWrapper(props);
expect(wrapper.getByTestId(testId).props).toMatchSnapshot();
});
});
126 changes: 126 additions & 0 deletions src/__tests__/__snapshots__/SegmentedArc.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,6 +742,132 @@ exports[`SegmentedArc renders with middle content 1`] = `
}
`;

exports[`SegmentedArc sets the arc starting point 1`] = `
{
"children": [
<Svg
height={126}
preserveAspectRatio="xMidYMid meet"
width={240}
>
<Context.Provider
value={
{
"animationDuration": 1000,
"arcAnimatedValue": 0,
"arcSegmentDegree": 43.5,
"arcsStart": 420,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

"capInnerColor": "#28E037",
"capOuterColor": "#FFFFFF",
"center": 120,
"emptyArcWidth": 8,
"filledArcWidth": 8,
"isAnimated": true,
"lastFilledSegment": {
"centerX": 120,
"centerY": 120,
"data": {
"label": "Fourth Segment",
},
"emptyColor": "#F2F3F5",
"end": 600,
"filled": 600,
"filledColor": "#0000FF",
"isComplete": true,
"start": 556.5,
},
"margin": 12,
"radius": 100,
"ranges": [],
"rangesTextColor": "#000000",
"rangesTextStyle": {
"fontSize": 12,
},
"spaceBetweenSegments": 2,
"totalArcs": 4,
}
}
>
<Segment
arc={
{
"centerX": 120,
"centerY": 120,
"data": {
"label": "First Segment",
},
"emptyColor": "#F2F3F5",
"end": 463.5,
"filled": 463.5,
"filledColor": "#FF0000",
"isComplete": true,
"start": 420,
}
}
/>
<Segment
arc={
{
"centerX": 120,
"centerY": 120,
"data": {
"label": "Second Segment",
},
"emptyColor": "#F2F3F5",
"end": 509,
"filled": 509,
"filledColor": "#FFA500",
"isComplete": true,
"start": 465.5,
}
}
/>
<Segment
arc={
{
"centerX": 120,
"centerY": 120,
"data": {
"label": "Third Segment",
},
"emptyColor": "#F2F3F5",
"end": 554.5,
"filled": 554.5,
"filledColor": "#00FF00",
"isComplete": true,
"start": 511,
}
}
/>
<Segment
arc={
{
"centerX": 120,
"centerY": 120,
"data": {
"label": "Fourth Segment",
},
"emptyColor": "#F2F3F5",
"end": 600,
"filled": 600,
"filledColor": "#0000FF",
"isComplete": true,
"start": 556.5,
}
}
/>
<Cap />
</Context.Provider>
</Svg>,
undefined,
],
"style": {
"alignItems": "center",
},
"testID": "container",
}
`;

exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fillValue is equal or greater than 100% 1`] = `
{
"children": [
Expand Down
Loading