VueUiXy add highlightArea config option

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.8",
+  "version": "1.9.9",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -82,6 +82,23 @@ const config = ref({
     highlighter: {
       color: "#FF0000",
     },
+    highlightArea: {
+      show: true,
+      from: 3,
+      to: 5,
+      color: "#2D353C",
+      opacity: 20,
+      caption: {
+        text: 'Lorem ipsum dolor sic amet and some more thoughts',
+        fontSize: 12,
+        color: "#2D353C",
+        bold: true,
+        offsetY: 0,
+        width: 'auto',
+        padding: 3,
+        textAlign: 'center'
+      }
+    },
     tooltip: {
       roundingPercentage: 0,
       backgroundColor: "#FFFFFF",

src/App.vue

@@ -528,6 +528,29 @@
                     </g>
                 </g>
 
+                <!-- HIGHLITGHT AREA -->
+                <g v-if="hasHighlightArea">
+                    <rect
+                        data-cy="xy-highlight-area"
+                        :x="drawingArea.left + (drawingArea.width / maxSeries) * (chartConfig.chart.highlightArea.from - (slicer.start))"
+                        :y="drawingArea.top"
+                        :height="drawingArea.height"
+                        :width="(drawingArea.width / maxSeries) * highlightAreaSpan"
+                        :fill="`${chartConfig.chart.highlightArea.color}${opacity[chartConfig.chart.highlightArea.opacity]}`"
+                    />
+                    <foreignObject v-if="chartConfig.chart.highlightArea.caption.text"
+                        :x="(drawingArea.left + (drawingArea.width / maxSeries) * (chartConfig.chart.highlightArea.from - (slicer.start))) - (chartConfig.chart.highlightArea.caption.width === 'auto' ? 0 : chartConfig.chart.highlightArea.caption.width / 2 - (drawingArea.width / maxSeries) * highlightAreaSpan / 2)"
+                        :y="drawingArea.top + chartConfig.chart.highlightArea.caption.offsetY"
+                        style="overflow:visible"
+                        :width="chartConfig.chart.highlightArea.caption.width === 'auto' ? (drawingArea.width / maxSeries) * highlightAreaSpan : chartConfig.chart.highlightArea.caption.width"
+                        
+                    >
+                        <div :style="`padding:${chartConfig.chart.highlightArea.caption.padding}px;text-align:${chartConfig.chart.highlightArea.caption.textAlign};font-size:${chartConfig.chart.highlightArea.caption.fontSize}px;color:${chartConfig.chart.highlightArea.caption.color};font-weight:${chartConfig.chart.highlightArea.caption.bold ? 'bold' : 'normal'}`">
+                            {{ chartConfig.chart.highlightArea.caption.text }}
+                        </div>
+                    </foreignObject>
+                </g>
+
                 <!-- TOOLTIP TRAPS -->
                 <g v-if="chartConfig.chart.tooltip.show">
                     <g v-for="(trap, i) in maxSeries" :key="`tooltip_trap_${i}`">
@@ -724,6 +747,16 @@ export default {
                 return val;
             }
         },
+        hasHighlightArea() {
+            return this.chartConfig.chart.highlightArea && this.chartConfig.chart.highlightArea.show;
+        },
+        highlightAreaSpan() {
+            const { from, to } = this.chartConfig.chart.highlightArea;
+            console.log({ from, to})
+            if (from === to) return 1;
+            if (to < from) return 0;
+            return to - from + 1;
+        },
         relativeZero() {
             if(this.min >= 0) return 0;
             return Math.abs(this.min);

src/components/vue-ui-xy.vue

@@ -186,13 +186,30 @@
                 "color": "#2D353C",
                 "opacity": 5
             },
+            "highlightArea": {
+                "show": false,
+                "from": 0,
+                "to": 0,
+                "color": "#2D353C",
+                "opacity": 20,
+                "caption": {
+                    "text": "",
+                    "fontSize": 10,
+                    "color":"#2D353C",
+                    "bold": false,
+                    "offsetY": 0,
+                    "width": "auto",
+                    "padding": 3,
+                    "textAlign": "center"
+                }
+            },
             "grid": {
                 "stroke": "#e1e5e8",
                 "showVerticalLines": false,
                 "labels": {
                     "color": "#2D353C",
                     "show": true,
-                    "fontSize": 10,
+                    "fontSize": 12,
                     "axis": {
                         "yLabel": "",
                         "xLabel": "",

src/default_configs.json

@@ -998,6 +998,22 @@ declare module 'vue-data-ui' {
                 color?: string;
                 opacity?: number;
             };
+            highlightArea?: {
+                show?: boolean;
+                from?: number;
+                to?: number;
+                color?: string;
+                opacity?: number;
+                caption?: {
+                    text?: string;
+                    fontSize?: number;
+                    color?:number;
+                    bold?:boolean;
+                    offsetY?: boolean;
+                    width?: "auto" | number;
+                    textAlign?: "left" | "center" | "right";
+                };
+            };
             grid?: {
                 stroke?: string;
                 showVerticalLines?: boolean;