JSFiddle - React, Tailwind, and code Playground

by Rushan Sakhibgareev

HTML

<svg height="300" width="300"></svg>

JavaScript

var classComplDiagram = function()
{
	this.diagramBox = {
		height: 900,
  	width: 300
	},
	this.d3 = {},
  this.wellName = "US-159",
  this.wellPad = "K11",
  this.totalDepth = {
  	MD: 2750.1,
    TVDSS: 2466.2,
    units: "m"
  }, 
  this.date = "2014/02/25",
  this.shoe = {
  	diameter: {
    	value: 177.8,
      units: "mm"
    } 
  },
  this.casings = [
  	{
    	type: "liner",
      name: "Хвостовик",
      topDepth: {
    	  	MD: 2402,
      	  TVDSS: 2230,
        	units: "m"        	
        },
			depth: {
    	  	MD: 2742.7,
      	  TVDSS: 2466.2,
        	units: "m"
      	},  
      outerDiam: {
    		value: 114,
      	units: "mm"
    	},
      innerDiam: {
    		value: 99,
      	units: "mm"
    	},
      minHFrac: 0.2
    },
    {
				type: "casing",
        name: "Эксп колонна",
        topDepth: {
    	  	MD: 0,
      	  TVDSS: 74.9,
        	units: "m"        	
        },
				depth: {
    	  	MD: 2439.5,
      	  TVDSS: 2263.2,
        	units: "m"
      	},
      outerDiam: {
    		value: 177.8,
      	units: "mm"
    	},
      innerDiam: {
    		value: 159.4,
      	units: "mm"
    	},
    },
    {
				type: "casing",
        name: "Пром колонна",
        topDepth: {
    	  	MD: 0,
      	  TVDSS: 74.9,
        	units: "m"        	
        },    	
      depth: {
      	MD: 665.5,
        TVDSS: 769.8,
        units: "m"
      },
      outerDiam: {
    		value: 244.5,
      	units: "mm"
    	},
      innerDiam: {
    		value: 226.7,
      	units: "mm"
    	},
    },
    {
				type: "casing",
        name: "Кондуктор",
        topDepth: {
    	  	MD: 0,
      	  TVDSS: 74.9,
        	units: "m"        	
        },    	
      depth: {
      	MD: 254.1,
        TVDSS: 179.1,
        units: "m"
      },
      outerDiam: {
    		value: 324,
      	units: "mm"
    	},
      innerDiam: {
    		value: 302,
      	units: "mm"
    	},
    }    
  ],
	this.artLift = {
  	type: "ESP",
    name: "D700EZ",
    pump: {
    	depth: {
      	MD: 2180.9,
      ...