JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://widget.socialmarketanalytics.com/sma_intra_day_detail/source/js/sma_widget.js?199"></script>
<script src="https://widget.socialmarketanalytics.com/sma_intra_day/source/js/sma_widget.js?199"></script>
<script src="https://widget.socialmarketanalytics.com/sma_lime_search_ticker/source/js/sma_widget.js?t=1"></script>
<script src="https://widget.socialmarketanalytics.com/sma_lime_odometer/source/js/sma_widget.js?t=1"></script>
<script src="https://widget.socialmarketanalytics.com/sma_intra_day_detail/source/js/sma_widget.js?t=1"></script>
<script src="https://widget.socialmarketanalytics.com/sma_cards_new/source/js/sma_widget.js?t=1"></script>
<div class="specsearch_search" id="specsearch_search" style="display:block !important;"></div>
<div class="ar-charts clearfix">
<div class="ar-chart-2" id="ar-chart-2"></div>
<div class="ar-chart-1" id="ar-chart-1"></div>

JavaScript

SMA.SMASearchTicker({
          container: 'specsearch_search',
          width:'400',
          height: '70',
          apikey: 'a43ba9d17b54090fc5fd179ed7c427838ba0817f',
          ontology: 'universal',
          order: 'top',
          factor: 'catalog',
          onItemClick: function(ticker, ontology){
            var smaCardContainer = document.getElementById("ar-chart-2");
            var container1 = document.getElementById("ar-chart-1");
            var container2 = document.getElementById("ar-content");
            container1.style.display = "block";
            container2.style.display = "block";
            smaCardContainer.style.display = "block";
            callodometer(ticker, ontology);
            call_sma_card(ticker, ontology);
            call_intra_day(ticker, ontology);
          }
        });

        function call_sma_card(ticker, ontology){
            document.getElementById('ar-chart-1').innerHTML = "";
             SMA.SMACards({  
                container: 'ar-chart-1',
                width:'100%',
                height: '200',
                cardWidth:'479',
                apikey: 'a43ba9d17b54090fc5fd179ed7c427838ba0817f',
                ontology: 'ticker',
                subjects: ticker,
                hideHeader:true,
                applySlider: true
            });
        }

        function callodometer(ticker, ontology){
            document.getElementById('ar-chart-2').innerHTML = "";
            SMA.SMAOdometer({
                container: 'ar-chart-2',
                width:'100%',
                height: '200',
                apikey: 'a43ba9d17b54090fc5fd179ed7c427838ba0817f',
                ontology: 'ticker',
                subject: ticker,
                factor: 'sscore',
                background: 'fff'
            });
        }

        function call_intra_day(ticker, ontology){
            document.getElementById('ar-content').innerHTML = "";
            SMA.SMAIntraDayDetail({
               ...