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": 67,
            "traffic": "163.8 KB",
            "resources": 16,
            "port": 0,
            "groups": [
              "resourcegrouplocation",
              "resourcegroupos",
              null
            ]
          },
          {
            "host": "qa-template",
            "connections": 16,
            "traffic": "268.0 KB",
            "resources": 13,
            "port": 0,
            "groups": [
              null,
              "resourcegroupwindows"
            ]
          },
          {
            "host": "qa-03350",
            "groups": [
              null
            ],
            "connections": 3,
            "traffic": "614 B",
            "resources": 3,
            "port": 0
          },
          {
            "host": "qa-03133",
            "groups": [
              null
            ],
            "connections": 2,
            "traffic": "252 B",
            "resources": 4,
            "port": 0
          },
          {
            "host": "qa-ubuntu16-swimline",
            "groups": [
              null
            ],
            "connections": 1,
            "traffic": "12.8 KB",
            "resources": 3,
            "port": 0
          }
        ],
        "items": [
          {
            "host": "qa-ubuntuserver16-x64-sanitypool",
            "connections": 67,
            "traffic": "163.8 KB",
            "resources": 16,
            "port": 0,
            "groups": [
              "resourcegrouplocation",
              "resourcegroupos",
              null
            ]
          },
          {
            "host":...