fix(stats): make outcome descrease is good by color

checkmoney · Mar 8, 2019 · 7ad7eee · 7ad7eee
1 parent cd67441
commit 7ad7eee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/front/src/features/statistics/features/dynamics/Dynamics.tsx b/front/src/features/statistics/features/dynamics/Dynamics.tsx
@@ -97,7 +97,7 @@ export const Dynamics = ({ className, group, currency }: Props) => {
       <Loader skeleton expectedRows={2} status={fetching}>
         <div className={styles.diff}>
           <Stat title="Income" value={incomeGrow} suffix="%" />
-          <Stat title="Outcome" value={outcomeGrow} suffix="%" />
+          <Stat title="Outcome" value={outcomeGrow} suffix="%" decreaseIsGood />
         </div>
       </Loader>
     </Card>

diff --git a/front/src/ui/components/chart/stat/Stat.tsx b/front/src/ui/components/chart/stat/Stat.tsx
@@ -5,13 +5,21 @@ interface Props {
   title: string
   value: Option<number>
   suffix?: string
+  decreaseIsGood?: boolean
 }
 
-export const Stat = ({ title, value, suffix }: Props) => {
+export const Stat = ({
+  title,
+  value,
+  suffix,
+  decreaseIsGood = false,
+}: Props) => {
   if (value.nonEmpty()) {
     const positive = value.get() > 0
 
-    const color = positive ? '#3f8600' : '#cf1322'
+    const green = !decreaseIsGood ? positive : !positive
+
+    const color = green ? '#3f8600' : '#cf1322'
     const iconType = positive ? 'arrow-up' : 'arrow-down'
 
     return (