Utilize precomputed point change and grade.

src/components/rank/index.tsx

@@ -4,6 +4,7 @@ import * as css from "./style.css";
 
 type Props = {
   score: number;
+  grade?: string;
   kind?: "slim" | "normal" | "large";
   class?: string;
 };
@@ -31,16 +32,21 @@ export default class Rank extends Component<Props, State> {
 
   render(props: Props) {
     let rankClass;
-    if (props.score <= 500) {
-      rankClass = css.f;
-    } else if (props.score <= 649) {
-      rankClass = css.c;
-    } else if (props.score <= 749) {
-      rankClass = css.b;
-    } else if (props.score <= 899) {
-      rankClass = css.a;
+    let css_: any = css;
+    if (props.grade) {
+      rankClass = css_[props.grade.toLowerCase()];
     } else {
-      rankClass = css.s;
+      if (props.score <= 500) {
+        rankClass = css_.f;
+      } else if (props.score <= 649) {
+        rankClass = css_.c;
+      } else if (props.score <= 749) {
+        rankClass = css_.b;
+      } else if (props.score <= 899) {
+        rankClass = css_.a;
+      } else {
+        rankClass = css_.s;
+      }
     }
 
     let kindClass = css[props.kind];

src/components/trend/index.tsx

@@ -3,7 +3,8 @@ import classNames from "classnames";
 import * as css from "./style.css";
 
 type Props = {
-  change: number;
+  change?: number;
+  pointChange?: number;
   value: number;
   class?: string;
 };
@@ -14,7 +15,8 @@ export function calculateTrendDiff(value: number, percent: number): number {
 
 const Trend = (props: Props) => {
   let directionClass, icon;
-  if (props.change < 0) {
+  let changeDeterminate = props.pointChange ? props.pointChange : props.change;
+  if (changeDeterminate < 0) {
     directionClass = css.down;
     icon = require("./images/down.svg");
   } else {
@@ -22,7 +24,12 @@ const Trend = (props: Props) => {
     icon = require("./images/up.svg");
   }
 
-  const difference = calculateTrendDiff(props.value, props.change);
+  let difference;
+  if (props.pointChange) {
+    difference = props.pointChange;
+  } else {
+    difference = calculateTrendDiff(props.value, props.change);
+  }
   const classes = classNames(css.wrapper, directionClass, props.class);
 
   return (

src/spectrum/index.tsx

@@ -58,7 +58,9 @@ type State = {
     value: number;
     symbol: string;
     slug: string;
+    grade?: string;
     percent_change: number;
+    point_change?: number;
     asset_name: string;
     has_rank: boolean;
   };
@@ -161,13 +163,13 @@ class Spectrum extends Component<Props, State> {
           <span class={css.fcas}>Health {fcas}</span>
           {trend.enabled && (
             <span class={css.trend}>
-              <Trend change={data.percent_change} value={fcas} />
+              <Trend pointChange={data.point_change} value={fcas} />
             </span>
           )}
           {rank.enabled && data.has_rank && (
             <a href={defaultFlipsideLink(api.key, "spectrum")}>
               <span class={css.rank}>
-                <Rank score={fcas} kind="normal" />
+                <Rank score={fcas} grade={data.grade} kind="normal" />
               </span>
             </a>
           )}