From 730f24a7976fb12dfeacfad49e44734f6456332e Mon Sep 17 00:00:00 2001
From: Jim Myers <jfmyers01@gmail.com>
Date: Wed, 30 Sep 2020 17:25:50 -0400
Subject: [PATCH] v1.16.1

---
 index.html                           | 12 ++---
 package.json                         |  2 +-
 src/chart/index.tsx                  | 52 +++++++++----------
 src/components/customLinks/index.tsx | 77 +++++++++++++++++++++++++++-
 src/dynamic/index.tsx                |  3 +-
 src/frame/index.tsx                  | 55 ++++++++++++++------
 6 files changed, 150 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index 82af424..afba38e 100644
--- a/index.html
+++ b/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.16.0.js"></script>
+    <script src="flipside-v1.16.1.js"></script>
     <style>
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -60,19 +60,19 @@
       <div id="chart"></div>
     </div>
 
-    <div class="wrapper dark" style="background-color: #000000;">
+    <div class="wrapper dark" style="background-color: #000000">
       <div id="chart2"></div>
     </div>
 
     <div class="wrapper"><div id="score"></div></div>
 
-    <div class="wrapper"><div id="widget-0" style="width: 289px;"></div></div>
+    <div class="wrapper"><div id="widget-0" style="width: 289px"></div></div>
 
-    <div class="wrapper" style="background-color: #000000;">
-      <div id="widget-1" style="width: 289px;"></div>
+    <div class="wrapper" style="background-color: #000000">
+      <div id="widget-1" style="width: 289px"></div>
     </div>
 
-    <div class="wrapper" style="background-color: #33435e;">
+    <div class="wrapper" style="background-color: #33435e">
       <div id="widget-2"></div>
     </div>
 
diff --git a/package.json b/package.json
index 7042cc8..345a8ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flipside-js",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "FlipsideJS provides a library embeddable widgets that display data from the Flipside Platform API, including FCAS.",
   "main": "index.js",
   "scripts": {
diff --git a/src/chart/index.tsx b/src/chart/index.tsx
index 45231c0..2fff224 100644
--- a/src/chart/index.tsx
+++ b/src/chart/index.tsx
@@ -49,11 +49,11 @@ class Chart extends Component<Props> {
   static defaultProps: Partial<Props> = {
     axisTitles: [],
     mode: "light",
-    exportingEnabled: false
+    exportingEnabled: false,
   };
 
   state = {
-    loading: true
+    loading: true,
   };
 
   container: HTMLElement;
@@ -75,7 +75,7 @@ class Chart extends Component<Props> {
       data = await api.fetchTimeseries({
         series: apiSeries,
         start_date: startDate,
-        end_date: endDate
+        end_date: endDate,
       });
       if (data.data.data.length > 0) {
         this.setState({ loading: false, data: data.data.data });
@@ -103,24 +103,24 @@ class Chart extends Component<Props> {
       {
         series: loadedSeries,
         chart: {
-          renderTo: this.container
+          renderTo: this.container,
         },
         title: {
           text: this.props.title,
-          style: { color: textColor }
+          style: { color: textColor },
         },
 
         legend: {
           enabled: series && series.length > 1,
           itemStyle: { color: textColor },
-          itemHoverStyle: { color: textColor }
+          itemHoverStyle: { color: textColor },
         },
 
         tooltip: {
           backgroundColor: tooltipBackground,
           style: {
-            color: textColor
-          }
+            color: textColor,
+          },
         },
 
         rangeSelector: {
@@ -128,16 +128,16 @@ class Chart extends Component<Props> {
             states: {
               select: {
                 style: {
-                  color: mode === "dark" ? "#fff" : "#000"
-                }
-              }
-            }
-          }
+                  color: mode === "dark" ? "#fff" : "#000",
+                },
+              },
+            },
+          },
         },
 
         xAxis: {
           lineColor: gridLineColor,
-          tickColor: gridLineColor
+          tickColor: gridLineColor,
         },
 
         yAxis: [
@@ -145,18 +145,18 @@ class Chart extends Component<Props> {
             gridLineColor,
             title: {
               text: this.props.axisTitles[0],
-              style: { color: textColor }
-            }
+              style: { color: textColor },
+            },
           }),
           merge({}, DEFAULT_YAXIS, {
             opposite: true,
             gridLineColor,
             title: {
               text: this.props.axisTitles[1],
-              style: { color: textColor }
-            }
-          })
-        ]
+              style: { color: textColor },
+            },
+          }),
+        ],
       },
       rest
     );
@@ -175,7 +175,7 @@ class Chart extends Component<Props> {
             theme: {
               fill: "transparent",
               cursor: "pointer",
-              states: { hover: { fill: "transparent", opacity: 0.7 } }
+              states: { hover: { fill: "transparent", opacity: 0.7 } },
             },
             menuItems: [
               "downloadCSV",
@@ -185,10 +185,10 @@ class Chart extends Component<Props> {
               "downloadPNG",
               "downloadJPEG",
               "downloadPDF",
-              "downloadSVG"
-            ]
-          }
-        }
+              "downloadSVG",
+            ],
+          },
+        },
       };
     } else {
       options.exporting = { enabled: false };
@@ -208,7 +208,7 @@ class Chart extends Component<Props> {
             style={{ display: "block", textAlign: "right" }}
           />
         )}
-        <div ref={el => (this.container = el)} />
+        <div ref={(el) => (this.container = el)} />
       </div>
     );
   }
diff --git a/src/components/customLinks/index.tsx b/src/components/customLinks/index.tsx
index a7de838..7373402 100644
--- a/src/components/customLinks/index.tsx
+++ b/src/components/customLinks/index.tsx
@@ -24,7 +24,58 @@ type State = {
 
 class CustomLinks extends Component<Props, State> {
   state: State = {
-    links: []
+    links: [],
+  };
+
+  topLinkref: any = null;
+  setTopLinkRef = (dom: any) => (this.topLinkref = dom);
+
+  rightLinkref: any = null;
+  setRightLinkRef = (dom: any) => (this.rightLinkref = dom);
+
+  leftLinkref: any = null;
+  setLeftLinkRef = (dom: any) => (this.leftLinkref = dom);
+
+  sendParentMessage = (link: string) => {
+    parent.postMessage(
+      {
+        flipside: {
+          type: "linkAction",
+          linkAction: { href: link },
+        },
+      },
+      "*"
+    );
+  };
+
+  onClickLink = (e: any) => {
+    e.stopPropagation();
+    e.cancelBubble;
+
+    let href;
+    if (!e.target || (e.target && !e.target.getAttribute)) {
+      href = "https://flipsidecrypto.com";
+    } else {
+      href = e.target.getAttribute("href");
+    }
+
+    try {
+      this.sendParentMessage(href);
+    } catch (e) {
+      console.log(e);
+    }
+    window.location.assign(href);
+  };
+
+  handleLink = (ref: any, linkType: string) => {
+    const linkParent = ref;
+    if (!linkParent) return;
+
+    const link = linkParent.children[0];
+    if (!link) return;
+
+    link.removeEventListener("click", this.onClickLink);
+    link.addEventListener("click", this.onClickLink);
   };
 
   async componentDidMount() {
@@ -34,6 +85,14 @@ class CustomLinks extends Component<Props, State> {
     }
     const res = await this.props.api.fetchWidgetLinks(this.props.widget);
     this.setState({ links: res.data });
+
+    let that = this;
+    let interval = setInterval(() => {
+      that.handleLink(this.topLinkref, "top");
+      that.handleLink(this.rightLinkref, "right");
+      that.handleLink(this.leftLinkref, "left");
+    }, 100);
+    setTimeout(() => clearInterval(interval), 5000);
   }
 
   render(props: Props, state: State) {
@@ -42,7 +101,17 @@ class CustomLinks extends Component<Props, State> {
       return (
         <div class={css.wrapper} style={props.style}>
           <span class={linkClass}>
-            <a href="https://flipsidecrypto.com/fcas">What's this?</a>
+            <a
+              href="https://flipsidecrypto.com/fcas"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.cancelBubble;
+                this.sendParentMessage("https://flipsidecrypto.com/fcas");
+                window.location.assign("https://flipsidecrypto.com/fcas");
+              }}
+            >
+              What's this?
+            </a>
           </span>
         </div>
       );
@@ -51,22 +120,26 @@ class CustomLinks extends Component<Props, State> {
     const leftLink = find(state.links, { name: "left_link" });
     const rightLink = find(state.links, { name: "right_link" });
     const topLink = find(state.links, { name: "top_link" });
+
     return (
       <div class={css.wrapper} style={props.style}>
         {topLink && (
           <span
+            ref={this.setTopLinkRef}
             class={linkClass}
             dangerouslySetInnerHTML={{ __html: topLink.link_html }}
           />
         )}
         {leftLink && (
           <span
+            ref={this.setLeftLinkRef}
             class={linkClass}
             dangerouslySetInnerHTML={{ __html: leftLink.link_html }}
           />
         )}
         {rightLink && (
           <span
+            ref={this.setRightLinkRef}
             class={linkClass}
             dangerouslySetInnerHTML={{ __html: rightLink.link_html }}
           />
diff --git a/src/dynamic/index.tsx b/src/dynamic/index.tsx
index 0b543d2..d45cc85 100644
--- a/src/dynamic/index.tsx
+++ b/src/dynamic/index.tsx
@@ -2,6 +2,7 @@ import loadJS from "load-js";
 import API from "../api";
 import template from "lodash/template";
 import mapValues from "lodash/mapValues";
+import { stringify } from "querystring";
 
 type DynamicOpts = {
   widgetId: string;
@@ -42,7 +43,7 @@ function interpolateConfig(functionConfigTemplate: Object, data: Object): any {
   const walk = (d: any): any => {
     if (typeof d === "string") {
       let n = parseInt(d);
-      if (!n) return d;
+      if (!n || (n && JSON.stringify(n).length != d.length)) return d;
       return n;
     }
 
diff --git a/src/frame/index.tsx b/src/frame/index.tsx
index ed3e416..928f4b0 100644
--- a/src/frame/index.tsx
+++ b/src/frame/index.tsx
@@ -4,15 +4,18 @@ type Props = {
   apiKey: string;
   mode: string;
   url: string;
-  width?: number;
-  height?: number;
+  width?: string;
+  height?: string;
   data?: any;
   messageKey?: string;
   messagePayloadType?: string;
   messagePayloadActionKey?: string;
 };
 
-type State = {};
+type State = {
+  height: string;
+  width: string;
+};
 
 export default class Frame extends Component<Props, State> {
   static defaultProps = {
@@ -28,6 +31,10 @@ export default class Frame extends Component<Props, State> {
   ref: any = null;
   setRef = (dom: any) => (this.ref = dom);
 
+  handleResize = (height: string, width: string) => {
+    this.setState({ height: height, width: width });
+  };
+
   handleMessage = (e: any) => {
     const eventData = e.data;
     if (!eventData) return;
@@ -39,8 +46,16 @@ export default class Frame extends Component<Props, State> {
     } = this.props;
 
     const message = eventData[messageKey];
+
     if (!message) return;
 
+    if (message.type == "sizeAction") {
+      return this.handleResize(
+        message["sizeAction"].height,
+        message["sizeAction"].width
+      );
+    }
+
     if (message.type !== messagePayloadType) return;
 
     const payload = message[messagePayloadType];
@@ -52,10 +67,15 @@ export default class Frame extends Component<Props, State> {
     window.location.assign(messageAction);
   };
 
-  componentDidMount() {
+  componentWillMount() {
     window.addEventListener("message", this.handleMessage, false);
     if (!this.ref) return;
 
+    this.setState({
+      height: this.props.height,
+      width: this.props.width,
+    });
+
     const widgetData = {
       mode: this.props.mode,
       data: this.props.data,
@@ -73,15 +93,19 @@ export default class Frame extends Component<Props, State> {
         },
       },
     };
-    this.ref.contentWindow.postMessage(
-      {
-        flipsidePartner: {
-          type: "widgetData",
-          widgetData: widgetData,
+    let that = this;
+    let interval = setInterval(() => {
+      that.ref.contentWindow.postMessage(
+        {
+          flipsidePartner: {
+            type: "widgetData",
+            widgetData: widgetData,
+          },
         },
-      },
-      "*"
-    );
+        "*"
+      );
+    }, 200);
+    setTimeout(() => clearInterval(interval), 5000);
   }
 
   componentWillUnmount() {
@@ -98,6 +122,7 @@ export default class Frame extends Component<Props, State> {
     ) {
       urlParams = { ...props.data, ...urlParams };
     }
+
     const urlEncodedParams = new URLSearchParams(urlParams).toString();
     url = `${url}?${urlEncodedParams}`;
 
@@ -105,9 +130,9 @@ export default class Frame extends Component<Props, State> {
       <iframe
         ref={this.setRef}
         src={url}
-        style={{ width: props.width, height: props.height, border: 0 }}
-        width={props.width}
-        height={props.height}
+        style={{ width: state.width, height: state.height, border: 0 }}
+        width={state.width}
+        height={state.height}
       />
     );
   }