Skip to content

Commit c17aea2

Browse files
graphierosgraphieros
authored
Merge pull request #214 from graphieros/ft-date-formatter
Ft date formatter
2 parents 7ff723c + 7f2f11c commit c17aea2

28 files changed

+2987
-112
lines changed

‎TestingArena/ArenaVueUiDonutEvolution.vue‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,21 @@ const dataset = ref([
2525
name: "Serie 4",
2626
values: [5, null, 5, 5, 5, 5 ]
2727
}
28-
])
28+
]);
29+
30+
const monthValues = computed(() => {
31+
const yearStart = 2026
32+
const arr = []
33+
34+
for (let i = 0; i < 13; i++) {
35+
const d = new Date(yearStart, i, 1)
36+
arr.push(d.getTime())
37+
}
38+
39+
console.log(arr)
40+
41+
return arr
42+
})
2943
3044
const model = ref([
3145
{ key: 'userOptions.show', def: true, type: 'checkbox'},
@@ -147,7 +161,6 @@ const config = computed(() => {
147161
dataLabels: {
148162
...c.style.chart.layout.dataLabels,
149163
formatter: ({value, config}) => {
150-
console.log(config)
151164
return `f | ${value}`
152165
}
153166
},
@@ -157,19 +170,10 @@ const config = computed(() => {
157170
...c.style.chart.layout.grid.xAxis,
158171
dataLabels: {
159172
...c.style.chart.layout.grid.xAxis.dataLabels,
160-
values: [
161-
'01-01-2025',
162-
'02-01-2025',
163-
'03-01-2025',
164-
'04-01-2025',
165-
'05-01-2025',
166-
'06-01-2025',
167-
'07-01-2025',
168-
'08-01-2025',
169-
'09-01-2025',
170-
'10-01-2025',
171-
'11-01-2025',
172-
]
173+
values: monthValues.value,
174+
datetimeFormatter: {
175+
enable: true,
176+
}
173177
}
174178
}
175179
}

‎TestingArena/ArenaVueUiQuickChart.vue‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,18 @@ const themeOptions = ref([
240240
241241
const currentTheme = ref(themeOptions.value[6])
242242
243+
const monthValues = computed(() => {
244+
const yearStart = 2026
245+
const arr = []
246+
247+
for (let i = 0; i < 100; i++) {
248+
const d = new Date(yearStart, i, 1)
249+
arr.push(d.getTime())
250+
}
251+
252+
return arr
253+
})
254+
243255
const config = computed(() => {
244256
const c = convertArrayToObject(model.value);
245257
return {
@@ -250,7 +262,10 @@ const config = computed(() => {
250262
},
251263
theme: currentTheme.value,
252264
customPalette: ['#6376DD', "#DD3322", "#66DDAA"],
253-
xyPeriods: makeTime(100)
265+
xyPeriods: monthValues.value,
266+
datetimeFormatter: {
267+
enable: true
268+
}
254269
}
255270
})
256271

‎TestingArena/ArenaVueUiRidgeline.vue‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,18 @@ const model = ref([
144144
{ key: 'style.chart.yAxis.labels.offsetX', def: 0, type: 'number', min: -100, max: 100}
145145
])
146146
147+
const monthValues = computed(() => {
148+
const yearStart = 2026
149+
const arr = []
150+
151+
for (let i = 0; i < 13; i++) {
152+
const d = new Date(yearStart, i, 1)
153+
arr.push(d.getTime())
154+
}
155+
156+
return arr
157+
})
158+
147159
const config = computed(() => {
148160
const c = convertArrayToObject(model.value);
149161
return {
@@ -157,9 +169,10 @@ const config = computed(() => {
157169
...c.style.chart.xAxis,
158170
labels: {
159171
...c.style.chart.xAxis.labels,
160-
values: dataset.value[0].datapoints[0].values.map((dp, i) => {
161-
return `YYYY-MM-DD ${i}`
162-
})
172+
values: monthValues.value,
173+
datetimeFormatter: {
174+
enable: true,
175+
}
163176
}
164177
}
165178
}

‎TestingArena/ArenaVueUiStackbar.vue‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,31 @@ const dataset = computed(() => {
2121
return [
2222
{
2323
name: "Series 1",
24-
series: [1],
24+
series: [1, 2, 1, 3, 1, 5],
2525
},
2626
{
2727
name: "Series 2",
28-
series: [0],
28+
series: [0, 2, 3, 2, 1, 2],
2929
},
3030
{
3131
name: "Series 3",
32-
series: [0],
32+
series: [1, 2, 4, 3, 2, 1],
3333
},
3434
];
3535
});
3636
37+
const monthValues = computed(() => {
38+
const yearStart = 2026
39+
const arr = []
40+
41+
for (let i = 0; i < 13; i++) {
42+
const d = new Date(yearStart, i, 1)
43+
arr.push(d.getTime())
44+
}
45+
46+
return arr
47+
})
48+
3749
// const dataset = ref([
3850
// {
3951
// name: "Serie 1",
@@ -241,6 +253,10 @@ const config = computed(() => {
241253
...c.style.chart.grid.x,
242254
timeLabels: {
243255
...c.style.chart.grid.x.timeLabels,
256+
values: monthValues.value,
257+
datetimeFormatter: {
258+
enable: true
259+
}
244260
// values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
245261
}
246262
}

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ const model = ref([
432432
433433
{ key: 'chart.grid.labels.show', def: true, type: 'checkbox', label: 'showLabels', category: 'grid' },
434434
{ key: 'chart.grid.labels.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'grid' },
435-
{ key: 'chart.grid.labels.fontSize', def: 16, type: 'number', min: 4, max: 30, label: 'fontSize', category: 'grid' },
435+
{ key: 'chart.grid.labels.fontSize', def: 26, type: 'number', min: 4, max: 30, label: 'fontSize', category: 'grid' },
436436
{ key: 'chart.grid.labels.axis.yLabel', def: 'TEST', type: 'text', label: 'yAxisLabel', category: 'grid' },
437437
{ key: 'chart.grid.labels.axis.xLabel', def: 'TEST', type: 'text', label: 'xAxisLabel', category: 'grid' },
438438
{ key: 'chart.grid.labels.axis.fontSize', def: 14, type: 'number', min: 4, max: 30, label: 'fontSize', category: 'grid' },
@@ -600,10 +600,49 @@ const size = ref({
600600
})
601601
602602
const timeValues = computed(() => {
603-
const arr = [];
604-
for (let i = 0; i < 30; i += 1) {
605-
arr.push(`${i >= 10 ? i : '0' + String(i)}-01-2026`)
603+
const arr = []
604+
const year = 2026
605+
606+
for (let month = 1; month <= 12; month++) {
607+
const daysInMonth = new Date(year, month, 0).getDate()
608+
for (let day = 1; day <= daysInMonth; day++) {
609+
const dd = String(day).padStart(2, '0')
610+
const mm = String(month).padStart(2, '0')
611+
arr.push(`${year}-${mm}-${dd}`) // ISO format
612+
}
613+
}
614+
615+
console.log(arr)
616+
617+
return arr
618+
})
619+
620+
// const monthValues = computed(() => {
621+
// const yearStart = 2026
622+
// const arr = []
623+
624+
// for (let i = 0; i < 13; i++) {
625+
// // monthIndex goes 0→12 (Jan 2026 → Jan 2027)
626+
// const date = new Date(yearStart, i, 1)
627+
// const yyyy = date.getFullYear()
628+
// const mm = String(date.getMonth() + 1).padStart(2, '0')
629+
// const dd = String(date.getDate()).padStart(2, '0') // always "01" here
630+
631+
// arr.push(`${yyyy}-${mm}-${dd}`)
632+
// }
633+
634+
// return arr
635+
// })
636+
637+
const monthValues = computed(() => {
638+
const yearStart = 2026
639+
const arr = []
640+
641+
for (let i = 0; i < 13; i++) {
642+
const d = new Date(yearStart, i, 1)
643+
arr.push(d.getTime())
606644
}
645+
607646
return arr
608647
})
609648
@@ -784,7 +823,21 @@ const config = computed(() => {
784823
},
785824
xAxisLabels: {
786825
...c.chart.grid.labels.xAxisLabels,
787-
values: timeValues.value
826+
values: monthValues.value,
827+
datetimeFormatter: {
828+
enable: true,
829+
locale: 'en',
830+
useUTC: false,
831+
januaryAsYear: true,
832+
options: {
833+
year: 'yyyy',
834+
month: `MMM`,
835+
day: 'dd MMM',
836+
hour: 'HH:mm',
837+
minute: 'HH:mm:ss',
838+
second: 'HH:mm:ss'
839+
}
840+
}
788841
}
789842
}
790843
}

‎TestingArena/ArenaVueUiXyCanvas.vue‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,21 @@ const themeOptions = ref([
211211
"celebrationNight"
212212
])
213213
214-
const currentTheme = ref(themeOptions.value[6])
214+
const currentTheme = ref(themeOptions.value[6]);
215+
216+
const monthValues = computed(() => {
217+
const yearStart = 2026
218+
const arr = []
219+
220+
for (let i = 0; i < 200; i++) {
221+
const d = new Date(yearStart, i, 1)
222+
arr.push(d.getTime())
223+
}
224+
225+
console.log(arr)
226+
227+
return arr
228+
})
215229
216230
const config = computed(() => {
217231
const c = convertArrayToObject(model.value);
@@ -241,20 +255,10 @@ const config = computed(() => {
241255
...c.style.chart.grid.y,
242256
timeLabels: {
243257
...c.style.chart.grid.y.timeLabels,
244-
values: [
245-
"JAN",
246-
"FEV",
247-
"MAR",
248-
"APR",
249-
"MAY",
250-
"JUN",
251-
"JUL",
252-
"AUG",
253-
"SEP",
254-
"OCT",
255-
"NOV",
256-
"DEC"
257-
]
258+
values: monthValues.value,
259+
datetimeFormatter: {
260+
enable: true,
261+
}
258262
}
259263
}
260264
}

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.13.4",
4+
"version": "2.13.5-beta.2",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
77
"keywords": [

‎src/atoms/Slicer.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ const props = defineProps({
1919
default: 14
2020
},
2121
labelLeft: {
22-
type: String,
22+
type: [String, Number],
2323
default: ''
2424
},
2525
labelRight: {
26-
type: String,
26+
type: [String, Number],
2727
default: ''
2828
},
2929
textColor: {
@@ -701,14 +701,14 @@ defineExpose({
701701
backgroundColor: selectColor,
702702
border: `1px solid ${borderColor}`,
703703
zIndex: `${leftLabelZIndex + 4}`,
704-
visibility: tooltipsCollide ? 'hidden' : 'visible'
704+
visibility: tooltipsCollide || labelLeft === labelRight ? 'hidden' : 'visible'
705705
}"
706706
>
707707
{{ labelLeft }}
708708
</div>
709709

710710
<div
711-
v-if="tooltipsCollide"
711+
v-if="tooltipsCollide || labelLeft === labelRight"
712712
data-cy="slicer-label-merged"
713713
ref="tooltipMerge"
714714
:class="{
@@ -746,7 +746,7 @@ defineExpose({
746746
backgroundColor: selectColor,
747747
border: `1px solid ${borderColor}`,
748748
zIndex: '4',
749-
visibility: tooltipsCollide ? 'hidden' : 'visible'
749+
visibility: tooltipsCollide || labelLeft === labelRight ? 'hidden' : 'visible'
750750
}"
751751
>
752752
{{ labelRight }}

‎src/components/vue-ui-candlestick.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,9 @@ function prepareChart() {
193193
threshold: 6,
194194
fallback: 6
195195
});
196+
} else {
197+
svg.value.xAxisFontSize = FINAL_CONFIG.value.style.layout.grid.xAxis.dataLabels.fontSize;
198+
svg.value.yAxisFontSize = FINAL_CONFIG.value.style.layout.grid.yAxis.dataLabels.fontSize;
196199
}
197200
});
198201
});

0 commit comments

Comments
 (0)