Skip to content

Commit 9c98888

Browse files
graphierosgraphieros
committed
Improvement - VueUiCandlestick - Add scale min & max, add datetimeFormatter for time series
1 parent b2a4665 commit 9c98888

File tree

4 files changed

+224
-60
lines changed

4 files changed

+224
-60
lines changed

‎TestingArena/ArenaVueUiCandlestick.vue‎

Lines changed: 49 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,24 @@ import convertArrayToObject from "./convertModel";
77
import VueUiCandlestick from "../src/components/vue-ui-candlestick.vue";
88
import { useArena } from "../src/useArena";
99
10-
const dataset = ref([
11-
["2024-01-01", 56, 120, 40, 110, 1250],
12-
["2024-02-01", 110, 150, 80, 98, 2200],
13-
["2024-03-01", 98, 155, 75, 103, 3500],
14-
["2024-04-01", 103, 115, 102, 102, 999],
15-
["2024-05-01", 102, 135, 72, 85, 3216],
16-
["2024-06-01", 85, 162, 65, 107, 4315],
17-
["2024-07-01", 107, 134, 99, 112, 2561],
18-
["2024-08-01", 112, 125, 112, 120, 669],
19-
["2024-09-01", 120, 113, 76, 89, 2591],
20-
["2024-10-01", 89, 150, 85, 125, 2881],
21-
["2024-11-01", 125, 130, 45, 92, 1972],
22-
["2024-12-01", 92, 120, 35, 75, 3599],
23-
["2024-13-01", 75, 80, 26, 45, 5881],
24-
["2024-14-01", 45, 60, 20, 30, 2881],
25-
["2024-15-01", 30, 120, 10, 105, 2881],
26-
]);
10+
const dataset = [
11+
// timestamp | open | high | low | last | volume
12+
[1704067200000, 1200, 2300, 1000, 2100, 1800],
13+
[1706745600000, 2100, 2400, 1800, 2000, 2200],
14+
[1709251200000, 2000, 2500, 1700, 2150, 2400],
15+
[1711929600000, 2150, 2300, 2000, 2050, 1600],
16+
[1714521600000, 2050, 2450, 1900, 1950, 2000],
17+
[1717200000000, 1950, 2500, 1800, 2300, 2500],
18+
[1719792000000, 2300, 2400, 2100, 2250, 1900],
19+
[1722470400000, 2250, 2350, 2200, 2300, 1750],
20+
[1725148800000, 2300, 2250, 1800, 1850, 2100],
21+
[1727740800000, 1850, 2500, 1800, 2450, 2300],
22+
[1730419200000, 2450, 2500, 1000, 1250, 1500],
23+
[1733011200000, 1250, 2000, 1000, 1350, 1700],
24+
[1735689600000, 1350, 2100, 1200, 2000, 1600],
25+
[1738368000000, 2000, 2400, 1950, 2300, 1850],
26+
[1740787200000, 2300, 2500, 2200, 2400, 2400]
27+
];
2728
2829
const alternateDataset = ref([
2930
["2024-11-01", 125, 130, 45, 92, 1972],
@@ -105,6 +106,9 @@ const model = ref([
105106
{ key: 'style.layout.grid.yAxis.dataLabels.steps', def: 10, type: 'number', min: 2, max: 20},
106107
{ key: 'style.layout.grid.yAxis.dataLabels.prefix', def: 'P', type: 'text'},
107108
{ key: 'style.layout.grid.yAxis.dataLabels.suffix', def: 'S', type: 'text'},
109+
{ key: 'style.layout.grid.yAxis.scale.min', def: 800, type: 'number', min: 0, max: 10000},
110+
{ key: 'style.layout.grid.yAxis.scale.max', def: null, type: 'number', min: 0, max: 10000},
111+
108112
{ key: 'style.layout.wick.stroke', def: '#1A1A1A', type: 'color'},
109113
{ key: 'style.layout.wick.strokeWidth', def: 0.5, type: 'number', min: 0, max: 12, step: 0.5},
110114
{ key: 'style.layout.wick.extremity.shape', def: 'line', type: 'select', options: ['line', 'circle']},
@@ -125,8 +129,8 @@ const model = ref([
125129
{ key: 'style.zoom.highlightColor', def: '#4A4A4A', type: 'color' },
126130
{ key: 'style.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42},
127131
{ key: 'style.zoom.useResetSlot', def: false, type: 'checkbox'},
128-
{ key: 'style.zoom.startIndex', def: 2, type: 'number', min: 0, max: 1000},
129-
{ key: 'style.zoom.endIndex', def: 6, type: 'number', min: 0, max: 1000},
132+
{ key: 'style.zoom.startIndex', def: null, type: 'number', min: 0, max: 1000},
133+
{ key: 'style.zoom.endIndex', def: null, type: 'number', min: 0, max: 1000},
130134
{ key: 'style.zoom.enableRangeHandles', def: true, type: 'chexkbox'},
131135
{ key: 'style.zoom.enableSelectionDrag', def: true, type: 'chexkbox'},
132136
@@ -205,7 +209,24 @@ const config = computed(() => {
205209
} else {
206210
return {
207211
...c,
208-
theme: currentTheme.value
212+
theme: currentTheme.value,
213+
style: {
214+
...c.style,
215+
layout: {
216+
...c.style.layout,
217+
grid: {
218+
...c.style.layout.grid,
219+
xAxis: {
220+
...c.style.layout.grid.xAxis,
221+
dataLabels: {
222+
datetimeFormatter: {
223+
enable: true
224+
}
225+
}
226+
},
227+
}
228+
}
229+
}
209230
}
210231
}
211232
});
@@ -259,7 +280,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
259280

260281
<template #local>
261282
<LocalVueUiCandlestick :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" ref="local">
262-
<template #optionPdf>
283+
<!-- <template #optionPdf>
263284
PRINT PDF
264285
</template>
265286
<template #svg="{ svg }">
@@ -280,13 +301,13 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
280301
</template>
281302
<template #reset-action="{ reset }">
282303
<button @click="reset()">REFRESH</button>
283-
</template>
304+
</template> -->
284305
</LocalVueUiCandlestick>
285306
</template>
286307

287308
<template #VDUI-local>
288309
<LocalVueDataUi component="VueUiCandlestick" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`" ref="vduiLocal">
289-
<template #svg="{ svg }">
310+
<!-- <template #svg="{ svg }">
290311
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
291312
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
292313
</template>
@@ -304,13 +325,13 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
304325
</template>
305326
<template #reset-action="{ reset }">
306327
<button @click="reset()">REFRESH</button>
307-
</template>
328+
</template> -->
308329
</LocalVueDataUi>
309330
</template>
310331

311332
<template #build>
312333
<VueUiCandlestick :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" ref="build">
313-
<template #svg="{ svg }">
334+
<!-- <template #svg="{ svg }">
314335
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
315336
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
316337
</template>
@@ -328,13 +349,13 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
328349
</template>
329350
<template #reset-action="{ reset }">
330351
<button @click="reset()">REFRESH</button>
331-
</template>
352+
</template> -->
332353
</VueUiCandlestick>
333354
</template>
334355

335356
<template #VDUI-build>
336357
<VueDataUi component="VueUiCandlestick" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`" ref="vduiBuild">
337-
<template #svg="{ svg }">
358+
<!-- <template #svg="{ svg }">
338359
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
339360
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
340361
</template>
@@ -352,7 +373,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
352373
</template>
353374
<template #reset-action="{ reset }">
354375
<button @click="reset()">REFRESH</button>
355-
</template>
376+
</template> -->
356377
</VueDataUi>
357378
</template>
358379

0 commit comments

Comments
 (0)