Skip to content

Commit 8071720

Browse files
graphierosgraphieros
committed
Improvement - Add support for Slicer configurable startIndex & endIndex
1 parent 75720db commit 8071720

23 files changed

+385
-39
lines changed

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -774,6 +774,7 @@ defineExpose({
774774
:offsetY="FINAL_CONFIG.style.tooltip.offsetY"
775775
:parent="agePyramid"
776776
:content="tooltipContent"
777+
:isFullscreen="isFullscreen"
777778
:isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
778779
>
779780
<template #tooltip-before>

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

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
downloadCsv,
1010
error,
1111
functionReturnsString,
12+
hasDeepProperty,
1213
isFunction,
1314
objectIsEmpty,
1415
setOpacity,
@@ -83,16 +84,37 @@ function prepareConfig() {
8384
userConfig: props.config,
8485
defaultConfig: DEFAULT_CONFIG
8586
});
87+
88+
let finalConfig = {};
89+
8690
if (mergedConfig.theme) {
87-
return {
91+
finalConfig = {
8892
...useNestedProp({
8993
userConfig: themes.vue_ui_candlestick[mergedConfig.theme] || props.config,
9094
defaultConfig: mergedConfig
9195
}),
9296
}
9397
} else {
94-
return mergedConfig;
98+
finalConfig = mergedConfig;
99+
}
100+
101+
// ------------------------------ OVERRIDES -----------------------------------
102+
103+
if (props.config && hasDeepProperty(props.config, 'style.zoom.startIndex')) {
104+
finalConfig.style.zoom.startIndex = props.config.style.zoom.startIndex;
105+
} else {
106+
finalConfig.style.zoom.startIndex = null;
95107
}
108+
109+
if (props.config && hasDeepProperty(props.config, 'style.zoom.endIndex')) {
110+
finalConfig.style.zoom.endIndex = props.config.style.zoom.endIndex;
111+
} else {
112+
finalConfig.style.zoom.endIndex = null;
113+
}
114+
115+
// ----------------------------------------------------------------------------
116+
117+
return finalConfig;
96118
}
97119
98120
watch(() => props.config, (_newCfg) => {
@@ -161,6 +183,7 @@ function prepareChart() {
161183
resizeObserver.value = new ResizeObserver(handleResize);
162184
resizeObserver.value.observe(candlestickChart.value.parentNode);
163185
}
186+
setupSlicer();
164187
}
165188
166189
onBeforeUnmount(() => {
@@ -384,11 +407,45 @@ function useTooltip(index, datapoint) {
384407
}
385408
386409
function refreshSlicer() {
387-
slicer.value = {
388-
start: 0,
389-
end: len.value
390-
};
391-
slicerStep.value += 1;
410+
setupSlicer();
411+
}
412+
413+
const slicerComponent = ref(null);
414+
415+
async function setupSlicer() {
416+
if ((FINAL_CONFIG.value.style.zoom.startIndex !== null || FINAL_CONFIG.value.style.zoom.endIndex !== null) && slicerComponent.value) {
417+
if (FINAL_CONFIG.value.style.zoom.startIndex !== null) {
418+
await nextTick();
419+
await nextTick();
420+
slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.style.zoom.startIndex);
421+
}
422+
if (FINAL_CONFIG.value.style.zoom.endIndex !== null) {
423+
await nextTick();
424+
await nextTick();
425+
slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.style.zoom.endIndex + 1));
426+
}
427+
} else {
428+
slicer.value = {
429+
start: 0,
430+
end: len.value
431+
};
432+
slicerStep.value += 1;
433+
}
434+
}
435+
436+
function validSlicerEnd(v) {
437+
const max = len.value;
438+
if (v > max) {
439+
return max;
440+
}
441+
if (v < 0 || (FINAL_CONFIG.value.style.zoom.startIndex !== null && v < FINAL_CONFIG.value.style.zoom.startIndex)) {
442+
if (FINAL_CONFIG.value.style.zoom.startIndex !== null) {
443+
return FINAL_CONFIG.value.style.zoom.startIndex + 1;
444+
} else {
445+
return 1;
446+
}
447+
}
448+
return v;
392449
}
393450
394451
function generateCsv() {
@@ -776,7 +833,8 @@ defineExpose({
776833
/>
777834

778835
<div ref="chartSlicer" v-if="FINAL_CONFIG.style.zoom.show && isDataset">
779-
<Slicer
836+
<Slicer
837+
ref="slicerComponent"
780838
:key="`slicer_${slicerStep}`"
781839
:background="FINAL_CONFIG.style.zoom.color"
782840
:borderColor="FINAL_CONFIG.style.backgroundColor"
@@ -793,6 +851,8 @@ defineExpose({
793851
:valueEnd="slicer.end"
794852
v-model:start="slicer.start"
795853
v-model:end="slicer.end"
854+
:refreshStartPoint="FINAL_CONFIG.style.zoom.startIndex !== null ? FINAL_CONFIG.style.zoom.startIndex : 0"
855+
:refreshEndPoint="FINAL_CONFIG.style.zoom.endIndex !== null ? FINAL_CONFIG.style.zoom.endIndex + 1 : len"
796856
@reset="refreshSlicer"
797857
>
798858
<template #reset-action="{ reset }">
@@ -823,6 +883,7 @@ defineExpose({
823883
:offsetY="FINAL_CONFIG.style.tooltip.offsetY"
824884
:parent="candlestickChart"
825885
:content="tooltipContent"
886+
:isFullscreen="isFullscreen"
826887
:isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
827888
>
828889
<template #tooltip-before>

‎src/components/vue-ui-donut-evolution.vue‎

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
downloadCsv,
1616
error,
1717
getMissingDatasetAttributes,
18+
hasDeepProperty,
1819
makeDonut,
1920
objectIsEmpty,
2021
palette,
@@ -65,13 +66,48 @@ const slicer = ref({
6566
})
6667
6768
function refreshSlicer() {
68-
slicer.value = {
69-
start: 0,
70-
end: maxLength.value
71-
};
72-
slicerStep.value += 1;
69+
setupSlicer();
7370
}
7471
72+
const slicerComponent = ref(null);
73+
74+
async function setupSlicer() {
75+
if ((FINAL_CONFIG.value.style.chart.zoom.startIndex !== null || FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) && slicerComponent.value) {
76+
if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
77+
await nextTick();
78+
await nextTick();
79+
slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.style.chart.zoom.startIndex);
80+
}
81+
if (FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) {
82+
await nextTick();
83+
await nextTick();
84+
slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.style.chart.zoom.endIndex + 1));
85+
}
86+
} else {
87+
slicer.value = {
88+
start: 0,
89+
end: maxLength.value
90+
};
91+
slicerStep.value += 1;
92+
}
93+
}
94+
95+
function validSlicerEnd(v) {
96+
const max = maxLength.value;
97+
if (v > max) {
98+
return max;
99+
}
100+
if (v < 0 || (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null && v < FINAL_CONFIG.value.style.chart.zoom.startIndex)) {
101+
if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
102+
return FINAL_CONFIG.value.style.chart.zoom.startIndex + 1;
103+
} else {
104+
return 1;
105+
}
106+
}
107+
return v;
108+
}
109+
110+
75111
onMounted(() => {
76112
prepareChart();
77113
})
@@ -99,6 +135,7 @@ function prepareChart() {
99135
})
100136
}
101137
}
138+
setupSlicer();
102139
}
103140
104141
const uid = ref(createUid());
@@ -131,17 +168,38 @@ function prepareConfig() {
131168
userConfig: props.config,
132169
defaultConfig: DEFAULT_CONFIG
133170
});
171+
172+
let finalConfig = {};
173+
134174
if (mergedConfig.theme) {
135-
return {
175+
finalConfig = {
136176
...useNestedProp({
137177
userConfig: themes.vue_ui_donut_evolution[mergedConfig.theme] || props.config,
138178
defaultConfig: mergedConfig
139179
}),
140180
customPalette: themePalettes[mergedConfig.theme] || palette
141181
}
142182
} else {
143-
return mergedConfig;
183+
finalConfig = mergedConfig;
184+
}
185+
186+
// ------------------------------ OVERRIDES -----------------------------------
187+
188+
if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.startIndex')) {
189+
finalConfig.style.chart.zoom.startIndex = props.config.style.chart.zoom.startIndex;
190+
} else {
191+
finalConfig.style.chart.zoom.startIndex = null;
192+
}
193+
194+
if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.endIndex')) {
195+
finalConfig.style.chart.zoom.endIndex = props.config.style.chart.zoom.endIndex;
196+
} else {
197+
finalConfig.style.chart.zoom.endIndex = null;
144198
}
199+
200+
// ----------------------------------------------------------------------------
201+
202+
return finalConfig;
145203
}
146204
147205
watch(() => props.config, (_newCfg) => {
@@ -962,6 +1020,7 @@ defineExpose({
9621020
/>
9631021
9641022
<Slicer
1023+
ref="slicerComponent"
9651024
v-if="maxLength > 1 && FINAL_CONFIG.style.chart.zoom.show"
9661025
:key="`slicer_${slicerStep}`"
9671026
:background="FINAL_CONFIG.style.chart.zoom.color"
@@ -979,6 +1038,8 @@ defineExpose({
9791038
:valueEnd="slicer.end"
9801039
v-model:start="slicer.start"
9811040
v-model:end="slicer.end"
1041+
:refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
1042+
:refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : maxLength"
9821043
@reset="refreshSlicer"
9831044
>
9841045
<template #reset-action="{ reset }">

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1248,6 +1248,7 @@ defineExpose({
12481248
:parent="donutChart"
12491249
:content="tooltipContent"
12501250
:isCustom="useCustomFormat"
1251+
:isFullscreen="isFullscreen"
12511252
>
12521253
<template #tooltip-before>
12531254
<slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -658,6 +658,7 @@ defineExpose({
658658
:offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
659659
:parent="galaxyChart"
660660
:content="tooltipContent"
661+
:isFullscreen="isFullscreen"
661662
:isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
662663
>
663664
<template #tooltip-before>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -730,6 +730,7 @@ defineExpose({
730730
:offsetY="FINAL_CONFIG.style.tooltip.offsetY"
731731
:parent="heatmapChart"
732732
:content="tooltipContent"
733+
:isFullscreen="isFullscreen"
733734
:isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
734735
>
735736
<template #tooltip-before>

‎src/components/vue-ui-history-plot.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1070,6 +1070,7 @@ defineExpose({
10701070
:parent="historyPlotChart"
10711071
:content="tooltipContent"
10721072
:isCustom="useCustomFormat"
1073+
:isFullscreen="isFullscreen"
10731074
>
10741075
<template #tooltip-before>
10751076
<slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,7 @@ defineExpose({
703703
:offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
704704
:parent="moleculeChart"
705705
:content="tooltipContent"
706+
:isFullscreen="isFullscreen"
706707
:isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
707708
>
708709
<template #tooltip-before>

‎src/components/vue-ui-nested-donuts.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1015,6 +1015,7 @@ defineExpose({
10151015
:offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
10161016
:parent="nestedDonutsChart"
10171017
:content="tooltipContent"
1018+
:isFullscreen="isFullscreen"
10181019
:isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
10191020
>
10201021
<template #tooltip-before>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -768,6 +768,7 @@ defineExpose({
768768
:offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
769769
:parent="onionChart"
770770
:content="tooltipContent"
771+
:isFullscreen="isFullscreen"
771772
:isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
772773
>
773774
<template #tooltip-before>

0 commit comments

Comments
 (0)