Add VisualColormap to Daily and hourly profit charts

src/components/charts/DailyChart.vue

@@ -52,6 +52,26 @@ export default class DailyChart extends Vue {
         type: 'category',
         inverse: true,
       },
+      visualMap: {
+        dimension: 1,
+        seriesIndex: 0,
+        show: false,
+        pieces: [
+          {
+            min: 0.0,
+            color: 'green',
+          },
+          {
+            value: 0.0,
+            color: 'gray',
+          },
+          {
+            max: 0.0,
+            min: -100000,
+            color: 'red',
+          },
+        ],
+      },
       yAxis: [
         {
           type: 'value',
@@ -76,7 +96,6 @@ export default class DailyChart extends Vue {
           type: 'line',
           name: CHART_ABS_PROFIT,
           color: 'black',
-          smooth: true,
         },
         {
           type: 'bar',

src/components/charts/HourlyChart.vue

@@ -1,16 +1,19 @@
 <template>
-  <v-chart :options="hourlyChartOptions" />
+  <v-chart v-if="trades.length > 0" :options="hourlyChartOptions" />
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ECharts from 'vue-echarts';
+
 import 'echarts/lib/chart/bar';
 import 'echarts/lib/chart/line';
 import 'echarts/lib/component/title';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/legend';
+import 'echarts/lib/component/visualMap';
+import 'echarts/lib/component/visualMapPiecewise';
 
 import { Trade } from '@/store/types';
 import { timestampHour } from '@/shared/formatters';
@@ -30,7 +33,7 @@ export default class HourlyChart extends Vue {
   get hourlyData() {
     const res = new Array(24);
     for (let i = 0; i < 24; i += 1) {
-      res[i] = { hour: i, hourDesc: `${i}h`, profit: 0, count: 0 };
+      res[i] = { hour: i, hourDesc: `${i}h`, profit: 0.0, count: 0.0 };
     }
 
     for (let i = 0, len = this.trades.length; i < len; i += 1) {
@@ -46,7 +49,6 @@ export default class HourlyChart extends Vue {
   }
 
   get hourlyChartOptions() {
-    console.log(this.hourlyData);
     return {
       title: {
         text: 'Hourly Profit',
@@ -90,12 +92,28 @@ export default class HourlyChart extends Vue {
           nameGap: 30,
         },
       ],
+      visualMap: {
+        dimension: 1,
+        seriesIndex: 0,
+        show: false,
+        pieces: [
+          {
+            min: 0,
+            color: 'green',
+          },
+          {
+            max: 0.0,
+            min: -1,
+            color: 'red',
+          },
+        ],
+      },
       series: [
         {
           type: 'line',
           name: CHART_PROFIT,
           color: 'black',
-          smooth: true,
+          // symbol: 'none',
         },
         {
           type: 'bar',