evui 2.0.9 → 2.1.2

package/src/components/chart/scale/scale.step.js

@@ -1,54 +1,63 @@
-import moment from 'moment';
 import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
 class StepScale extends Scale {
   constructor(type, opt, ctx, labels) {
     super(type, opt, ctx);
-    this.integratedLabels = labels;
+    this.labels = labels;
   }
 
-  calculateScaleRange(minMax) {
-    const stepMinMax = this.timeMode ? minMax : Util.getStringMinMax(this.integratedLabels);
+  /**
+   * Calculate min/max value, label and size information for step scale
+   * @param {object} minMax       min/max information (unused on step scale)
+   * @param {object} chartRect    chart size information
+   *
+   * @returns {object} min/max value and label
+   */
+  calculateScaleRange(minMax, chartRect) {
+    const stepMinMax = Util.getStringMinMax(this.labels);
     const maxValue = stepMinMax.max;
     const minValue = stepMinMax.min;
+    const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
 
     return {
       min: minValue,
       max: maxValue,
-      minLabel: this.getLabelFormat(minValue),
-      maxLabel: this.getLabelFormat(maxValue),
-      size: Util.calcTextSize(this.getLabelFormat(maxValue), Util.getLabelStyle(this.labelStyle)),
+      minLabel: this.getLabelFormat(minValue, maxWidth),
+      maxLabel: this.getLabelFormat(maxValue, maxWidth),
+      size: Util.calcTextSize(
+        this.getLabelFormat(maxValue, maxWidth),
+        Util.getLabelStyle(this.labelStyle),
+      ),
     };
   }
 
+  /**
+   * With range information, calculate how many labels in axis
+   * @param {object}  range          min/max information
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
   calculateSteps(range) {
-    const labels = this.integratedLabels;
-    const maxSteps = range.maxSteps;
-
-    let interval = 1;
-    let numberOfSteps;
-
-    const graphRange = labels.length;
-
-    numberOfSteps = Math.round(graphRange / interval);
-
-    while (numberOfSteps > maxSteps) {
-      interval *= 2;
-      numberOfSteps = Math.round(graphRange / interval);
-    }
-
     return {
-      steps: numberOfSteps,
-      interval,
+      steps: this.labels.length,
+      interval: 1,
       graphMin: range.minValue,
       graphMax: range.maxValue,
     };
   }
 
+  /**
+   * Draw axis
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   * @param {object} stepInfo       label steps information
+   *
+   * @returns {undefined}
+   */
   draw(chartRect, labelOffset, stepInfo) {
     const ctx = this.ctx;
-    const labels = this.integratedLabels;
+    const labels = this.labels;
     const aPos = {
       x1: chartRect.x1 + labelOffset.left,
       x2: chartRect.x2 - labelOffset.right,
@@ -57,12 +66,12 @@ class StepScale extends Scale {
     };
 
     const steps = stepInfo.steps;
-    const interval = stepInfo.interval;
 
     const startPoint = aPos[this.units.rectStart];
     const endPoint = aPos[this.units.rectEnd];
     const offsetPoint = aPos[this.units.rectOffset(this.position)];
     const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
+    const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
 
     // label font 설정
     ctx.font = Util.getLabelStyle(this.labelStyle);
@@ -103,23 +112,15 @@ class StepScale extends Scale {
 
     let labelText;
     let labelPoint;
-    let prevIndex = 0;
 
-    labels.reduce((prev, curr, index) => {
+    labels.forEach((item, index) => {
       labelCenter = Math.round(startPoint + (labelGap * index));
       linePosition = labelCenter + aliasPixel;
-      labelText = this.getLabelFormat(curr);
+      labelText = this.getLabelFormat(item, maxWidth);
 
       if (this.type === 'x') {
         labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-        if (this.timeMode) {
-          if (prev.label !== labelText && (index === 0 || index - prev.index > interval)) {
-            prevIndex = index;
-            ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
-          }
-        } else {
-          ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
-        }
+        ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
 
         if (index > 0 && this.showGrid) {
           ctx.moveTo(linePosition, offsetPoint);
@@ -127,14 +128,7 @@ class StepScale extends Scale {
         }
       } else {
         labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-        if (this.timeMode) {
-          if (prev.label !== labelText && (index === 0 || index - prev.index > interval)) {
-            prevIndex = index;
-            ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2));
-          }
-        } else {
-          ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2));
-        }
+        ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2));
 
         if (index > 0 && this.showGrid) {
           ctx.moveTo(offsetPoint, linePosition);
@@ -142,18 +136,61 @@ class StepScale extends Scale {
         }
       }
       ctx.stroke();
-
-      return { label: labelText, index: prevIndex };
-    }, { label: '', index: prevIndex });
+    });
 
     ctx.closePath();
   }
 
-  getLabelFormat(value) {
-    if (this.timeMode) {
-      return moment(new Date(value)).format(this.timeFormat);
+  /**
+   * Transforming label by designated format
+   * @param {string} value       label value
+   * @param {number} maxWidth    max width for each label
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value, maxWidth) {
+    return this.labelStyle.fitWidth ? this.fittingString(value, maxWidth) : value;
+  }
+
+  /**
+   * Transforming ellipsis label by designated format and specific width
+   * @param {string} value       label value
+   * @param {number} maxWidth    max width for each label
+   *
+   * @returns {string} formatted label
+   */
+  fittingString(value, maxWidth) {
+    if (!value) {
+      return '';
+    }
+
+    if (!maxWidth) {
+      return value;
+    }
+
+    const ctx = this.ctx;
+
+    ctx.save();
+    ctx.font = Util.getLabelStyle(this.labelStyle);
+    const dir = this.labelStyle.fitDir;
+
+    const ellipsis = '…';
+    const ellipsisWidth = ctx.measureText(ellipsis).width;
+
+    let str = value;
+    let width = ctx.measureText(str).width;
+
+    if (width <= maxWidth || width <= ellipsisWidth) {
+      return str;
     }
-    return value;
+
+    let len = str.length;
+    while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+      str = dir === 'right' ? str.substring(0, len) : str.substring(1, str.length);
+      width = ctx.measureText(str).width;
+    }
+
+    return dir === 'right' ? str + ellipsis : ellipsis + str;
   }
 }
 

package/src/components/chart/scale/scale.time.category.js

@@ -0,0 +1,204 @@
+import moment from 'moment';
+import { TIME_INTERVALS } from '../helpers/helpers.constant';
+import Scale from './scale';
+import Util from '../helpers/helpers.util';
+
+class TimeCategoryScale extends Scale {
+  constructor(type, opt, ctx, labels) {
+    super(type, opt, ctx);
+    this.labels = labels;
+  }
+
+  /**
+   * Transforming label by designated format
+   * @param {number} value       label value
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value) {
+    return moment(value).format(this.timeFormat);
+  }
+
+  /**
+   * Calculate interval
+   * @param {object} range    range information
+   *
+   * @returns {number} interval
+   */
+  getInterval(range) {
+    const max = range.maxValue;
+    const min = range.minValue;
+    const step = range.maxSteps;
+
+    if (this.interval) {
+      if (typeof this.interval === 'string') {
+        return TIME_INTERVALS[this.interval].size;
+      } else if (typeof this.interval === 'object') {
+        return this.interval.time * TIME_INTERVALS[this.interval.unit].size;
+      } else if (typeof this.interval === 'number') {
+        return this.interval;
+      }
+    }
+    return Math.ceil((max - min) / step);
+  }
+
+  /**
+   * With range information, calculate how many labels in axis
+   * @param {object} range    min/max information
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
+  calculateSteps(range) {
+    const { maxValue, minValue, maxSteps } = range;
+    const rawInterval = this.getInterval(range);
+
+    let interval = rawInterval;
+    let increase = minValue;
+    let numberOfSteps;
+
+    while (increase < maxValue) {
+      increase += interval;
+    }
+
+    const graphMax = increase > maxValue ? maxValue : increase;
+    const graphMin = minValue;
+    const graphRange = graphMax - graphMin;
+
+    numberOfSteps = Math.round(graphRange / interval) + 1;
+    const oriSteps = numberOfSteps;
+
+    if (maxValue === 1) {
+      interval = 0.2;
+      numberOfSteps = 5;
+    }
+
+    while (numberOfSteps > maxSteps) {
+      interval *= 2;
+      numberOfSteps = Math.round(graphRange / interval);
+      interval = Math.ceil(graphRange / numberOfSteps);
+    }
+
+    if (graphMax - graphMin > (numberOfSteps * interval)) {
+      interval = Math.ceil((graphMax - graphMin) / numberOfSteps);
+    }
+
+
+    return {
+      steps: numberOfSteps,
+      oriSteps,
+      interval,
+      rawInterval,
+      graphMin,
+      graphMax,
+    };
+  }
+
+  /**
+   * Draw axis
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   * @param {object} stepInfo       label steps information
+   *
+   * @returns {undefined}
+   */
+  draw(chartRect, labelOffset, stepInfo) {
+    const ctx = this.ctx;
+    const labels = this.labels;
+    const aPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+
+    const steps = stepInfo.steps;
+    const axisMin = stepInfo.graphMin;
+    const axisMax = stepInfo.graphMax;
+    const stepValue = stepInfo.rawInterval;
+    const oriSteps = stepInfo.oriSteps;
+    const count = Math.round(oriSteps / steps);
+
+    let startPoint = aPos[this.units.rectStart];
+    const endPoint = aPos[this.units.rectEnd];
+    const offsetPoint = aPos[this.units.rectOffset(this.position)];
+    const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
+
+    // label font 설정
+    ctx.font = Util.getLabelStyle(this.labelStyle);
+
+    if (this.type === 'x') {
+      ctx.textAlign = 'center';
+      ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top';
+    } else {
+      ctx.textAlign = this.position === 'left' ? 'right' : 'left';
+      ctx.textBaseline = 'middle';
+    }
+
+    ctx.fillStyle = this.labelStyle.color;
+    ctx.lineWidth = 1;
+    const aliasPixel = Util.aliasPixel(ctx.lineWidth);
+
+    ctx.beginPath();
+    ctx.strokeStyle = this.axisLineColor;
+    if (this.type === 'x') {
+      ctx.moveTo(startPoint, offsetPoint + aliasPixel);
+      ctx.lineTo(endPoint, offsetPoint + aliasPixel);
+    } else {
+      ctx.moveTo(offsetPoint + aliasPixel, startPoint);
+      ctx.lineTo(offsetPoint + aliasPixel, endPoint);
+    }
+    ctx.stroke();
+    ctx.closePath();
+
+    if (steps === 0 || axisMin === null) {
+      return;
+    }
+
+    const graphGap = (endPoint - startPoint) / (labels.length || 1);
+    if (this.categoryMode) {
+      startPoint += Math.ceil(graphGap / 2) - 2;
+    }
+
+    const ticks = [];
+    let labelCenter = null;
+    let linePosition = null;
+
+    ctx.beginPath();
+    ctx.strokeStyle = this.gridLineColor;
+
+    let labelText;
+    for (let ix = 0; ix < oriSteps; ix += count) {
+      ticks[ix] = axisMin + (ix * stepValue);
+
+      labelCenter = Math.round(startPoint + (graphGap * ix));
+      linePosition = labelCenter + aliasPixel;
+      labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+
+      let labelPoint;
+
+      if (this.type === 'x') {
+        labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+        ctx.fillText(labelText, labelCenter, labelPoint);
+
+        if ((ix !== 0 && ix < oriSteps && this.showGrid)) {
+          ctx.moveTo(linePosition, offsetPoint);
+          ctx.lineTo(linePosition, offsetCounterPoint);
+        }
+      } else {
+        labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+        ctx.fillText(labelText, labelPoint, labelCenter);
+
+        if ((ix !== 0 && ix < oriSteps && this.showGrid)) {
+          ctx.moveTo(offsetPoint, linePosition);
+          ctx.lineTo(offsetCounterPoint, linePosition);
+        }
+      }
+
+      ctx.stroke();
+    }
+
+    ctx.closePath();
+  }
+}
+
+export default TimeCategoryScale;

package/src/components/chart/scale/scale.time.js

@@ -3,17 +3,35 @@ import { TIME_INTERVALS } from '../helpers/helpers.constant';
 import Scale from './scale';
 
 class TimeScale extends Scale {
+  /**
+   * Transforming label by designated format
+   * @param {number} value       label value
+   *
+   * @returns {string} formatted label
+   */
   getLabelFormat(value) {
     return moment(value).format(this.timeFormat);
   }
 
+  /**
+   * Calculate interval
+   * @param {object} range    range information
+   *
+   * @returns {number} interval
+   */
   getInterval(range) {
     const max = range.maxValue;
     const min = range.minValue;
     const step = range.maxSteps;
 
     if (this.interval) {
-      return TIME_INTERVALS[this.interval].size;
+      if (typeof this.interval === 'string') {
+        return TIME_INTERVALS[this.interval].size;
+      } else if (typeof this.interval === 'object') {
+        return this.interval.time * TIME_INTERVALS[this.interval.unit].size;
+      } else if (typeof this.interval === 'number') {
+        return this.interval;
+      }
     }
     return Math.ceil((max - min) / step);
   }

package/src/components/checkbox/checkbox-group.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <slot/>
+    <slot />
   </div>
 </template>
 
@@ -41,16 +41,10 @@
     },
     mounted() {
       this.initValue();
-      const bindValue = this.bindValue;
-      this.$on('change-event', (e) => {
-        const targetValue = e.target.value;
-        if (e.currentTarget.checked && bindValue.indexOf(targetValue) === -1) {
-          bindValue.push(targetValue);
-        } else if (!e.currentTarget.checked && bindValue.indexOf(targetValue) > -1) {
-          bindValue.splice(bindValue.indexOf(targetValue), 1);
-        }
-        this.$parent.$emit('input', bindValue);
-      });
+      this.$on('on-change', this.onChange);
+    },
+    beforeDestroy() {
+      this.$off('on-change', this.onChange);
     },
     methods: {
       initValue(array) {
@@ -64,6 +58,16 @@
           });
         }
       },
+      onChange(e) {
+        const bindValue = this.bindValue;
+        const targetValue = e.target.value;
+        if (e.currentTarget.checked && bindValue.indexOf(targetValue) === -1) {
+          bindValue.push(targetValue);
+        } else if (!e.currentTarget.checked && bindValue.indexOf(targetValue) > -1) {
+          bindValue.splice(bindValue.indexOf(targetValue), 1);
+        }
+        this.$parent.$emit('input', bindValue);
+      },
     },
   };
 </script>