use arc calculations to render range values (#86)

* use arc calculations to render range values * add flag to use new * readme * extra table cell on the readme * grammar * use arcStart for the first range display, default alignment to true * readme * snapz * snapz
shipt · May 6, 2024 · 1637c59 · 1637c59
1 parent 9ff40ce
commit 1637c59
Show file tree

Hide file tree

Showing 6 changed files with 689 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -155,7 +155,7 @@ const segments = [
 | middleContentContainerStyle | object                                                                                                    | {}               | Extra styling for the middle content container                                                                                                                                                                                                                                                                    |
 | capInnerColor               | string                                                                                                    | '#28E037'        | Cap's inner color                                                                                                                                                                                                                                                                                                 |
 | capOuterColor               | string                                                                                                    | '#FFFFFF'        | Cap's outer color                                                                                                                                                                                                                                                                                                 |
-| arcStartDegree              | number                                                                                                    | 0                | Starting point of the arc. Example: A SegmentedArc with an arcStartDegree of 90 will begin drawing the segments at 12 o'clock                                                                                                                                                                                     |
+| alignRangesWithSegments     | bool                                                                                                      | true             | This might be useful when using segment[].arcDegreeScale values to customize the size of individual segments. If you'd like the range display to align with the edge of each segment, pass this prop as `true`. Otherwise, range displays will be distributed evenly across the arc.                              |
 | children                    | function                                                                                                  |                  | Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above.                                                                                                                                                   |
 |                             |
 

diff --git a/src/SegmentedArc.js b/src/SegmentedArc.js
@@ -27,6 +27,7 @@ export const SegmentedArc = ({
   rangesTextStyle = styles.rangeTextStyle,
   capInnerColor = '#28E037',
   capOuterColor = '#FFFFFF',
+  alignRangesWithSegments = true,
   children
 }) => {
   const [arcAnimatedValue] = useState(new Animated.Value(0));
@@ -147,6 +148,7 @@ export const SegmentedArc = ({
       <Svg width={svgWidth} height={svgHeight}>
         <SegmentedArcContext.Provider
           value={{
+            arcs,
             margin,
             center,
             filledArcWidth,
@@ -164,7 +166,8 @@ export const SegmentedArc = ({
             rangesTextColor,
             rangesTextStyle,
             capInnerColor,
-            capOuterColor
+            capOuterColor,
+            alignRangesWithSegments
           }}
         >
           {arcs.map((arc, index) => (
@@ -217,7 +220,8 @@ SegmentedArc.propTypes = {
   rangesTextColor: PropTypes.string,
   rangesTextStyle: PropTypes.object,
   capInnerColor: PropTypes.string,
-  capOuterColor: PropTypes.string
+  capOuterColor: PropTypes.string,
+  alignRangesWithSegments: PropTypes.bool
 };
 export { SegmentedArcContext };
 export default SegmentedArc;