[DDW-685] Reverse tooltip colors (large number is green)

input-output-hk · Jun 10, 2019 · a3e1bc6 · a3e1bc6
1 parent cf1dbb1
commit a3e1bc6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolTooltip.js b/source/renderer/app/components/staking/stake-pools/StakePoolTooltip.js
@@ -127,6 +127,7 @@ export default class StakePoolTooltip extends Component<Props> {
 
     const darken = currentTheme === 'dark-blue' ? 1 : 0;
     const alpha = currentTheme === 'dark-blue' ? 1 : 0.3;
+    const reverse = true;
     const retirementFromNow = retirement
       ? moment(retirement).fromNow(true)
       : '';
@@ -179,6 +180,7 @@ export default class StakePoolTooltip extends Component<Props> {
                 background: getColorFromRange(controlledStake, {
                   darken,
                   alpha,
+                  reverse,
                 }),
               }}
             >
@@ -189,7 +191,11 @@ export default class StakePoolTooltip extends Component<Props> {
           <dd className={styles.profitMargin}>
             <span
               style={{
-                background: getColorFromRange(profitMargin, { darken, alpha }),
+                background: getColorFromRange(profitMargin, {
+                  darken,
+                  alpha,
+                  reverse,
+                }),
               }}
             >
               {profitMargin}%
@@ -199,7 +205,11 @@ export default class StakePoolTooltip extends Component<Props> {
           <dd className={styles.performance}>
             <span
               style={{
-                background: getColorFromRange(performance, { darken, alpha }),
+                background: getColorFromRange(performance, {
+                  darken,
+                  alpha,
+                  reverse,
+                }),
               }}
             >
               {performance}%

diff --git a/source/renderer/app/config/stakingStakePools.dummy.json b/source/renderer/app/config/stakingStakePools.dummy.json
@@ -5,9 +5,9 @@
     "name": "cilostazol",
     "description": "Supportive verbal psychotherapy",
     "url": "http://umich.edu",
-    "controlledStake": 45,
-    "profitMargin": 40,
-    "performance": 1,
+    "controlledStake": 90,
+    "profitMargin": 90,
+    "performance": 90,
     "retirement": "2019-06-10T22:26:07Z"
   },
   {
@@ -16,9 +16,9 @@
     "name": "Methyldopa",
     "description": "Low forceps operation with episiotomy",
     "url": "http://adobe.com",
-    "controlledStake": 97,
-    "profitMargin": 20,
-    "performance": 1,
+    "controlledStake": 2,
+    "profitMargin": 2,
+    "performance": 2,
     "retirement": null
   },
   {

diff --git a/source/renderer/app/utils/colors.js b/source/renderer/app/utils/colors.js
@@ -10,6 +10,7 @@ type RangeOptions = {
   darken?: number,
   brighten?: number,
   alpha?: number,
+  reverse: boolean,
 };
 
 const defaultRangeOptions = {
@@ -18,13 +19,16 @@ const defaultRangeOptions = {
   darken: 0,
   brighten: 0,
   alpha: 1,
+  reverse: false,
 };
 
 export const getColorFromRange = (index: number, options?: RangeOptions) => {
-  const { colors, domain, darken, brighten, alpha } = {
+  const { colors, domain: originalDomain, darken, brighten, alpha, reverse } = {
     ...defaultRangeOptions,
     ...options,
   };
+  const domain = originalDomain.slice();
+  if (reverse) domain.reverse();
   const scale = chroma.scale(colors).domain(domain);
   return scale(index)
     .darken(darken)