Создание индикатора Dynami c в React с использованием процентов - PullRequest
Новая
       34

Создание индикатора Dynami c в React с использованием процентов

2 голосов
/ 09 июля 2020

Я создаю калькулятор ИМТ, и я пытаюсь создать датчик, который бы отражал ИМТ. Я использую датчик, использующий 'response-gauge-chart', и он отображается следующим образом 

   <GaugeChart
        id="gauge-chart"
        percent={gageCalc()}
        nrOfLevels={3}
        colors={["#FFFF00", "#228B22", "#FF0000"]}
      />

Это gageCalc() и словарь, который я использовал: 

  const gageCalc = () => {
    try {
      var c = [Math.round(calcBMI())];
      var x = dict[Math.round(calcBMI())];
      if (c < 16) return 0.0;
      if (c > 30) return 1;
      return x;
    } catch (e) {
     // does nothing right now
    }
  };

var dict = {
    16: 0.0,
    17: 0.16,
    18: 0.33,
    19: 0.4,
    20: 0.4,
    21: 0.5,
    22: 0.5,
    23: 0.5,
    24: 0.66,
    25: 0.66,
    26: 0.7,
    27: 0.825,
    28: 0.825,
    29: 0.9,
    30: 1,
  };

Словарь вроде работает, но не самый точный. Я просто распределил проценты как можно лучше. calcBMI() просто возвращает ИМТ человека. Итак, моя проблема в том, что стрелка датчика установлена ​​с использованием процента, основанного на значении, возвращаемом из gageCalc(). Помимо словаря, я не знаю, как сделать стрелку на шкале ИМТ точной.

Например, если у кого-то ИМТ 22, то у него нормальный ИМТ, и стрелка будет в зеленая область шкалы, но если у них ИМТ 28, то мне нужно, чтобы стрелка попала в красную зону. Так выглядит датчик: Мой датчик ИМТ

Это таблица, которой я следую: 

Underweight (yellow) = Below 18.5
Healthy Weight (green) = 18.5 to 24.9
Overweight (red) = 30 or greater

Есть ли формула, которая могла бы сделать это для меня? Есть ли лучший измеритель, который я могу использовать, или мой словарь - лучший способ сделать это. Спасибо!

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Хорошо, часть вашей информации противоречива, поэтому я сделал некоторые предположения и попытался использовать свой здравый смысл для устранения несоответствий, я сделал следующие предположения

  • 16 bmi переводится в 0% на диаграмма
  • 30 bmi соответствует 100% на диаграмме

Я принял пороговые значения

  • 16-18,5 = недостаточный вес (желтый)
  • 18.5-25 = Здоровый (зеленый)
  • 25-30 = Избыточный (красный) - я расширил эту границу, поскольку в предоставленной вами информации был пробел.

Мы должен обрабатывать каждый из этих диапазонов как свои 33% диаграммы, поэтому мы пытаемся вычислить конкретное c значение, которое находится между диапазонами 0-33, 33-66 и 66-100.

Это означает, что ваше визуальное представление будет несколько искажать данные, однако из других требований кажется, что это необходимо.

У меня есть базовая c формула, которую я придумал для каждого сегмента

if (bmi> = lowerBoun dary && <верхняя граница) </p>

return (bmi - lowerBoundary) / (верхняя граница - нижняя граница) / треть, чтобы получить ответ на основе 33%, затем добавьте модификатор в зависимости от того, в каком сегменте вы находитесь (либо 0, 0,33 или 0,66)

Это дало мне следующий блок if 

 const gageCalc = bmi => {
    var result = 0;
    if (bmi >= 16 && bmi <= 18.5) {
      result = getPercentage(bmi, 16, 18.5, 0);
    } else if (bmi > 18.5 && bmi < 25) {
      result = getPercentage(bmi, 18.5, 25, 0.33);
    } else if (bmi >= 25 && bmi <= 30) {
      result = getPercentage(bmi, 25, 30, 0.66);
    }
    return result;
  };

  function getPercentage(bmi, lowerBound, upperBound, segmentAdjustment) {
    return (
      (bmi - lowerBound) / (upperBound - lowerBound) / 3 + segmentAdjustment
    );
  }

У меня есть демонстрация этого кода с вашим кодом реакции, готовым к игре с здесь

0 голосов
/ 10 июля 2020

Один из вариантов следующий: 

Underweight (yellow) = Below 18.5 --> 0-33%
Healthy Weight (green) = 18.5 to 24.9 --> 34-67%
Overweight (red) = 25 or greater --> 67 - 100%

Если вы равномерно нанесете ИМТ, вы можете сказать, что 0% составляет 12,1, а 100% - 31,3 (я взял разницу в зеленой зоне и добавил / вычитается из желтого / красного.)

Тогда ваша математика: 

if(BMI>31.3){
    x=100%
} else if (BMI<12.1){
    x=0%
} else {
    x= ((BMI -12.1)/19.2) * 100%
}

19.2 - это разница между max / min, указанным выше.

...