JSFiddle - React, Tailwind, and code Playground

by Rushan Sakhibgareev

JavaScript

var plotChart = function () {
        var me = this;

        me.plotWidth = 900;
        me.plotHeight = 400;

        var transitionMatrix = {
            redWells: '42',
            greenWells: '237',
            orangeWells: '23',
            crw: '107',

            redToGreen: '28',
            greenToRed: '22',
            redToOrange: '3',
            orangeToRed: '2',
            greenToOrange: '17',
            orangeToGreen: '14',

            greyToRed: '3',
            greyToOrange: '0',
            greyToGreen: '9',
            redToGrey: '2',
            orangeToGrey: '0',
            greenToGrey: '6'
        };

        var gadg = {
            w0: me.plotWidth,
            h0: me.plotHeight,
            x0: 0,
            y0: 0,
            dx: 0,
            dy: 0
        };

gadg['l'] = gadg.w0;
        // if (gadg.w0 > 2*gadg.h0) {
        //     gadg.l = 2*gadg.h0;
        //     //gadg.x0 = (gadg.w0-gadg.l)/2;
        //
        //     gadg.dx = (gadg.w0-gadg.l)/2;
        // }
        //
        // if (gadg.h0 > 0.5*gadg.w0) {
        //     //gadg.y0 = (gadg.h0-0.5*gadg.w0)/2;
        //     gadg.dy = (gadg.h0-0.5*gadg.w0)/2;
        // }

        gadg['w'] = gadg.l;
        gadg['h'] = (4/9)*gadg.l;



        var dims ={
            x0green: 0.1,
            y0green: 0.125,
            x0red: 0.44,
            y0red: 0.125,
            x0orange: 0.44,
            y0orange: 0.625,
            x0grey: 0.28,
            y0grey: 0.275,
            hGreen: 0.75,
            hRed: 0.25,
            hOrange: 0.25,
            hGrey: 0.45,
            wGreen: 0.08,
            wRed: 0.08,
            wOrange: 0.08,
            wGrey: 0.08
        };

        var texts ={
            x0green: 	dims.x0green+0.5*dims.wGreen,
            y0green: 	dims.y0green+0.5*dims.hGreen,
            x0red: 		dims.x0red+0.5*dims.wRed,
            y0red: 		dims.y0red+0.5*dims.hRed,
            x0orange: dims.x0orange+0.5*dims.wOrange,
            y0orange:...