Fixes for broken side-effects :(

index.html

@@ -61,6 +61,9 @@
     </div>
 
     <div class="wrapper"><div id="multiTable"></div></div>
+    <div class="wrapper">
+      <div id="multiTableFcas"></div>
+    </div>
 
     <script>
       const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
@@ -139,6 +142,7 @@
         dark: true,
         borderColor: "#737e8d"
       });
+
       // Price table
       flipside.multiTable("multiTable", {
         widgetType: "price-multi-tabe",
@@ -161,6 +165,40 @@
         }
       });
 
+      // FCAS Table
+      flipside.multiTable("multiTableFcas", {
+        autoWidth: false,
+        assets: null,
+        columns: [
+          "fcas",
+          "trend",
+          "userActivity",
+          "developerBehavior",
+          "marketMaturity",
+          "rank"
+        ],
+        exlusions: null,
+        fontFamily: "inherit",
+        headers: {},
+        limit: 10,
+        mode: "light",
+        rows: {
+          alternating: true,
+          alternatingColors: "#eeeeee",
+          dividers: false,
+          style: {}
+        },
+        title: {
+          text: "Top Coins",
+          style: {}
+        },
+        trend: {
+          enabled: true,
+          changeOver: 7,
+          style: {}
+        }
+      });
+
       flipside.score("score", { symbol: "eth" });
     </script>
   </body>

src/components/trend/style.css

@@ -1,6 +1,7 @@
 .wrapper {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
 }
 
 .icon {

src/multiTable/index.tsx

@@ -125,6 +125,7 @@ export type Props = {
 
 type State = {
   loading: boolean;
+  priceFilterRequired: boolean;
   filteredColumns: ColumnName[];
   pageSortBy: ColumnName;
   sortColumn: string;
@@ -140,6 +141,7 @@ export default class MultiTable extends Component<Props, State> {
 
     // if price, market_cap, or volume_24h are included in columns then remove all other columns
     let filteredColumns = props.columns;
+    let priceFilterRequired = false;
     const includedMarketCapColumns = intersection(filteredColumns, [
       "price",
       "market_cap",
@@ -147,6 +149,11 @@ export default class MultiTable extends Component<Props, State> {
     ]) as ColumnName[];
     if (includedMarketCapColumns.length > 0) {
       filteredColumns = includedMarketCapColumns;
+      priceFilterRequired = true;
+    } else {
+      if (filteredColumns.indexOf("fcas") === -1) {
+        filteredColumns = ["fcas", ...filteredColumns];
+      }
     }
 
     this.state = {
@@ -154,6 +161,7 @@ export default class MultiTable extends Component<Props, State> {
       pageSortBy: props.sortBy || props.columns[0],
       sortColumn: props.sortBy || "fcas",
       sortOrder: "desc",
+      priceFilterRequired: priceFilterRequired,
       filteredColumns
     };
   }
@@ -164,6 +172,7 @@ export default class MultiTable extends Component<Props, State> {
     page: 1,
     fontFamily: "inherit",
     columns: [
+      "fcas",
       "trend",
       "userActivity",
       "developerBehavior",
@@ -177,7 +186,7 @@ export default class MultiTable extends Component<Props, State> {
       alternating: true,
       alternatingColors: [],
       dividers: false,
-      dividersColor: "#aeaeae",
+      dividersColor: null,
       padding: "5px 10px",
       headerBold: false
     },
@@ -204,7 +213,9 @@ export default class MultiTable extends Component<Props, State> {
       size: this.props.limit,
       sort_by: COLUMNS[this.state.sortColumn].sortKey,
       sort_desc: true,
-      metrics: this.state.filteredColumns,
+      metrics: this.state.priceFilterRequired
+        ? this.state.filteredColumns
+        : ["fcas", "utility", "dev", "market-maturity"],
       change_over: this.props.trend.changeOver
     });
     this.setState({

src/multiTable/types.d.ts

@@ -25,6 +25,7 @@ type ColumnDefinition = {
 };
 
 type ColumnName =
+  | "fcas"
   | "trend"
   | "developerBehavior"
   | "userActivity"