Add dynamic widget

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.11.0.js"></script>
+    <script src="flipside-v1.12.0.js"></script>
     <style>
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -21,8 +21,6 @@
       }
 
       .wrapper {
-        border: 1px solid #ccc;
-        padding: 20px;
         width: 600px;
         font-weight: 700;
         font-size: 20px;
@@ -65,8 +63,16 @@
       <div id="multiTableFcas"></div>
     </div>
 
+    <div class="wrapper">
+      <div id="widget"></div>
+    </div>
+
     <script>
-      const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
+      const flipside = new Flipside("6b7a8b4f-4d50-437f-ac29-47a0323c5842");
+
+      flipside.dynamic("widget", {
+        widgetId: "d25902d6-c4be-4445-a5bd-003b9f320b31"
+      });
 
       flipside.chart("chart", {
         title: "Flipside 25 - Overall Industry Health",
@@ -83,7 +89,10 @@
                 x2: 0,
                 y2: 1
               },
-              stops: [[0, "#9EC9FE"], [1, "rgba(255, 255, 255, 0)"]]
+              stops: [
+                [0, "#9EC9FE"],
+                [1, "rgba(255, 255, 255, 0)"]
+              ]
             }
           }
         },
@@ -214,7 +223,7 @@
         },
         trend: {
           enabled: true,
-          changeOver: 7,
+          changeOver: 14,
           style: {}
         }
       });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipside-js",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "FlipsideJS provides a library embeddable widgets that display data from the Flipside Platform API, including FCAS.",
   "main": "index.js",
   "scripts": {
@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "highcharts": "^7.0.3",
+    "load-js": "^3.0.3",
     "lodash": "^4.17.11",
     "preact": "^8.3.1"
   },
@@ -29,15 +30,15 @@
     "core-js": "^2.6.5",
     "css-loader": "^1.0.1",
     "css-modules-typescript-loader": "^1.1.1",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.13.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "ts-loader": "^5.3.3",
     "typescript": "^3.2.4",
     "url-loader": "^1.1.2",
-    "webpack": "^4.26.0",
-    "webpack-bundle-analyzer": "^3.0.4",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "webpack": "^4.41.6",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   }
 }

src/api.ts

@@ -7,7 +7,7 @@ export default class API {
   constructor(apiKey: string) {
     this.key = apiKey;
     this.client = axios.create({
-      baseURL: "https://platform-api.flipsidecrypto.com/api/v1",
+      baseURL: "https://api.flipsidecrypto.com/api/v1",
       params: { api_key: apiKey }
     });
   }
@@ -58,6 +58,10 @@ export default class API {
     });
   }
 
+  async fetchDynamic(id: string) {
+    return this._fetch("GET", `/widgets/dynamic/${id}`)
+  }
+
   async fetchMetrics(payload: {
     assets?: string[];
     exclusions?: string[];

src/dynamic/index.tsx

@@ -0,0 +1,51 @@
+import loadJS from "load-js";
+import API from "../api";
+import Flipside from "..";
+import template from "lodash/template";
+import mapValues from "lodash/mapValues";
+
+type DynamicOpts = {
+  widgetId: string;
+  assetId: string;
+};
+
+export default async function dynamic(api: API, el: string, opts: DynamicOpts) {
+  const res = await api.fetchDynamic(opts.widgetId);
+  if (!res.success) {
+    throw new Error(`Flipside: dynamic widget loading failed`);
+  }
+
+  await loadJS([
+    {
+      url: "https://d3sek7b10w79kp.cloudfront.net/flipside-v1.10.0.js",
+      allowExternal: true
+    }
+  ]);
+
+  const { function_name, function_config } = res.data;
+
+  const flipside = new window.Flipside(api.key);
+  const fn: any = (flipside as any)[res.data.function_name];
+  if (!fn) {
+    throw new Error(
+      `Flipside: dynamic function name '${res.data.function_name}' doesn't exist`
+    );
+  }
+
+  const config = interpolateConfig(opts.assetId, res.data.function_config);
+  fn.call(flipside, el, config);
+}
+
+// Replaces instances of ${asset_id} in the config with the assetId
+function interpolateConfig(assetId: string, config: Object): any {
+  return mapValues(config, value => {
+    if (typeof value === "string") {
+      const compiled = template(value);
+      return compiled({ asset_id: assetId });
+    }
+    if (typeof value === "object") {
+      return interpolateConfig(assetId, value);
+    }
+    return value;
+  });
+}

src/dynamic/load-js.d.ts

@@ -0,0 +1,4 @@
+declare module 'load-js' {
+  const fn: any;
+  export default fn;
+}

src/index.tsx

@@ -10,6 +10,8 @@ import Spectrum, { Props as SpectrumProps } from "./spectrum";
 import MultiTable, { Props as MultiTableProps } from "./multiTable";
 import Score, { Props as ScoreProps } from "./score";
 import Chart, { Props as ChartProps } from "./chart";
+import Axios from "axios";
+import dynamic from "./dynamic";
 
 export default class Flipside {
   api: API;
@@ -18,6 +20,10 @@ export default class Flipside {
     this.api = new API(apiKey);
   }
 
+  async dynamic(el: string, opts: any) {
+    dynamic(this.api, el, opts);
+  }
+
   multiTable(el: string, opts: MultiTableProps) {
     const element = document.getElementById(el);
     const props = defaultsWithoutArrays(MultiTable.defaultProps, opts);

src/table/index.tsx

@@ -57,9 +57,7 @@ export default class Table extends Component<Props, State> {
   }
 
   onClickLearnMore() {
-    const learnMoreUrl = `https://platform-api.flipsidecrypto.com/track/table-widget/${
-      this.props.api.key
-    }`;
+    const learnMoreUrl = `https://platform-api.flipsidecrypto.com/track/table-widget/${this.props.api.key}`;
     window.location.assign(learnMoreUrl);
   }