JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div id='vis'>
</div>

Babel + JSX

/**
 * This plots a OTV plot. It is expected to initialize with `new OTV()`,
 * then run `.bindData(data)` then `.render()`. There is some order to the internal functions and
 * due to state, it is expected to run `.setFrame()` before any painting is done like
 * `setVisualization()` or `.updateRender()`.
 *
 * @module OTV
 */
class AOTLineChart {

	constructor() {
  
    let margin = 10,
        padding = 10,
        labelHeight = 35,
        axisHeight = 15,
        observationsHeight = 70,
        observationsAxisHeight = 10,
        barHeight = 35;
    
  	this.config = {
    	style: {
      	labelHeight,
        barHeight,
        observationsHeight,
        observationsAxisHeight,
        axisHeight,
        text: {fill: 'black'},
        legendCircles: { radius: 10 },
        svg: {
          width: 850,
          margin,
          padding,
          backgroundColor: 'white'
        },
      },
    };
    
    this.labels = {
      legend: 'legend',
    	xAxis: 'x-axis',
      yAxis: 'yAxis',
      actual: 'actual',
      predicted: 'predicted'
    };
    
    this.config.style[this.labels.predicted] = {
    	fill: "#3ca3e8"
    };
    
    this.config.style[this.labels.actual] = {
    	fill: "#3ca3e8"
    };
    
    this.config.style[this.labels.xAxis] = {
    	fill: "#3ca3e8"
    };
    
    this.config.style[this.labels.yAxis] = {
    	fill: "#3ca3e8"
    };
 
  }

  
  /**
   * Builds static svg frame content that should not be updated when data is updated.
   * Height is set as the total number of backtests, with another bar for the holdout,
   * along with all padding and margins.
   *
   * @returns this
   */
  setFrame() {
  	this.rendered = {};
    this.rendered.frame = this.element;
    
    this.config.style.svg.height = 2 * (this.config.style.svg.padding + this.config.style.svg.margin) +
      this.config.style.observationsHeight +
      this.config.style.observationsAxisHeight +
      this.config.style.svg.padding +
     ...