JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://widget.socialmarketanalytics.com/sma_intra_day/source/js/sma_widget.js?" +Date.now()></script>
<script src="https://widget.socialmarketanalytics.com/sma_intra_day_detail/source/js/sma_widget.js?" +Date.now()></script>

                        <div style="background-color: #fff;" class="card" id="card_intraday">
                           <div style="color:#000; font-weight:700; border-bottom: 1px #dfdfdf solid;margin-right: 15px;padding-bottom: 5px;">Social Sentiment - Gold
                              <span style="float: right;">
                                 <a style="cursor: pointer;" title="Expand Chart" onclick="showDetail()" id="show_intraday_detail"><img style="width: 16px;" src="https://widget.socialmarketanalytics.com/sma_cards/source/images/expand_plus.png"></a>
                                 <a style="display: none;" href="#cme_widget_detail_popup" title="Expand Chart" onclick="expandPopup()" id="show_detail"></a>
                                 <a style="display: none;" href="../../sma_intra_day_detail/demo/?s=GC_F" target="_blank" id="show_detail_mobile"></a></span></div>
                           <div id="sma_intraday_container"></div>
                           <div style="border-top:1px #dfdfdf solid;margin-right: 15px;padding-bottom: 5px;margin-top: 5px;display: inline-block;width: 97%;font-size: small;color: #7676ff;">
                              <a style="float: left;font-size: 8px; display: none" id="desktop_browser_link" href="#interprete_help_popup"></a>
                              <a style="float: left;font-size: 8px; display: none" id="mobile_browser_link" href="https://widget.socialmarketanalytics.com/sma_cards/demo/interprete_help_data.html" target="_blank"></a>
                              <a style="float: left;font-size: 8px; cursor: pointer;" onclick="showHelpPopup()">Disclaimer</a>
                           </div>
                        </div>

CSS

.card {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            padding: 10px 0px 0px 10px;
            font-family: 'Benton Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
            overflow: hidden;
         }
         .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
         }

JavaScript

SMA.SMAIntraDay({
            container: 'sma_intraday_container',
            width:'100%',
            height: '300',
            apikey: '52b3cd06330baafd8cd048f722247118587ca987',
            ontology: 'cme_metals',
            subjects:'GC',
            showEnlarge: false,
            hideHeader:true,
            showXaxis:true,
            showYaxis:true,
            showSentiment:true,
            showTooltip:true,
            autoRefresh:true,
            onClick: function(){
                document.getElementById("show_intraday_detail").click();
            },
            onChartLoad: function(sscore){
              var color = getFactorsSentimentColor(sscore);
              document.getElementById("card_intraday").style.border = "4px solid "+color;
            },
            onAutoUpdate: function(sscore){
                 var color = getFactorsSentimentColor(sscore);
                 document.getElementById("card_intraday").style.border = "4px solid "+color;
            }
        });
        function showHelpPopup() {
            if(checkMobileBrowser()){
               document.getElementById('mobile_browser_link').click();
            }
            else{
               document.getElementById('desktop_browser_link').click();
            }
         }
         function checkMobileBrowser() {
           var check = false;
           (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s...