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

composition: some more components

Browse Source
This commit is contained in:
Matthias 2022-04-19 20:32:58 +02:00
parent b272c73e89
commit fe3075e6d3
3 changed files with 68 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ftbot/TradeDetail.vue
View File

@ -99,29 +99,25 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
import ValuePair from '@/components/general/ValuePair.vue';
import TradeProfit from '@/components/ftbot/TradeProfit.vue';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
import { Trade } from '@/types';
@Component({
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'TradeDetail',
components: { ValuePair, TradeProfit, DateTimeTZ },
})
export default class TradeDetail extends Vue {
@Prop({ type: Object, required: true }) trade!: Trade;
@Prop({ type: String, required: true }) stakeCurrency!: string;
timestampms = timestampms;
formatPercent = formatPercent;
formatPrice = formatPrice;
formatPriceCurrency = formatPriceCurrency;
}
props: {
trade: { required: true, type: Object as () => Trade },
stakeCurrency: { required: true, type: String },
},
setup() {
return { timestampms, formatPercent, formatPrice, formatPriceCurrency };
},
});
</script>
<style scoped>
.detail-header {

57
src/components/general/DateTimeTZ.vue
View File

@ -4,38 +4,39 @@
<script lang="ts">
import { timestampms, timestampmsWithTimezone, timestampToDateString } from '@/shared/formatters';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class DateTimeTZ extends Vue {
@Prop({ required: true, type: Number }) date!: number;
import { defineComponent, computed } from '@vue/composition-api';
@Prop({ required: false, type: Boolean, default: false }) showTimezone!: boolean;
export default defineComponent({
name: 'DateTimeTZ',
props: {
date: { required: true, type: Number },
showTimezone: { required: false, type: Boolean, default: false },
dateOnly: { required: false, type: Boolean, default: false },
},
setup(props) {
const formattedDate = computed((): string => {
if (props.dateOnly) {
return timestampToDateString(props.date);
}
if (props.showTimezone) {
return timestampmsWithTimezone(props.date);
}
return timestampms(props.date);
});
@Prop({ required: false, type: Boolean, default: false }) dateOnly!: boolean;
const timezoneTooltip = computed((): string => {
const time1 = timestampmsWithTimezone(props.date);
const timeUTC = timestampmsWithTimezone(props.date, 'UTC');
if (time1 === timeUTC) {
return timeUTC;
}
timestampms = timestampms;
get formattedDate(): string {
if (this.dateOnly) {
return timestampToDateString(this.date);
}
if (this.showTimezone) {
return timestampmsWithTimezone(this.date);
}
return timestampms(this.date);
}
get timezoneTooltip(): string {
const time1 = timestampmsWithTimezone(this.date);
const timeUTC = timestampmsWithTimezone(this.date, 'UTC');
if (time1 === timeUTC) {
return timeUTC;
}
return `${time1}\n${timeUTC}`;
}
}
return `${time1}\n${timeUTC}`;
});
return { formattedDate, timezoneTooltip };
},
});
</script>
<style scoped></style>

57
src/components/general/ProfitPill.vue
View File

@ -20,41 +20,38 @@
</template>
<script lang="ts">
import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { formatPercent, formatPrice } from '@/shared/formatters';
import ProfitSymbol from '@/components/general/ProfitSymbol.vue';
@Component({ components: { ProfitSymbol } })
export default class ProfitPill extends Vue {
@Prop({ required: false, default: undefined, type: Number }) profitRatio?: number;
import { defineComponent, computed } from '@vue/composition-api';
@Prop({ required: false, default: undefined, type: Number }) profitAbs?: number;
export default defineComponent({
name: 'ProfitPill',
components: { ProfitSymbol },
props: {
profitRatio: { required: false, default: undefined, type: Number },
profitAbs: { required: false, default: undefined, type: Number },
stakeCurrency: { required: true, type: String },
profitDesc: { required: false, default: '', type: String },
},
setup(props) {
const isProfitable = computed(() => {
return (
(props.profitRatio !== undefined && props.profitRatio > 0) ||
(props.profitRatio === undefined && props.profitAbs !== undefined && props.profitAbs > 0)
);
});
@Prop({ required: true, type: String }) stakeCurrency!: string;
@Prop({ required: false, default: '', type: String }) profitDesc!: string;
formatPercent = formatPercent;
timestampms = timestampms;
formatPrice = formatPrice;
get isProfitable() {
return (
(this.profitRatio !== undefined && this.profitRatio > 0) ||
(this.profitRatio === undefined && this.profitAbs !== undefined && this.profitAbs > 0)
);
}
get profitString(): string {
if (this.profitRatio !== undefined && this.profitAbs !== undefined) {
return `(${formatPrice(this.profitAbs, 3)})`;
}
return '';
}
}
const profitString = computed((): string => {
if (props.profitRatio !== undefined && props.profitAbs !== undefined) {
return `(${formatPrice(props.profitAbs, 3)})`;
}
return '';
});
return { profitString, isProfitable, formatPercent };
},
});
</script>
<style scoped lang="scss">