Add typehint to charts

This commit is contained in:
Matthias 2020-10-04 19:24:21 +02:00
parent c53e0f89d2
commit f97652e187
3 changed files with 57 additions and 41 deletions

View File

@ -6,6 +6,7 @@
import { Component, Vue, Prop } from 'vue-property-decorator';
import ECharts from 'vue-echarts';
import { EChartOption } from 'echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
@ -48,7 +49,7 @@ export default class CumProfitChart extends Vue {
return res;
}
get chartOptions() {
get chartOptions(): EChartOption {
return {
title: {
text: 'Cumulative Profit',
@ -118,7 +119,12 @@ export default class CumProfitChart extends Vue {
type: 'line',
name: CHART_PROFIT,
animation: false,
color: 'black',
lineStyle: {
color: 'black',
},
itemStyle: {
color: 'black',
},
// symbol: 'none',
},
],

View File

@ -6,6 +6,8 @@
import { Component, Vue, Prop } from 'vue-property-decorator';
import ECharts from 'vue-echarts';
import { EChartOption } from 'echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
@ -46,7 +48,7 @@ export default class DailyChart extends Vue {
);
}
get dailyChartOptions() {
get dailyChartOptions(): EChartOption {
return {
title: {
text: 'Daily profit',
@ -73,22 +75,24 @@ export default class DailyChart extends Vue {
type: 'category',
inverse: true,
},
visualMap: {
dimension: 1,
seriesIndex: 0,
show: false,
pieces: [
{
max: -0.01,
min: this.absoluteMin - 2,
color: 'red',
},
{
min: -0.00001,
color: 'green',
},
],
},
visualMap: [
{
dimension: 1,
seriesIndex: 0,
show: false,
pieces: [
{
max: -0.01,
min: this.absoluteMin - 2,
color: 'red',
},
{
min: -0.00001,
color: 'green',
},
],
},
],
yAxis: [
{
type: 'value',
@ -112,12 +116,14 @@ export default class DailyChart extends Vue {
{
type: 'line',
name: CHART_ABS_PROFIT,
color: 'black',
// Color is induced by visualMap
},
{
type: 'bar',
name: CHART_TRADE_COUNT,
color: 'rgba(150,150,150,0.3)',
itemStyle: {
color: 'rgba(150,150,150,0.3)',
},
yAxisIndex: 1,
},
],

View File

@ -17,6 +17,7 @@ import 'echarts/lib/component/visualMapPiecewise';
import { Trade } from '@/types';
import { timestampHour } from '@/shared/formatters';
import { EChartOption, EChartsOptionConfig } from 'echarts';
// Define Column labels here to avoid typos
const CHART_PROFIT = 'Profit %';
@ -50,7 +51,7 @@ export default class HourlyChart extends Vue {
return res;
}
get hourlyChartOptions() {
get hourlyChartOptions(): EChartOption {
return {
title: {
text: 'Hourly Profit',
@ -95,34 +96,37 @@ export default class HourlyChart extends Vue {
nameGap: 30,
},
],
visualMap: {
dimension: 1,
seriesIndex: 0,
show: false,
pieces: [
{
max: -0.001,
min: -2,
color: 'red',
},
{
min: -0.01,
max: 2,
color: 'green',
},
],
},
visualMap: [
{
dimension: 1,
seriesIndex: 0,
show: false,
pieces: [
{
max: -0.001,
min: -2,
color: 'red',
},
{
min: -0.01,
max: 2,
color: 'green',
},
],
},
],
series: [
{
type: 'line',
name: CHART_PROFIT,
color: 'black',
// symbol: 'none',
},
{
type: 'bar',
name: CHART_TRADE_COUNT,
color: 'rgba(150,150,150,0.3)',
itemStyle: {
color: 'rgba(150,150,150,0.3)',
},
yAxisIndex: 1,
},
],