Skip to content

Commit 40f2fa1

Browse files
graphierosgraphieros
committed
Improvement - VueUiXy - Add optional customFormat to timeTag
1 parent 5566cfb commit 40f2fa1

File tree

5 files changed

+81
-38
lines changed

5 files changed

+81
-38
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -625,7 +625,7 @@ const model = ref([
625625
{ key: 'chart.zoom.enableRangeHandles', def: true, type: 'chexkbox' },
626626
{ key: 'chart.zoom.enableSelectionDrag', def: true, type: 'checkbox' },
627627
628-
{ key: 'chart.zoom.minimap.show', def: false, type: 'checkbox' },
628+
{ key: 'chart.zoom.minimap.show', def: true, type: 'checkbox' },
629629
{ key: 'chart.zoom.minimap.smooth', def: true, type: 'checkbox' },
630630
{ key: 'chart.zoom.minimap.selectedColor', def: '#1f77b4', type: 'color' },
631631
{ key: 'chart.zoom.minimap.selectedColorOpacity', def: 0.2, type: 'range', min: 0, max: 1, step: 0.01 },
@@ -1131,6 +1131,12 @@ const config = computed(() => {
11311131
}
11321132
}
11331133
}
1134+
},
1135+
timeTag: {
1136+
...c.chart.timeTag,
1137+
customFormat: ({ absoluteIndex }) => {
1138+
return absoluteIndex.toString();
1139+
}
11341140
}
11351141
}
11361142
}

‎src/atoms/SlicerPreview.vue‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ const startValue = ref(props.min);
124124
const endValue = ref(props.max);
125125
const hasMinimap = computed(() => !!props.minimap.length);
126126
const uid = ref(createUid());
127+
const isRanging = ref(false);
127128
128129
const wrapperWidth = ref(0);
129130
@@ -164,18 +165,11 @@ onMounted(() => {
164165
165166
let _commitTimeout = null;
166167
167-
function scheduleCommit() {
168-
clearTimeout(_commitTimeout);
169-
_commitTimeout = setTimeout(() => {
170-
emit('update:start', Number(startValue.value));
171-
emit('update:end', Number(endValue.value));
172-
}, 150);
173-
}
174-
175168
function commitImmediately() {
176169
clearTimeout(_commitTimeout);
177170
emit('update:start', Number(startValue.value));
178171
emit('update:end', Number(endValue.value));
172+
isRanging.value = false;
179173
}
180174
181175
const endpoint = computed(() => {
@@ -234,11 +228,6 @@ function reset() {
234228
emit('reset');
235229
}
236230
237-
const previewIndices = ref({
238-
start: startValue.value,
239-
end: endValue.value
240-
});
241-
242231
watch(
243232
() => props.min,
244233
(newMin) => {
@@ -355,12 +344,14 @@ function coerceInput(eOrVal) {
355344
}
356345
357346
function setStartValue(eOrVal) {
347+
isRanging.value = true;
358348
const n = coerceInput(eOrVal);
359349
if (!Number.isFinite(n)) return;
360350
start.value = n;
361351
}
362352
363353
function setEndValue(eOrVal) {
354+
isRanging.value = true;
364355
const n = coerceInput(eOrVal);
365356
if (!Number.isFinite(n)) return;
366357
end.value = n;
@@ -661,6 +652,9 @@ defineExpose({
661652
:y="0"
662653
:rx="minimapSelectionRadius"
663654
:fill="borderColor"
655+
:style="{
656+
opacity: isDragging || isRanging ? 0 : 1
657+
}"
664658
/>
665659

666660
<rect

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

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2500,6 +2500,42 @@ useTimeLabelCollision({
25002500
rotation: FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.autoRotate.angle
25012501
});
25022502
2503+
const useCustomFormatTimeTag = ref(false);
2504+
2505+
const timeTagContent = computed(() => {
2506+
if ([null, undefined].includes(selectedSerieIndex.value) && [null, undefined].includes(selectedMinimapIndex.value)) return ''
2507+
2508+
const index = (selectedSerieIndex.value != null ? selectedSerieIndex.value : 0) || (selectedMinimapIndex.value != null ? selectedMinimapIndex.value : 0);
2509+
2510+
const customFormat = FINAL_CONFIG.value.chart.timeTag.customFormat;
2511+
useCustomFormatTimeTag.value = false;
2512+
2513+
if (isFunction(customFormat)) {
2514+
try {
2515+
const customFormatString = customFormat({
2516+
absoluteIndex: index + slicer.value.start,
2517+
seriesIndex: index,
2518+
datapoint: selectedSeries.value,
2519+
bars: barSet.value,
2520+
lines: lineSet.value,
2521+
plots: plotSet.value,
2522+
config: FINAL_CONFIG.value
2523+
});
2524+
if (typeof customFormatString === 'string') {
2525+
useCustomFormatTimeTag.value = true;
2526+
return customFormatString
2527+
}
2528+
} catch (err) {
2529+
console.warn('Custom format cannot be applied on timeTag.');
2530+
useCustomFormatTimeTag.value = false;
2531+
}
2532+
}
2533+
2534+
if (!useCustomFormatTimeTag.value) {
2535+
return ![null, undefined].includes(timeLabels.value[index] ) ? timeLabels.value[index].text : ''
2536+
}
2537+
});
2538+
25032539
// Force reflow when component is mounted in a hidden div
25042540
25052541
watch(() => props.dataset, (_) => {
@@ -2539,24 +2575,24 @@ watch(() => props.config, (_) => {
25392575
const isActuallyVisible = ref(false)
25402576
25412577
function recomputeVisibility() {
2542-
const el = chart.value?.parentNode
2543-
if (!el) { isActuallyVisible.value = false; return }
2544-
const r = el.getBoundingClientRect()
2545-
isActuallyVisible.value = r.width > 2 && r.height > 2
2578+
const el = chart.value?.parentNode
2579+
if (!el) { isActuallyVisible.value = false; return }
2580+
const r = el.getBoundingClientRect()
2581+
isActuallyVisible.value = r.width > 2 && r.height > 2
25462582
}
25472583
25482584
onMounted(() => {
2549-
recomputeVisibility()
2550-
const ro = new ResizeObserver(() => {
25512585
recomputeVisibility()
2552-
if (isActuallyVisible.value) {
2553-
// re-measure and re-init once we have size
2554-
prepareChart()
2555-
normalizeSlicerWindow()
2556-
setupSlicer()
2557-
}
2558-
})
2559-
if (chart.value?.parentNode) ro.observe(chart.value.parentNode)
2586+
const ro = new ResizeObserver(() => {
2587+
recomputeVisibility()
2588+
if (isActuallyVisible.value) {
2589+
// re-measure and re-init once we have size
2590+
prepareChart()
2591+
normalizeSlicerWindow()
2592+
setupSlicer()
2593+
}
2594+
})
2595+
if (chart.value?.parentNode) ro.observe(chart.value.parentNode)
25602596
})
25612597
25622598
// v3 - Essential to make shifting between loading config and final config work
@@ -3584,15 +3620,9 @@ defineExpose({
35843620
:x="drawingArea.left + (drawingArea.width / maxSeries) * ((selectedSerieIndex !== null ? selectedSerieIndex : 0) || (selectedMinimapIndex !== null ? selectedMinimapIndex : 0)) - 100 + (drawingArea.width / maxSeries / 2)"
35853621
:y="drawingArea.bottom" width="200" height="40" style="overflow: visible !important;">
35863622
<div class="vue-ui-xy-time-tag"
3587-
:style="`width: fit-content;margin: 0 auto;text-align:center;padding:3px 12px;background:${FINAL_CONFIG.chart.timeTag.backgroundColor};color:${FINAL_CONFIG.chart.timeTag.color};font-size:${FINAL_CONFIG.chart.timeTag.fontSize}px`">
3588-
{{ (timeLabels[(selectedSerieIndex !== null ? selectedSerieIndex : 0) ||
3589-
(selectedMinimapIndex !== null ?
3590-
selectedMinimapIndex : 0)] ? timeLabels[(selectedSerieIndex !== null ? selectedSerieIndex : 0) ||
3591-
(selectedMinimapIndex !== null ?
3592-
selectedMinimapIndex : 0)].text : '') || ((selectedSerieIndex !== null ? selectedSerieIndex :
3593-
0) ||
3594-
(selectedMinimapIndex !== null ? selectedMinimapIndex : 0)) }}
3595-
</div>
3623+
:style="`width: fit-content;margin: 0 auto;text-align:center;padding:3px 12px;background:${FINAL_CONFIG.chart.timeTag.backgroundColor};color:${FINAL_CONFIG.chart.timeTag.color};font-size:${FINAL_CONFIG.chart.timeTag.fontSize}px`"
3624+
v-html="timeTagContent"
3625+
/>
35963626
</foreignObject>
35973627
<circle
35983628
:cx="drawingArea.left + (drawingArea.width / maxSeries) * ((selectedSerieIndex !== null ? selectedSerieIndex : 0) || (selectedMinimapIndex !== null ? selectedMinimapIndex : 0)) + (drawingArea.width / maxSeries / 2)"

‎src/useConfig.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -533,7 +533,8 @@ export function useConfig() {
533533
circleMarker: {
534534
radius: 3,
535535
color: COLOR_BLACK
536-
}
536+
},
537+
customFormat: null
537538
},
538539
grid: {
539540
stroke: COLOR_GREY_LIGHT,

‎types/vue-data-ui.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3282,6 +3282,18 @@ declare module "vue-data-ui" {
32823282
radius?: number;
32833283
color?: string;
32843284
};
3285+
customFormat?:
3286+
| null
3287+
| ((
3288+
params: VueUiTooltipParams<
3289+
VueUiXyDatapointItem[],
3290+
VueUiXySeries,
3291+
VueUiXyConfig,
3292+
VueUiXyDatasetBarItem[],
3293+
VueUiXyDatasetLineItem[],
3294+
VueUiXyDatasetPlotItem[]
3295+
>
3296+
) => string);
32853297
};
32863298
highlightArea?: VueUiXyHighlightArea | VueUiXyHighlightArea[];
32873299
grid?: {

0 commit comments

Comments
 (0)