evui 3.3.9 → 3.3.12

package/src/components/chart/plugins/plugins.legend.js

@@ -30,12 +30,20 @@ const modules = {
    * @returns {undefined}
    */
   initLegend() {
+    this.isHeatMapType = this.options.type === 'heatMap';
     if (!this.isInitLegend) {
       this.createLegendLayout();
+    }
+
+    if (this.isHeatMapType) {
+      this.initEventForColorLegend();
+      this.addColorLegendList();
+    } else {
       this.initEvent();
+      this.addLegendList();
     }
+    this.initResizeEvent();
 
-    this.addLegendList();
     this.isInitLegend = true;
     this.isLegendMove = false;
   },
@@ -66,12 +74,36 @@ const modules = {
     });
   },
 
+  addColorLegendList() {
+    const seriesList = this.seriesList;
+
+    Object.values(seriesList).forEach((series) => {
+      if (!series.isExistGrp && series.showLegend) {
+        const { colorAxis, valueOpt } = series;
+        colorAxis.forEach((colorItem, index) => {
+          const maxValue = valueOpt.interval * (index + 1);
+          const minValue = maxValue - valueOpt.interval;
+          const name = valueOpt.existError && index === colorAxis.length - 1
+            ? 'error' : `${minValue} - ${maxValue}`;
+          this.addLegend({
+            cId: colorItem.id,
+            color: colorItem.value,
+            name,
+          });
+        });
+      }
+    });
+  },
+
   /**
    * Initialize legend event
    *
    * @returns {undefined}
    */
   initEvent() {
+    if (this.isInitLegend) {
+      return;
+    }
     /**
      * callback for legendBoxDOM to show/hide clicked series
      *
@@ -106,13 +138,24 @@ const modules = {
       if (isActive) {
         this.seriesInfo.count--;
         colorDOM.style.backgroundColor = opt.inactive;
+        colorDOM.style.borderColor = opt.inactive;
         nameDOM.style.color = opt.inactive;
       } else {
         this.seriesInfo.count++;
+
+        let seriesColor;
         if (typeof series.color !== 'string') {
-          colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+          seriesColor = series.color[series.color.length - 1][1];
+        } else {
+          seriesColor = series.color;
+        }
+
+        if (series.type === 'line' && series.fill) {
+          colorDOM.style.height = '8px';
+          colorDOM.style.backgroundColor = `${seriesColor}80`;
+          colorDOM.style.border = `1px solid ${seriesColor}`;
         } else {
-          colorDOM.style.backgroundColor = series.color;
+          colorDOM.style.backgroundColor = seriesColor;
         }
 
         nameDOM.style.color = opt.color;
@@ -129,44 +172,117 @@ const modules = {
     };
 
     /**
-     * callback for resizeDOM click event
-     * 1. hide resizeDOM
-     * 2. show ghost DOM on same position with hidden resizeDOM
+     * callback for legendBoxDOM hovering
      *
      * @returns {undefined}
      */
-    this.onResizeMouseDown = (e) => {
-      e.stopPropagation();
-      e.preventDefault();
+    this.onLegendBoxOver = (e) => {
+      const type = e.target.dataset.type;
 
-      const opt = this.options;
-      const pos = opt.legend.position;
-      const title = opt.title.show ? opt.title.height : 0;
+      let targetDOM;
+      if (type === 'container') {
+        targetDOM = e.target;
+      } else if (type === 'name' || type === 'color') {
+        targetDOM = e.target.parentElement;
+      } else {
+        return;
+      }
+      const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
+      const targetId = nameDOM.series.sId;
 
-      const ghostDOM = this.ghostDOM;
-      this.resizeDOM.style.display = 'none';
-      this.wrapperDOM.appendChild(ghostDOM);
+      Object.values(this.seriesList).forEach((series) => {
+        series.state = series.sId === targetId ? 'highlight' : 'downplay';
+      });
 
-      // mouse down 시, resizeDOM의 위치를 기반으로 ghostDOM의 위치를 세팅
-      if (pos === 'left' || pos === 'right') {
-        ghostDOM.style.top = `${title}px`;
-        ghostDOM.style.left = this.resizeDOM.style.left;
-        ghostDOM.style.right = this.resizeDOM.style.right;
-        ghostDOM.style.height = this.resizeDOM.style.height;
+      this.update({
+        updateSeries: false,
+        updateSelTip: { update: false, keepDomain: false },
+        hitInfo: { sId: targetId },
+      });
+    };
+
+    /**
+     * callback for mouseleave event on legendBoxDOM
+     *
+     * @returns {undefined}
+     */
+    this.onLegendBoxLeave = () => {
+      Object.values(this.seriesList).forEach((series) => {
+        series.state = 'normal';
+      });
+
+      this.update({
+        updateSeries: false,
+        updateSelTip: { update: false, keepDomain: false },
+      });
+    };
+
+    this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
+    this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
+    this.legendBoxDOM.addEventListener('mouseleave', this.onLegendBoxLeave);
+
+    this.initResizeEvent();
+  },
+
+  initEventForColorLegend() {
+    if (this.isInitLegend) {
+      return;
+    }
+    /**
+     * callback for legendBoxDOM to show/hide clicked series
+     *
+     * @returns {undefined}
+     */
+    this.onLegendBoxClick = (e) => {
+      const opt = this.options.legend;
+      const series = Object.values(this.seriesList)[0];
+      const type = e.target.dataset.type;
+
+      let targetDOM;
+      if (type === 'container') {
+        targetDOM = e.target;
+      } else if (type === 'name' || type === 'color') {
+        targetDOM = e.target.parentElement;
       } else {
-        ghostDOM.classList.add('horizontal');
+        return;
+      }
 
-        if (pos === 'top') {
-          ghostDOM.style.top = this.resizeDOM.style.top;
-        } else if (pos === 'bottom') {
-          ghostDOM.style.bottom = this.resizeDOM.style.bottom;
-        }
+      const colorDOM = targetDOM?.getElementsByClassName('ev-chart-legend-color')[0];
+      const nameDOM = targetDOM?.getElementsByClassName('ev-chart-legend-name')[0];
+      const isActive = !colorDOM?.className.includes('inactive');
+      const targetId = nameDOM.series.cId;
+      const activeCount = series.colorAxis.filter(colorItem => colorItem.show).length;
+
+      if (isActive && activeCount === 1) {
+        return;
       }
 
-      this.wrapperDOM.addEventListener('mousemove', this.mouseMove, false);
-      this.wrapperDOM.addEventListener('mouseup', this.mouseUp, false);
-    };
+      if (!colorDOM || !nameDOM) {
+        return;
+      }
+
+      if (isActive) {
+        colorDOM.style.backgroundColor = opt.inactive;
+        colorDOM.style.borderColor = opt.inactive;
+        nameDOM.style.color = opt.inactive;
+      } else {
+        colorDOM.style.backgroundColor = nameDOM.series.color;
+        nameDOM.style.color = opt.color;
+      }
+
+      const targetIndex = series.colorAxis.findIndex(colorItem => colorItem.id === targetId);
+      if (targetIndex > -1) {
+        series.colorAxis[targetIndex].show = !isActive;
+      }
+
+      colorDOM.classList.toggle('inactive');
+      nameDOM.classList.toggle('inactive');
 
+      this.update({
+        updateSeries: false,
+        updateSelTip: { update: true, keepDomain: true },
+      });
+    };
     /**
      * callback for legendBoxDOM hovering
      *
@@ -174,6 +290,7 @@ const modules = {
      */
     this.onLegendBoxOver = (e) => {
       const type = e.target.dataset.type;
+      const series = Object.values(this.seriesList)[0];
 
       let targetDOM;
       if (type === 'container') {
@@ -184,10 +301,10 @@ const modules = {
         return;
       }
       const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
-      const targetId = nameDOM.series.sId;
+      const targetId = nameDOM.series.cId;
 
-      Object.values(this.seriesList).forEach((series) => {
-        series.state = series.sId === targetId ? 'highlight' : 'downplay';
+      series.colorAxis.forEach((colorItem) => {
+        colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
       });
 
       this.update({
@@ -202,8 +319,9 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxLeave = () => {
-      Object.values(this.seriesList).forEach((series) => {
-        series.state = 'normal';
+      const series = Object.values(this.seriesList)[0];
+      series.colorAxis.forEach((item) => {
+        item.state = 'normal';
       });
 
       this.update({
@@ -211,11 +329,53 @@ const modules = {
         updateSelTip: { update: false, keepDomain: false },
       });
     };
-
     this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
     this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
     this.legendBoxDOM.addEventListener('mouseleave', this.onLegendBoxLeave);
 
+    this.initResizeEvent();
+  },
+
+  initResizeEvent() {
+    /**
+     * callback for resizeDOM click event
+     * 1. hide resizeDOM
+     * 2. show ghost DOM on same position with hidden resizeDOM
+     *
+     * @returns {undefined}
+     */
+    this.onResizeMouseDown = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      const opt = this.options;
+      const pos = opt.legend.position;
+      const title = opt.title.show ? opt.title.height : 0;
+
+      const ghostDOM = this.ghostDOM;
+      this.resizeDOM.style.display = 'none';
+      this.wrapperDOM.appendChild(ghostDOM);
+
+      // mouse down 시, resizeDOM의 위치를 기반으로 ghostDOM의 위치를 세팅
+      if (pos === 'left' || pos === 'right') {
+        ghostDOM.style.top = `${title}px`;
+        ghostDOM.style.left = this.resizeDOM.style.left;
+        ghostDOM.style.right = this.resizeDOM.style.right;
+        ghostDOM.style.height = this.resizeDOM.style.height;
+      } else {
+        ghostDOM.classList.add('horizontal');
+
+        if (pos === 'top') {
+          ghostDOM.style.top = this.resizeDOM.style.top;
+        } else if (pos === 'bottom') {
+          ghostDOM.style.bottom = this.resizeDOM.style.bottom;
+        }
+      }
+
+      this.wrapperDOM.addEventListener('mousemove', this.mouseMove, false);
+      this.wrapperDOM.addEventListener('mouseup', this.mouseUp, false);
+    };
+
     if (this.resizeDOM) {
       this.resizeDOM.addEventListener('mousedown', this.onResizeMouseDown);
       this.mouseMove = this.onMouseMove.bind(this); // resizing function
@@ -230,7 +390,11 @@ const modules = {
    */
   updateLegend() {
     this.resetLegend();
-    this.addLegendList();
+    if (this.isHeatMapType) {
+      this.addColorLegendList();
+    } else {
+      this.addLegendList();
+    }
   },
 
   /**
@@ -264,18 +428,26 @@ const modules = {
     containerDOM.className = 'ev-chart-legend-container';
     colorDOM.className = 'ev-chart-legend-color';
 
-    if (series.type === 'line' && series.point) {
+    if (series.type === 'line' && series.point && !series.fill) {
       colorDOM.className += ' ev-chart-legend-color--point-line';
     }
 
     nameDOM.className = 'ev-chart-legend-name';
-
     nameDOM.series = series;
 
+    let seriesColor;
     if (typeof series.color !== 'string') {
-      colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+      seriesColor = series.color[series.color.length - 1][1];
     } else {
-      colorDOM.style.backgroundColor = series.color;
+      seriesColor = series.color;
+    }
+
+    if (series.type === 'line' && series.fill) {
+      colorDOM.style.height = '8px';
+      colorDOM.style.backgroundColor = `${seriesColor}80`;
+      colorDOM.style.border = `1px solid ${seriesColor}`;
+    } else {
+      colorDOM.style.backgroundColor = seriesColor;
     }
 
     colorDOM.dataset.type = 'color';
@@ -466,7 +638,6 @@ const modules = {
       }
     }
   },
-
   /**
    * When user moves resizeDOM, this function will change css
    *

package/src/components/chart/plugins/plugins.tooltip.js

@@ -1,5 +1,6 @@
 import { numberWithComma } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
+import dayjs from 'dayjs';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
@@ -310,6 +311,13 @@ const modules = {
             value,
             name,
           });
+        } else if (this.options.type === 'heatMap') {
+          formattedTxt = opt.formatter({
+            x: this.options.horizontal ? hitItem.y : hitItem.x,
+            y: this.options.horizontal ? hitItem.x : hitItem.y,
+            name,
+            value,
+          });
         } else {
           formattedTxt = opt.formatter({
             x: this.options.horizontal ? value : hitItem.x,
@@ -335,14 +343,249 @@ const modules = {
 
     ctx.restore();
 
-    // set tooltipDOM's style
+    this.setTooltipDOMStyle(opt);
+  },
+
+  /**
+   * Draw tooltip canvas for heatmap
+   * @param {object} hitInfo    mousemove callback
+   * @param {object} context    tooltip canvas context
+   *
+   * @returns {undefined}
+   */
+  drawToolTipForHeatMap(hitInfo, context) {
+    const ctx = context;
+    const items = hitInfo.items;
+    const sId = hitInfo.hitId;
+    const hitItem = items[sId].data;
+    const hitAxis = items[sId].axis;
+    const hitColor = items[sId].color;
+    const boxPadding = { t: 8, b: 8, r: 20, l: 16 };
+    const isHorizontal = this.options.horizontal;
+    const opt = this.options.tooltip;
+
+    // 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)}`
+        : `${this.axesX[hitAxis.x].getLabelFormat(hitItem.x)} / ${this.axesY[hitAxis.y].getLabelFormat(hitItem.y)}`;
+    }
+
+    if (opt.textOverflow) {
+      this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
+    }
+
+    // draw tooltip contents (series, value combination)
+    ctx.save();
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+
+    if (this.tooltipBodyDOM.style.overflowY === 'auto') {
+      boxPadding.r += SCROLL_WIDTH;
+    }
+
+    const itemX = boxPadding.l + 2;
+    const itemY = boxPadding.t + TEXT_HEIGHT + 2;
+    const itemValue = hitItem.o > -1 ? hitItem.o : 'error';
+
+    ctx.font = FONT_STYLE;
+
+    ctx.beginPath();
+
+    if (typeof hitColor !== 'string') {
+      ctx.fillStyle = Canvas.createGradient(
+        ctx,
+        isHorizontal,
+        { x: itemX, y: itemY, w: 12, h: -12 },
+        hitColor,
+      );
+    } else {
+      ctx.fillStyle = hitColor;
+    }
+
+    // 1. Draw series color
+    ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
+    ctx.fillStyle = opt.fontColor;
+
+    // 2. Draw series name
+    ctx.textBaseline = 'Bottom';
+    ctx.fillText(itemValue, itemX + COLOR_MARGIN, itemY);
+    ctx.closePath();
+
+    this.setTooltipDOMStyle(opt);
+  },
+
+  /**
+   *
+   * @param hitInfo
+   * @param context
+   */
+  drawTooltipForScatter(hitInfo, context) {
+    const ctx = context;
+    const items = hitInfo.items;
+    const [, maxValue] = hitInfo.maxTip;
+    const seriesKeys = this.alignSeriesList(Object.keys(items));
+    const boxPadding = { t: 8, b: 8, r: 8, l: 8 };
+    const opt = this.options.tooltip;
+    const xAxisOpt = this.options.axesX[0];
+
+    let x = 2;
+    let y = 2;
+
+    x += Util.aliasPixel(x);
+    y += Util.aliasPixel(y);
+
+    ctx.save();
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+
+    if (this.tooltipBodyDOM.style.overflowY === 'auto') {
+      boxPadding.r += SCROLL_WIDTH;
+    }
+
+    x += boxPadding.l;
+    y += boxPadding.t;
+
+    ctx.font = FONT_STYLE;
+
+    const seriesList = [];
+    seriesKeys.forEach((seriesName) => {
+      seriesList.push({
+        data: items[seriesName].data,
+        color: items[seriesName].color,
+        name: items[seriesName].name,
+      });
+    });
+
+    if (opt.sortByValue) {
+      seriesList.sort((a, b) => {
+        let prev = a.data.o;
+        let next = b.data.o;
+
+        if (prev === null || prev === undefined) {
+          prev = a.data.y;
+        }
+
+        if (next === null || next === undefined) {
+          next = b.data.y;
+        }
+
+        return next - prev;
+      });
+    }
+
+    let textLineCnt = 1;
+    for (let ix = 0; ix < seriesList.length; ix++) {
+      const gdata = seriesList[ix].data;
+      const color = seriesList[ix].color;
+      const name = seriesList[ix].name;
+      const xValue = gdata.x;
+      let yValue;
+      if (gdata.o === null) {
+        yValue = gdata.y;
+      } else if (!isNaN(gdata.o)) {
+        yValue = gdata.o;
+      }
+
+      let itemX = x + 4;
+      let itemY = y + (textLineCnt * TEXT_HEIGHT);
+      itemX += Util.aliasPixel(itemX);
+      itemY += Util.aliasPixel(itemY);
+
+      ctx.beginPath();
+
+      if (typeof color !== 'string') {
+        ctx.fillStyle = Canvas.createGradient(
+          ctx,
+          false,
+          { x: itemX - 4, y: itemY, w: 12, h: -12 },
+          color,
+        );
+      } else {
+        ctx.fillStyle = color;
+      }
+
+      // 1. Draw series color
+      ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
+      ctx.fillStyle = opt.fontColor;
+
+      // 2. Draw series name
+      ctx.textBaseline = 'Bottom';
+      const seriesNameSpaceWidth = opt.maxWidth - Math.round(ctx.measureText(maxValue).width)
+        - boxPadding.l - boxPadding.r - COLOR_MARGIN - VALUE_MARGIN;
+      const xPos = itemX + COLOR_MARGIN;
+      const yPos = itemY;
+
+      if (seriesNameSpaceWidth > ctx.measureText(name).width) { // draw normally
+        ctx.fillText(name, xPos, yPos);
+      } else if (opt.textOverflow === 'wrap') { // draw with wrap
+        let line = '';
+        let yPosWithWrap = yPos;
+
+        for (let jx = 0; jx < name.length; jx++) {
+          const char = name[jx];
+          const temp = `${line}${char}`;
+
+          if (ctx.measureText(temp).width > seriesNameSpaceWidth) {
+            ctx.fillText(line, xPos, yPosWithWrap);
+            line = char;
+            textLineCnt += 1;
+            yPosWithWrap += TEXT_HEIGHT;
+          } else {
+            line = temp;
+          }
+        }
+        ctx.fillText(line, xPos, yPosWithWrap);
+      } else { // draw with ellipsis
+        const shortSeriesName = Util.truncateLabelWithEllipsis(name, seriesNameSpaceWidth, ctx);
+        ctx.fillText(shortSeriesName, xPos, yPos);
+      }
+
+      ctx.save();
+
+      // 3. Draw value
+      let formattedTxt;
+      if (opt.formatter) {
+        formattedTxt = opt.formatter({
+          x: xValue,
+          y: yValue,
+          name,
+        });
+      }
+
+      if (!opt.formatter || typeof formattedTxt !== 'string') {
+        const formattedXValue = xAxisOpt.type === 'time'
+          ? dayjs(xValue).format(xAxisOpt.timeFormat)
+          : numberWithComma(xValue);
+        const formattedYValue = numberWithComma(yValue);
+        formattedTxt = `${formattedXValue}, ${formattedYValue}`;
+      }
+
+      ctx.textAlign = 'right';
+      ctx.fillText(formattedTxt, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
+      ctx.restore();
+      ctx.closePath();
+
+      // 4. add lineSpacing
+      y += LINE_SPACING;
+      textLineCnt += 1;
+    }
+
+    ctx.restore();
+
+    this.setTooltipDOMStyle(opt);
+  },
+
+  /**
+   * set style properties on tooltip DOM
+   * @param tooltipOptions
+   */
+  setTooltipDOMStyle(tooltipOptions) {
     this.tooltipDOM.style.overflowY = 'hidden';
-    this.tooltipDOM.style.backgroundColor = opt.backgroundColor;
-    this.tooltipDOM.style.border = `1px solid ${opt.borderColor}`;
-    this.tooltipDOM.style.color = opt.fontColor;
+    this.tooltipDOM.style.backgroundColor = tooltipOptions.backgroundColor;
+    this.tooltipDOM.style.border = `1px solid ${tooltipOptions.borderColor}`;
+    this.tooltipDOM.style.color = tooltipOptions.fontColor;
 
-    if (opt.useShadow) {
-      const shadowColor = `rgba(0, 0, 0, ${opt.shadowOpacity})`;
+    if (tooltipOptions.useShadow) {
+      const shadowColor = `rgba(0, 0, 0, ${tooltipOptions.shadowOpacity})`;
       this.tooltipDOM.style.boxShadow = `2px 2px 2px ${shadowColor}`;
     }
 

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

@@ -239,6 +239,15 @@ class Scale {
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
+        const labelColor = this.labelStyle.color;
+        let defaultOpacity = 1;
+
+        if (Util.getColorStringType(labelColor) === 'RGBA') {
+          defaultOpacity = Util.getOpacity(labelColor);
+        }
+
+        ctx.fillStyle = Util.colorStringToRgba(labelColor, defaultOpacity);
+
         let labelPoint;
 
         if (this.type === 'x') {

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

@@ -57,7 +57,7 @@ class StepScale extends Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
     const ctx = this.ctx;
     const labels = this.labels;
     const aPos = {
@@ -121,14 +121,29 @@ class StepScale extends Scale {
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(item, maxWidth);
 
+        const isBlurredLabel = this.options?.selectLabel?.use
+          && this.options?.selectLabel?.useLabelOpacity
+          && (this.options.horizontal === (this.type === 'y'))
+          && selectLabelInfo?.dataIndex?.length
+          && !selectLabelInfo?.dataIndex?.includes(index);
+
+        const labelColor = this.labelStyle.color;
+        let defaultOpacity = 1;
+
+        if (Util.getColorStringType(labelColor) === 'RGBA') {
+          defaultOpacity = Util.getOpacity(labelColor);
+        }
+
+        ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
+
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
 
-          if (this.options?.selectItem?.showLabelTip
-            && hitInfo?.label
-            && !this.options?.horizontal
-          ) {
+          if (!isBlurredLabel
+              && this.options?.selectItem?.showLabelTip
+              && hitInfo?.label
+              && !this.options?.horizontal) {
             const selectedLabel = hitInfo.label;
             if (selectedLabel === labelText) {
               const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);