JSFiddle - React, Tailwind, and code Playground

by Florent27000

HTML

<canvas id="canvas" width="200" height="30"></canvas>

JavaScript

(function(SentimentMeter) {

  'use strict';

//  SentimentMeter.LinearGauge = SentimentMeter.LinearGauge || {};

  // constructor 
  SentimentMeter.LinearGauge = function(canvas,inputLow,inputHigh){

    this.canvas = canvas;
    this.inputLow = inputLow;
    this.inputHigh = inputHigh;
    this.canvasWidth = Number(canvas.getAttribute("Width"));
    this.canvasHeight = Number(canvas.getAttribute("height"));
  }

  SentimentMeter.LinearGauge.prototype = {
    
    constructor: SentimentMeter.LinearGauge,

    translateRange: function(
      Input , inputHigh , inputLow , outputHigh , OutputLow
    ){

        inputHigh = inputHigh ? inputHigh : this.inputHigh;
        inputLow = inputLow ? inputLow : this.inputLow;

        outputHigh =  outputHigh ? outputHigh : 1;
        OutputLow = OutputLow ? OutputLow : 0;  

        return ((Input - inputLow) / (inputHigh - inputLow)) * 
              (outputHigh - OutputLow) + OutputLow;
    },

    draw: function(stops){

      // setup drawing context
      var ctx = this.canvas.getContext("2d");

      // define the gradient
      var gradient = ctx.createLinearGradient(
        0, 0, this.canvasWidth, 0
      );

      // draw stops from an array
      // where every item is an array contains
      // the position and the color of the gradient
      for (var i = 0; i < stops.length; i++) {
        gradient.addColorStop(
          this.translateRange(stops[i][0]),
          stops[i][1]
        );   
      }

      // defines the fill style on canvas 
      ctx.fillStyle = gradient;

      // draw the a rect filled with created gradient
      ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

      return this;
    },

    drawPointer: function(value,color,height){

        // setup drawing context
        var ctx = canvas.getContext("2d");
        height = height ? height : 10;
        ctx.strokeStyle = color ? color : '#000';
        ctx.lineWidth = 3;

        // draw line indicate a value 
       ...