JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="http://widget-staging.socialmarketanalytics.com/heatmap_widgets/source/js/sma_widget.js?123"></script>
<script src="https://widget-staging.socialmarketanalytics.com/sma_cards/source/js/sma_widget.js?" +Date.now()></script>


<h3>SMA All Cards</h3>
<div style="height:422px" id="sma_card_container2"></div>

<h3>SMA Cards</h3>
<div style="height:314px;" id="sma_card_container"></div>

JavaScript

SMA.HeatmapWidget({
  container: 'sma_widget_container',
  width:'100%',
  height: '510',
  apikey: 'f67667f324c05917db277c8de0bf86da062b4ff2',
  ontology: 'ticker'
});

// SMA all cards widget init
SMA.SMACards({
  container: 'sma_card_container2',
  width:'1000',
  height: '100%',
  cardWidth: '200',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  sma_card_container: true,
  ontology: 'ticker',
  filter:'svolume+gt+900,svscore+gt+3',
  hideHeader:true,
  applySlider: false,
  selectedCard: 'AIZ',
  onItemClick: function(data, currentSubject){
    alert(currentSubject)
  }
});

// SMA cards widget init
SMA.SMACards({
  container: 'sma_card_container',
  width:'250',
  height: '100%',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  sma_card_container: true,
  ontology: 'ticker',
  hideHeader:true,
  applySlider: true,
  updateIntraday: true
});  

// SMA intra day chart for GOLD
SMA.SMAIntraDay({
  container: 'sma_intraday_container',
  width:'200',
  height: '100%',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  ontology: 'cme_metal',
  subjects:'AAPL',
  showEnlarge: false,
  hideHeader:true
});

// SMA intra day detail chart for GOLD
SMA.SMAIntraDayDetail({
  container: 'sma_intraday_detailed_container',
  width:'100%',
  height: '420',
  apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
  ontology: 'ticker',
  subjects:'AAPL',
  hideHeader:true
});