JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.min.css">
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<div id="diagram" style="height:600px;"></div>

JavaScript

var data = [{
  "LE_Code": "CO001",
  "LE_Country": "USA",
  "PID": 1
}, {
  "LE_Code": "CO002",
  "LE_Country": "Canada",
  "PID": 2
}, {
  "LE_Code": "CO100",
  "LE_Country": "USA",
  "PID": 3
}, {
  "LE_Code": "CO101",
  "LE_Country": "China",
  "PID": 4
}, {
  "LE_Code": "CO105",
  "LE_Country": "United States",
  "PID": 5
}, {
  "LE_Code": "CO110",
  "LE_Country": "United States",
  "PID": 6
}, {
  "LE_Code": "CO180",
  "LE_Country": "Canada",
  "PID": 7
}, {
  "LE_Code": "CO210",
  "LE_Country": "Brazil",
  "PID": 8
}];

var connections = [{
  "AccountID": 4,
  "Country": "Singapore",
  "F_LE_Code": "CO210",
  "Function": 4,
  "LE_Code": "CO510",
  "Label": "OSP",
  "PID": 1,
  "Performed": 0,
  "Return": 0,
  "Treatment": "Cost +",
  "TreatmentID": 2
}, {
  "AccountID": 4,
  "Country": "Singapore",
  "F_LE_Code": "CO210",
  "Function": 4,
  "LE_Code": "CO110",
  "Label": "OSP",
  "PID": 2,
  "Performed": 0,
  "Return": 0,
  "Treatment": "Cost +",
  "TreatmentID": 2
}, {
  "AccountID": 10,
  "Country": "Austria",
  "F_LE_Code": "CO105",
  "Function": 7,
  "LE_Code": "CO001",
  "Label": "Royalty",
  "PID": 57,
  "Performed": 1,
  "Return": 0,
  "Treatment": "% Sales",
  "TreatmentID": 1
}, {
  "AccountID": 10,
  "Country": "China",
  "F_LE_Code": "CO780",
  "Function": 7,
  "LE_Code": "CO527",
  "Label": "Royalty",
  "PID": 58,
  "Performed": 1,
  "Return": 0,
  "Treatment": "% Sales",
  "TreatmentID": 1
}, {
  "AccountID": 10,
  "Country": "United States",
  "F_LE_Code": "CO780",
  "Function": 7,
  "LE_Code": "CO100",
  "Label": "Royalty",
  "PID": 59,
  "Performed": 1,
  "Return": 20,
  "Treatment": "% Sales",
  "TreatmentID": 1
}, {
  "AccountID": 5,
  "Country": "Isle Of Man",
  "F_LE_Code": "CO001",
  "Function": 2,
  "LE_Code": "CO210",
  "Label": "CSP",
  "PID": 60,
  "Performed": 1,
  "Return": 1,
  "Treatment": "Cost +",
  "TreatmentID": 2
}];


function visualTemplate(options) {
  var dataviz = kendo.dataviz;
  var g = new dataviz.diagram.Group();
...