current-data.html

<div
        style={{ backgroundColor: getColorForPercent(percent) }}
        className="singleCard"
      >
        <div className="card-body">
          <div className="row">
            <div className="col-6">
              <Select
                className="select-country"
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
                classNamePrefix="currency"
              />
            </div>
            <div className="col-6">
              <div className="percentage">{percent}%</div>
            </div>
          </div>
          <div className="row">
            <div className="col-6">
              <div className="currentValue">
                {displayCurrentValue.map((val, index) => {
                  return (
                    <span
                      key={index}
                      className={
                        index === intValue + 1 || index === intValue + 2
                          ? "small"
                          : ""
                      }
                    >
                      {val}
                    </span>
                  );
                })}
              </div>
            </div>
            <div className="col-6">
              <div className="tick-text">No Of Ticks</div>
              <div className="tick-options">
                <div
                  onClick={() =>
                    this.setState((state) => {
                      let tick = state.tick;
                      if (tick - 1 < MIN_TICK_COUNT) tick = MIN_TICK_COUNT;
                      else tick--;
                      return {
                        tick,
                      };
                    })
                  }
                  className="minus"
                >
                  -
                </div>
                <div className="tickCount">{this.state.tick}</div>
                <div
                  onClick={() =>
                    this.setState((state) => {
                      let tick = state.tick;
                      if (tick + 1 > MAX_TICK_COUNT) tick = MAX_TICK_COUNT;
                      else tick++;
                      return {
                        tick,
                      };
                    })
                  }
                  className="plus"
                >
                  +
                </div>
              </div>
            </div>
          </div>

          <div style={{ height: "calc(45vh - 120px)", width: "100%" }}>
            <Line
              ref={(ref) => {
                return (this.chart = ref);
              }}
              id={this.props.country}
              data={data}
              width={100}
              height={50}
              options={{
                responsive: true,
                maintainAspectRatio: false,
                showAllTooltips: true,
                tooltips: {
                  backgroundColor: "rgba(0, 0, 0, 0)",
                  bodyFontColor: "#fff",
                  displayColors: false,
                  callbacks: {
                    label: function (tooltipItems, data) {
                      return tooltipItems.value;
                    },
                    title: function () {
                      return "";
                    },
                  },
                },
                legend: {
                  display: false,
                },
                scales: {
                  xAxes: [
                    {
                      gridLines: {
                        display: false,
                        color: "transparent",
                      },
                      ticks: {
                        fontColor: "#fff",
                      },
                    },
                  ],
                  yAxes: [
                    {
                      gridLines: {
                        display: false,
                        drawBorder: false,
                      },
                      ticks: {
                        display: false,
                      },
                    },
                  ],
                },
              }}
            />
          </div>
        </div>
      </div>