JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<iframe data-graph src="http://charting.vwdservices.com/hchart/v1/telegraaf/template/price/iframe?culture=nl-NL&series=issueid:12272&period=P1D" width="100%" frameborder="0"></iframe>
<a href="#" class="font-weight-bold" data-graph-period="1D">1D</a>
<a href="#" data-graph-period="5D">5D</a>
<a href="#" data-graph-period="1M">1M</a>

CSS

.font-weight-bold {
    font-weight: bold;
}

JavaScript

var Graph = function (code, period) {
  this.code = code || 12272;
  this.period = period || '1D';
  this.attributeName = 'data-graph-period';
  this.addClickHandler();
};

Graph.prototype = {

  getGraph : function () {
    return this._$graph || (this._$graph = $('[data-graph]'));
  },
    
  getPeriods : function () {
    return this._$periods || (this._$periods = $('[' + this.attributeName + ']'));
  },
    
  addClickHandler : function () {
    this.getPeriods().on('click', this.periodsClickHandler.bind(this));
  },

  periodsClickHandler : function (e) {
    e.preventDefault();
    this.updatePeriod(e.currentTarget.getAttribute(this.attributeName));
  },
    
  updatePeriod : function (period) {
    this.period = period;
    this.updateGraph();
    this.selectPeriod();
  },
       
  updateGraph : function () {
    this.getGraph().attr('src', this.generateGraph());
  },

  selectPeriod : function () {
    this.getPeriods().each(function (index, el) {
      var $el = $(el);
      var isCurrent = this.period === $el.attr(this.attributeName);
      $el.toggleClass('font-weight-bold', isCurrent);
    }.bind(this));
  },
  
  generateGraph : function () {
    return 'http://charting.vwdservices.com/hchart/v1/telegraaf/template/price/iframe?culture=nl-NL&series=issueid:' + this.code + '&period=P' + this.period;
  }
};

new Graph();