JSFiddle - React, Tailwind, and code Playground

by ankit_19

HTML

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row first-section">
            
        <div class="col-md-12 graph-section">
            <span class="widget-title internet-title" #widgetTitle><strong>Outbound</strong> connections from Internet</span>
            <div class="col-md-6 zero-padding">
                <span class="widget-title" #widgetTitle><strong>Top 5 services</strong></span>
                <div id="internetoutboundpiechart" class="b-chart"></div>
            </div>
            <div class="col-md-6 zero-padding stack-container">
                <span class="widget-title" #widgetTitle><strong>Bottom 5 services</strong></span>
                <div id="internetoutboundstackchart" class="b-chart"></div>
            </div>
        </div>
    </div>

    <!-- second section -->
    <div class="row second-section">
            <div class="col-md-6 right-border">
                <span class="widget-title" #widgetTitle><strong>Top 5 Source by Unauthorized connection</strong></span>
                <div id="unauthinboundbarchart" class="b-chart"></div>
            </div>
            <div class="col-md-6">
                <span class="widget-title" #widgetTitle><strong>Top 5 Destination by Unauthorized connection</strong></span>
                <div id="unauthoutboundbarchart" class="b-chart"></div>
            </div>
    </div>


    <!-- fourth section -->
    <div class="row fourth-section">
        <div class="col-md-12 graph-section">
            <div id="environmentchordchart" class="b-chart"></div>
        </div>
    </div>
    <div id="export">
    
    </div>

CSS

.first-section,
    .second-section,
    .third-section,
    .fourth-section {
        padding: 0;
        margin: 20px 0;
        background: #ffffff;
        width: 100%;
        }
        .right-border {
            border-right: 1px solid #dddddd;
        }
        .internet-title {
            margin-bottom: 15px;
        }
        .zero-padding {
            padding: 0;
        }
        .stack-container {
            border: 1px solid #dddddd;
        }
            .b-chart {
                width: 100%;
                min-height: 350px;
            }

JavaScript

var data = {
  "data": {
    "summary": {
      "connectionDetails": {
        "total": 307,
        "blocked": 17,
        "environments": 22,
        "frominternet": 107,
        "tointernet": 130,
        "uauthorized": 170
      }
    },
    "unauthorized": {
      "inbound": {
        "topN": [
          {
            "host": "qa-ubuntuserver16-x64-sanitypool",
            "connections": 3,
            "traffic": "583 B",
            "resources": 3,
            "port": 0
          },
          {
            "host": "1aee87a7f4b2",
            "connections": 2,
            "traffic": "81.1 KB",
            "resources": 1,
            "port": 0
          },
          {
            "host": "686467c1db18",
            "connections": 2,
            "traffic": "1.1 KB",
            "resources": 1,
            "port": 0
          }
        ],
        "items": [
          {
            "host": "qa-ubuntuserver16-x64-sanitypool",
            "connections": 3,
            "traffic": "583 B",
            "resources": 3,
            "port": 0
          },
          {
            "host": "1aee87a7f4b2",
            "connections": 2,
            "traffic": "81.1 KB",
            "resources": 1,
            "port": 0
          },
          {
            "host": "686467c1db18",
            "connections": 2,
            "traffic": "1.1 KB",
            "resources": 1,
            "port": 0
          }
        ]
      },
      "outbound": {
        "topN": [
          {
            "host": "1aee87a7f4b2",
            "connections": 14,
            "traffic": "1.1 MB",
            "resources": 10,
            "port": 0
          },
          {
            "host": "qa-ubuntuserver16-x64-sanitypool",
            "connections": 6,
            "traffic": "626 B",
            "resources": 3,
            "port": 0
          },
          {
            "host": "dcd0f2abb7bc",
            "connections": 1,
            "traffic": "470 B",
            "resources": 1,
            "port":...