From 09de9726f9be0b60e63a7a0839f95f19a2c4a38b Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 18 Aug 2020 20:51:16 +0200
Subject: [PATCH] Fix colors in daily / hourly charts

---
 src/components/charts/DailyChart.vue  | 34 +++++++++++++++++++--------
 src/components/charts/HourlyChart.vue | 13 +++++-----
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/charts/DailyChart.vue b/src/components/charts/DailyChart.vue
index 17ecaae3..f3e25eee 100644
--- a/src/components/charts/DailyChart.vue
+++ b/src/components/charts/DailyChart.vue
@@ -26,6 +26,24 @@ const CHART_TRADE_COUNT = 'Trade Count';
 export default class DailyChart extends Vue {
   @Prop({ required: true }) dailyStats!: DailyReturnValue;
 
+  get absoluteMin() {
+    return Number(
+      this.dailyStats.data.reduce(
+        (min, p) => (p.abs_profit < min ? p.abs_profit : min),
+        this.dailyStats.data[0].abs_profit,
+      ),
+    );
+  }
+
+  get absoluteMax() {
+    return Number(
+      this.dailyStats.data.reduce(
+        (max, p) => (p.abs_profit > max ? p.abs_profit : max),
+        this.dailyStats.data[0].abs_profit,
+      ),
+    );
+  }
+
   get dailyChartOptions() {
     return {
       title: {
@@ -58,18 +76,14 @@ export default class DailyChart extends Vue {
         show: false,
         pieces: [
           {
-            min: 0.0,
-            color: 'green',
-          },
-          {
-            value: 0.0,
-            color: 'gray',
-          },
-          {
-            max: 0.0,
-            min: -100000,
+            max: -0.01,
+            min: this.absoluteMin - 2,
             color: 'red',
           },
+          {
+            min: -0.00001,
+            color: 'green',
+          },
         ],
       },
       yAxis: [
diff --git a/src/components/charts/HourlyChart.vue b/src/components/charts/HourlyChart.vue
index 5f247aa2..ee1b2b7a 100644
--- a/src/components/charts/HourlyChart.vue
+++ b/src/components/charts/HourlyChart.vue
@@ -19,7 +19,7 @@ import { Trade } from '@/store/types';
 import { timestampHour } from '@/shared/formatters';
 
 // Define Column labels here to avoid typos
-const CHART_PROFIT = 'Profit';
+const CHART_PROFIT = 'Profit %';
 const CHART_TRADE_COUNT = 'Trade Count';
 
 @Component({
@@ -98,13 +98,14 @@ export default class HourlyChart extends Vue {
         show: false,
         pieces: [
           {
-            min: 0,
-            color: 'green',
+            max: -0.001,
+            // min: -2,
+            color: 'red',
           },
           {
-            max: 0.0,
-            min: -1,
-            color: 'red',
+            min: -0.01,
+            max: 2,
+            color: 'green',
           },
         ],
       },