Improvement - Implemented new slicer version

Author: graphieros

src/components/vue-ui-candlestick.vue

@@ -404,7 +404,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${!candlestickConfig.style.title.text ? 'padding-top:36px' : ''};background:${candlestickConfig.style.backgroundColor}`" :id="`vue-ui-candlestick_${uid}`">
+    <div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`position:relative;font-family:${candlestickConfig.style.fontFamily}; text-align:center;${!candlestickConfig.style.title.text ? 'padding-top:36px' : ''};background:${candlestickConfig.style.backgroundColor}`" :id="`vue-ui-candlestick_${uid}`">
         <div v-if="(!mutableConfig.inside || isPrinting) && candlestickConfig.style.title.text" :style="`width:100%;background:${candlestickConfig.style.backgroundColor}`">
             <!-- TITLE AS DIV -->
             <Title
@@ -688,6 +688,7 @@ defineExpose({
             :labelRight="dataset[slicer.end-1] ? dataset[slicer.end-1][0] : dataset.at(-1)[0]"
             :textColor="candlestickConfig.style.color"
             :inputColor="candlestickConfig.style.zoom.color"
+            :selectColor="candlestickConfig.style.zoom.highlightColor"
             :max="len"
             :min="0"
             :valueStart="slicer.start"
@@ -748,7 +749,7 @@ defineExpose({
 }
 .vue-ui-candlestick {
     user-select: none;
-    position: relative;
+    width: 100%
 }
 
 path, line, rect {

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

@@ -874,6 +874,7 @@ defineExpose({
             :labelRight="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.values[Number(slicer.end)-1] || ''"
             :textColor="donutEvolutionConfig.style.chart.color"
             :inputColor="donutEvolutionConfig.style.chart.zoom.color"
+            :selectColor="donutEvolutionConfig.style.chart.zoom.highlightColor"
             :max="maxLength"
             :min="0"
             :valueStart="slicer.start"

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

@@ -1288,6 +1288,7 @@ defineExpose({
             :labelRight="quickConfig.xyPeriods[slicer.end-1] ? quickConfig.xyPeriods[slicer.end-1] : ''"
             :textColor="quickConfig.color"
             :inputColor="quickConfig.zoomColor"
+            :selectColor="quickConfig.zoomHighlightColor"
             :max="formattedDataset.maxSeriesLength"
             :min="0"
             :valueStart="slicer.start"

src/components/vue-ui-xy.vue

@@ -839,6 +839,7 @@
             :labelRight="chartConfig.chart.grid.labels.xAxisLabels.values[slicer.end-1]"
             :textColor="chartConfig.chart.color"
             :inputColor="chartConfig.chart.zoom.color"
+            :selectColor="chartConfig.chart.zoom.highlightColor"
             :max="maxX"
             :min="0"
             :valueStart="slicer.start"
@@ -995,7 +996,7 @@ export default {
     BaseIcon,
     TableSparkline,
     Skeleton,
-    Slicer
+    Slicer,
 },
     data(){
         this.dataset.forEach((ds, i) => {

src/default_configs.json

@@ -174,6 +174,7 @@
             "zoom": {
                 "show": true,
                 "color": "#CCCCCC",
+                "highlightColor": "#4A4A4A",
                 "fontSize": 14,
                 "useResetSlot": false
             },
@@ -2189,6 +2190,7 @@
             "zoom": {
                 "show": true,
                 "color": "#CCCCCC",
+                "highlightColor": "#4A4A4A",
                 "fontSize": 14,
                 "useResetSlot": false
             },
@@ -3003,6 +3005,7 @@
                 "zoom": {
                     "show": true,
                     "color": "#CCCCCC",
+                    "highlightColor":"#4A4A4A",
                     "fontSize": 14,
                     "useResetSlot": false
                 },
@@ -3809,6 +3812,7 @@
         "yAxisLabel": "",
         "zoomXy": true,
         "zoomColor": "#CCCCCC",
+        "zoomHighlightColor": "#4A4A4A",
         "zoomFontSize": 14, 
         "zoomUseResetSlot": false
     },

types/vue-data-ui.d.ts

@@ -808,6 +808,7 @@ declare module 'vue-data-ui' {
                 zoom?: {
                     show?: boolean;
                     color?: string;
+                    highlightColor?: string;
                     fontSize?: number;
                     useResetSlot?: boolean;
                 };
@@ -1875,6 +1876,7 @@ declare module 'vue-data-ui' {
             zoom?: {
                 show?: boolean;
                 color?: string;
+                highlightColor?: string;
                 fontSize?: number;
                 useResetSlot?: boolean;
             };
@@ -2335,6 +2337,7 @@ declare module 'vue-data-ui' {
             zoom?: {
                 show?: boolean;
                 color?: string;
+                highlightColor?: string;
                 fontSize?: number;
                 useResetSlot?: boolean;
             };
@@ -4833,6 +4836,7 @@ declare module 'vue-data-ui' {
         yAxisLabel?: string;
         zoomXy?: boolean;
         zoomColor?: string;
+        zoomHighlightColor?: string;
         zoomFontSize?: number;
         zoomUseResetSlot?: boolean;
     };