JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container"></div>

JavaScript

(input => {

      input.marketShare = +formattedValue(input.marketShare);
      input.powerInTheMind = +formattedValue(input.powerInTheMind);
      input.eqSigSteady = +formattedValue(input.eqSigSteady);
      input.eqSigDecreasedSpend = +formattedValue(input.eqSigDecreasedSpend);
      input.eqSigShareLost = +formattedValue(input.eqSigShareLost);
      input.eqSigShareGained = +formattedValue(input.eqSigShareGained);
      input.eqSigIncreasedSpend = +formattedValue(input.eqSigIncreasedSpend);


      // calculation of equityGap
      var equityGap;
      if (input.marketShare > input.powerInTheMind) {
        equityGap = input.powerInTheMind - input.marketShare;
      }
      else {
        equityGap = input.marketShare - input.powerInTheMind;
      }
      equityGap = formattedValue(equityGap);

      var chosenBrandValues = [input.marketShare, 1, equityGap];
      var powerInMindValue = input.powerInTheMind;
      var steadyvalue = input.eqSigSteady;
      var riskValue = parseFloat(input.eqSigDecreasedSpend.toString()) + parseFloat(input.eqSigShareLost.toString());
      var opportunityValue = parseFloat(input.eqSigShareGained.toString()) + parseFloat(input.eqSigIncreasedSpend.toString());

      var decreaseSpendValue1 = input.eqSigDecreasedSpend;
      var shareLostValue1 = input.eqSigShareLost;
      var shareGainedValue1 = input.eqSigShareGained;
      var increaseSpendValue1 = input.eqSigIncreasedSpend;


      function formattedValue(value) {
        return Number.parseFloat(value).toFixed(1);
      }

      var chosenBrandFixedValues = chosenBrandValues.slice();
      var powerInMindFixedValue = powerInMindValue;
      var chosenBrandName = input.brandName;
      var CmpBrandNames = ["At Risk", "Opportunity", "Steady"];
      var implicitChartHeight = 400;
      var implicitChartwidth = 900;




      var steadyXPosition = implicitChartwidth / 2 - steadyvalue / 2;
      var steadyYPosition = implicitChartHeight / 2;

      var marketShareWidth;
     ...