spectrum -> spectrumPlot, fixed custom links wrapping

index.html

@@ -46,12 +46,12 @@
 
     <script>
       const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
-      flipside.spectrum("widget-0", {
+      flipside.spectrumPlot("widget-0", {
         asset: "nmr",
         highlights: ["BTC", "ETH", "QTUM"]
       });
 
-      flipside.spectrum("widget-1", {
+      flipside.spectrumPlot("widget-1", {
         asset: "nmr",
         mode: "dark",
         bucketDistance: 100,

src/api.ts

@@ -48,7 +48,7 @@ export default class API {
     return await this._fetch("GET", `/assets/${sym}/metrics`);
   }
 
-  async fetchFCASDistribution(asset: string) {
+  async fetchFCASDistribution() {
     return await this._fetch("GET", `/metrics/FCAS/assets`, {
       visual_distribution: true
     });

src/components/customLinks/index.tsx

@@ -0,0 +1,17 @@
+import { h } from "preact";
+import "./style.scss";
+
+const CustomLinks = () => {
+  return (
+    <div class="fs-links">
+      <p class="fs-links-line1">
+        Powered by <a href="https://flipsidecrypto.com">Flipside Crypto</a>
+      </p>
+      <p class="fs-links-line2">
+        <a href="https://flipsidecrypto.com/fcas">What's FCAS?</a>
+      </p>
+    </div>
+  );
+};
+
+export default CustomLinks;

src/components/customLinks/style.scss

@@ -0,0 +1,13 @@
+.fs-links {
+  display: flex;
+  font-size: 11px;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  &-line1,
+  &-line2 {
+    margin: 0 0 10px;
+  }
+  &-line1 {
+    margin-right: auto;
+  }
+}

src/index.tsx

@@ -1,7 +1,7 @@
 import { h, render } from "preact";
 import API from "./api";
 import Table from "./table";
-import Spectrum, { Props as SpectrumProps } from "./spectrum";
+import SpectrumPlot, { Props as SpectrumPlotProps } from "./spectrumPlot";
 import MultiTable, { Props as MultiTableProps } from "./multiTable";
 
 type MultiTableOpts = {};
@@ -18,9 +18,9 @@ export default class Flipside {
     render(<MultiTable {...opts} api={this.api} />, element);
   }
 
-  spectrum(el: string, opts: SpectrumProps): void {
+  spectrumPlot(el: string, opts: SpectrumPlotProps): void {
     const element = document.getElementById(el);
-    render(<Spectrum {...opts} api={this.api} />, element);
+    render(<SpectrumPlot {...opts} api={this.api} />, element);
   }
 
   createTable(el: string, symbol: string, opts: object) {

src/multiTable/index.tsx

@@ -2,6 +2,7 @@ import { h, Component } from "preact";
 import classnames from "classnames";
 import Rank from "../components/rank";
 import Trend from "../components/trend";
+import CustomLinks from "../components/customLinks";
 import API from "../api";
 import "./style.scss";
 
@@ -75,6 +76,7 @@ export type Props = {
   size?: number;
   limit?: number;
   columns?: ColumnName[];
+  fontFamily?: string;
   title?: {
     text: string;
     style?: object;
@@ -129,6 +131,7 @@ export default class MultiTable extends Component<Props, State> {
     mode: "light",
     size: 10,
     sortBy: "fcas",
+    fontFamily: "inherit",
     columns: [
       "trend",
       "userActivity",
@@ -184,20 +187,17 @@ export default class MultiTable extends Component<Props, State> {
       sortedRows = reverse(sortedRows);
     }
 
+    const { fontFamily } = props;
+
     return (
-      <div class={classes}>
+      <div class={classes} style={{ fontFamily }}>
         <header class="fs-multi-header">
           {props.title && (
             <h1 class="fs-multi-title" style={props.title.style}>
               {props.title.text}
             </h1>
           )}
-          <p class="fs-multi-custom1">
-            Powered by <a href="https://flipsidecrypto.com">Flipside Crypto</a>
-          </p>
-          <p class="fs-multi-custom2">
-            <a href="https://flipsidecrypto.com/fcas">What's FCAS?</a>
-          </p>
+          <CustomLinks />
         </header>
 
         <table>

src/multiTable/style.scss

@@ -58,10 +58,6 @@
     }
   }
 
-  &-custom1 {
-    margin-right: auto;
-  }
-
   &-coin {
     text-align: left;
   }
@@ -96,7 +92,7 @@
   }
 
   &-title {
-    margin: 0 10px 0 0;
+    margin: 0 10px 10px 0;
     font-size: 24px;
     font-weight: 400;
   }

src/spectrumPlot/index.tsx

@@ -1,4 +1,5 @@
 import { h, Component } from "preact";
+import CustomLinks from "../components/customLinks";
 import Score from "./score";
 import Plot from "./plot";
 import "./styles.scss";
@@ -9,8 +10,8 @@ export type Props = {
   highlights?: string[];
   mode?: "light" | "dark";
   autoWidth?: boolean;
-  bucketDistance?: number;
   relatedMarkers?: {
+    bucketDistance?: number;
     enabled?: boolean;
     color?: string;
     fontFamily?: string;
@@ -31,9 +32,7 @@ export type Props = {
   trend?: {
     enabled: boolean;
   };
-  // symbol: string;
-  api: API;
-  // opts: any;
+  api?: API;
 };
 
 type State = {
@@ -41,16 +40,19 @@ type State = {
   loading: boolean;
 };
 
-export default class FCAS extends Component<Props, State> {
-  static defaultProps: Partial<Props> = {
+export default class SpectrumPlot extends Component<Props, State> {
+  static defaultProps: Props = {
     asset: "btc",
     mode: "light",
-    spectrum: {
-      enabled: true
+    relatedMarkers: {
+      enabled: true,
+      bucketDistance: 35
     },
-    icon: {
-      enabled: true
-    }
+    name: { enabled: true },
+    spectrum: { enabled: true },
+    icon: { enabled: true },
+    rank: { enabled: true },
+    trend: { enabled: true }
   };
 
   interval: NodeJS.Timeout;
@@ -112,11 +114,12 @@ export default class FCAS extends Component<Props, State> {
   render(props: Props, { metric, loading }: State) {
     if (loading) return null;
     return (
-      <div class="fs-container">
+      <div class={`fs-spectrum fs-spectrum-${props.mode}`}>
         <Score symbol={props.asset} metric={metric} {...props} mini />
         {props.spectrum.enabled && (
           <Plot symbol={props.asset} metric={metric} {...props} mini />
         )}
+        <CustomLinks />
       </div>
     );
   }

src/spectrumPlot/styles.scss

@@ -1,9 +1,22 @@
-.fs-container {
+.fs-spectrum {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
   line-height: 1;
   border-radius: 25px;
+
+  &-dark {
+    color: #fff;
+    a {
+      color: #20b7fc;
+    }
+  }
+
+  &-light {
+    color: #000;
+    a {
+      color: #2d57ed;
+    }
+  }
 }
 
 .fs-link {