add ability for spectrum and chart to use asset ids

index.html

@@ -87,14 +87,14 @@
         axisTitles: ["FCAS", "Dev"],
         colors: ["#E44C27", "#7FCCC5"],
         series: [
-          { symbol: "ETH", metric: "fcas", type: "line", yAxis: 0 },
-          { symbol: "ETH", metric: "dev", type: "line", yAxis: 1 }
+          { id: 2, symbol: "LTC", metric: "fcas", type: "line", yAxis: 0 },
+          { id: 2, symbol: "LTC", metric: "dev", type: "line", yAxis: 1 }
         ]
       });
 
       flipside.spectrum("widget-0", {
         asset: {
-          symbol: "nmr",
+          id: "1",
           highlights: ["BTC", "ETH", "QTUM"]
         },
         mode: "light",
@@ -115,16 +115,12 @@
       flipside.spectrum("widget-1", {
         assets: [
           {
-            symbol: "eth",
+            id: 1,
             highlights: ["BTC", "NMR", "QTUM"]
           },
           {
-            symbol: "xrp",
+            id: 2,
             highlights: ["BTC", "NMR", "QTUM"]
-          },
-          {
-            symbol: "btc",
-            highlights: ["eos", "NMR", "QTUM"]
           }
         ],
         mode: "dark",
@@ -141,8 +137,8 @@
       });
 
       flipside.multiTable("multiTable", {
+        assets: ["btc", "etc"],
         columns: ["rank", "trend"],
-        exclusions: ["gas", "TRX"],
         fontFamily: "inherit",
         headers: {},
         limit: 15,

src/api.ts

@@ -40,15 +40,15 @@ export default class API {
     return { data: null, success: false };
   }
 
-  async fetchAssetMetric(symbol: string, metric: string, days = 7) {
-    const sym = `${symbol}`.toUpperCase();
+  async fetchAssetMetric(id: string, metric: string, days = 7) {
+    const sym = `${id}`.toUpperCase();
     return await this._fetch("GET", `/assets/${sym}/metrics/${metric}`, {
       change_over: days
     });
   }
 
-  async fetchAssetMetrics(symbol: string) {
-    const sym = `${symbol}`.toUpperCase();
+  async fetchAssetMetrics(id: string) {
+    const sym = `${id}`.toUpperCase();
     return await this._fetch("GET", `/assets/${sym}/metrics`);
   }
 
@@ -81,7 +81,8 @@ export default class API {
 }
 
 export type APISeries = {
-  symbol: string;
+  symbol?: string;
+  asset_id?: number;
   names: string[];
 };
 

src/chart/helpers.ts

@@ -9,11 +9,19 @@ import zipObject from "lodash/zipObject";
 export function createApiSeries(chartSeries: ChartSeries[]): APISeries[] {
   const series = chartSeries.reduce(
     (acc, s) => {
-      const idx = acc.findIndex(i => i.symbol === s.symbol);
-      if (idx >= 0) {
-        acc[idx].names = acc[idx].names.concat([s.metric]);
+      const idKey = s.id ? "id" : "symbol";
+      // @ts-ignore
+      const existingIdx = acc.findIndex(i => i[idKey] === s[idKey]);
+      if (existingIdx >= 0) {
+        acc[existingIdx].names = acc[existingIdx].names.concat([s.metric]);
       } else {
-        acc.push({ symbol: s.symbol, names: [s.metric] });
+        const apiSeries: APISeries = { names: [s.metric] };
+        if (idKey === "id") {
+          apiSeries.asset_id = s.id;
+        } else {
+          apiSeries.symbol = s.symbol;
+        }
+        acc.push(apiSeries);
       }
       return acc;
     },
@@ -39,8 +47,9 @@ export function createSeries(
   });
 
   return series.map(s => {
+    // const idKey = s.id ? "id" : "symbol";
     const data = zippedData
-      .filter(r => r.symbol === s.symbol.toUpperCase())
+      .filter(r => r.symbol === s.symbol)
       .map(r => [Date.parse(r.timestamp as string), r[s.metric]]);
     return {
       name: s.name || s.metric,

src/chart/index.tsx

@@ -13,7 +13,8 @@ require("highcharts/modules/exporting")(Highcharts);
 type ChartType = "line" | "bar";
 type ChartAxis = "left" | "right";
 export type ChartSeries = {
-  symbol: string;
+  symbol?: string;
+  id?: number;
   metric: string;
   type: ChartType;
   yAxis?: ChartAxis;

src/multiTable/index.tsx

@@ -156,20 +156,22 @@ export default class MultiTable extends Component<Props, State> {
   }
 
   async _getData() {
-    const res = await this.props.api.fetchMetrics({
-      assets: this.props.assets,
-      exclusions: this.props.exclusions,
-      page: this.props.page,
-      size: this.props.limit,
-      sort_by: COLUMNS[this.state.sortColumn].sortKey,
-      sort_desc: true,
-      metrics: ["fcas", "utility", "dev", "market-maturity"],
-      change_over: this.props.trend.changeOver
-    });
-    this.setState({
-      loading: false,
-      rows: res.data
-    });
+    try {
+      const res = await this.props.api.fetchMetrics({
+        assets: this.props.assets,
+        exclusions: this.props.exclusions,
+        page: this.props.page,
+        size: this.props.limit,
+        sort_by: COLUMNS[this.state.sortColumn].sortKey,
+        sort_desc: true,
+        metrics: ["fcas", "utility", "dev", "market-maturity"],
+        change_over: this.props.trend.changeOver
+      });
+      this.setState({
+        loading: false,
+        rows: res.data
+      });
+    } catch (e) {}
   }
 
   handleSort(col: string) {

src/score/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 import withFcas, { WithFcasProps } from "../components/withFcas";
 import Trend from "../components/trend";
 import Rank from "../components/rank";

src/spectrum/index.tsx

@@ -20,7 +20,8 @@ type BootstrapHighlightType = {
 };
 
 export type AssetType = {
-  symbol: string;
+  id?: string;
+  symbol?: string;
   highlights?: string[];
   bootstrapAsset?: BootstrapAssetType;
   bootstrapHighlights?: BootstrapHighlightType[];
@@ -52,6 +53,13 @@ export type Props = {
 
 type State = {
   loading: boolean;
+  data?: {
+    value: number;
+    symbol: string;
+    slug: string;
+    percent_change: number;
+    asset_name: string;
+  };
   metric: {
     name: string;
     fcas: number;
@@ -74,12 +82,9 @@ class Spectrum extends Component<Props, State> {
   async _getData() {
     let data: BootstrapAssetType;
     let success: boolean;
-
+    const assetId = this.props.asset.id || this.props.asset.symbol;
     if (!this.props.asset.bootstrapAsset) {
-      let result = await this.props.api.fetchAssetMetric(
-        this.props.asset.symbol,
-        "FCAS"
-      );
+      let result = await this.props.api.fetchAssetMetric(assetId, "FCAS");
       data = result.data;
       success = result.success;
     } else {
@@ -96,6 +101,7 @@ class Spectrum extends Component<Props, State> {
 
     this.setState({
       loading: false,
+      data: data as any,
       metric: {
         fcas: Math.round(data.value),
         change: data.percent_change,
@@ -132,38 +138,42 @@ class Spectrum extends Component<Props, State> {
 
   render(props: Props, state: State) {
     if (state.loading) return null;
+    if (!state.data) return null;
 
-    const { asset, mode, rank, trend, api } = props;
-    const { metric } = state;
+    const { mode, rank, trend, api } = props;
+    const { metric, data } = state;
+    const fcas = Math.round(data.value);
 
     return (
       <div class={css[mode]}>
         <div class={css.header}>
           <img
             class={css.icon}
-            src={`https://d301yvow08hyfu.cloudfront.net/svg/color/${asset.symbol.toLowerCase()}.svg`}
+            src={`https://d301yvow08hyfu.cloudfront.net/svg/color/${data.symbol.toLowerCase()}.svg`}
           />
-          <span class={css.name}>{metric.name}</span>
+          <span class={css.name}>{data.asset_name}</span>
         </div>
 
         <div class={css.meta}>
-          <span class={css.symbol}>{asset.symbol}</span>
-          <span class={css.fcas}>Health {metric.fcas}</span>
+          <span class={css.symbol}>{data.symbol}</span>
+          <span class={css.fcas}>Health {fcas}</span>
           {trend.enabled && (
             <span class={css.trend}>
-              <Trend change={metric.change} value={metric.fcas} />
+              <Trend change={data.percent_change} value={fcas} />
             </span>
           )}
           {rank.enabled && (
             <a href={defaultFlipsideLink(api.key, "spectrum")}>
               <span class={css.rank}>
-                <Rank score={metric.fcas} kind="normal" />
+                <Rank score={fcas} kind="normal" />
               </span>
             </a>
           )}
         </div>
 
-        {props.spectrum.enabled && <Plot metric={metric} {...props} />}
+        {props.spectrum.enabled && (
+          <Plot metric={metric} {...props} symbol={data.symbol} />
+        )}
 
         {props.disableLinks === false && (
           <CustomLinks

src/spectrum/plot/index.tsx

@@ -13,7 +13,12 @@ const DEFAULT_LINE_DISTANCE = 25;
 //   mode: "light" | "dark"
 // }
 
-export default class Plot extends Component<any, any> {
+type Props = {
+  mode: "light" | "dark";
+  symbol: string;
+} & any;
+
+export default class Plot extends Component<Props, any> {
   interval: any;
 
   constructor() {
@@ -111,8 +116,8 @@ export default class Plot extends Component<any, any> {
 
   getHighlights() {
     let { asset } = this.props;
-    let { highlights, symbol } = asset;
-    let assetSymbol = symbol.toLowerCase();
+    let { highlights } = asset;
+    let assetSymbol = this.props.symbol.toLowerCase();
 
     if (highlights && highlights.length > 0) {
       return highlights;
@@ -211,7 +216,7 @@ export default class Plot extends Component<any, any> {
     const xPos = `${(props.metric.fcas / 1000) * 100}%`;
     const highlightedAssets = distribution
       .filter((i: any) => highlightedSymbols.indexOf(i.symbol) > -1)
-      .filter((i: any) => i.symbol != props.asset.symbol.toUpperCase());
+      .filter((i: any) => i.symbol != props.symbol.toUpperCase());
 
     const { buckets, scoresToBuckets } = this.getBuckets();
 
@@ -307,7 +312,7 @@ export default class Plot extends Component<any, any> {
         {/* Blue FCAS Marker */}
         <text class={css.marker} text-anchor="middle" font-weight="bold">
           <tspan x={xPos} y={26}>
-            {props.asset.symbol.toUpperCase()}
+            {props.symbol.toUpperCase()}
           </tspan>
         </text>
 

webpack.config.js

@@ -8,8 +8,8 @@ module.exports = {
   output: {
     filename: filename,
     chunkFilename: `flipside-[name]-v${version}.js`,
-    path: path.resolve(__dirname, "dist"),
-    publicPath: "https://d3sek7b10w79kp.cloudfront.net/"
+    path: path.resolve(__dirname, "dist")
+    // publicPath: "https://d3sek7b10w79kp.cloudfront.net/"
   },
   mode: "development",
   devtool: "inline-source-map",