evui 3.3.13 → 3.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.13",
+  "version": "3.3.16",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/Chart.vue

@@ -24,6 +24,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         type: Object,
         default: null,
       },
+      selectedSeries: {
+        type: Object,
+        default: null,
+      },
       options: {
         type: Object,
         default: () => ({}),
@@ -43,6 +47,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'drag-select',
       'update:selectedItem',
       'update:selectedLabel',
+      'update:selectedSeries',
     ],
     setup(props) {
       let evChart = {};
@@ -52,6 +57,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         eventListeners,
         selectItemInfo,
         selectLabelInfo,
+        selectSeriesInfo,
         getNormalizedData,
         getNormalizedOptions,
       } = useModel();
@@ -67,13 +73,20 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       );
 
       const createChart = () => {
+        let selected;
+        if (normalizedOptions.selectLabel.use) {
+          selected = selectLabelInfo;
+        } else if (normalizedOptions.selectSeries.use) {
+          selected = selectSeriesInfo;
+        }
+
         evChart = new EvChart(
           wrapper.value,
           normalizedData,
           normalizedOptions,
           eventListeners,
           selectItemInfo,
-          selectLabelInfo,
+          selected,
         );
       };
 
@@ -100,7 +113,8 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         await watch(() => props.data, (chartData) => {
           const newData = getNormalizedData(chartData);
           const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
-              || !isEqual(newData.groups, evChart.data.groups);
+              || !isEqual(newData.groups, evChart.data.groups)
+              || props.options.type === 'heatMap';
           evChart.data = cloneDeep(newData);
           evChart.update({
             updateSeries: isUpdateSeries,
@@ -115,7 +129,13 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
 
         await watch(() => props.selectedLabel, (newValue) => {
           if (newValue.dataIndex) {
-            evChart.renderWithSelectLabel(newValue.dataIndex);
+            evChart.renderWithSelected(newValue.dataIndex);
+          }
+        }, { deep: true });
+
+        await watch(() => props.selectedSeries, (newValue) => {
+          if (newValue.seriesId) {
+            evChart.renderWithSelected(newValue.seriesId);
           }
         }, { deep: true });
       });

package/src/components/chart/chart.core.js

@@ -14,7 +14,7 @@ import Pie from './plugins/plugins.pie';
 import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectLabelInfo) {
+  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectInfo) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
@@ -66,7 +66,7 @@ class EvChart {
     };
 
     this.defaultSelectItemInfo = defaultSelectItemInfo;
-    this.defaultSelectLabelInfo = defaultSelectLabelInfo;
+    this.defaultSelectInfo = defaultSelectInfo;
   }
 
   /**
@@ -93,7 +93,7 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedLabelInfo();
+    this.initSelectedInfo();
 
     this.drawChart();
 
@@ -153,7 +153,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const { maxTip, selectLabel, selectItem } = this.options;
+    const { maxTip, selectLabel, selectItem, selectSeries } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -161,7 +161,8 @@ class EvChart {
       labelOffset: this.labelOffset,
       axesSteps: this.axesSteps,
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
-      selectLabel: { option: selectLabel, selected: this.defaultSelectLabelInfo },
+      selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
+      selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
     };
 
     let showIndex = 0;
@@ -188,8 +189,8 @@ class EvChart {
             break;
           }
           case 'bar': {
-            const { thickness, borderRadius } = this.options;
-            series.draw({ thickness, borderRadius, showSeriesCount, showIndex, ...opt });
+            const { thickness, cPadRatio, borderRadius } = this.options;
+            series.draw({ thickness, cPadRatio, borderRadius, showSeriesCount, showIndex, ...opt });
             if (series.show) {
               showIndex++;
             }
@@ -331,7 +332,7 @@ class EvChart {
         this.labelOffset,
         this.axesSteps.x[index],
         hitInfo,
-        this.defaultSelectLabelInfo);
+        this.defaultSelectInfo);
     });
 
     this.axesY.forEach((axis, index) => {
@@ -340,7 +341,7 @@ class EvChart {
         this.labelOffset,
         this.axesSteps.y[index],
         hitInfo,
-        this.defaultSelectLabelInfo);
+        this.defaultSelectInfo);
     });
   }
 
@@ -660,7 +661,7 @@ class EvChart {
     this.axesY = this.createAxes('y', options.axesY);
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedLabelInfo();
+    this.initSelectedInfo();
 
     this.render(updateInfo?.hitInfo);
 

package/src/components/chart/element/element.bar.js

@@ -67,7 +67,14 @@ class Bar {
 
     const dArea = isHorizontal ? yArea : xArea;
     const cArea = dArea / (this.data.length || 1);
-    const cPad = 2;
+
+    let cPad;
+    const isUnableToDrawCategoryPadding = param.cPadRatio >= 1 || param.cPadRatio <= 0;
+    if (isUnableToDrawCategoryPadding) {
+      cPad = 2;
+    } else {
+      cPad = Math.max((dArea * (param.cPadRatio / 2)) / this.data.length, 2);
+    }
 
     let bArea;
     let w;

package/src/components/chart/element/element.heatmap.js

@@ -77,8 +77,8 @@ class HeatMap {
   drawItem(ctx, x, y, w, h) {
     ctx.beginPath();
     if (this.stroke.show) {
-      ctx.fillRect(x, y, w, h);
       ctx.strokeRect(x, y, w, h);
+      ctx.fillRect(x, y, w, h);
     } else {
       const aliasPixel = Util.aliasPixel(1);
       ctx.fillRect(
@@ -148,8 +148,11 @@ class HeatMap {
         if (this.colorAxis[colorIndex].show) {
           ctx.fillStyle = Util.colorStringToRgba(item.dataColor, opacity);
           if (this.stroke.show) {
-            const { color, lineWidth } = this.stroke;
-            ctx.strokeStyle = Util.colorStringToRgba(color, opacity);
+            const { color, lineWidth, opacity: sOpacity } = this.stroke;
+            ctx.strokeStyle = Util.colorStringToRgba(
+              color,
+              opacity === 1 ? sOpacity : opacity,
+            );
             ctx.lineWidth = lineWidth;
             xp += (lineWidth * 1.5);
             yp += (lineWidth * 1.5);
@@ -216,7 +219,7 @@ class HeatMap {
     const centerX = x + (w / 2);
     const centerY = y + (h / 2);
 
-    if (vw >= w || formattedTxt < 0) {
+    if (vw >= w || vh >= h || formattedTxt < 0) {
       return;
     }
 
@@ -267,13 +270,10 @@ class HeatMap {
       const y1 = yp;
       const y2 = yp + h;
 
-      return ((x1 <= xsp && x2 >= xsp) && (y1 <= ysp && y2 >= ysp))
-         || ((x1 <= xep && x2 >= xep) && (y1 <= ysp && y2 >= ysp))
-         || ((x1 <= xsp && x2 >= xsp) && (y1 <= yep && y2 >= yep))
-         || ((x1 <= xep && x2 >= xep) && (y1 <= yep && y2 >= yep))
-         || ((x1 >= xsp && x1 <= xep) && (y1 >= ysp && y1 <= yep))
+      return ((x1 >= xsp && x1 <= xep) && (y1 >= ysp && y1 <= yep))
          || ((x1 >= xsp && x1 <= xep) && (y2 >= ysp && y2 <= yep))
-         || ((x2 >= xsp && x2 <= xep) && (y1 >= ysp && y1 <= yep));
+         || ((x2 >= xsp && x2 <= xep) && (y1 >= ysp && y1 <= yep))
+        || ((x2 >= xsp && x2 <= xep) && (y2 >= ysp && y2 <= yep));
     });
   }
 
@@ -352,6 +352,104 @@ class HeatMap {
 
     return item;
   }
+
+  findBlockRange({ xcp, xep, ycp, yep, range }) {
+    const labels = this.labels;
+
+    const blockRange = {
+      xsp: Math.min(xcp, xep),
+      ysp: Math.min(ycp, yep),
+      width: Math.ceil(Math.abs(xep - xcp)),
+      height: Math.ceil(Math.abs(yep - ycp)),
+    };
+
+    if (labels.x.length && labels.y.length) {
+      const { x1, x2, y1, y2 } = range;
+      const gapX = (x2 - x1) / labels.x.length;
+      const gapY = (y2 - y1) / labels.y.length;
+
+      const point = {
+        xsp: xcp,
+        xep,
+        ysp: ycp,
+        yep,
+      };
+
+      const setPoint = (dir, target, key) => {
+        let itemPoint;
+        let gap;
+        let startPoint;
+
+        if (dir === 'x') {
+          gap = gapX;
+          startPoint = x1;
+        } else {
+          gap = gapY;
+          startPoint = y1;
+        }
+
+        const findItem = labels[dir].findIndex((item, index) => {
+          itemPoint = Math.round(startPoint + (gap * index)) + Util.aliasPixel(1);
+          return itemPoint <= target && target <= itemPoint + gap;
+        });
+
+        if (findItem > -1) {
+          point[key] = ['xsp', 'ysp'].includes(key) ? itemPoint : itemPoint + gap;
+        }
+      };
+
+      setPoint('x', Math.min(xcp, xep), 'xsp');
+      setPoint('x', Math.max(xcp, xep), 'xep');
+      setPoint('y', Math.min(ycp, yep), 'ysp');
+      setPoint('y', Math.max(ycp, yep), 'yep');
+
+      blockRange.xsp = Math.min(point.xsp, point.xep);
+      blockRange.ysp = Math.min(point.ysp, point.yep);
+      blockRange.width = Math.abs(point.xep - point.xsp);
+      blockRange.height = Math.abs(point.yep - point.ysp);
+    }
+
+    return blockRange;
+  }
+
+  findSelectionRange(rangeInfo) {
+    const { xcp, ycp, width, height, range } = rangeInfo;
+
+    let selectionRange = null;
+
+    const { x1, x2, y1, y2 } = range;
+    const { x: labelX, y: labelY } = this.labels;
+
+    if (labelX.length && labelY.length) {
+      const gapX = (x2 - x1) / labelX.length;
+      const gapY = (y2 - y1) / labelY.length;
+
+      const xsp = xcp;
+      const xep = xcp + width;
+      const ysp = ycp;
+      const yep = ycp + height;
+
+      const xIndex = {
+        min: Math.floor((xsp - x1) / gapX),
+        max: Math.floor((xep - x1 - gapX) / gapX),
+      };
+
+      const lastIndexY = labelY.length - 1;
+      const yIndex = {
+        min: lastIndexY - Math.floor((yep - y1 - gapY) / gapY),
+        max: lastIndexY - Math.floor((ysp - y1) / gapY),
+      };
+
+      selectionRange = {
+        xMin: labelX[xIndex.min],
+        xMax: labelX[xIndex.max],
+        yMin: labelY[yIndex.min],
+        yMax: labelY[yIndex.max],
+      };
+    }
+
+    return selectionRange;
+  }
 }
 
 export default HeatMap;

package/src/components/chart/element/element.line.js

@@ -102,7 +102,8 @@ class Line {
     const getXPos = val => Canvas.calculateX(val, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
     const getYPos = val => Canvas.calculateY(val, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
 
-    this.data.reduce((prev, curr, ix, item) => {
+    // draw line
+    this.data.reduce((prev, curr, ix) => {
       x = getXPos(curr.x);
       y = getYPos(curr.y);
 
@@ -110,22 +111,12 @@ class Line {
         x += Util.aliasPixel(x);
       }
 
-      if (y === null || x === null) {
-        if (ix - 1 > -1) {
-          // draw fill(area) series not stacked
-          if (this.fill && prev.y !== null && !this.stackIndex) {
-            ctx.stroke();
-            ctx.lineTo(prev.xp, endPoint);
-            ctx.lineTo(item[startFillIndex].xp, endPoint);
-
-            ctx.fill();
-            ctx.beginPath();
-          }
-        }
+      if (ix === 0) {
+        ctx.moveTo(x, y);
+      }
 
-        startFillIndex = ix + 1;
-      } else if (ix === 0 || prev.y === null || curr.y === null
-        || prev.x === null || curr.x === null) {
+      const isNullValue = prev.y === null || curr.y === null || prev.x === null || curr.x === null;
+      if (isNullValue) {
         ctx.moveTo(x, y);
       } else {
         ctx.lineTo(x, y);
@@ -139,41 +130,45 @@ class Line {
 
     ctx.stroke();
 
-    const dataLen = this.data.length;
+    // draw fill
+    if (this.fill && this.data.length) {
+      ctx.beginPath();
 
-    if (this.fill && dataLen) {
       ctx.fillStyle = Util.colorStringToRgba(mainColor, fillOpacity);
 
-      if (this.stackIndex) {
-        const reversedDataList = this.data.slice().reverse();
-        reversedDataList.forEach((curr, ix) => {
-          ctx.beginPath();
+      this.data.forEach((currData, ix) => {
+        const isEmptyPoint = data => data?.x === null || data?.y === null
+          || data?.x === undefined || data?.y === undefined;
+
+        const nextData = this.data[ix + 1];
+
+        if (isEmptyPoint(currData)) {
+          startFillIndex = ix + 1;
 
-          x = getXPos(curr.x);
-          y = getYPos(curr.b);
+          if (!isEmptyPoint(nextData)) {
+            ctx.moveTo(nextData.xp, nextData.yp);
+          }
 
-          const prev = reversedDataList[ix - 1];
-          if (curr.o !== null) {
-            if (prev && prev.o == null) {
-              ctx.moveTo(x, getYPos(curr.b + curr.o));
-            }
+          return;
+        }
 
-            ctx.lineTo(x, y);
+        ctx.lineTo(currData.xp, currData.yp);
 
-            if (ix === reversedDataList.length - 1) {
-              ctx.lineTo(x, getYPos(curr.b + curr.o));
-            }
-          } else if (prev && prev.o) {
-            ctx.lineTo(getXPos(prev.x), getYPos(prev.b + prev.o));
+        if (isEmptyPoint(nextData)) {
+          for (let jx = ix; jx >= startFillIndex; jx--) {
+            const prevData = this.data[jx];
+            const xp = prevData.xp;
+            const bp = getYPos(prevData.b) ?? endPoint;
+            ctx.lineTo(xp, bp);
           }
-        });
-      } else if (startFillIndex < dataLen) {
-        ctx.lineTo(this.data[dataLen - 1].xp, endPoint);
-        ctx.lineTo(this.data[startFillIndex].xp, endPoint);
-      }
+
+          ctx.closePath();
+        }
+      });
 
       ctx.fill();
     }
+
     if (this.point || isExistSelectedLabel) {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
       const focusStyle = Util.colorStringToRgba(pointFillColor, 1);

package/src/components/chart/element/element.pie.js

@@ -45,7 +45,6 @@ class Pie {
     const slice = new Path2D();
 
     const radius = this.isSelect ? this.radius + 5 : this.radius;
-    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     const color = this.color;
     const noneDownplayOpacity = color.includes('rgba') ? Util.getOpacity(color) : 1;
@@ -66,7 +65,7 @@ class Pie {
     }
 
     if (this.showValue?.use) {
-      this.drawValueLabels(ctx, doughnutHoleRadius);
+      this.drawValueLabels(ctx);
     }
 
     ctx.closePath();
@@ -115,7 +114,6 @@ class Pie {
   itemHighlight(item, context) {
     const ctx = context;
     const radius = this.isSelect ? this.radius + 5 : this.radius;
-    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     ctx.save();
     ctx.shadowOffsetX = 0;
@@ -133,7 +131,7 @@ class Pie {
     ctx.fill();
 
     if (this.showValue?.use) {
-      this.drawValueLabels(ctx, doughnutHoleRadius);
+      this.drawValueLabels(ctx);
     }
 
     ctx.closePath();
@@ -146,19 +144,9 @@ class Pie {
    * @param context           canvas context
    */
   drawValueLabels(context) {
-    const { fontSize, textColor, formatter } = this.showValue;
     const ctx = context;
-
-    ctx.save();
-    ctx.beginPath();
-
-    ctx.font = `normal normal normal ${fontSize}px Roboto`;
-    ctx.fillStyle = textColor;
-    ctx.lineWidth = 1;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-
     const value = this.data.o;
+    const { fontSize, textColor, formatter } = this.showValue;
 
     let formattedTxt;
     if (formatter) {
@@ -180,15 +168,27 @@ class Pie {
       && radius >= valueWidth * ratio
       && radius >= valueHeight * ratio
     ) {
+      ctx.save();
+      ctx.beginPath();
+
+      const noneDownplayOpacity = textColor.includes('rgba') ? Util.getOpacity(textColor) : 1;
+      const opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+
+      ctx.font = `normal normal normal ${fontSize}px Roboto`;
+      ctx.fillStyle = Util.colorStringToRgba(textColor, opacity);
+      ctx.lineWidth = 1;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
       const halfRadius = (radius / 2) + this.doughnutHoleSize;
       const centerAngle = ((this.endAngle - this.startAngle) / 2) + this.startAngle;
       const xPos = halfRadius * Math.cos(centerAngle) + this.centerX;
       const yPos = halfRadius * Math.sin(centerAngle) + this.centerY;
 
       ctx.fillText(formattedTxt, xPos, yPos);
-    }
 
-    ctx.restore();
+      ctx.restore();
+    }
   }
 }
 

package/src/components/chart/element/element.tip.js

@@ -250,7 +250,7 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
-    const { dataIndex, data, label } = this.defaultSelectLabelInfo;
+    const { dataIndex, data, label } = this.defaultSelectInfo;
     let drawTip = false;
 
     if (dataIndex.length) {

package/src/components/chart/model/model.store.js

@@ -422,14 +422,21 @@ const modules = {
     const colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
 
+    let minValue;
     let maxValue = 0;
+
     let isExistError = false;
     data.forEach(({ o: value }) => {
       if (maxValue < value) {
-        maxValue = value;
+        maxValue = Math.max(maxValue, value);
       }
+
       if (value < 0) {
         isExistError = true;
+      } else if (minValue === undefined) {
+        minValue = value;
+      } else {
+        minValue = Math.min(minValue, value);
       }
     });
 
@@ -443,8 +450,9 @@ const modules = {
     }
 
     return {
+      min: minValue,
       max: maxValue,
-      interval: Math.ceil(maxValue / categoryCnt),
+      interval: Math.ceil((maxValue - minValue) / categoryCnt),
       existError: isExistError,
     };
   },
@@ -618,6 +626,101 @@ const modules = {
     };
   },
 
+  /**
+   * Find seriesId by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked series id
+   */
+  getSeriesIdByPosition(offset) {
+    const [clickedX, clickedY] = offset;
+    const chartRect = this.chartRect;
+    const labelOffset = this.labelOffset;
+    const aPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+    const valueAxes = this.axesY[0];
+    const labelAxes = this.axesX[0];
+    const valueStartPoint = aPos[valueAxes.units.rectStart];
+    const valueEndPoint = aPos[valueAxes.units.rectEnd];
+    const labelStartPoint = aPos[labelAxes.units.rectStart];
+    const labelEndPoint = aPos[labelAxes.units.rectEnd];
+
+    const result = { sId: null };
+
+    if (clickedY > valueEndPoint && clickedY < valueStartPoint
+      && clickedX < labelEndPoint && clickedX > labelStartPoint) {
+      let hitSeries;
+      let positionList;
+      const hitItem = this.findHitItem(offset);
+      const hitSeriesList = Object.keys(hitItem.items);
+
+      switch (this.options.type) {
+        case 'line': {
+          const orderedSeriesList = this.seriesInfo.charts.line;
+          const isStackChart = Object.values(this.seriesList).some(({ stackIndex }) => stackIndex);
+
+          if (hitSeriesList.length) { // 클릭한 위치에 data 가 존재하는 경우
+            if (isStackChart) {
+              positionList = orderedSeriesList.filter(sId => hitSeriesList.includes(sId))
+                .map(sId => ({ sId, position: hitItem.items[sId]?.data?.yp }));
+              hitSeries = positionList.find(({ position }) => clickedY > position)?.sId;
+            } else {
+              hitSeries = Object.entries(hitItem.items).find(([, { hit }]) => hit)?.[0];
+            }
+          } else { // 클릭한 위치에 data 가 존재하지 않는 경우
+            const visibleSeriesList = orderedSeriesList.filter(sId => this.seriesList[sId].show);
+            positionList = visibleSeriesList.map(sId => ({
+              sId,
+              position: this.seriesList[sId].data?.map(({ xp, yp }) => [xp, yp]),
+            }));
+            const dataIndex = positionList[0].position?.findIndex(([xp]) => xp >= clickedX);
+            const vectorList = positionList.map(({ sId, position }) => ({
+              sId,
+              vector: { start: position[dataIndex - 1], end: position[dataIndex] },
+            }));
+
+            // canvas 의 클릭 위치값은 제 4 사분면의 위치이므로 clickedY, y1, y2 의 값은 음수를 취한다.
+            if (isStackChart) {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const v1 = [x2 - x1, y1 - y2];
+                const v2 = [x2 - clickedX, clickedY - y2];
+                const xp = v1[0] * v2[1] - v1[1] * v2[0];
+
+                return vector.start.every(v => typeof v === 'number')
+                  && vector.end.every(v => typeof v === 'number')
+                  && xp > 0;
+              })?.sId;
+            } else {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const a = (y1 - y2) / (x2 - x1);
+                const b = -1;
+                const c = -y1 - a * x1;
+                const distance = Math.abs(a * clickedX - b * clickedY + c)
+                  / Math.sqrt(a ** 2 + b ** 2);
+
+                return distance < 3;
+              })?.sId;
+            }
+          }
+          break;
+        }
+        default:
+          break;
+      }
+
+      result.sId = hitSeries;
+    }
+
+    return result;
+  },
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y