v1.16.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.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 class="wrapper" style="background-color: #000000">
-      <div id="widget-1" style="width: 289px;"></div>
+      <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>
 

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": {

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>
     );
   }

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 }}
           />

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;
     }
 

src/frame/index.tsx

@@ -4,15 +4,18 @@ type Props = {
   apiKey: string;
   mode: string;
   url: string;
-  width?: number;
+  width?: string;
-  height?: number;
+  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(
+    let that = this;
-      {
+    let interval = setInterval(() => {
-        flipsidePartner: {
+      that.ref.contentWindow.postMessage(
-          type: "widgetData",
+        {
-          widgetData: widgetData,
+          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 }}
+        style={{ width: state.width, height: state.height, border: 0 }}
-        width={props.width}
+        width={state.width}
-        height={props.height}
+        height={state.height}
       />
     );
   }