Upgrade to 1.7 and add carousel config feature.

index.html

@@ -47,8 +47,10 @@
     <script>
       const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
       flipside.spectrumPlot("widget-0", {
-        asset: "nmr",
-        highlights: ["BTC", "ETH", "QTUM"],
+        asset: {
+          symbol: "nmr",
+          highlights: ["BTC", "ETH", "QTUM"]
+        },
         mode: "light",
         fontFamily: "inherit",
         relatedMarkers: {
@@ -66,7 +68,10 @@
       });
 
       flipside.spectrumPlot("widget-1", {
-        asset: "nmr",
+        asset: {
+          symbol: "nmr",
+          highlights: ["BTC", "ETH", "QTUM"]
+        },
         mode: "dark",
         bucketDistance: 100,
         highlights: ["BTC", "ETH", "eos", "nmr", "ltc", "gnt", "rep", "mln"]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipside-js",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "FlipsideJS provides a library embeddable widgets that display data from the Flipside Platform API, including FCAS.",
   "main": "index.js",
   "scripts": {

src/spectrumPlot/index.tsx

@@ -6,8 +6,10 @@ import "./styles.scss";
 import API from "../api";
 
 export type Props = {
-  asset: string;
-  highlights?: string[];
+  asset?: {
+    symbol: string;
+    highlights?: string[];
+  };
   mode?: "light" | "dark";
   fontFamily?: string;
   autoWidth?: boolean;
@@ -33,7 +35,10 @@ type State = {
 
 export default class SpectrumPlot extends Component<Props, State> {
   static defaultProps: Props = {
-    asset: "btc",
+    asset: {
+      symbol: "btc",
+      highlights: ["eth", "zec", "zrx"]
+    },
     mode: "light",
     fontFamily: "inherit",
     relatedMarkers: { enabled: true, bucketDistance: 35, lineDistance: 25 },
@@ -53,7 +58,7 @@ export default class SpectrumPlot extends Component<Props, State> {
 
   async _getData() {
     const { data, success } = await this.props.api.fetchAssetMetric(
-      this.props.asset,
+      this.props.asset.symbol,
       "FCAS"
     );
 
@@ -104,9 +109,9 @@ export default class SpectrumPlot extends Component<Props, State> {
     if (loading) return null;
     return (
       <div class={`fs-spectrum fs-spectrum-${props.mode}`}>
-        <Score symbol={props.asset} metric={metric} {...props} mini />
+        <Score symbol={props.asset.symbol} metric={metric} {...props} mini />
         {props.spectrum.enabled && (
-          <Plot symbol={props.asset} metric={metric} {...props} mini />
+          <Plot symbol={props.asset.symbol} metric={metric} {...props} mini />
         )}
         <CustomLinks />
       </div>

src/spectrumPlot/plot/index.js

@@ -85,13 +85,15 @@ export default class Plot extends Component {
   }
 
   getHighlights() {
-    let { asset, highlights } = this.props;
-    asset = asset.toLowerCase();
+    let { asset } = this.props;
+    let { highlights, symbol } = asset;
+    let assetSymbol = symbol.toLowerCase();
+
     if (highlights && highlights.length > 0) {
       return highlights;
     }
     highlights = [];
-    if (asset == "eth" || asset == "btc") {
+    if (assetSymbol == "eth" || assetSymbol == "btc") {
       highlights = ["ZEC", "XRP"];
     } else {
       highlights = ["BTC"];
@@ -130,9 +132,6 @@ export default class Plot extends Component {
         i !== highlightLength - 1 ? sortedHighLights[i + 1] : null;
 
       const prevDist = Math.abs(anchorX - currentAsset.value);
-      // const nextDist = nextAsset
-      // ? Math.abs(nextAsset.value - currentAsset.value)
-      // : 1000000;
 
       if (prevDist <= bucketDistance) {
         buckets[currentBucketIndex].push(currentAsset);
@@ -187,7 +186,7 @@ export default class Plot extends Component {
     const xPos = `${(props.metric.fcas / 1000) * 100}%`;
     const highlightedAssets = distribution
       .filter(i => highlightedSymbols.indexOf(i.symbol) > -1)
-      .filter(i => i.symbol != props.asset.toUpperCase());
+      .filter(i => i.symbol != props.asset.symbol.toUpperCase());
 
     const { buckets, scoresToBuckets } = this.getBuckets();
 
@@ -264,7 +263,7 @@ export default class Plot extends Component {
         {/* Blue FCAS Marker */}
         <text class="fs-plot__blue" text-anchor="middle" font-weight="bold">
           <tspan x={xPos} y={props.mini ? 26 : 14}>
-            {props.asset.toUpperCase()}
+            {props.asset.symbol.toUpperCase()}
           </tspan>
           {!props.mini && (
             <tspan x={xPos} y="104">

src/spectrumPlot/score/index.js

@@ -38,7 +38,7 @@ export default class Score extends Component {
             <img
               class="fs-token__logo"
               src={`https://s3.amazonaws.com/fsc-crypto-icons/svg/color/${
-                props.asset
+                props.asset.symbol
               }.svg`}
             />
           )}
@@ -46,7 +46,9 @@ export default class Score extends Component {
             <span style={props.name.style}>
               {props.name.enabled && props.metric.name}
             </span>
-            {props.asset && <span class="fs-token__sym">{props.asset}</span>}
+            {props.asset && (
+              <span class="fs-token__sym">{props.asset.symbol}</span>
+            )}
           </h1>
         </header>