evui 3.3.17 → 3.3.18

package/dist/evui.umd.js

@@ -7966,7 +7966,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.17\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.18\"}");
 
 /***/ }),
 
@@ -32003,7 +32003,15 @@ function reverse(array) {
    * @returns {string} computed value
    */
   getLabelStyle: function getLabelStyle(style) {
-    return "normal normal ".concat(style.fontWeight, " ").concat(style.fontSize, "px ").concat(style.fontFamily);
+    var _style$fontStyle = style.fontStyle,
+        fontStyle = _style$fontStyle === void 0 ? 'normal' : _style$fontStyle,
+        _style$fontWeight = style.fontWeight,
+        fontWeight = _style$fontWeight === void 0 ? 'norma' : _style$fontWeight,
+        _style$fontSize = style.fontSize,
+        fontSize = _style$fontSize === void 0 ? '12' : _style$fontSize,
+        _style$fontFamily = style.fontFamily,
+        fontFamily = _style$fontFamily === void 0 ? 'Roboto' : _style$fontFamily;
+    return "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily);
   },
 
   /**
@@ -34185,6 +34193,16 @@ var AXIS_OPTION = {
     fontWeight: 400,
     fitWidth: false,
     fitDir: 'right'
+  },
+  title: {
+    use: false,
+    text: null,
+    fontWeight: 400,
+    fontSize: 12,
+    fontFamily: 'Roboto',
+    textAlign: 'right',
+    fontStyle: 'normal',
+    color: '#808080'
   }
 };
 var PLOT_LINE_OPTION = {
@@ -37078,6 +37096,52 @@ var scale_Scale = /*#__PURE__*/function () {
         graphMax: graphMax
       };
     }
+    /**
+     * Draw Axis Title
+     *
+     * @param {object} chartRect      min/max information
+     * @param {object} labelOffset    label offset information
+     *
+     * @returns {undefined}
+     */
+
+  }, {
+    key: "drawAxisTitle",
+    value: function drawAxisTitle(chartRect, labelOffset) {
+      var titleOpt = this.title;
+
+      if (!(titleOpt !== null && titleOpt !== void 0 && titleOpt.use) || isNaN(titleOpt.fontSize)) {
+        return;
+      }
+
+      var ctx = this.ctx;
+      ctx.save();
+      ctx.font = helpers_util.getLabelStyle(titleOpt);
+      ctx.fillStyle = titleOpt.color;
+      ctx.textAlign = titleOpt.textAlign;
+      var axisLinePosition = {
+        xLeft: chartRect.x1 + labelOffset.left,
+        xRight: chartRect.x2 - labelOffset.right,
+        yTop: chartRect.y1
+      };
+      var titleXPos;
+      var titleYPos;
+      var margin = 10;
+
+      if (this.type === 'x') {
+        titleXPos = axisLinePosition.xRight;
+        titleYPos = chartRect.y2 + titleOpt.fontSize + margin;
+      } else {
+        titleYPos = axisLinePosition.yTop - titleOpt.fontSize - margin;
+        titleXPos = axisLinePosition.xLeft;
+      }
+
+      if (titleXPos > 0 && titleYPos > 0) {
+        ctx.fillText(titleOpt.text, titleXPos, titleYPos);
+      }
+
+      ctx.restore();
+    }
     /**
      * Draw axis
      * @param {object} chartRect      min/max information
@@ -37111,7 +37175,8 @@ var scale_Scale = /*#__PURE__*/function () {
       var endPoint = aPos[this.units.rectEnd];
       var offsetPoint = aPos[this.units.rectOffset(this.position)];
       var offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
-      var aliasPixel; // label font 설정
+      var aliasPixel;
+      this.drawAxisTitle(chartRect, labelOffset); // label font 설정
 
       ctx.font = helpers_util.getLabelStyle(this.labelStyle);
       ctx.fillStyle = this.labelStyle.color;
@@ -38148,6 +38213,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
       var offsetPoint = aPos[this.units.rectOffset(this.position)];
       var offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
       var maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+      this.drawAxisTitle(chartRect, labelOffset);
 
       if ((_this$labelStyle = this.labelStyle) !== null && _this$labelStyle !== void 0 && _this$labelStyle.show) {
         // label font 설정
@@ -38561,7 +38627,8 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
       var startPoint = aPos[this.units.rectStart];
       var endPoint = aPos[this.units.rectEnd];
       var offsetPoint = aPos[this.units.rectOffset(this.position)];
-      var offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)]; // label font 설정
+      var offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
+      this.drawAxisTitle(chartRect, labelOffset); // label font 설정
 
       ctx.font = helpers_util.getLabelStyle(this.labelStyle);
 
@@ -40687,6 +40754,8 @@ var plugins_tooltip_modules = {
    * @returns {undefined}
    */
   drawTooltip: function drawTooltip(hitInfo, context) {
+    var _opt$formatter, _opt$formatter2;
+
     var ctx = context;
     var items = hitInfo.items;
     var sId = hitInfo.hitId;
@@ -40704,10 +40773,19 @@ var plugins_tooltip_modules = {
       l: 16
     };
     var isHorizontal = this.options.horizontal;
-    var opt = this.options.tooltip; // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
+    var opt = this.options.tooltip;
+    var valueFormatter = typeof opt.formatter === 'function' ? opt.formatter : (_opt$formatter = opt.formatter) === null || _opt$formatter === void 0 ? void 0 : _opt$formatter.value;
+    var titleFormatter = (_opt$formatter2 = opt.formatter) === null || _opt$formatter2 === void 0 ? void 0 : _opt$formatter2.title; // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
 
     if (this.axesX.length && this.axesY.length) {
-      this.tooltipHeaderDOM.textContent = this.options.horizontal ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y) : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+      if (titleFormatter) {
+        this.tooltipHeaderDOM.textContent = titleFormatter({
+          x: hitItem.x,
+          y: hitItem.y
+        });
+      } else {
+        this.tooltipHeaderDOM.textContent = this.options.horizontal ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y) : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+      }
     }
 
     if (opt.textOverflow) {
@@ -40828,14 +40906,14 @@ var plugins_tooltip_modules = {
 
       var formattedTxt = void 0;
 
-      if (opt.formatter) {
+      if (valueFormatter) {
         if (this.options.type === 'pie') {
-          formattedTxt = opt.formatter({
+          formattedTxt = valueFormatter({
             value: value,
             name: name
           });
         } else {
-          formattedTxt = opt.formatter({
+          formattedTxt = valueFormatter({
             x: this.options.horizontal ? value : hitItem.x,
             y: this.options.horizontal ? hitItem.y : value,
             name: name
@@ -40843,7 +40921,7 @@ var plugins_tooltip_modules = {
         }
       }
 
-      if (!opt.formatter || typeof formattedTxt !== 'string') {
+      if (!valueFormatter || typeof formattedTxt !== 'string') {
         formattedTxt = numberWithComma(value);
       }
 
@@ -40868,7 +40946,7 @@ var plugins_tooltip_modules = {
    * @returns {undefined}
    */
   drawToolTipForHeatMap: function drawToolTipForHeatMap(hitInfo, context) {
-    var _colorAxis$find;
+    var _opt$formatter3, _opt$formatter4, _colorAxis$find;
 
     var ctx = context;
     var items = hitInfo.items;
@@ -40884,6 +40962,8 @@ var plugins_tooltip_modules = {
     };
     var isHorizontal = this.options.horizontal;
     var opt = this.options.tooltip;
+    var valueFormatter = typeof opt.formatter === 'function' ? opt.formatter : (_opt$formatter3 = opt.formatter) === null || _opt$formatter3 === void 0 ? void 0 : _opt$formatter3.value;
+    var titleFormatter = (_opt$formatter4 = opt.formatter) === null || _opt$formatter4 === void 0 ? void 0 : _opt$formatter4.title;
     var colorAxis = Object.values(this.seriesList)[0].colorAxis;
     var isShow = (_colorAxis$find = colorAxis.find(function (_ref) {
       var id = _ref.id;
@@ -40893,14 +40973,18 @@ var plugins_tooltip_modules = {
     if (!isShow) {
       this.tooltipClear();
       return;
-    }
+    } // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
 
-    var xValue = '';
-    var yValue = ''; // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
 
     if (this.axesX.length) {
-      xValue = this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
-      this.tooltipHeaderDOM.textContent = xValue;
+      if (titleFormatter) {
+        this.tooltipHeaderDOM.textContent = titleFormatter({
+          x: hitItem.x,
+          y: hitItem.y
+        });
+      } else {
+        this.tooltipHeaderDOM.textContent = this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+      }
     }
 
     if (opt.textOverflow) {
@@ -40939,22 +41023,21 @@ var plugins_tooltip_modules = {
     ctx.textBaseline = 'Bottom';
 
     if (this.axesY.length) {
-      yValue = this.axesY[hitAxis.y].getLabelFormat(hitItem.y);
-      ctx.fillText(yValue, itemX + COLOR_MARGIN, itemY);
+      ctx.fillText(this.axesY[hitAxis.y].getLabelFormat(hitItem.y), itemX + COLOR_MARGIN, itemY);
     } // 3. Draw value
 
 
     var formattedTxt = itemValue;
 
-    if (opt.formatter) {
-      formattedTxt = opt.formatter({
-        x: xValue,
-        y: yValue,
+    if (valueFormatter) {
+      formattedTxt = valueFormatter({
+        x: hitItem.x,
+        y: hitItem.y,
         value: itemValue
       });
     }
 
-    if ((!opt.formatter || typeof formattedTxt !== 'string') && itemValue !== 'error') {
+    if ((!valueFormatter || typeof formattedTxt !== 'string') && itemValue !== 'error') {
       formattedTxt = numberWithComma(itemValue);
     }
 
@@ -41028,6 +41111,8 @@ var plugins_tooltip_modules = {
     var textLineCnt = 1;
 
     for (var ix = 0; ix < seriesList.length; ix++) {
+      var _opt$formatter5;
+
       var gdata = seriesList[ix].data;
       var color = seriesList[ix].color;
       var name = seriesList[ix].name;
@@ -41098,16 +41183,17 @@ var plugins_tooltip_modules = {
       ctx.save(); // 3. Draw value
 
       var formattedTxt = void 0;
+      var formatter = typeof opt.formatter === 'function' ? opt.formatter : (_opt$formatter5 = opt.formatter) === null || _opt$formatter5 === void 0 ? void 0 : _opt$formatter5.value;
 
-      if (opt.formatter) {
-        formattedTxt = opt.formatter({
+      if (formatter) {
+        formattedTxt = formatter({
           x: xValue,
           y: yValue,
           name: name
         });
       }
 
-      if (!opt.formatter || typeof formattedTxt !== 'string') {
+      if (!formatter || typeof formattedTxt !== 'string') {
         var formattedXValue = xAxisOpt.type === 'time' ? dayjs_min_default()(xValue).format(xAxisOpt.timeFormat) : numberWithComma(xValue);
         var formattedYValue = numberWithComma(yValue);
         formattedTxt = "".concat(formattedXValue, ", ").concat(formattedYValue);
@@ -42650,19 +42736,39 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "getChartRect",
     value: function getChartRect() {
+      var _this$options$axesX$, _this$options$axesY$;
+
       var _this$getChartDOMRect = this.getChartDOMRect(),
           width = _this$getChartDOMRect.width,
           height = _this$getChartDOMRect.height;
 
       var padding = this.options.padding;
+      var xAxisTitleOpt = (_this$options$axesX$ = this.options.axesX[0]) === null || _this$options$axesX$ === void 0 ? void 0 : _this$options$axesX$.title;
+      var yAxisTitleOpt = (_this$options$axesY$ = this.options.axesY[0]) === null || _this$options$axesY$ === void 0 ? void 0 : _this$options$axesY$.title;
+      var titleMargin = 10;
+      var xAxisTitleHeight = 0;
+
+      if (xAxisTitleOpt !== null && xAxisTitleOpt !== void 0 && xAxisTitleOpt.use && xAxisTitleOpt !== null && xAxisTitleOpt !== void 0 && xAxisTitleOpt.text) {
+        var fontSize = isNaN(xAxisTitleOpt === null || xAxisTitleOpt === void 0 ? void 0 : xAxisTitleOpt.fontSize) ? 12 : xAxisTitleOpt === null || xAxisTitleOpt === void 0 ? void 0 : xAxisTitleOpt.fontSize;
+        xAxisTitleHeight = fontSize + titleMargin;
+      }
+
+      var yAxisTitleHeight = 0;
+
+      if (yAxisTitleOpt !== null && yAxisTitleOpt !== void 0 && yAxisTitleOpt.use && yAxisTitleOpt !== null && yAxisTitleOpt !== void 0 && yAxisTitleOpt.text) {
+        var _fontSize = isNaN(yAxisTitleOpt === null || yAxisTitleOpt === void 0 ? void 0 : yAxisTitleOpt.fontSize) ? 12 : yAxisTitleOpt === null || yAxisTitleOpt === void 0 ? void 0 : yAxisTitleOpt.fontSize;
+
+        yAxisTitleHeight = _fontSize + titleMargin;
+      }
+
       var horizontalPadding = padding.left + padding.right;
-      var verticalPadding = padding.top + padding.bottom;
+      var verticalPadding = padding.top + padding.bottom + xAxisTitleHeight + yAxisTitleHeight;
       var chartWidth = width > horizontalPadding ? width - horizontalPadding : width;
       var chartHeight = height > verticalPadding ? height - verticalPadding : height;
       var x1 = padding.left;
       var x2 = Math.max(width - padding.right, x1 + 2);
-      var y1 = padding.top;
-      var y2 = Math.max(height - padding.bottom, y1 + 2);
+      var y1 = padding.top + yAxisTitleHeight;
+      var y2 = Math.max(height - padding.bottom - xAxisTitleHeight, y1 + 2);
       return {
         x1: x1,
         x2: x2,