Merge pull request #94 from graphieros/ft-zoom-minimap

Ft zoom minimap (VueUiQuickChart)

Author: graphieros

TestingArena/ArenaVueUiQuickChart.vue

@@ -54,7 +54,7 @@ const datasets = ref({
     longObject: [
         {
             name: 'Serie 1',
-            values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+            values: [12, 7, 4, 11, 13, 16, 19, 22, 15, 28, 16, 12]
         },
         {
             name: 'Serie 2',
@@ -89,7 +89,7 @@ const datasets = ref({
 })
 
 
-const selectedSerie = ref('shortObjectMixed');
+const selectedSerie = ref('longObject');
 
 const model = ref([
     { key: 'responsive', def: false, type: 'checkbox'},
@@ -162,13 +162,20 @@ const model = ref([
     { key: 'xyShowGrid', def: true, type: 'checkbox'},
     { key: 'xyShowScale', def: true, type: 'checkbox'},
     { key: 'yAxisLabel', def: 'Lorem ipsum Y axis labellum'},
+    
     { key: 'zoomXy', def: true, type: 'checkbox'},
     { key: 'zoomColor', def: '#CCCCCC', type: 'color'},
     { key: 'zoomHighlightColor', def: '#1A1A1A', type: 'color'},
     { key: 'zoomFontSize', def: 14, type: 'number', min: 8, max: 48},
-    { key: 'zoomUseResetSlot', def: false, type: 'checkbox'}
+    { key: 'zoomUseResetSlot', def: false, type: 'checkbox'},
 
-])
+    { key: 'zoomMinimap.show', def: true, type: 'checkbox'},
+    { key: 'zoomMinimap.smooth', def: true, type: 'checkbox'},
+    { key: 'zoomMinimap.selectedColor', def: '#1F77B4', type: 'color'},
+    { key: 'zoomMinimap.selectedColorOpacity', def: 0.2, type: 'range', min: 0, max: 0.5, step: 0.01},
+    { key: 'zoomMinimap.lineColor', def: '#1A1A1A', type: 'color'},
+    { key: 'zoomMinimap.selectionRadius', def: 2, type: 'range', min: 0, max: 24}
+]);
 
 const themeOptions = ref([
     "",

src/atoms/Slicer.vue

@@ -200,21 +200,11 @@ const minimapLine = computed(() => {
     return props.smoothMinimap ? createSmoothPath(points) : createStraightPath(points);
 });
 
-// const startPercent = computed(() => {
-//     const range = props.max - props.min;
-//     return ((startValue.value - props.min) / range) * 100;
-// });
-
-// const endPercent = computed(() => {
-//     const range = props.max - props.min;
-//     return ((endValue.value - props.min) / range) * 100;
-// });
-
 const range = computed(() => props.max - props.min);
 const leftLabelPosition = computed(() => {
     const leftPercent = ((startValue.value - props.min) / range.value) * 100;
     return {
-        left: `calc(${leftPercent}%)`, // Adjust positioning as needed
+        left: `calc(${leftPercent}%)`,
         color: props.textColor,
         fontSize: `${props.fontSize}px`,
         top: '-28px',
@@ -225,7 +215,7 @@ const leftLabelPosition = computed(() => {
 const rightLabelPosition = computed(() => {
     const rightPercent = ((endValue.value - props.min) / range.value) * 100;
     return {
-        left: `calc(${rightPercent}%)`, // Adjust positioning as needed
+        left: `calc(${rightPercent}%)`,
         color: props.textColor,
         fontSize: `${props.fontSize}px`,
         top: '28px',
@@ -238,7 +228,7 @@ const rightLabelPosition = computed(() => {
 
 <template>
     <div data-html2canvas-ignore>
-        <div class="vue-data-ui-slicer-labels">
+        <div class="vue-data-ui-slicer-labels" style="position: relative; z-index: 1">
             <div v-if="valueStart > 0 || valueEnd < max" style="width: 100%; position: relative">
                 <button v-if="!useResetSlot" data-cy-reset tabindex="0" role="button" class="vue-data-ui-refresh-button"
                     @click="reset">
@@ -247,7 +237,7 @@ const rightLabelPosition = computed(() => {
                 <slot v-else name="reset-action" :reset="reset" />
             </div>
         </div>
-        <div class="double-range-slider" ref="minimapWrapper">
+        <div class="double-range-slider" ref="minimapWrapper" style="z-index: 0">
             <template v-if="hasMinimap">
                 <div class="minimap"  style="width: 100%">
                     <svg :xmlns="XMLNS" :viewBox="`0 0 ${svgMinimap.width < 0 ? 0 : svgMinimap.width} ${svgMinimap.height < 0 ? 0 : svgMinimap.height}`">
@@ -294,7 +284,6 @@ const rightLabelPosition = computed(() => {
     </div>
 </template>
 
-
 <style scoped lang="scss">
 .double-range-slider {
     position: relative !important;

src/components/vue-ui-quick-chart.vue

@@ -418,6 +418,39 @@ function refreshSlicer() {
     slicerStep.value += 1;
 }
 
+const minimap = computed(() => {
+    if(!FINAL_CONFIG.value.zoomMinimap.show || chartType.value === detector.chartType.DONUT) return [];
+
+    let ds = [];
+
+    if (detector.isSimpleArrayOfNumbers(formattedDataset.value.dataset)) {
+        ds = formattedDataset.value.dataset
+    }
+
+    if (detector.isSimpleArrayOfObjects(formattedDataset.value.dataset)) {
+        ds = formattedDataset.value.dataset.map((d, i) => {
+            return {
+                values: d.VALUE || d.DATA || d.SERIE || d.VALUES || d.NUM || 0,
+                id: chartType.value === detector.chartType.LINE ? `line_${i}` : `bar_${i}`
+            }
+        }).filter(s => !segregated.value.includes(s.id))
+    }
+
+    const maxIndex = detector.isSimpleArrayOfNumbers(ds) ? ds.length : Math.max(...ds.map(s => s.values.length));
+    let sumAllSeries = []
+
+    if (detector.isSimpleArrayOfNumbers(ds)) {
+        sumAllSeries = ds
+    } else {
+        for(let i = 0; i < maxIndex; i += 1) {
+            sumAllSeries.push(ds.map(s => s.values[i] || 0).reduce((a, b) => (a || 0) + (b || 0), 0));
+        }
+    }
+    
+    const min = Math.min(...sumAllSeries);
+    return sumAllSeries.map(dp => dp + (min < 0 ? Math.abs(min) : 0)) // positivized
+});
+
 const line = computed(() => {
     if(chartType.value !== detector.chartType.LINE) return null;
 
@@ -1426,6 +1459,12 @@ defineExpose({
                 :min="0"
                 :valueStart="slicer.start"
                 :valueEnd="slicer.end"
+                :smoothMinimap="FINAL_CONFIG.zoomMinimap.smooth"
+                :minimapSelectedColor="FINAL_CONFIG.zoomMinimap.selectedColor"
+                :minimapSelectedColorOpacity="FINAL_CONFIG.zoomMinimap.selectedColorOpacity"
+                :minimapSelectionRadius="FINAL_CONFIG.zoomMinimap.selectionRadius"
+                :minimapLineColor="FINAL_CONFIG.zoomMinimap.lineColor"
+                :minimap="minimap"
                 v-model:start="slicer.start"
                 v-model:end="slicer.end"
                 @reset="refreshSlicer"

src/useConfig.js

@@ -2385,7 +2385,8 @@ export function useConfig() {
         zoomColor: COLOR_GREY_MID,
         zoomHighlightColor: COLOR_GREY_DARK,
         zoomFontSize: FONT._14,
-        zoomUseResetSlot: false
+        zoomUseResetSlot: false,
+        zoomMinimap: MINIMAP
     }
 
     const vue_ui_age_pyramid = {

types/vue-data-ui.d.ts

@@ -4393,6 +4393,7 @@ declare module 'vue-data-ui' {
         zoomHighlightColor?: string;
         zoomFontSize?: number;
         zoomUseResetSlot?: boolean;
+        zoomMinimap?: ZoomMinimap;
         userOptionsButtons?: {
             tooltip?: boolean;
             pdf?: boolean;