How to add width to line unequally around a point react native

Question

Hello I am tried to achieve this image below, where as you increment the score of an attribute the line increases in size depending on the score.

I am at the point where the lines increases in size and decreases in size correctly. However I am finding that as they increase and decrease in size its hard to make them do this around the central point of the circles. Furthermore as I increase the width it adds to both ends of the line rather than just to one side - therefore Im ending up with something like this.

Here the lines can decrease and increase but they are not doing so around a point. Any help would be great. Here is my code so far:

  import React from 'react';
import {View} from "react-native";
import { withAnchorPoint } from 'react-native-anchor-point';

interface PersonalityPlotterDialProps {
    value: number
}

function PersonalityPlotterDial(props: PersonalityPlotterDialProps) {
    const {value} = props;

    const widthCalculator = (value: number) => {
        switch (value) {
            case 0:
                return 0;
            case 1:
                return 37.5;
            case 2:
                return 62.5;
            case 3:
                return 87.5;
            case 4:
                return 112.5;
            case 5:
                return 137.5;
            default:
                return 0;
        }
    };

    const displayCalculator = () => {
        if (widthCalculator(value) === 0) {
            return 'none'
        }
    }

    return (
        
            
                
                    
                        
                            
                                
                                    
                                    
                                    
                                    
                                    
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                    
                                
                            
                        
                    
                
            
        
    );
}

export default PersonalityPlotterDial;

Please let me know if im missing anything as I think it may be some way of doing it with transformations around a point - any help even pointing me in the right direction would be great!

user_14550352 · Answer

I have come up with a solution but dislike it and think it would very easily break on different screen sizes but for now it works. Here is my new code:

  import React from 'react';
import {View} from "react-native";

interface PersonalityPlotterDialProps {
    value: number
}

function PersonalityPlotterDial(props: PersonalityPlotterDialProps) {
    const {value} = props;

    const widthCalculator = (value: number) => {
        switch (value) {
            case 0:
                return 0;
            case 1:
                return 37.5;
            case 2:
                return 62.5;
            case 3:
                return 87.5;
            case 4:
                return 112.5;
            case 5:
                return 137.5;
            default:
                return 0;
        }
    };

    const translateCalculator = (value: number) => {
        switch (value) {
            case 0:
                return 0;
            case 1:
                return 1.05;
            case 2:
                return 1.75;
            case 3:
                return 2.5;
            case 4:
                return 3.2;
            case 5:
                return 3.95;
            default:
                return 0;
        }
    }

    const displayCalculator = () => {
        if (widthCalculator(value) === 0) {
            return 'none'
        }
    }

    return (
        
            
                
                    
                        
                            
                                
                                    
                                    
                                    
                                    
                                    
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                    
                                
                            
                        
                    
                
            
        
    );
}

export default PersonalityPlotterDial;

How to add width to line unequally around a point react native

1 Answers