From f0b2c4b223873a0e5db25363f92312f46b6dd32e Mon Sep 17 00:00:00 2001
From: Bryan Cinman <syngenius@gmail.com>
Date: Tue, 29 Jan 2019 02:34:26 -0500
Subject: [PATCH 1/2] spectrum -> spectrumPlot, fixed custom links wrapping

---
 index.html                                    |  4 +--
 src/api.ts                                    |  2 +-
 src/components/customLinks/index.tsx          | 17 ++++++++++++
 src/components/customLinks/style.scss         | 13 +++++++++
 src/index.tsx                                 |  6 ++---
 src/multiTable/index.tsx                      | 14 +++++-----
 src/multiTable/style.scss                     |  6 +----
 src/{spectrum => spectrumPlot}/index.tsx      | 27 ++++++++++---------
 src/{spectrum => spectrumPlot}/plot/index.js  |  0
 .../plot/styles.scss                          |  0
 src/{spectrum => spectrumPlot}/score/Data.js  |  0
 .../score/DataMini.js                         |  0
 .../score/images/icon-down.svg                |  0
 .../score/images/icon-eq.svg                  |  0
 .../score/images/icon-up.svg                  |  0
 src/{spectrum => spectrumPlot}/score/index.js |  0
 .../score/styles.scss                         |  0
 src/{spectrum => spectrumPlot}/styles.scss    | 17 ++++++++++--
 18 files changed, 74 insertions(+), 32 deletions(-)
 create mode 100644 src/components/customLinks/index.tsx
 create mode 100644 src/components/customLinks/style.scss
 rename src/{spectrum => spectrumPlot}/index.tsx (80%)
 rename src/{spectrum => spectrumPlot}/plot/index.js (100%)
 rename src/{spectrum => spectrumPlot}/plot/styles.scss (100%)
 rename src/{spectrum => spectrumPlot}/score/Data.js (100%)
 rename src/{spectrum => spectrumPlot}/score/DataMini.js (100%)
 rename src/{spectrum => spectrumPlot}/score/images/icon-down.svg (100%)
 rename src/{spectrum => spectrumPlot}/score/images/icon-eq.svg (100%)
 rename src/{spectrum => spectrumPlot}/score/images/icon-up.svg (100%)
 rename src/{spectrum => spectrumPlot}/score/index.js (100%)
 rename src/{spectrum => spectrumPlot}/score/styles.scss (100%)
 rename src/{spectrum => spectrumPlot}/styles.scss (65%)

diff --git a/index.html b/index.html
index a842ce7..3ede960 100644
--- a/index.html
+++ b/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,
diff --git a/src/api.ts b/src/api.ts
index 463d483..cf943d3 100644
--- a/src/api.ts
+++ b/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
     });
diff --git a/src/components/customLinks/index.tsx b/src/components/customLinks/index.tsx
new file mode 100644
index 0000000..8c0237b
--- /dev/null
+++ b/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;
diff --git a/src/components/customLinks/style.scss b/src/components/customLinks/style.scss
new file mode 100644
index 0000000..f957830
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 920c984..c7b093f 100644
--- a/src/index.tsx
+++ b/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) {
diff --git a/src/multiTable/index.tsx b/src/multiTable/index.tsx
index 6a9195a..9bfcf4e 100644
--- a/src/multiTable/index.tsx
+++ b/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>
diff --git a/src/multiTable/style.scss b/src/multiTable/style.scss
index 22e379a..f70bc0a 100644
--- a/src/multiTable/style.scss
+++ b/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;
   }
diff --git a/src/spectrum/index.tsx b/src/spectrumPlot/index.tsx
similarity index 80%
rename from src/spectrum/index.tsx
rename to src/spectrumPlot/index.tsx
index a05979a..4d63a59 100644
--- a/src/spectrum/index.tsx
+++ b/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>
     );
   }
diff --git a/src/spectrum/plot/index.js b/src/spectrumPlot/plot/index.js
similarity index 100%
rename from src/spectrum/plot/index.js
rename to src/spectrumPlot/plot/index.js
diff --git a/src/spectrum/plot/styles.scss b/src/spectrumPlot/plot/styles.scss
similarity index 100%
rename from src/spectrum/plot/styles.scss
rename to src/spectrumPlot/plot/styles.scss
diff --git a/src/spectrum/score/Data.js b/src/spectrumPlot/score/Data.js
similarity index 100%
rename from src/spectrum/score/Data.js
rename to src/spectrumPlot/score/Data.js
diff --git a/src/spectrum/score/DataMini.js b/src/spectrumPlot/score/DataMini.js
similarity index 100%
rename from src/spectrum/score/DataMini.js
rename to src/spectrumPlot/score/DataMini.js
diff --git a/src/spectrum/score/images/icon-down.svg b/src/spectrumPlot/score/images/icon-down.svg
similarity index 100%
rename from src/spectrum/score/images/icon-down.svg
rename to src/spectrumPlot/score/images/icon-down.svg
diff --git a/src/spectrum/score/images/icon-eq.svg b/src/spectrumPlot/score/images/icon-eq.svg
similarity index 100%
rename from src/spectrum/score/images/icon-eq.svg
rename to src/spectrumPlot/score/images/icon-eq.svg
diff --git a/src/spectrum/score/images/icon-up.svg b/src/spectrumPlot/score/images/icon-up.svg
similarity index 100%
rename from src/spectrum/score/images/icon-up.svg
rename to src/spectrumPlot/score/images/icon-up.svg
diff --git a/src/spectrum/score/index.js b/src/spectrumPlot/score/index.js
similarity index 100%
rename from src/spectrum/score/index.js
rename to src/spectrumPlot/score/index.js
diff --git a/src/spectrum/score/styles.scss b/src/spectrumPlot/score/styles.scss
similarity index 100%
rename from src/spectrum/score/styles.scss
rename to src/spectrumPlot/score/styles.scss
diff --git a/src/spectrum/styles.scss b/src/spectrumPlot/styles.scss
similarity index 65%
rename from src/spectrum/styles.scss
rename to src/spectrumPlot/styles.scss
index d5a586c..ce0f212 100644
--- a/src/spectrum/styles.scss
+++ b/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 {

From 6930f317be6c66386031cecae401cb4f4f08f467 Mon Sep 17 00:00:00 2001
From: Bryan Cinman <syngenius@gmail.com>
Date: Tue, 29 Jan 2019 02:46:03 -0500
Subject: [PATCH 2/2] update types

---
 src/multiTable/index.tsx       | 5 +++--
 src/spectrumPlot/index.tsx     | 2 ++
 src/spectrumPlot/plot/index.js | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/multiTable/index.tsx b/src/multiTable/index.tsx
index 9bfcf4e..808eef4 100644
--- a/src/multiTable/index.tsx
+++ b/src/multiTable/index.tsx
@@ -81,8 +81,9 @@ export type Props = {
     text: string;
     style?: object;
   };
-  trends?: {
-    enabled: boolean;
+  trend?: {
+    enabled?: boolean;
+    changeOver?: number;
   };
   headers?: {
     color?: string;
diff --git a/src/spectrumPlot/index.tsx b/src/spectrumPlot/index.tsx
index 4d63a59..7a562e9 100644
--- a/src/spectrumPlot/index.tsx
+++ b/src/spectrumPlot/index.tsx
@@ -9,6 +9,7 @@ export type Props = {
   asset: string;
   highlights?: string[];
   mode?: "light" | "dark";
+  fontFamily?: string;
   autoWidth?: boolean;
   relatedMarkers?: {
     bucketDistance?: number;
@@ -44,6 +45,7 @@ export default class SpectrumPlot extends Component<Props, State> {
   static defaultProps: Props = {
     asset: "btc",
     mode: "light",
+    fontFamily: "inherit",
     relatedMarkers: {
       enabled: true,
       bucketDistance: 35
diff --git a/src/spectrumPlot/plot/index.js b/src/spectrumPlot/plot/index.js
index e035b93..b82bab2 100644
--- a/src/spectrumPlot/plot/index.js
+++ b/src/spectrumPlot/plot/index.js
@@ -104,7 +104,7 @@ export default class Plot extends Component {
       return [];
     }
 
-    let { bucketDistance } = this.props;
+    let { bucketDistance } = this.props.relatedMarkers;
     if (!bucketDistance) {
       bucketDistance = DEFAULT_BUCKET_DISTANCE;
     }