lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-10 10:21:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use typed griditem

Browse Source
This commit is contained in:
Matthias 2020-08-29 11:38:43 +02:00
parent b3363b0f90
commit 2f1942f48c
3 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/types/vue-grid-item.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
/* eslint-disable max-classes-per-file */
declare module 'vue-grid-layout' {
import Vue from 'vue';
export class GridLayout extends Vue {}
export class GridItem extends Vue {}
export interface GridItemData {
x: number;
y: number;
w: number;
h: number;
i: string;
}
}

19
src/views/Dashboard.vue
View File

@ -1,5 +1,10 @@
<template>
<GridLayout class="h-100 w-100" :row-height="50" :layout="gridLayout">
<GridLayout
class="h-100 w-100"
:row-height="50"
:layout="gridLayout"
@layout-updated="layoutUpdatedEvent"
>
<GridItem
:i="gridLayout[0].i"
:x="gridLayout[0].x"
@ -33,7 +38,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import VueGridLayout from 'vue-grid-layout';
import { GridLayout, GridItem, GridItemData } from 'vue-grid-layout';
import DailyChart from '@/components/charts/DailyChart.vue';
import HourlyChart from '@/components/charts/HourlyChart.vue';
@ -45,8 +50,8 @@ const ftbot = namespace('ftbot');
@Component({
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
GridLayout,
GridItem,
DailyChart,
HourlyChart,
CumProfitChart,
@ -61,7 +66,7 @@ export default class Trading extends Vue {
@ftbot.Action getTrades;
public gridLayout = [
public gridLayout: GridItemData[] = [
{ i: 'g-dailyChart', x: 0, y: 0, w: 4, h: 6 },
{ i: 'g-hourlyChart', x: 4, y: 0, w: 4, h: 6 },
{ i: 'g-cumChartChart', x: 4, y: 0, w: 4, h: 6 },
@ -71,6 +76,10 @@ export default class Trading extends Vue {
this.getDaily();
this.getTrades();
}
layoutUpdatedEvent(newLayout: GridItemData[]) {
console.log(newLayout);
}
}
</script>

8
src/views/Trading.vue
View File

@ -92,7 +92,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import VueGridLayout from 'vue-grid-layout';
import { GridLayout, GridItem, GridItemData } from 'vue-grid-layout';
import TradeList from '@/components/ftbot/TradeList.vue';
import Performance from '@/components/ftbot/Performance.vue';
@ -112,8 +112,8 @@ const ftbot = namespace('ftbot');
@Component({
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
GridLayout,
GridItem,
TradeList,
Performance,
BotControls,
@ -135,7 +135,7 @@ export default class Trading extends Vue {
@ftbot.Getter [UserStoreGetters.tradeDetail]!: Trade;
public gridLayout = [
public gridLayout: GridItemData[] = [
{ i: 'g-reloadControl', x: 0, y: 0, w: 4, h: 1 },
{ i: 'g-botControls', x: 0, y: 0, w: 4, h: 3 },
{ i: 'g-MultiPane', x: 0, y: 0, w: 4, h: 7 },