JSFiddle - React, Tailwind, and code Playground

by rockyhuber

HTML

<div id="container">

JavaScript

import React, { Component } from 'react';
var CanvasJSReact = require('../component/canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class Admin extends Component {

  constructor(props) {
    super(props);

    this.state = {
      data: [
        { y:  40, label: "HTML" },
        { y:  50, label: "ReactJS" },
        { y:  80, label: "CSS" },
        { y:  21, label: "Javascript" },
        { y:  23, label: "Canvas" },
        { y:  42, label: "Node.js" },
        { y:  89, label: "Redux" }
      ]
    }
    this.mouseDown = false;
    this.selected = null;
    this.xSnapDistance;
    this.ySnapDistance;
    this.xValue;
    this.yValue;
    this.changeCursor = false;
    this.timerId = null;
  }

  getPosition = (e) => {

    var dim = document.getElementsByClassName('canvasjs-chart-container')[0].getBoundingClientRect();
    var relX = e.pageX - dim.left;
    var relY = e.pageY - dim.top;
    this.xValue = Math.round(this.chart.axisX[0].conversionParameters.pixelPerUnit * relX);
    this.yValue = Math.round(this.chart.axisY[0].conversionParameters.pixelPerUnit * relY);
   
  }

  searchDataPoint = () => {
    var dps = this.chart.data[0].dataPoints;

    for (var i = 0; i < dps.length; i++) {

      if ( (this.xValue >= dps[i].x - this.xSnapDistance && this.xValue <= dps[i].x + this.xSnapDistance) &&
        (this.yValue >= dps[i].y - this.ySnapDistance && this.yValue <= dps[i].y + this.ySnapDistance) ) {
        if (this.mouseDown) {
          this.selected = i;
          break;
        }
        else {
          this.changeCursor = true;
          break;
        }
      }
      else {
        this.selected = null;
        this.changeCursor = false;
      }
    }
  }

  componentDidMount() {

    document.getElementsByClassName('canvasjs-chart-container')[0].addEventListener('mousedown', (e) => {
      this.xSnapDistance = this.chart.axisX[0].convertPixelToValue(this.chart.get("dataPointWidth")) /...