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

Candlechart to script setup

Browse Source
This commit is contained in:
Matthias 2023-04-28 18:26:33 +02:00
parent 75ae9a7f80
commit 5d55d0be29
1 changed files with 626 additions and 650 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/charts/CandleChart.vue
View File

@ -4,8 +4,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted, watch } from 'vue';
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
import randomColor from '@/shared/randomColor';
import heikinashi from '@/shared/heikinashi';
@ -71,10 +71,7 @@ const shortEntrySignalColor = '#00ff26';
const sellSignalColor = '#faba25';
const shortexitSignalColor = '#faba25';
export default defineComponent({
name: 'CandleChart',
components: { 'v-chart': ECharts },
props: {
const props = defineProps({
trades: { required: false, default: () => [], type: Array as () => Trade[] },
dataset: { required: true, type: Object as () => PairHistory },
heikinAshi: { required: false, default: false, type: Boolean },
@ -86,42 +83,40 @@ export default defineComponent({
type: Object as () => ChartSliderPosition,
default: () => undefined,
},
},
setup(props) {
const candleChart = ref<typeof ECharts>();
const buyData = ref<number[][]>([]);
const sellData = ref<number[][]>([]);
const chartOptions = ref<EChartsOption>({});
});
const candleChart = ref<typeof ECharts>();
const strategy = computed(() => {
const chartOptions = ref<EChartsOption>({});
const strategy = computed(() => {
return props.dataset ? props.dataset.strategy : '';
});
});
const pair = computed(() => {
const pair = computed(() => {
return props.dataset ? props.dataset.pair : '';
});
});
const timeframe = computed(() => {
const timeframe = computed(() => {
return props.dataset ? props.dataset.timeframe : '';
});
});
const datasetColumns = computed(() => {
const datasetColumns = computed(() => {
return props.dataset ? props.dataset.columns : [];
});
});
const hasData = computed(() => {
const hasData = computed(() => {
return props.dataset !== null && typeof props.dataset === 'object';
});
});
const filteredTrades = computed(() => {
const filteredTrades = computed(() => {
return props.trades.filter((item: Trade) => item.pair === pair.value);
});
});
const chartTitle = computed(() => {
const chartTitle = computed(() => {
return `${strategy.value} - ${pair.value} - ${timeframe.value}`;
});
});
const updateChart = (initial = false) => {
const updateChart = (initial = false) => {
if (!hasData.value) {
return;
}
@ -360,10 +355,7 @@ export default defineComponent({
// Subplots are added from bottom to top - only the "bottom-most" plot stays at the bottom.
// const currGridIdx = totalSubplots - plotIndex > 1 ? totalSubplots - plotIndex : plotIndex;
const currGridIdx = plotIndex;
if (
Array.isArray(chartOptions.value.yAxis) &&
chartOptions.value.yAxis.length <= plotIndex
) {
if (Array.isArray(chartOptions.value.yAxis) && chartOptions.value.yAxis.length <= plotIndex) {
chartOptions.value.yAxis.push({
scale: true,
gridIndex: currGridIdx,
@ -376,10 +368,7 @@ export default defineComponent({
splitLine: { show: false },
});
}
if (
Array.isArray(chartOptions.value.xAxis) &&
chartOptions.value.xAxis.length <= plotIndex
) {
if (Array.isArray(chartOptions.value.xAxis) && chartOptions.value.xAxis.length <= plotIndex) {
chartOptions.value.xAxis.push({
type: 'time',
scale: true,
@ -495,9 +484,9 @@ export default defineComponent({
replaceMerge: ['series', 'grid', 'yAxis', 'xAxis', 'legend'],
noMerge: !initial,
});
};
};
const initializeChartOptions = () => {
const initializeChartOptions = () => {
// Ensure we start empty.
candleChart.value?.setOption({}, { noMerge: true });
@ -638,9 +627,9 @@ export default defineComponent({
console.log('Initialized');
updateChart(true);
};
};
const updateSliderPosition = () => {
const updateSliderPosition = () => {
if (!props.sliderPosition) return;
const start = format(
@ -661,66 +650,53 @@ export default defineComponent({
endValue: end,
});
}
};
};
// createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
// Calculate Buy and sell Series
// if (!this.signalsCalculated) {
// // Generate Buy and sell array (using open rate to display marker)
// for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
// if (this.dataset.data[i][colBuy] === 1) {
// this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
// }
// if (this.dataset.data[i][colSell] === 1) {
// this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
// }
// }
// this.signalsCalculated = true;
// }
// }
onMounted(() => {
// const buyData = ref<number[][]>([]);
// const sellData = ref<number[][]>([]);
// createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
// Calculate Buy and sell Series
// if (!this.signalsCalculated) {
// // Generate Buy and sell array (using open rate to display marker)
// for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
// if (this.dataset.data[i][colBuy] === 1) {
// this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
// }
// if (this.dataset.data[i][colSell] === 1) {
// this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
// }
// }
// this.signalsCalculated = true;
// }
// }
onMounted(() => {
initializeChartOptions();
});
});
watch(
watch(
() => props.useUTC,
() => initializeChartOptions(),
);
);
watch(
watch(
() => props.dataset,
() => updateChart(),
);
);
watch(
watch(
() => props.plotConfig,
() => initializeChartOptions(),
);
);
watch(
watch(
() => props.heikinAshi,
() => updateChart(),
);
);
watch(
watch(
() => props.sliderPosition,
() => updateSliderPosition(),
);
return {
candleChart,
buyData,
sellData,
strategy,
pair,
timeframe,
datasetColumns,
hasData,
filteredTrades,
chartTitle,
};
},
});
);
</script>
<style scoped>