JSFiddle - React, Tailwind, and code Playground

by Jaume Vinyes

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<div class='ViewModelScope'...

JavaScript

/******** Bootstrap *******/

// Load Google Charts
google.load("visualization", "1", {packages:["corechart"]});
//google.charts.setOnLoadCallback(drawChart);

// Create ViewModel and bind it to the View
$(document).ready(function () {
  const data = $(".ViewModelScope").data("model");
  const viewModelName = $(".ViewModelScope").data("viewmodel");
  const viewModel = new ViewModelFactory(viewModelName, data);
  viewModel.Initialize();
  ko.applyBindingsWithValidation(viewModel, document.getElementsByClassName("ViewModelScope")[0]);
  viewModel.DrawChart();
}

/******** Chart ViewModel ********/
class ToolAvailabilityViewModel extends ViewModelBase {
  constructor(data) {
    super(data);
  }
  
  DrawChart() {
  	var data = new google.visualization.DataTable(this.Original); // any JSON data
  	var options = {
      title : 'RUN SHIFTS YTD (Top 12 CUSTOMERS)',
      vAxis: {title: 'Shifts | Runs'},
      // hAxis: {title: 'Month'},
      seriesType: 'bars',
      series: {2: {type: 'line'}},
      animation:{
          duration: 1000,
          easing: 'out',
          startup: true
        },
      colors:['blue','green', 'red']
		};  
  	var chart = new google.visualization.ComboChart(document.getElementById('comboChart'));
    chart.draw(data, options);
  }

  SetMapping() {
    let map = {
    	// Implement if needed
    };
    return map;
  }

  RestoreFilter() {
		// Implement if needed
  }

  FilterReport() {
		// Implement if needed
  }

  SaveValues() {
		// Implement if needed
  }
  
    //GetRunShiftsPerCustomer(includeLow) {
  //   const runsByCustomer = _groupBy(this.Original, key);     
  //}
  
  _groupBy(source, key) {
    return source.reduce(function(rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
	}
}

/******** ViewModel Factory and Base ********/

// List of ViewModels
const Viewmodels = {
  ChartViewModel
};

// ViewModelFactory
class ViewModelFactory {
  constructor (className, data) {
    return new...