JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

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":377,"blocked":15,"environments":4,"frominternet":115,"tointernet":184,"uauthorized":281}},"unauthorized":{"inbound":{"topN":[{"host":"qa-ubuntuserver16-x64-sanitypool","groups":[null,"resourcegroupos"],"connections":6,"traffic":"19.6 KB","resources":5,"port":0},{"host":"qa-01016","groups":[null],"connections":2,"traffic":"10.6 KB","resources":2,"port":0},{"host":"80e801f10d78","groups":[null],"connections":1,"traffic":"196 B","resources":1,"port":0},{"host":"1277fc2de018","groups":[null],"connections":1,"traffic":"6.1 KB","resources":1,"port":0},{"host":"cd88fa957099","groups":[null],"connections":1,"traffic":"196 B","resources":1,"port":0}],"items":[{"host":"qa-ubuntuserver16-x64-sanitypool","groups":[null,"resourcegroupos"],"connections":6,"traffic":"19.6 KB","resources":5,"port":0},{"host":"qa-01016","groups":[null],"connections":2,"traffic":"10.6 KB","resources":2,"port":0},{"host":"80e801f10d78","groups":[null],"connections":1,"traffic":"196 B","resources":1,"port":0},{"host":"1277fc2de018","groups":[null],"connections":1,"traffic":"6.1 KB","resources":1,"port":0},{"host":"cd88fa957099","groups":[null],"connections":1,"traffic":"196 B","resources":1,"port":0},{"host":"10.30.65.103","groups":[null],"connections":1,"traffic":"864 B","resources":1,"port":0}]},"outbound":{"topN":[{"host":"qa-ubuntuserver16-x64-sanitypool","groups":[null,"resourcegroupos"],"connections":22,"traffic":"68.6 KB","resources":3,"port":0},{"host":"qa-01016","groups":[null],"connections":1,"traffic":"180 B","resources":1,"port":0}],"items":[{"host":"qa-ubuntuserver16-x64-sanitypool","groups":[null,"resourcegroupos"],"connections":22,"traffic":"68.6 KB","resources":3,"port":0},{"host":"qa-01016","groups":[null],"connections":1,"traffic":"180 B","resources":1,"port":0}]}},"blocked":{"inbound":{"topN":[{"host":"qa-ubuntuserver16-x64-sanitypool","groups":[null],"connections":2,"traffic":"724...