evui 2.1.0 → 2.1.1

package/src/components/chart/chart.vue

@@ -1,16 +1,21 @@
 <template>
   <div
     ref="wrapper"
+    v-resize.debounce="onResize"
     :style="wrapperStyle"
     class="ev-chart"
   />
 </template>
 <script>
-  import _ from 'lodash-es';
+  import resize from 'vue-resize-directive';
+  import { cloneDeep, defaultsDeep, isEqual } from 'lodash-es';
   import { getQuantity } from '@/common/utils';
   import EvChart from './chart.core';
 
   export default {
+    directives: {
+      resize,
+    },
     props: {
       options: {
         type: Object,
@@ -20,12 +25,17 @@
         type: Object,
         default: () => {},
       },
+      listeners: {
+        type: Object,
+        default: () => {},
+      },
     },
     data() {
       return {
         chart: null,
         normalizedOption: null,
         normalizedData: null,
+        isInit: false,
       };
     },
     computed: {
@@ -38,53 +48,71 @@
     },
     watch: {
       data: {
-        handler(newVal, oldVal) {
-          let isSeriesUpdate = false;
-          this.normalizedData = {
-            series: {},
-            data: {},
-            groups: [],
-            labels: [],
-          };
+        handler(newVal) {
+          const newData = defaultsDeep({}, newVal, this.normalizedData);
+          const isUpdateSeries = !isEqual(newData.series, this.evChart.data.series);
 
-          if (!this.isEqualObject(newVal.series, oldVal.series)) {
-            isSeriesUpdate = true;
-          }
-          this.evChart.data = _.merge(this.getDefaultData(), newVal);
-          this.evChart.update(isSeriesUpdate);
+          this.evChart.data = cloneDeep(newData);
+          this.evChart.update({
+            updateSeries: isUpdateSeries,
+            updateSelTip: { update: true, keepDomain: false },
+          });
         },
+        deep: true,
       },
       options: {
         handler(newVal) {
-          this.evChart.options = _.merge(this.getDefaultOptions(), newVal);
-          this.evChart.update();
+          const newOpt = defaultsDeep({}, newVal, this.normalizedOption);
+
+          this.evChart.options = cloneDeep(newOpt);
+          this.evChart.update({
+            updateSeries: false,
+            updateSelTip: { update: false, keepDomain: false },
+          });
         },
+        deep: true,
       },
     },
     created() {
-      this.normalizedOption = _.merge(this.getDefaultOptions(), this.options);
-      this.normalizedData = _.merge(this.getDefaultData(), this.data);
+      this.data.series = cloneDeep(this.data.series || {});
+      this.options.legend = cloneDeep(this.options.legend || {});
+
+      this.normalizedOption = defaultsDeep({}, this.options, this.getDefaultOptions());
+      this.normalizedData = defaultsDeep(this.data, this.getDefaultData());
     },
     mounted() {
       const wrapper = this.$refs.wrapper;
       const options = this.normalizedOption;
       const data = this.normalizedData;
 
-      this.evChart = new EvChart(wrapper, data, options);
+      this.evChart = new EvChart(wrapper, data, options, this.createEventListener());
 
-      this.store = this.evChart.store;
       const timer = setTimeout(() => {
-        this.evChart.init();
+        if (this.evChart) {
+          this.evChart.init();
+          this.isInit = true;
+        }
         clearTimeout(timer);
       }, 1);
     },
     beforeDestroy() {
-      if (this.evChart.tooltipDOM) {
-        this.evChart.tooltipDOM.remove();
-      }
-      delete this.evChart;
+      this.evChart.destroy();
+      this.evChart = null;
     },
     methods: {
+      createEventListener() {
+        const listeners = this.listeners || {};
+        const evtList = ['dblclick', 'click'];
+        const cbMap = {};
+
+        evtList.forEach((fnKey) => {
+          if (Object.prototype.hasOwnProperty.call(listeners, fnKey)) {
+            cbMap[fnKey] = listeners[fnKey];
+          }
+        });
+
+        return cbMap;
+      },
       getDefaultOptions() {
         return {
           border: 2,
@@ -95,13 +123,13 @@
             style: {
               fontSize: 15,
               color: '#000',
-              fontFamily: 'Droid Sans',
+              fontFamily: 'Roboto',
             },
           },
           legend: {
             show: true,
             position: 'right',
-            color: '#000',
+            color: '#353740',
             inactive: '#aaa',
             width: 140,
             height: 24,
@@ -111,14 +139,43 @@
           useSelect: false,
           doughnutHoleSize: 0,
           reverse: false,
-          bufferSize: null,
           horizontal: false,
           width: '100%',
           height: '100%',
           thickness: 1,
-          useTooltip: true,
-          useSelectionData: false,
-          type: 'line',
+          combo: false,
+          tooltip: {
+            use: true,
+            backgroundColor: '#4C4C4C',
+            borderColor: '#666666',
+            shadowOpacity: 0.25,
+            useShadow: false,
+            throttledMove: false,
+            debouncedHide: false,
+          },
+          indicator: {
+            use: true,
+            color: '#EE7F44',
+          },
+          maxTip: {
+            use: false,
+            fixedPosTop: false,
+            showIndicator: false,
+            indicatorColor: '#000000',
+            tipBackground: '#000000',
+            tipTextColor: '#FFFFFF',
+          },
+          selectItem: {
+            use: false,
+            showTextTip: false,
+            showTip: false,
+            showIndicator: false,
+            fixedPosTop: false,
+            useApproximateValue: false,
+            indicatorColor: '#000000',
+            tipBackground: '#000000',
+            tipTextColor: '#FFFFFF',
+          },
         };
       },
       getDefaultData() {
@@ -139,28 +196,34 @@
         }
         return sizeValue;
       },
-      isEqualObject(newVal, oldVal) {
-        const nKey = Object.keys(newVal).sort();
-        const oKey = Object.keys(oldVal).sort();
-
-        if (nKey.length !== oKey.length) {
-          return false;
+      onResize() {
+        if (this.isInit) {
+          this.evChart.resize();
         }
-
-        for (let ix = 0; ix < nKey.length; ix++) {
-          if (nKey[ix] !== oKey[ix]) {
-            return false;
-          } else if (!_.isEqual(newVal[nKey[ix]], oldVal[oKey[ix]])) {
-            return false;
-          }
+      },
+      forceUpdate() {
+        if (this.isInit) {
+          this.evChart.update({
+            updateSeries: false,
+            updateSelTip: { update: false, keepDomain: false },
+          });
         }
-
-        return true;
+      },
+      onDblClick(e) {
+        this.$emit('on-dblclick', e);
+      },
+      onClick(e) {
+        this.$emit('on-click', e);
+      },
+      selectItemByLabel(label) {
+        return this.evChart.selectItemByLabel(label);
       },
     },
   };
 </script>
-<style>
+<style lang="scss">
+  @import '~@/styles/default';
+
   .ev-chart-wrapper {
     position: relative;
     width: 100%;
@@ -207,14 +270,9 @@
     top: 50%;
     left: 0;
     transform: translate(0, -50%);
-    width: 8px;
-    height: 8px;
+    width: 18px;
+    height: 4px;
     position: absolute;
-    border-radius: 50%;
-  }
-
-  .ev-chart-legend-color.inactive {
-    /*background-color: #555 !important;*/
   }
 
   .ev-chart-legend-name {
@@ -223,14 +281,20 @@
     white-space: nowrap;
     overflow: hidden;
     font-size: 12px;
-    margin-left: 16px;
+    margin-left: 24px;
     padding-right: 16px;
-    user-select:none;
+    user-select: none;
     top: 50%;
     left: 0;
     width: 100%;
+    font-family: 'Roboto';
+    font-weight: 400;
     transform: translate(0, -50%);
     position: absolute;
+
+    &:hover {
+      font-weight: bold;
+    }
   }
 
   .ev-chart-legend-value {
@@ -245,11 +309,11 @@
     position: absolute;
     background: transparent;
     opacity: 0.5;
-    z-index: 1;
+    z-index: 10;
   }
 
   .ev-chart-resize-bar:hover {
-    background-color: #e2e2e2;
+    background-color: #E2E2E2;
   }
 
   .ev-chart-resize-ghost {
@@ -258,7 +322,7 @@
     height: 100%;
     cursor: col-resize;
     opacity: 0.5;
-    background-color: #e2e2e2;
+    background-color: #E2E2E2;
   }
 
   .ev-chart-resize-ghost.horizontal {
@@ -269,64 +333,18 @@
 
   .ev-chart-tooltip {
     position: absolute;
-    z-index: 100000;
-    color: #000;
-    border-radius: 4px;
-    border: 1px solid #D8D8D8;
-    background: #fff;
-    overflow-y: auto;
-    max-height: 500px;
-    padding: 10px;
-  }
-
-  .ev-chart-tooltip-title {
-    font-size: 14px;
-    text-align: center;
-    margin: 0 5px 3px 5px;
-    padding-bottom: 2px;
-    border-bottom: 1px solid #D2D2D2;
-    user-select: none;
-  }
-
-  .ev-chart-tooltip-ul {
-    list-style: none;
-    display: block;
-    user-select: none;
-  }
-
-  .ev-chart-tooltip-li {
-    border: none;
-    padding: 0;
-    margin: 0;
+    z-index: 850;
+    top: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    padding-right: 17px;
   }
 
-  .ev-chart-tooltip-color {
-    width: 10px;
-    height: 10px;
+  .ev-chart-tooltip-canvas {
     position: absolute;
-    margin: 8px 0 0 5px;
-    border-radius: 5px;
-  }
-
-  .ev-chart-tooltip-name {
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 12px;
-    margin-left: 20px;
-    width: 100%;
-    user-select: none;
-    color: #000;
-  }
-
-  .ev-chart-tooltip-colon {
-    width: 100%;
-  }
-
-  .ev-chart-tooltip-value {
-    font-size: 12px;
-    margin-right: 5px;
+    top: 0;
+    left: 0;
+    display: block;
   }
-
 </style>

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

@@ -1,10 +1,11 @@
-import _merge from 'lodash/merge';
+import { defaultsDeep } from 'lodash-es';
+import { numberWithComma } from '@/common/utils';
 import { COLOR, BAR_OPTION } from '../helpers/helpers.constant';
 import Canvas from '../helpers/helpers.canvas';
 
 class Bar {
-  constructor(sId, opt, sIdx) {
-    const merged = _merge({}, BAR_OPTION, opt);
+  constructor(sId, opt, sIdx, isHorizontal) {
+    const merged = defaultsDeep({}, opt, BAR_OPTION);
     Object.keys(merged).forEach((key) => {
       this[key] = merged[key];
     });
@@ -17,22 +18,39 @@ class Bar {
       this.color = COLOR[sIdx];
     }
 
+    this.type = 'bar';
     this.sId = sId;
     this.data = [];
+    this.isHorizontal = isHorizontal;
+    this.size = {
+      cat: 0,
+      bar: 0,
+      cPad: 0,
+      bPad: 0,
+      w: 0,
+      h: 0,
+      ix: 0,
+    };
   }
 
+  /**
+   * Draw series data
+   * @param {object} param     object for drawing series data
+   *
+   * @returns {undefined}
+   */
   draw(param) {
     if (!this.show) {
       return;
     }
 
+    const { isHorizontal, showValue } = this;
+
     const ctx = param.ctx;
     const chartRect = param.chartRect;
     const labelOffset = param.labelOffset;
     const axesSteps = param.axesSteps;
-    const index = param.showIndex;
-    const isHorizontal = param.isHorizontal;
-    const labels = param.integLabels;
+    const showIndex = param.showIndex;
     const thickness = param.thickness;
     const showSeriesCount = param.showSeriesCount;
 
@@ -48,38 +66,41 @@ class Bar {
     const ysp = chartRect.y2 - labelOffset.bottom;
 
     const dArea = isHorizontal ? yArea : xArea;
-    const cArea = dArea / (labels.length || 1);
+    const cArea = dArea / (this.data.length || 1);
     const cPad = 2;
 
     let bArea;
-    if (this.isExistGrp) {
-      bArea = (cArea - (cPad * 2));
-    } else {
-      bArea = (cArea - (cPad * 2)) / showSeriesCount;
-    }
-    let w = isHorizontal ? null : Math.round(bArea * thickness);
-    let h = isHorizontal ? Math.round(bArea * thickness) : null;
+    let w;
+    let h;
+
+    bArea = (cArea - (cPad * 2));
+    bArea = this.isExistGrp ? bArea : bArea / showSeriesCount;
+
+    const size = Math.round(bArea * thickness);
+
+    w = isHorizontal ? null : size;
+    h = isHorizontal ? size : null;
 
-    // barArea내에서 barWidth로 빠진 부분을 계산.
     const bPad = isHorizontal ? (bArea - h) / 2 : (bArea - w) / 2;
-    // series index에 따라 시작 X값 보정을 위한 변수.
-    const barSeriesX = this.isExistGrp ? 1 : index + 1;
+    const barSeriesX = this.isExistGrp ? 1 : showIndex + 1;
+
+    this.size.cat = cArea;
+    this.size.bar = bArea;
+    this.size.cPad = cPad;
+    this.size.bPad = bPad;
+    this.size.w = w;
+    this.size.ix = barSeriesX;
 
     let categoryPoint = null;
 
     ctx.beginPath();
     ctx.fillStyle = this.color;
 
-    this.data.forEach((item) => {
-      const posIdx = labels.indexOf(isHorizontal ? item.y : item.x);
-      if (posIdx < 0) {
-        return;
-      }
-
+    this.data.forEach((item, index) => {
       if (isHorizontal) {
-        categoryPoint = ysp - (cArea * posIdx) - cPad;
+        categoryPoint = ysp - (cArea * index) - cPad;
       } else {
-        categoryPoint = xsp + (cArea * posIdx) + cPad;
+        categoryPoint = xsp + (cArea * index) + cPad;
       }
 
       if (isHorizontal) {
@@ -106,12 +127,185 @@ class Bar {
 
       ctx.fillRect(x, y, w, isHorizontal ? -h : h);
 
+
+      if (showValue.use) {
+        ctx.save();
+
+        const value = numberWithComma(isHorizontal ? item.x : item.y);
+
+        ctx.font = `normal normal normal ${showValue.fontSize}px Roboto`;
+        ctx.fillStyle = showValue.textColor;
+        ctx.lineWidth = 1;
+        ctx.textBaseline = isHorizontal ? 'middle' : 'bottom';
+        ctx.textAlign = 'center';
+
+        const vw = Math.round(ctx.measureText(value).width);
+        const vh = showValue.fontSize + 4;
+
+        if (vw < w && vh < Math.abs(h)) {
+          if (isHorizontal) {
+            ctx.fillText(value, x + w - vw, y - (h / 2));
+          } else {
+            ctx.fillText(value, x + (w / 2), y + h + vh);
+          }
+        }
+
+        ctx.restore();
+      }
+
       item.xp = x; // eslint-disable-line
       item.yp = y; // eslint-disable-line
       item.w = w; // eslint-disable-line
       item.h = isHorizontal ? -h : h; // eslint-disable-line
     });
   }
+
+  /**
+   * Draw item highlight
+   * @param {object}  item       object for drawing series data
+   * @param {object}  context    canvas context
+   *
+   * @returns {undefined}
+   */
+  itemHighlight(item, context) {
+    const isHorizontal = this.isHorizontal;
+    const showValue = this.showValue;
+
+    const gdata = item.data;
+    const ctx = context;
+
+    const x = gdata.xp;
+    const y = gdata.yp;
+    const w = gdata.w;
+    const h = gdata.h;
+
+    ctx.save();
+    ctx.fillStyle = this.color;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 4;
+    ctx.shadowColor = this.color;
+
+    ctx.fillRect(x, y, w, h);
+
+    if (showValue.use) {
+      ctx.save();
+
+      const value = numberWithComma(isHorizontal ? gdata.x : gdata.y);
+
+      ctx.font = `normal normal normal ${showValue.fontSize}px Roboto`;
+      ctx.fillStyle = showValue.textColor;
+      ctx.lineWidth = 1;
+      ctx.textBaseline = isHorizontal ? 'middle' : 'bottom';
+      ctx.textAlign = 'center';
+
+      const vw = Math.round(ctx.measureText(value).width);
+      const vh = showValue.fontSize + 4;
+
+      if (vw < w && vh < Math.abs(h)) {
+        if (isHorizontal) {
+          ctx.fillText(value, x + w - vw, y + (h / 2));
+        } else {
+          ctx.fillText(value, x + (w / 2), y + h + vh);
+        }
+      }
+
+      ctx.restore();
+    }
+
+    ctx.restore();
+  }
+
+  /**
+   * Find graph item
+   * @param {array}    offset          mouse position
+   * @param {boolean}  isHorizontal    determines if a horizontal option's value
+   *
+   * @returns {object} graph item
+   */
+  findGraphData(offset, isHorizontal) {
+    return isHorizontal ? this.findGraphRangeCount(offset) : this.findGraphRange(offset);
+  }
+
+  /**
+   * Find graph item
+   * @param {array}    offset          mouse position
+   *
+   * @returns {object} graph item
+   */
+  findGraphRange(offset) {
+    const xp = offset[0];
+    const yp = offset[1];
+    const item = { data: null, hit: false, color: this.color };
+    const gdata = this.data;
+
+    let s = 0;
+    let e = gdata.length - 1;
+
+    while (s <= e) {
+      const m = Math.floor((s + e) / 2);
+      const sx = gdata[m].xp;
+      const sy = gdata[m].yp;
+      const ex = sx + gdata[m].w;
+      const ey = sy + gdata[m].h;
+
+      if ((sx <= xp) && (xp <= ex)) {
+        item.data = gdata[m];
+        item.index = m;
+
+        if ((ey <= yp) && (yp <= sy)) {
+          item.hit = true;
+        }
+        return item;
+      } else if (sx + 4 < xp) {
+        s = m + 1;
+      } else {
+        e = m - 1;
+      }
+    }
+
+    return item;
+  }
+
+  /**
+   * Find graph item (horizontal)
+   * @param {array}    offset          mouse position
+   *
+   * @returns {object} graph item
+   */
+  findGraphRangeCount(offset) {
+    const xp = offset[0];
+    const yp = offset[1];
+    const item = { data: null, hit: false, color: this.color };
+    const gdata = this.data;
+
+    let s = 0;
+    let e = gdata.length - 1;
+
+    while (s <= e) {
+      const m = Math.floor((s + e) / 2);
+      const sx = gdata[m].xp;
+      const sy = gdata[m].yp;
+      const ex = sx + gdata[m].w;
+      const ey = sy + gdata[m].h;
+
+      if ((ey <= yp) && (yp <= sy)) {
+        item.data = gdata[m];
+        item.index = m;
+
+        if ((sx <= xp) && (xp <= ex)) {
+          item.hit = true;
+        }
+        return item;
+      } else if (ey < yp) {
+        e = m - 1;
+      } else {
+        s = m + 1;
+      }
+    }
+
+    return item;
+  }
 }
 
 export default Bar;