coin/chart
1
0
Fork 0
mirror of https://git.hmsn.ink/coin/chart.git synced 2026-03-20 00:02:17 +09:00
Code Issues Packages Projects Releases Wiki Activity

차트 정의 완료

Browse Source
This commit is contained in:
bangae1
2025-08-24 18:29:12 +09:00
parent 04131e7506
commit 7cf6f367ea
6 changed files with 53 additions and 21734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<title>Chart</title>
</head>
<body>
<div id="app"></div>

14257
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

37
src/App.vue
View File

@@ -16,9 +16,9 @@ import {calculateMACD, calculateEMA, calculateBollingerBands} from "./utils/mete
* @param {Boolean} ohlc Whether generated dat should include open, high, low, and close values
* @returns {Array} sample data
*/
let socket;
const lazyLock = ref(false)
const positionData = ref('')
const contract = ref('BTC_USDT')
const time = ref('15m')
@@ -193,6 +193,13 @@ const curToUnix = (() => {
return Math.floor(new Date().getTime() / 1000);
})
const epochToString = (epo) => {
const cu = new Date(epo)
return cu.getFullYear() + '-' + cu.getMonth().toString().padStart(2, '0') + '-' +
cu.getDate().toString().padStart(2, '0') + ' ' + cu.getHours().toString().padStart(2, '0') + ':' +
cu.getMinutes().toString().padStart(2, '0') + ':' + cu.getSeconds().toString().padStart(2, '0');
}
const colorsTypeMap = {
area: [
@@ -224,6 +231,16 @@ const colorsTypeMap = {
line: [['color', 1]],
};
const mouseMove = (data) => {
positionData.value = `
<span style="color:red; padding-right:3px;">O</span>${data.open}
<span style="color:red; padding-left:5px; padding-right:3px;">C</span>${data.close}
<span style="color:red; padding-left:5px; padding-right:3px;">L</span>${data.low}
<span style="color:red; padding-left:5px; padding-right:3px;">H</span>${data.high}
<span style="color:red; padding-left:5px; padding-right:3px;">T</span>${epochToString(data.time*1000)}
`;
}
watch(contract, newVal => {
distroy()
console.log(newVal);
@@ -235,6 +252,7 @@ watch(time, newVal => {
console.log(newVal);
init(contract.value, newVal)
})
</script>
<template>
@@ -297,13 +315,28 @@ watch(time, newVal => {
:upper-bb-options="upperBbOptions"
:lazyLock="lazyLock"
@lazyLoad="lazyLoad"
@mouseMove="mouseMove"
ref="lwChart"
/>
<div class="ohlc-info" v-html="positionData"></div>
</div>
</div>
</template>
<style scoped>
<style scoped lang="scss">
.chart-container {
height: calc(100% - 3.2em);
}
.ohlc-info {
position: absolute;
top: 20px;
left: 10px;
font-size: 12px;
color: #333;
background: rgba(255, 255, 255, 0.8);
padding: 5px;
border-radius: 4px;
z-index: 1000;
}
</style>

14
src/components/LWChart.vue
View File

@@ -79,7 +79,7 @@ const props = defineProps({
},
});
const emits = defineEmits(['lazyLoad'])
const emits = defineEmits(['lazyLoad', 'mouseMove'])
function getChartSeriesDefinition(type) {
switch (type.toLowerCase()) {
@@ -204,6 +204,7 @@ onMounted(() => {
}
chart.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);
chart.subscribeCrosshairMove(onCrosshairMove)
});
function onVisibleLogicalRangeChanged(newVisibleLogicalRange) {
@@ -216,6 +217,17 @@ function onVisibleLogicalRangeChanged(newVisibleLogicalRange) {
}
}
function onCrosshairMove(param) {
if (param.point === null || param.time === undefined) {
return;
}
emits('mouseMove', param.seriesData.get(candlestick))
//
// // 현재 포인터 아래의 캔들 데이터 가져오기
// const data = param.seriesData.get(candleSeries);
// console.log(data)
}
onUnmounted(() => {
if (chart) {

4
src/main.ts
View File

@@ -2,9 +2,13 @@ import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import {createPinia} from "pinia";
const app = createApp(App)
app.use(vuetify)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

7473
yarn.lock
View File

File diff suppressed because it is too large Load Diff