How to use tinygradient - 10 common examples

renderReport() {
    // const color = d3
    //   .scaleLinear()
    //   .domain([0, 90])
    //   .range(['#ef5350', '#81C784']);
    // let arr = [];
    // for (let i = 5; i < 100; i += 20)arr.push(i);
    // arr = _.shuffle(arr);
    const gradient = tinygradient(['#ef5350', '#81C784']);
    const { features, featureById } = this.props.home;

    // const trs = /.+<\/tr>/mig.exec(this.state.reportData.replace(/\r|\n/g, ''));

    // statements coverage
    const coverage = features.reduce((c, fid) => {
      c[fid] = { tested: 0, total: 0 };
      return c;
    }, {});
    const html = this.state.reportData.replace(/[\r\n]/g, '');
    /<span class="strong">([\d.]+)% &lt;\/span&gt;/.test(html);
    const overallCoverage = parseFloat(RegExp.$1);
    const res = /.+&lt;\/table&gt;/gi.exec(html);
    const node = document.createElement('div');
    node.innerHTML = res[0];
    const table = node.firstChild;<table class="coverage-summary"></table></span>

render() {
    const gradient = tinygradient(...this.props.colors).rgb(this.props.data.length + 2); // .rgb expects a value > 2
    const colorData = this.props.data.map((d, i) => ({
      ...d,
      color: gradient[i].toHexString(),
      index: i,
    }));

    return (
      <div style="{this.props.style}">
        {this.props.title ? <div>{this.props.title}</div> : null}
         data.color}
          onMouseEnter={this.onMouseEnter}
          onMouseLeave={this.onMouseLeave}
          fill={[{ match: x =&gt; x.data.index === this.state.highlightedIndex, id: 'lines' }]}</div>

_key++
    ) {
      args[_key] = arguments[_key]
    }

    return (
      (_ret = ((_temp = ((_this = possibleConstructorReturn(
        this,
        _React$Component.call.apply(_React$Component, [this].concat(args))
      )),
      _this)),
      (_this.clipboardIcon = null),
      (_this.state = {
        // Returns a gradient object
        gradient: _this.props.reverse
          ? gradient(_this.props.colorOne, _this.props.colorTwo).reverse()
          : gradient(_this.props.colorOne, _this.props.colorTwo),
        // Default colors for creating a gradient
        colorOne: _this.props.colorOne,
        colorTwo: _this.props.colorTwo,
        // Color stops are stopping points in a gradient that show a specific color
        // at the exact location we set.
        // Stop loc. for color one
        colorStopOne: 0,
        // Stop loc. for color two
        colorStopTwo: 0,
        // Show copy msg
        showMsg: false
      }),
      (_this.hideMsg = function() {
        return _this.setState({ showMsg: false })
      }),

var createGradient = function createGradient(colors) {
  return gradient(
    colors.sort(function(a, b) {
      // We need to shift the value of either color stop because tinygradient
      // throws an error when two stops are equal.
      if (a.pos && b.pos && a.pos === b.pos) {
        /* eslint-disable no-param-reassign */
        a.pos += 0.01
      }

      return a.pos - b.pos
    })
  )
}

) {
      args[_key] = arguments[_key]
    }

    return (
      (_ret = ((_temp = ((_this = possibleConstructorReturn(
        this,
        _React$Component.call.apply(_React$Component, [this].concat(args))
      )),
      _this)),
      (_this.clipboardIcon = null),
      (_this.state = {
        // Returns a gradient object
        gradient: _this.props.reverse
          ? gradient(_this.props.colorOne, _this.props.colorTwo).reverse()
          : gradient(_this.props.colorOne, _this.props.colorTwo),
        // Default colors for creating a gradient
        colorOne: _this.props.colorOne,
        colorTwo: _this.props.colorTwo,
        // Color stops are stopping points in a gradient that show a specific color
        // at the exact location we set.
        // Stop loc. for color one
        colorStopOne: 0,
        // Stop loc. for color two
        colorStopTwo: 0,
        // Show copy msg
        showMsg: false
      }),
      (_this.hideMsg = function() {
        return _this.setState({ showMsg: false })
      }),
      (_this.setColorStopOne = function(pos) {

if (
                                data &&
                                data.commits &&
                                data.commits > 0 &&
                                role === "leaf" &&
                                maxCommits > 0
                            ) {
                                level = data.level;
                                r = 228 - 11 * level * 2;
                                g = 242 - 6 * level * 2;
                                b = 243 - 6 * level * 2;

                                var saturation = data.commits / maxCommits;

                                var rgbObject = tinygradient(
                                    "rgb(" + r + ", " + g + ", " + b + ")",
                                    "red"
                                ).rgbAt(saturation);
                                //var rgbObject = tinygradient('rgb(5, 5, 5)', 'red').rgbAt(saturation);

                                r = Math.round(rgbObject._r);
                                g = Math.round(rgbObject._g);
                                b = Math.round(rgbObject._b);
                                return "rgb(" + r + ", " + g + ", " + b + ")";
                            } else if (data) {
                                level = data.level;
                                r = 228 - 11 * level * 2;
                                g = 242 - 6 * level * 2;
                                b = 243 - 6 * level * 2;
                                return "rgb(" + r + ", " + g + ", " + b + ")";
                            }

generateGradient = () => {
    const iterator = randomColors().values()

    const colorOne = iterator.next().value
    const colorTwo = iterator.next().value

    this.setState(
      { colorOne, colorTwo, gradient: gradient(colorOne, colorTwo) },
      this.propCallback
    )
  }

return (count) => {
          const gradientLength = count < 2 ? 3 : count;
          const tinyColors = tinygradient([_.first(value.seed), _.last(value.seed)]).rgb(gradientLength);
          const colors = _.map(tinyColors, tinyColor =>
            tinyColor.toHexString());

          return count < 2 ? [colors[1]] : colors.reverse();
        };
        break;

_this.setState(function(state) {
            return {
              gradient: gradient(color, state.colorTwo)
            }
          }, _this.propCallback)
        }

const determineColor = (type, progress) =>
    typeof type === 'string' ? type : tinygradient(type).rgbAt(progress);