Bump version to 1.13.1

index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>flipside.js</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="flipside-v1.12.0.js"></script>
+    <script src="flipside-v1.13.1.js"></script>
     <style>
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -13,6 +13,7 @@
           "Segoe UI Symbol";
         padding: 0;
         margin: 0;
+        background-color: #111111 !important;
       }
 
       text {

package.json

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

src/spectrum/index.tsx

@@ -75,7 +75,7 @@ class Spectrum extends Component<Props, State> {
   interval: number;
 
   static defaultProps = {
-    mode: "light"
+    mode: "light",
   };
 
   constructor() {
@@ -109,8 +109,8 @@ class Spectrum extends Component<Props, State> {
       metric: {
         fcas: Math.round(data.value),
         change: data.percent_change,
-        name: data.asset_name
-      }
+        name: data.asset_name,
+      },
     });
     return success;
   }
@@ -133,8 +133,8 @@ class Spectrum extends Component<Props, State> {
         metric: {
           name: "NA",
           fcas: 0,
-          change: 0
-        }
+          change: 0,
+        },
       });
     }
     this._update();
@@ -211,7 +211,7 @@ MultiSpectrum.defaultProps = {
     symbol: "btc",
     highlights: ["eth", "zec", "zrx"],
     bootstrapAsset: null,
-    bootstrapHighlights: null
+    bootstrapHighlights: null,
   },
   disableLinks: false,
   assets: [],
@@ -221,14 +221,14 @@ MultiSpectrum.defaultProps = {
     enabled: true,
     bucketDistance: 35,
     lineDistance: 25,
-    fontFamily: "inherit"
+    fontFamily: "inherit",
   },
   name: { enabled: true },
   spectrum: { enabled: true },
   icon: { enabled: true },
   rank: { enabled: true },
   trend: { enabled: true },
-  linkBootstrap: null
+  linkBootstrap: null,
 } as Props;
 
 export default MultiSpectrum;

src/spectrum/plot/index.tsx

@@ -27,7 +27,7 @@ export default class Plot extends Component<Props, any> {
       loading: true,
       distribution: null,
       highlights: [],
-      highlightedSymbols: []
+      highlightedSymbols: [],
     };
   }
 
@@ -54,7 +54,7 @@ export default class Plot extends Component<Props, any> {
     if (data && data.length > 0) {
       this.setState({
         loading: false,
-        distribution: data
+        distribution: data,
       });
     }
     return success;
@@ -71,11 +71,12 @@ export default class Plot extends Component<Props, any> {
       );
     } else {
       await Promise.all(
-        highlights.map(async asset => {
+        highlights.map(async (asset) => {
           const { data, success } = await this.props.api.fetchAssetMetric(
             asset,
             "fcas"
           );
+
           if (success === true && data) {
             nextHighlightState.push(data);
             nextHighlightedSymbolState.push(data.symbol);
@@ -88,7 +89,7 @@ export default class Plot extends Component<Props, any> {
     }
     this.setState({
       highlights: nextHighlightState,
-      highlightedSymbols: nextHighlightedSymbolState
+      highlightedSymbols: nextHighlightedSymbolState,
     });
   }
 
@@ -108,7 +109,7 @@ export default class Plot extends Component<Props, any> {
     if (!success) {
       this.setState({
         loading: false,
-        distribution: []
+        distribution: [],
       });
     }
     this._update();
@@ -184,7 +185,10 @@ export default class Plot extends Component<Props, any> {
     }
 
     let bucketIndex = scoresToBuckets[asset.value];
+
+    if (!bucketIndex) return;
     let bucket = buckets[bucketIndex];
+
     let index = 0;
 
     let toClose = false;
@@ -225,10 +229,10 @@ export default class Plot extends Component<Props, any> {
     if (props.relatedMarkers) {
       relatedLabelStyle = {
         fill: props.relatedMarkers.color,
-        fontFamily: props.relatedMarkers.fontFamily
+        fontFamily: props.relatedMarkers.fontFamily,
       };
       relatedLineStyle = {
-        stroke: props.relatedMarkers.color
+        stroke: props.relatedMarkers.color,
       };
     }
 
@@ -289,7 +293,9 @@ export default class Plot extends Component<Props, any> {
         {props.relatedMarkers.enabled &&
           highlightedAssets.map((a: any) => {
             const xPos = `${(a.value / 1000) * 100}%`;
-            let { y, toClose } = this.getYCoords(a, buckets, scoresToBuckets);
+            let result = this.getYCoords(a, buckets, scoresToBuckets);
+            if (!result) return;
+            let { y, toClose } = result;
             return (
               <g class={css.related} style={relatedLabelStyle}>
                 <text x={xPos} y={y} text-anchor="middle" font-size="10">