JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://widget.socialmarketanalytics.com/heatmap_widgets/source/js/sma_widget.js?782"></script>
<script src="https://widget.socialmarketanalytics.com/sma_cards/source/js/sma_widget.js?538"></script>
<script src="https://widget.socialmarketanalytics.com/sma_intra_day/source/js/sma_widget.js?415"></script>
<script src="https://widget.socialmarketanalytics.com/sma_intra_day_detail/source/js/sma_widget.js?576"></script>
<script src="https://widget.socialmarketanalytics.com/sma_intra_day_detail_small_cards/source/js/sma_widget.js?539"></script>
<h3>SMA Card</h3>
<div style="height:400px" id="sma_card_container1"></div>
<div id="detail_popup" class="detail-popup detail_light_data">
 <a class="detail_cancel_data" id="detail_cancel_data" href="#"></a>
 <div class="detail_popup_data">
    <a href="javascript:;" onclick="removePopup()" class="detail_data_close_popup" id="detail_data_close_popup"></a>
    <div class="detail_content_data">
       <div class="" id="detail_popup_data">
          <div id="detail_data_popup" class="detail_data_popup"></div>
       </div>
    </div>
 </div>
</div>

<h3>SMA Intra Day</h3>
<div class="card" style="width:505px;padding: 10px 0px 0px 10px;font-family: sans-serif">
<div>
	<div style="
		border-bottom: 1px #dfdfdf solid;
		margin-right: 15px;
		padding-bottom: 5px;
	">Social Sentiment</div>
    <!-- <div id="sma_intraday_container"></div> -->
	<div id="sma_intraday_container"></div>
	<div style="
		border-top: 1px #dfdfdf solid;
		margin-right: 15px;
		padding-bottom: 5px;
		display: inline-block;
		width: 97%;
		font-size: small;
		color: #7676ff;
	">
	<a style="
		float: left;
        border-right: 1px #d6d6d6 solid;
        padding-right: 5px;
	">How to interpret the data</a>
	</div>
</div>
</div>

<h3>SMA Intra Day Detail</h3>
<div style="height:100%" id="sma_intraday_detailed_container"></div>

<h3>SMA Heatmap</h3>
<div style="height:100%" id="sma_heatmap_widget_container"></div>

CSS

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
}


.detail-popup{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.5);transition: opacity 200ms;visibility: hidden;opacity: 0; text-align: center;z-index:99;padding-top: 10%;}
    .detail-popup .detail_light_data{background: rgba(0, 0, 0, 0.5);}
    .detail-popup .detail_content_data{margin: 0 -10px;padding: 20px;}
    .detail_content_data{padding: 10px;}
    .detail-popup .detail_cancel_data{position: absolute;width: 100%;height: 100%;cursor: default; left: 0; top: 0;}
    .detail-popup:target{visibility: visible;opacity: 1;}
    .detail_popup_data{width:80%;text-align:left;margin: 0px auto;padding: 20px 20px 10px;background: #fff;border: 1px solid #666;display:inline-block; margin-left:auto;top:20%;margin-right:auto;box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);position: relative;overflow-y: auto;}
    .detail_light_data .detail_popup_data{border-color: #aaa;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);}
    .detail_popup_data h2{font-size: 30px;}
    .detail_data_close_popup{position:absolute;top: 4px;right: 6px;background: #4e4e4e;z-index: 9;border-radius: 22px;width: 22px;height: 22px;color: #fff;line-height: 0;opacity: 1;}
    .detail_data_close_popup:hover{opacity:1;}
    .detail_data_close_popup:after,.detail_data_close_popup:before{position: absolute;content: ' ';height: 16px;width: 3px;background-color: #fff;right: 9;top: 2;}
    .detail_data_close_popup:before{transform:rotate(45deg);}
    .detail_data_close_popup:after{transform:rotate(-45deg);}
    .detail-data-content{width:900px;text-align: justify;}

JavaScript

SMA.SMAIntraDay({
  container: 'sma_intraday_container',
  width:'500',
  height: '300',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  ontology: 'cme_micro',
  subjects:'M6E',
  autoRefresh: true,
  showEnlarge: false,
  //            subjects:'AAPL,HPE,MRC,MELI,OMER,QTWO,AAWW,ZBRA,SEM',
  hideHeader:true,
  showXaxis:true,
  showYaxis:true,
  showSentiment:true,
  showTooltip:true,
});

SMA.SMAIntraDayDetail({
  container: 'sma_intraday_detailed_container',
  width:'100%',
  height: '420',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  ontology: 'metal',
  subjects:'GC_F',
  // hideDropdown: true,
  //            subjects:'AAPL,HPE,MRC,MELI,OMER,QTWO,AAWW,ZBRA,SEM',
  // showHeading: true,
  // chartColor: 'f89d03',
  hideHeader:true
});

function removePopup(){
  window.location.hash = "";
}