new config for spectrum widget

index.html

@@ -42,13 +42,14 @@
 
     <script>
       const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
-      flipside.createFCAS("widget-0", "nmr", {
+      flipside.spectrum("widget-0", {
+        asset: "nmr",
         highlights: ["BTC", "ETH", "QTUM"]
       });
-      flipside.createFCAS("widget-1", "zrx", {
-        logo: false,
-        mini: true,
-        dark: true,
+
+      flipside.spectrum("widget-1", {
+        asset: "nmr",
+        mode: "dark",
         bucketDistance: 100,
         highlights: [
           "BTC",
@@ -62,6 +63,7 @@
           "mln"
         ]
       });
+
       flipside.createTable("widget-2", "btc", {
         dark: true,
         borderColor: "#737e8d"

src/fcas/score/index.js

@@ -1,55 +0,0 @@
-import { h, Component } from "preact";
-import Data from "./Data";
-import DataMini from "./DataMini";
-import "./styles.scss";
-
-function round(value) {
-  if (!value) {
-    return value;
-  }
-  return Math.round(value * 100) / 100;
-}
-
-export default class Score extends Component {
-  render({ opts, symbol, metric }, { showTooltip }) {
-    let rank;
-    if (metric.fcas <= 500) {
-      rank = "f";
-    } else if (metric.fcas <= 649) {
-      rank = "c";
-    } else if (metric.fcas <= 749) {
-      rank = "b";
-    } else if (metric.fcas <= 899) {
-      rank = "a";
-    } else {
-      rank = "s";
-    }
-
-    let wrapperClass = "fs-score";
-    if (opts.dark) wrapperClass += " fs-score--dark";
-    if (opts.mini) wrapperClass += " fs-score--mini";
-
-    const DataComponent = opts.mini ? DataMini : Data;
-
-    return (
-      <div class={wrapperClass}>
-        {opts.header && (
-          <header class="fs-token">
-            {opts.logo && (
-              <img
-                class="fs-token__logo"
-                src={`https://s3.amazonaws.com/fsc-crypto-icons/svg/color/${symbol}.svg`}
-              />
-            )}
-            <h1 class="fs-token__name">
-              {metric.name}
-              {opts.symbol && <span class="fs-token__sym">{symbol}</span>}
-            </h1>
-          </header>
-        )}
-
-        <DataComponent opts={opts} metric={metric} rank={rank} />
-      </div>
-    );
-  }
-}

src/index.tsx

@@ -1,7 +1,7 @@
 import { h, render } from "preact";
-import FCAS from "./fcas";
 import API from "./api";
 import Table from "./table";
+import Spectrum, { Props as SpectrumProps } from "./spectrum";
 import MultiTable, { Props as MultiTableProps } from "./multiTable";
 
 type MultiTableOpts = {};
@@ -18,6 +18,11 @@ export default class Flipside {
     render(<MultiTable {...opts} api={this.api} />, element);
   }
 
+  spectrum(el: string, opts: SpectrumProps): void {
+    const element = document.getElementById(el);
+    render(<Spectrum {...opts} api={this.api} />, element);
+  }
+
   createTable(el: string, symbol: string, opts: object) {
     const defaults = {
       dark: false
@@ -28,24 +33,24 @@ export default class Flipside {
     render(<Table symbol={symbol} api={this.api} {...mergedOpts} />, element);
   }
 
-  createFCAS(el: string, symbol: string, opts: object) {
-    symbol = symbol.toLowerCase();
-    const defaults = {
-      score: true,
-      plot: true,
-      symbol: true,
-      logo: true,
-      trend: true,
-      rank: true,
-      header: true,
-      dark: false
-    };
-    const mergedOpts = Object.assign({}, defaults, opts);
+  // createFCAS(el: string, symbol: string, opts: object) {
+  //   symbol = symbol.toLowerCase();
+  //   const defaults = {
+  //     score: true,
+  //     plot: true,
+  //     symbol: true,
+  //     logo: true,
+  //     trend: true,
+  //     rank: true,
+  //     header: true,
+  //     dark: false
+  //   };
+  //   const mergedOpts = Object.assign({}, defaults, opts);
 
-    const element = typeof el === "string" ? document.getElementById(el) : el;
+  //   const element = typeof el === "string" ? document.getElementById(el) : el;
 
-    render(<FCAS symbol={symbol} api={this.api} opts={mergedOpts} />, element);
-  }
+  //   render(<FCAS symbol={symbol} api={this.api} opts={mergedOpts} />, element);
+  // }
 }
 
 declare global {

src/spectrum/index.tsx

@@ -4,10 +4,36 @@ import Plot from "./plot";
 import "./styles.scss";
 import API from "../api";
 
-type Props = {
-  symbol: string;
+export type Props = {
+  asset: string;
+  highlights?: string[];
+  mode?: "light" | "dark";
+  autoWidth?: boolean;
+  bucketDistance?: number;
+  relatedMarkers?: {
+    enabled?: boolean;
+    color?: string;
+    fontFamily?: string;
+  };
+  icon?: {
+    enabled?: boolean;
+  };
+  name?: {
+    enabled?: boolean;
+    style?: object;
+  };
+  rank?: {
+    enabled?: boolean;
+  };
+  spectrum?: {
+    enabled: boolean;
+  };
+  trend?: {
+    enabled: boolean;
+  };
+  // symbol: string;
   api: API;
-  opts: any;
+  // opts: any;
 };
 
 type State = {
@@ -16,6 +42,17 @@ type State = {
 };
 
 export default class FCAS extends Component<Props, State> {
+  static defaultProps: Partial<Props> = {
+    asset: "btc",
+    mode: "light",
+    spectrum: {
+      enabled: true
+    },
+    icon: {
+      enabled: true
+    }
+  };
+
   interval: number;
 
   constructor() {
@@ -25,7 +62,7 @@ export default class FCAS extends Component<Props, State> {
 
   async _getData() {
     const { data, success } = await this.props.api.fetchAssetMetric(
-      this.props.symbol,
+      this.props.asset,
       "FCAS"
     );
 
@@ -72,13 +109,13 @@ export default class FCAS extends Component<Props, State> {
     this._update();
   }
 
-  render({ opts, api, symbol }: Props, { metric, loading }: State) {
+  render(props: Props, { metric, loading }: State) {
     if (loading) return null;
     return (
       <div class="fs-container">
-        {opts.score && <Score symbol={symbol} metric={metric} opts={opts} />}
-        {opts.plot && (
-          <Plot symbol={symbol} metric={metric} api={api} opts={opts} />
+        <Score symbol={props.asset} metric={metric} {...props} mini />
+        {props.spectrum.enabled && (
+          <Plot symbol={props.asset} metric={metric} {...props} mini />
         )}
       </div>
     );

src/spectrum/plot/index.js

@@ -85,13 +85,13 @@ export default class Plot extends Component {
   }
 
   getHighlights() {
-    let { symbol, opts } = this.props;
-    symbol = symbol.toLowerCase();
-    if (opts && opts.highlights && opts.highlights.length > 0) {
-      return opts.highlights;
+    let { asset, highlights } = this.props;
+    asset = asset.toLowerCase();
+    if (highlights && highlights.length > 0) {
+      return highlights;
     }
-    let highlights = [];
-    if (symbol == "eth" || symbol == "btc") {
+    highlights = [];
+    if (asset == "eth" || asset == "btc") {
       highlights = ["ZEC", "XRP"];
     } else {
       highlights = ["BTC"];
@@ -104,7 +104,7 @@ export default class Plot extends Component {
       return [];
     }
 
-    let { bucketDistance } = this.props.opts;
+    let { bucketDistance } = this.props;
     if (!bucketDistance) {
       bucketDistance = DEFAULT_BUCKET_DISTANCE;
     }
@@ -149,7 +149,7 @@ export default class Plot extends Component {
   }
 
   getYCoords(asset, buckets, scoresToBuckets) {
-    let { lineDistance } = this.props.opts;
+    let { lineDistance } = this.props;
     if (!lineDistance) {
       lineDistance = DEFAULT_LINE_DISTANCE;
     }
@@ -176,7 +176,7 @@ export default class Plot extends Component {
     return { y: 44 - 10 * index, toClose };
   }
 
-  render({ opts, metric, symbol }, { loading, distribution }) {
+  render(props, { loading, distribution }) {
     if (loading) return null;
 
     const highlightedSymbols = this.state.highlightedSymbols;
@@ -184,10 +184,10 @@ export default class Plot extends Component {
 
     distribution = [...distribution, ...highlights];
 
-    const xPos = `${(metric.fcas / 1000) * 100}%`;
+    const xPos = `${(props.metric.fcas / 1000) * 100}%`;
     const highlightedAssets = distribution
       .filter(i => highlightedSymbols.indexOf(i.symbol) > -1)
-      .filter(i => i.symbol != symbol.toUpperCase());
+      .filter(i => i.symbol != props.asset.toUpperCase());
 
     const { buckets, scoresToBuckets } = this.getBuckets();
 
@@ -202,7 +202,7 @@ export default class Plot extends Component {
           </linearGradient>
         </defs>
 
-        <g fill={opts.dark ? "#fff" : "#000"}>
+        <g fill={props.mode === "dark" ? "#fff" : "#000"}>
           <circle cx="0" cy="44" r="2.5" />
           <text x="6" y="47" font-size="8">
             Coins
@@ -210,7 +210,13 @@ export default class Plot extends Component {
         </g>
 
         {/* Distribution Dots */}
-        <g fill={opts.dark ? "rgba(255, 255,255, 0.5)" : "rgba(0, 0, 0, 0.4)"}>
+        <g
+          fill={
+            props.mode === "dark"
+              ? "rgba(255, 255,255, 0.5)"
+              : "rgba(0, 0, 0, 0.4)"
+          }
+        >
           {distribution.map(i => (
             <circle cx={`${(i.value / 1000) * 100}%`} cy="58" r="2.5" />
           ))}
@@ -224,7 +230,7 @@ export default class Plot extends Component {
           y="85"
           text-anchor="middle"
           class="fs-plot__x"
-          fill={opts.dark ? "#fff" : "#000"}
+          fill={props.mode === "dark" ? "#fff" : "#000"}
         >
           <tspan x="0">0</tspan>
           <tspan x="50%">500</tspan>
@@ -235,7 +241,7 @@ export default class Plot extends Component {
           const xPos = `${(a.value / 1000) * 100}%`;
           let { y, toClose } = this.getYCoords(a, buckets, scoresToBuckets);
           return (
-            <g fill={opts.dark ? "#fff" : "#000"}>
+            <g fill={props.mode === "dark" ? "#fff" : "#000"}>
               <text x={xPos} y={y} text-anchor="middle" font-size="10">
                 {a.symbol}
               </text>
@@ -246,7 +252,7 @@ export default class Plot extends Component {
                   x2={xPos}
                   y2="60"
                   style={`stroke:rgb(${
-                    opts.dark ? "255, 255, 255" : "0,0,0"
+                    props.mode === "dark" ? "255, 255, 255" : "0,0,0"
                   }); stroke-width:0.5`}
                 />
               )}
@@ -256,12 +262,12 @@ export default class Plot extends Component {
 
         {/* Blue FCAS Marker */}
         <text class="fs-plot__blue" text-anchor="middle" font-weight="bold">
-          <tspan x={xPos} y={opts.mini ? 26 : 14}>
-            {symbol.toUpperCase()}
+          <tspan x={xPos} y={props.mini ? 26 : 14}>
+            {props.asset.toUpperCase()}
           </tspan>
-          {!opts.mini && (
+          {!props.mini && (
             <tspan x={xPos} y="104">
-              {metric.fcas}
+              {props.metric.fcas}
             </tspan>
           )}
         </text>
@@ -269,9 +275,9 @@ export default class Plot extends Component {
         {/* Blue FCAS Marker Line */}
         <line
           x1={xPos}
-          y1={opts.mini ? 28 : 16}
+          y1={props.mini ? 28 : 16}
           x2={xPos}
-          y2={opts.mini ? 60 : 92}
+          y2={props.mini ? 60 : 92}
           style="stroke:rgb(45,87,237); stroke-width:1"
         />
       </svg>

src/spectrum/score/DataMini.js

@@ -1,13 +1,15 @@
 import { h } from "preact";
 
-export default ({ opts, metric, rank }) => {
+export default props => {
   return (
     <div class="fs-data-mini">
-      FCAS {metric.fcas}
+      FCAS {props.metric.fcas}
       <div
-        class={`fs-rank fs-rank__letter fs-rank__letter--mini fs-rank__letter--${rank}`}
+        class={`fs-rank fs-rank__letter fs-rank__letter--mini fs-rank__letter--${
+          props.rank
+        }`}
       >
-        {rank}
+        {props.rank}
       </div>
     </div>
   );

src/spectrum/score/index.js

@@ -0,0 +1,55 @@
+import { h, Component } from "preact";
+import Data from "./Data";
+import DataMini from "./DataMini";
+import "./styles.scss";
+
+function round(value) {
+  if (!value) {
+    return value;
+  }
+  return Math.round(value * 100) / 100;
+}
+
+export default class Score extends Component {
+  render(props, { showTooltip }) {
+    let rank;
+    if (props.metric.fcas <= 500) {
+      rank = "f";
+    } else if (props.metric.fcas <= 649) {
+      rank = "c";
+    } else if (props.metric.fcas <= 749) {
+      rank = "b";
+    } else if (props.metric.fcas <= 899) {
+      rank = "a";
+    } else {
+      rank = "s";
+    }
+
+    let wrapperClass = "fs-score";
+    if (props.mode === "dark") wrapperClass += " fs-score--dark";
+    if (props.mini) wrapperClass += " fs-score--mini";
+
+    const DataComponent = props.mini ? DataMini : Data;
+
+    return (
+      <div class={wrapperClass}>
+        <header class="fs-token">
+          {props.icon.enabled && (
+            <img
+              class="fs-token__logo"
+              src={`https://s3.amazonaws.com/fsc-crypto-icons/svg/color/${
+                props.asset
+              }.svg`}
+            />
+          )}
+          <h1 class="fs-token__name">
+            {props.metric.name}
+            {props.asset && <span class="fs-token__sym">{props.asset}</span>}
+          </h1>
+        </header>
+
+        <DataComponent {...props} rank={rank} />
+      </div>
+    );
+  }
+}