From 7df6f260e29a188ed15a25eabc56f104dc77ef93 Mon Sep 17 00:00:00 2001 From: rkyle35242 Date: Thu, 25 Apr 2024 15:03:53 -0500 Subject: [PATCH 1/3] support a custom starting point --- src/SegmentedArc.js | 6 +- src/__tests__/SegmentedArc.spec.js | 6 + .../__snapshots__/SegmentedArc.spec.js.snap | 126 ++++++++++++++++++ 3 files changed, 136 insertions(+), 2 deletions(-) diff --git a/src/SegmentedArc.js b/src/SegmentedArc.js index 2006544..a2d087a 100644 --- a/src/SegmentedArc.js +++ b/src/SegmentedArc.js @@ -27,6 +27,7 @@ export const SegmentedArc = ({ rangesTextStyle = styles.rangeTextStyle, capInnerColor = '#28E037', capOuterColor = '#FFFFFF', + angleStart = 0, children }) => { const [arcAnimatedValue] = useState(new Animated.Value(0)); @@ -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; const effectiveRadius = radius + Math.max(filledArcWidth, emptyArcWidth); const margin = 12; @@ -201,7 +202,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; diff --git a/src/__tests__/SegmentedArc.spec.js b/src/__tests__/SegmentedArc.spec.js index 515c582..804f15b 100644 --- a/src/__tests__/SegmentedArc.spec.js +++ b/src/__tests__/SegmentedArc.spec.js @@ -96,4 +96,10 @@ describe('SegmentedArc', () => { wrapper = getWrapper(props); expect(wrapper.getByTestId(testId).props).toMatchSnapshot(); }); + + it('sets the arc starting point', () => { + props.angleStart = 420; + wrapper = getWrapper(props); + expect(wrapper.getByTestId(testId).props).toMatchSnapshot(); + }); }); diff --git a/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap b/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap index 822d644..ff9f41b 100644 --- a/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap +++ b/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap @@ -524,6 +524,132 @@ exports[`SegmentedArc renders with middle content 1`] = ` } `; +exports[`SegmentedArc sets the arc starting point 1`] = ` +{ + "children": [ + + + + + + + + + , + 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": [ From 4b688c18b5ed3163afcf7475b424aa59649750b2 Mon Sep 17 00:00:00 2001 From: rkyle35242 Date: Thu, 25 Apr 2024 15:35:24 -0500 Subject: [PATCH 2/3] properly calculate spacing --- src/SegmentedArc.js | 2 +- .../__snapshots__/SegmentedArc.spec.js.snap | 200 +++++++++--------- 2 files changed, 101 insertions(+), 101 deletions(-) diff --git a/src/SegmentedArc.js b/src/SegmentedArc.js index 9d56934..87df62f 100644 --- a/src/SegmentedArc.js +++ b/src/SegmentedArc.js @@ -95,7 +95,7 @@ export const SegmentedArc = ({ const arcDegreeScale = segment.arcDegreeScale; const previousSegmentEnd = !!index ? arcs[index - 1].end : arcsStart; const start = previousSegmentEnd + (!!index ? spaceBetweenSegments : 0); - const end = (arcDegree - totalSpacing) * arcDegreeScale + start; + const end = arcDegree * arcDegreeScale + start - spaceBetweenSegments; const valueMax = 100 * segment.scale; const effectiveScaledValue = Math.min(remainingValue, valueMax); diff --git a/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap b/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap index f1eeced..2159b0b 100644 --- a/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap +++ b/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap @@ -28,11 +28,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 225, - "filled": 225, + "end": 223, + "filled": 223, "filledColor": "#0000FF", "isComplete": true, - "start": 159, + "start": 157.5, }, "margin": 12, "radius": 100, @@ -55,8 +55,8 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 21, - "filled": 21, + "end": 20.5, + "filled": 20.5, "filledColor": "#FF0000", "isComplete": true, "start": -45, @@ -72,11 +72,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 89, - "filled": 89, + "end": 88, + "filled": 88, "filledColor": "#FFA500", "isComplete": true, - "start": 23, + "start": 22.5, } } /> @@ -89,11 +89,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 157, - "filled": 157, + "end": 155.5, + "filled": 155.5, "filledColor": "#00FF00", "isComplete": true, - "start": 91, + "start": 90, } } /> @@ -106,11 +106,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 225, - "filled": 225, + "end": 223, + "filled": 223, "filledColor": "#0000FF", "isComplete": true, - "start": 159, + "start": 157.5, } } /> @@ -154,11 +154,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, }, "margin": 12, "radius": 100, @@ -186,8 +186,8 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43.5, - "filled": 43.5, + "end": 43, + "filled": 43, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -203,11 +203,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 89, - "filled": 89, + "end": 88, + "filled": 88, "filledColor": "#FFA500", "isComplete": true, - "start": 45.5, + "start": 45, } } /> @@ -220,11 +220,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 134.5, - "filled": 134.5, + "end": 133, + "filled": 133, "filledColor": "#00FF00", "isComplete": true, - "start": 91, + "start": 90, } } /> @@ -237,11 +237,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, } } /> @@ -286,11 +286,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, }, "margin": 12, "radius": 100, @@ -313,8 +313,8 @@ exports[`SegmentedArc renders default 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43.5, - "filled": 43.5, + "end": 43, + "filled": 43, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -330,11 +330,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 89, - "filled": 89, + "end": 88, + "filled": 88, "filledColor": "#FFA500", "isComplete": true, - "start": 45.5, + "start": 45, } } /> @@ -347,11 +347,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 134.5, - "filled": 134.5, + "end": 133, + "filled": 133, "filledColor": "#00FF00", "isComplete": true, - "start": 91, + "start": 90, } } /> @@ -364,11 +364,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, } } /> @@ -412,11 +412,11 @@ exports[`SegmentedArc renders segments with arc degree scales 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#FFA500", "isComplete": true, - "start": 144.8, + "start": 144, }, "margin": 12, "radius": 100, @@ -456,8 +456,8 @@ exports[`SegmentedArc renders segments with arc degree scales 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 142.8, - "filled": 142.8, + "end": 142, + "filled": 142, "filledColor": "#FFA500", "isComplete": true, "start": 90, @@ -473,11 +473,11 @@ exports[`SegmentedArc renders segments with arc degree scales 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#FFA500", "isComplete": true, - "start": 144.8, + "start": 144, } } /> @@ -521,11 +521,11 @@ exports[`SegmentedArc renders with ensured arc degree scales when missing from s "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#FFA500", "isComplete": true, - "start": 136, + "start": 135, }, "margin": 12, "radius": 100, @@ -565,8 +565,8 @@ exports[`SegmentedArc renders with ensured arc degree scales when missing from s "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 134, - "filled": 134, + "end": 133, + "filled": 133, "filledColor": "#FFA500", "isComplete": true, "start": 90, @@ -582,11 +582,11 @@ exports[`SegmentedArc renders with ensured arc degree scales when missing from s "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#FFA500", "isComplete": true, - "start": 136, + "start": 135, } } /> @@ -630,11 +630,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, }, "margin": 12, "radius": 100, @@ -657,8 +657,8 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43.5, - "filled": 43.5, + "end": 43, + "filled": 43, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -674,11 +674,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 89, - "filled": 89, + "end": 88, + "filled": 88, "filledColor": "#FFA500", "isComplete": true, - "start": 45.5, + "start": 45, } } /> @@ -691,11 +691,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 134.5, - "filled": 134.5, + "end": 133, + "filled": 133, "filledColor": "#00FF00", "isComplete": true, - "start": 91, + "start": 90, } } /> @@ -708,11 +708,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, } } /> @@ -770,11 +770,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 600, - "filled": 600, + "end": 598, + "filled": 598, "filledColor": "#0000FF", "isComplete": true, - "start": 556.5, + "start": 555, }, "margin": 12, "radius": 100, @@ -797,8 +797,8 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 463.5, - "filled": 463.5, + "end": 463, + "filled": 463, "filledColor": "#FF0000", "isComplete": true, "start": 420, @@ -814,11 +814,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 509, - "filled": 509, + "end": 508, + "filled": 508, "filledColor": "#FFA500", "isComplete": true, - "start": 465.5, + "start": 465, } } /> @@ -831,11 +831,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 554.5, - "filled": 554.5, + "end": 553, + "filled": 553, "filledColor": "#00FF00", "isComplete": true, - "start": 511, + "start": 510, } } /> @@ -848,11 +848,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 600, - "filled": 600, + "end": 598, + "filled": 598, "filledColor": "#0000FF", "isComplete": true, - "start": 556.5, + "start": 555, } } /> @@ -896,11 +896,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, }, "margin": 12, "radius": 100, @@ -923,8 +923,8 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43.5, - "filled": 43.5, + "end": 43, + "filled": 43, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -940,11 +940,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 89, - "filled": 89, + "end": 88, + "filled": 88, "filledColor": "#FFA500", "isComplete": true, - "start": 45.5, + "start": 45, } } /> @@ -957,11 +957,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 134.5, - "filled": 134.5, + "end": 133, + "filled": 133, "filledColor": "#00FF00", "isComplete": true, - "start": 91, + "start": 90, } } /> @@ -974,11 +974,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 180, - "filled": 180, + "end": 178, + "filled": 178, "filledColor": "#0000FF", "isComplete": true, - "start": 136.5, + "start": 135, } } /> From 0246dc476cf413e94f3c09dc348f59108dd40f97 Mon Sep 17 00:00:00 2001 From: rkyle35242 Date: Thu, 25 Apr 2024 15:36:07 -0500 Subject: [PATCH 3/3] Revert "properly calculate spacing" This reverts commit 4b688c18b5ed3163afcf7475b424aa59649750b2. --- src/SegmentedArc.js | 2 +- .../__snapshots__/SegmentedArc.spec.js.snap | 200 +++++++++--------- 2 files changed, 101 insertions(+), 101 deletions(-) diff --git a/src/SegmentedArc.js b/src/SegmentedArc.js index 87df62f..9d56934 100644 --- a/src/SegmentedArc.js +++ b/src/SegmentedArc.js @@ -95,7 +95,7 @@ export const SegmentedArc = ({ const arcDegreeScale = segment.arcDegreeScale; const previousSegmentEnd = !!index ? arcs[index - 1].end : arcsStart; const start = previousSegmentEnd + (!!index ? spaceBetweenSegments : 0); - const end = arcDegree * arcDegreeScale + start - spaceBetweenSegments; + const end = (arcDegree - totalSpacing) * arcDegreeScale + start; const valueMax = 100 * segment.scale; const effectiveScaledValue = Math.min(remainingValue, valueMax); diff --git a/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap b/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap index 2159b0b..f1eeced 100644 --- a/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap +++ b/src/__tests__/__snapshots__/SegmentedArc.spec.js.snap @@ -28,11 +28,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 223, - "filled": 223, + "end": 225, + "filled": 225, "filledColor": "#0000FF", "isComplete": true, - "start": 157.5, + "start": 159, }, "margin": 12, "radius": 100, @@ -55,8 +55,8 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 20.5, - "filled": 20.5, + "end": 21, + "filled": 21, "filledColor": "#FF0000", "isComplete": true, "start": -45, @@ -72,11 +72,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 88, - "filled": 88, + "end": 89, + "filled": 89, "filledColor": "#FFA500", "isComplete": true, - "start": 22.5, + "start": 23, } } /> @@ -89,11 +89,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 155.5, - "filled": 155.5, + "end": 157, + "filled": 157, "filledColor": "#00FF00", "isComplete": true, - "start": 90, + "start": 91, } } /> @@ -106,11 +106,11 @@ exports[`SegmentedArc automatically increases the component's height when arcDeg "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 223, - "filled": 223, + "end": 225, + "filled": 225, "filledColor": "#0000FF", "isComplete": true, - "start": 157.5, + "start": 159, } } /> @@ -154,11 +154,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, }, "margin": 12, "radius": 100, @@ -186,8 +186,8 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43, - "filled": 43, + "end": 43.5, + "filled": 43.5, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -203,11 +203,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 88, - "filled": 88, + "end": 89, + "filled": 89, "filledColor": "#FFA500", "isComplete": true, - "start": 45, + "start": 45.5, } } /> @@ -220,11 +220,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 133, - "filled": 133, + "end": 134.5, + "filled": 134.5, "filledColor": "#00FF00", "isComplete": true, - "start": 90, + "start": 91, } } /> @@ -237,11 +237,11 @@ exports[`SegmentedArc renders arc with ranges: shows ranges 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, } } /> @@ -286,11 +286,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, }, "margin": 12, "radius": 100, @@ -313,8 +313,8 @@ exports[`SegmentedArc renders default 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43, - "filled": 43, + "end": 43.5, + "filled": 43.5, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -330,11 +330,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 88, - "filled": 88, + "end": 89, + "filled": 89, "filledColor": "#FFA500", "isComplete": true, - "start": 45, + "start": 45.5, } } /> @@ -347,11 +347,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 133, - "filled": 133, + "end": 134.5, + "filled": 134.5, "filledColor": "#00FF00", "isComplete": true, - "start": 90, + "start": 91, } } /> @@ -364,11 +364,11 @@ exports[`SegmentedArc renders default 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, } } /> @@ -412,11 +412,11 @@ exports[`SegmentedArc renders segments with arc degree scales 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#FFA500", "isComplete": true, - "start": 144, + "start": 144.8, }, "margin": 12, "radius": 100, @@ -456,8 +456,8 @@ exports[`SegmentedArc renders segments with arc degree scales 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 142, - "filled": 142, + "end": 142.8, + "filled": 142.8, "filledColor": "#FFA500", "isComplete": true, "start": 90, @@ -473,11 +473,11 @@ exports[`SegmentedArc renders segments with arc degree scales 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#FFA500", "isComplete": true, - "start": 144, + "start": 144.8, } } /> @@ -521,11 +521,11 @@ exports[`SegmentedArc renders with ensured arc degree scales when missing from s "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#FFA500", "isComplete": true, - "start": 135, + "start": 136, }, "margin": 12, "radius": 100, @@ -565,8 +565,8 @@ exports[`SegmentedArc renders with ensured arc degree scales when missing from s "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 133, - "filled": 133, + "end": 134, + "filled": 134, "filledColor": "#FFA500", "isComplete": true, "start": 90, @@ -582,11 +582,11 @@ exports[`SegmentedArc renders with ensured arc degree scales when missing from s "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#FFA500", "isComplete": true, - "start": 135, + "start": 136, } } /> @@ -630,11 +630,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, }, "margin": 12, "radius": 100, @@ -657,8 +657,8 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43, - "filled": 43, + "end": 43.5, + "filled": 43.5, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -674,11 +674,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 88, - "filled": 88, + "end": 89, + "filled": 89, "filledColor": "#FFA500", "isComplete": true, - "start": 45, + "start": 45.5, } } /> @@ -691,11 +691,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 133, - "filled": 133, + "end": 134.5, + "filled": 134.5, "filledColor": "#00FF00", "isComplete": true, - "start": 90, + "start": 91, } } /> @@ -708,11 +708,11 @@ exports[`SegmentedArc renders with middle content 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, } } /> @@ -770,11 +770,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 598, - "filled": 598, + "end": 600, + "filled": 600, "filledColor": "#0000FF", "isComplete": true, - "start": 555, + "start": 556.5, }, "margin": 12, "radius": 100, @@ -797,8 +797,8 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 463, - "filled": 463, + "end": 463.5, + "filled": 463.5, "filledColor": "#FF0000", "isComplete": true, "start": 420, @@ -814,11 +814,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 508, - "filled": 508, + "end": 509, + "filled": 509, "filledColor": "#FFA500", "isComplete": true, - "start": 465, + "start": 465.5, } } /> @@ -831,11 +831,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 553, - "filled": 553, + "end": 554.5, + "filled": 554.5, "filledColor": "#00FF00", "isComplete": true, - "start": 510, + "start": 511, } } /> @@ -848,11 +848,11 @@ exports[`SegmentedArc sets the arc starting point 1`] = ` "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 598, - "filled": 598, + "end": 600, + "filled": 600, "filledColor": "#0000FF", "isComplete": true, - "start": 555, + "start": 556.5, } } /> @@ -896,11 +896,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, }, "margin": 12, "radius": 100, @@ -923,8 +923,8 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "First Segment", }, "emptyColor": "#F2F3F5", - "end": 43, - "filled": 43, + "end": 43.5, + "filled": 43.5, "filledColor": "#FF0000", "isComplete": true, "start": 0, @@ -940,11 +940,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Second Segment", }, "emptyColor": "#F2F3F5", - "end": 88, - "filled": 88, + "end": 89, + "filled": 89, "filledColor": "#FFA500", "isComplete": true, - "start": 45, + "start": 45.5, } } /> @@ -957,11 +957,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Third Segment", }, "emptyColor": "#F2F3F5", - "end": 133, - "filled": 133, + "end": 134.5, + "filled": 134.5, "filledColor": "#00FF00", "isComplete": true, - "start": 90, + "start": 91, } } /> @@ -974,11 +974,11 @@ exports[`SegmentedArc sets the last segment for lastFilledSegment prop when fill "label": "Fourth Segment", }, "emptyColor": "#F2F3F5", - "end": 178, - "filled": 178, + "end": 180, + "filled": 180, "filledColor": "#0000FF", "isComplete": true, - "start": 135, + "start": 136.5, } } />